Contents
Isochrones can be a useful way of displaying large amounts of data to a user. But, they can also present problems. Maps can be difficult to read and understand. If too much information is presented at once, users can become overwhelmed. So, how can you design an isochrone map that is clear, informative and on brand? Here are our top 5 isochrone map designs.
Colour
The Malaria Atlas Project (MAP) processed vast amounts of information to assess how travel time relates to socio-economic background. The isochrone map is layered with multiple data sets to create a heat map showing how economic, educational, and health status is related to travel time to cities.
What works?
By focusing on the overview, MAP has ensured that the user is not overwhelmed by detail. The colours contrast and are further highlighted by the black background. The visual is easy to understand, in spite of the multitude of data that is being presented.
Interface
When creating our own isochrone map app, there were many design considerations. We wanted to make sure that users could create their own travel time area. The TravelTime allows users to create isochrones maps by travel time using different modes of transport.
What works?
The concept of isochrones maps is relatively new and can be confusing. The TravelTime search box uses a full sentence and asks the user to fill in the blanks. This interface guides the user through the search process. We have also created a separate design for smaller screens. On a mobile, the point of interest view is a different screen to map view. This separation ensures that the map is still big enough for the user to view and navigate.
Following the initial isochrone display, the user is given further filter options. By presenting the results in stages, the user can visualise relevant results on the isochrone map without becoming overwhelmed.
Brand
In trying to create a simple isochrone map for a user to navigate, it is easy to lose your brand identity. Zoopla present the results of house searches on isochrone maps.
What works?
Zoopla has tinted their isochrone in their brand colour, purple. They have also highlighted properties within the isochrone map with a branded pin. Not only does this increase brand awareness but creates an efficient interface. Users have a full screen map display and Zoopla has consistent branding within the isochrone map. Zoopla uses the TravelTime Search APIto power this shape.
Simplicity
The mapmaker, Francis Galton, created a series of isochrones maps starting from London and travelling around the world. He calculated how long each of these trips would take, and drew lines grouping those destinations that could be reached in an equal amount of time.
What works?
The map was intended to roughly estimate travel time. The key confirms a broad range, such as ‘within 5 days’. These general ranges allow for smooth isochrone boundaries. Unless specific results are required, a smooth boundary is more aesthetically pleasing and easier to understand. This is especially true of an isochrone map that covers large areas.
Clarity
In the example below, the Propertywide site displays a cross section of isochrones for two users. These users are looking to share a house but work in two different locations. They’ve entered two office addresses and can see which locations would be good for both of them. The results display where they could live within both their maximum travel times.
What works?
Propertywide uses colour to distinguish between the two office location commute areas and connect the map results to clear icons on the left of the page. This makes it easy for the user to see which results relate to which information.
But Propertywide has clarified their isochrone design even further. They have greyed out irrelevant information and cut away colour for the intersection. These design choices mean that the user is drawn to the results that are relevant.
You can find more information on isochrones here
