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

Isochrone analysis made easy

Isochrone analysis simplified. Learn how to use isochrone analysis in mapping. Improve customer service, logistics or plan an office relocation using isochrones analysis techniques. Save time and costs, and retain staff using the TravelTime platform.

Niharika Sisodia Apr 1, 2019 10:15:00 AM
READ

Isochrone map design inspiration

Perfect your isochrone map design. Use these tips to make your isochrone map easy to understand. Improve user experience by creating a simple and aesthetically pleasing isochrone map.

Niharika Sisodia Feb 11, 2019 9:05:01 AM
READ

10 must read articles about map user experience

Read 10 articles that analyse map user experience. Take UX tips from expert analysis to help you build the perfect user experience for the map page on your website or app.

Niharika Sisodia Jan 16, 2019 10:00:00 AM
READ

Top 10 interactive map design & UX examples

Discover the best interactive map designs. Use map design to improve user experience for mobile and desktop users.

Niharika Sisodia Jan 7, 2019 10:09:19 AM
READ

6 ways to display a map on a website

Discover the best way to display a map on a website. Improve the user experience and encourage viewers to become customers with a clear and simple map display.

Niharika Sisodia Dec 10, 2018 3:06:44 PM
READ

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