5 Isochrone map design ideas

by Niharika Sisodia
on Jun 25, 2018 12:02:01 PM

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.

isochrone-map-malaria

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 Platform allows users to create isochrones maps by travel time using different modes of transport.

isochrone-traveltimeplatform

What works?

The concept of isochrones maps is relatively new and can be confusing. The TravelTime Platform 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.

isochrone-map-london

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.

isochrone-zoopla

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 API to 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.

isochrone-francis-galton

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.

isochrone-map

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

New Call-to-action

 

Related

Map circle distance or map drive time distance

Map circle distance using the TravelTime radius map tool. Compare distance to travel time. Create your own travel time map using the TravelTime Platform.

Niharika Sisodia Oct 23, 2018 11:34:54 AM
READ

How to use a radius map tool Google alternative

A radius map tool Google alternative. Draw a circle around a point and compare to travel times.

Niharika Sisodia Sep 26, 2018 11:35:54 AM
READ

Draw driving, cycling & walking times on a km radius map

Create a kilometer radius map. Draw travel times on km radius map. Create isochrone map using travel times.

Niharika Sisodia Jul 9, 2018 1:40:58 PM
READ

How to make a kilometer radius map

Create a distance radius using a kilometer radius map. Compare km radius to travel times. Tools for beginners, data analysts and developers.

Niharika Sisodia Jul 5, 2018 11:28:36 AM
READ

How to make a distance radius map

Learn how to draw a distance radius map in different ways. Get code examples to draw a straight line distance map. Use our free tool that creates a map with distance radius.

Niharika Sisodia Jun 28, 2018 11:21:48 AM
READ