Manuel Timita, Lead designer and developer, has written a guest article about Illustreets, a web mapping application built with Open Source software, open data, and emerging GIS technologies (i.e. CartoDB). This article showcases the importance of usability design when creating web mapping applications for the general public.
Illustreets is a property location research tool for those looking to move home in England. At its core, it is a web mapping application which embeds governmental open data into a series of dynamic layers created with CartoDB. The application has been designed to allow the exploration of any area in England, whilst getting on-the-fly local information. At the same time, full details about a particular location can be obtained by clicking on the map or searching for an address.
FIGURE1 – VIEW OF LONDON: THE MAP HIGHLIGHTS DIFFERENCES IN STANDARD OF LIVING ACROSS THE CITY.
With good information architecture becoming a top priority, every element directly linked to it, such as map tools, search operations, and navigation, had to be carefully designed.
Web usability in the context of Illustreets
Developing a web mapping application was a totally unfamiliar territory for us. However, our product was meant for a general audience and thus had to abide to general interaction design principles. As such, we turned to Jakob Nielsen’s (1995) 10 usability heuristics for UI design. In what follows, I will present the ones which have been essential for our application.
1) Visibility of system status
This is perhaps the most important aspect which has been highlighted in our usability tests – the users really appreciate quick and appropriate feedback.
On mouse hover, the information on the left panel is being updated in real time from data preloaded in the layers. If certain map areas are filtered out, they are marked accordingly. A click on the map or a search for a specific address places a loading sign on that particular location whilst the data is being transferred; at the same time, the content area is being opened:
FIGURE 2 – FEEDBACK ON DIFFERENT USER ACTIONS: MOUSE HOVER, AREA FILTERING, AND CLICK ON THE MAP.
2) Recognition rather than recall
Perhaps the most visible effect of this principle is the rather unconventional colour pattern used for the choropleth map. Initially, we went through a series of typical diverging colour schemes, obtained via ColorBrewer. However, during usability testing we discovered that very often the users needed to refer to the legend to remember the significance of colours. After successive iterations, we discovered that a simple “traffic lights” colour scheme is recognised and understood almost immediately.
3) Aesthetic and minimalist design
With the amount of data at our hand, we were easily at risk of overwhelming the users. Every unit of information competes with another within the same view. As a result, we opted to follow the principle of progressive disclosure and present only a minimum quantity of information at each step. Different page layouts and content tabbing are used to delimit the steps for obtaining the information. One such example is the switch between the full map view to presenting full area details:
FIGURE 3 – DIFFERENT PAGE LAYOUTS FOR DIFFERENT CATEGORIES OF INFORMATION.
Conclusion
Web mapping has matured beyond the point at which it is simply integrated with mainstream internet applications. At present, it is more likely for it to be an internet application in its own right.
The presentation of large amounts of information in a geographic context can pose serious challenges. However, mainstream usability design principles and heuristics, such as those devised by Jakob Nielsen, can still be applied in this context, helping to make a web mapping application more usable by the wider public.
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου