Isochrone map design inspiration

by Niharika Sisodia
on Feb 11, 2019 9:05:01 AM

An isochrone is a shape that connects points relating to the same time. For example, the image above shows where's reachable within 1 hour from Birmingham city centre, UK when using public transport.

traveltime-isochrone-map-design

Maps can be difficult to understand. Isochrones can be a good way of displaying large amounts of information. However, the isochrone map design needs to be clear, informative and eye-catching. Let’s take a look at some isochrone map designs that get it right.

Key

The mapmaker, Francis Galton, created a series of isochrones maps starting from London and travelling around the world. Each colour corresponds to a range of days. These are shown in a key at the bottom of the page.

Francis-Galton-1881-isochrone-map-design

The use of a key:

  • Stops the map from becoming cluttered
  • Is easy to view and understand
  • Simplifies large amounts of information

Colour

The Malaria Atlas Project (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.

malaria-atlas-isochrone-map-design

The use of colour means:

  • The user is not overwhelmed by detail.
  • The contrast makes the information clear.
  • The colour is highlighted by the black background.
  • Large amounts of data easy to understand

Search

The TravelTime platform is an API that allows users to create isochrones maps by travel time using different modes of transport. The TravelTime platform search box uses a full sentence and asks the user to fill in the blanks.

traveltime-search-box

This interface:

  • Guides the user through the search process
  • Allows the user to navigate the map
  • Helps the user understand the results

traveltime-isochrone-map-design

Following the initial isochrone display, the user is given further filter options, including adding a new shape.

The second search bar is displayed in a different colour.

traveltime-isochrone-map-design

By presenting the results in stages, the user can visualise relevant results on the isochrone map without becoming overwhelmed.

Isochrone shape

In 1914, John G. Bartholomew published “An Atlas of Economic Geography”, including isochrone maps.  The map below was intended to roughly estimate travel time from London. The isochrone shapes represent a broad travel time, such as ‘within 5 days’. These general ranges allow for smooth isochrone boundaries.
 
atlas-isochrone-map-design

A smooth boundary is:

  • Aesthetically pleasing
  • Easier to understand
  • Allows large amounts of information to be displayed clearly

An exact isochrone perimeter can also be useful.

Screen Shot 2019-02-07 at 17.12.08

Exact boundaries allow users to:
  • Make sure their results are accurate
  • Display highly detailed results
  • Conduct a deeper analysis of travel times

Filter

Propertywide, the property site, can display a cross-section of isochrones for two users.
 
propertywide-isochrone-map-design
 
The use of a cross section to filter out the relevant results:
  • Makes it easy for the user to see which results are relevant
  • Greys out irrelevant information
  • Prevents the screen from becoming overcrowded

Make your own commute time map

To find out more about isochrones and to start creating travel time maps, visit the TravelTime platform.

 

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

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