By Nick Dawe, on 4 June 2015
(Note, this post continues on from UCL Maps: finding the way to a new website)
Based on our user stories, I could start developing a basic prototype. However, it was obvious from the outset that there were be some technical challenges to overcome. In particular, I needed to address how an effective university map website could:
- be mobile and touch-device friendly
- be able to integrate route-finding tools, rather than expecting users to ‘hop’ off to another site to use these
- make it easy to find a location.
As solutions to these were investigated, they were continually tested by UCL staff and students through task-driven testing sessions – which continually yielded useful results (even when it meant that we had to completely start again on some ideas!).
UCL Web and Mobile Services has produced a helpful framework known as Indigo, which can be used to build UCL-branded responsive websites quickly and easily. This was ideal for us to use, as it removed a lot of the headaches of having to design and develop the site’s layouts, allowing us to focus solely on the map and its user interface (UI).
From our initial research and recommendations, it was obvious that a lot of the extra information on the current Maps website was not used (apart from the links to downloading map PDFs). Therefore the new site would have a map that would take as much of the available window space as possible, with a small UI taking up just a fraction of this.
A new map overlay also needed to be designed. While the old one certainly worked well, there were areas where its colour scheme didn’t have enough contrast against the Google Maps background, which could cause problems for some users. As a result, Rory Morrison, one of UCL Communications’s graphic designers, worked on a new version that could work best in this setup.
The initial design, as displayed on any device with a small viewport, presented the map and then the UI ‘stacked’ below. While the UI’s own design was still being worked out, a new problem for touch devices became apparent.
Google Maps overrides the default scrolling behaviour of its maps. So, if you scroll on the map itself, the page won’t move up or down as you’d expect, but will instead zoom in or out of the map. This effectively meant that ‘stacking’ the map and UI created a site that was particularly hard to use, because the user wouldn’t be able to scroll to the UI if it was below the viewport fold.
This was rather frustrating, as the best solution found was to display an additional link to the UI for touch devices, which displayed on top of the map. All other devices would still let users scroll through content (meaning that we could still simply use the same Indigo patterns without any modifications).
However, for touch devices, the UI link would need to be fixed to the bottom of the viewport. On occasions when additional information would have to be displayed (e.g. a location’s details), the map would then be hidden, with the information filling the screen.
(Note – screenshots below are based on the final website)
As previously mentioned, another aim was to integrate route finding tools, based on CASA’s popular routefinder website. After CASA kindly provided us with the original source code and data, I was then able to work on:
- developing a version of the route finder that could work on UCL supported technologies (e.g. PHP and MySQL)
- updating it with new UCL locations and possible routes.
The technical details of this are out of the scope of this post, but another challenge was to then understand how best to integrate these tools with the main map UI.
Next… how a UI was designed that could make it easier for users to find locations.