TRY DEMO APP

Top 10 interactive map design & UX examples

by Niharika Sisodia
on Dec 18, 2018

There is a lot to think about when it comes to interactive map design. A great design anticipates how the user will interact with the map in different ways. Let’s take a look at some examples where map design anticipates user action and improves user experience.

British Music

A map showing all the unsigned bands in the UK.

Desktop view

Bristish-music-interactive-map-design

Mobile view

Bristish-music-interactive-map-design

What works?

  • Zoom - easy zoom in top left hand corner of desktop screen
  • Scroll - easy to scroll with mouse on desktop and touch screen on mobile
  • Points of interest - details for selected point of interest clearly displayed on left hand side of the page.
  • Pins - music themed pins

Potential improvements

There are a lot of points on a map. It could be improved by clustering the points so it doesn’t look overcrowded.

World City Populations - 1950 -2035

A map showing the changes in population.

Desktop view

world-city-population-interactive-map-design

Mobile view

world-city-population-interactive-map

What works?

  • Point of interest - pop up of location statistics, including population figures and a graph showing the increase in population.
  • Circles of colour - Colour coordinated years displayed in circles. This helps the user to visualise the growing population. Setting these colours against a white world map also helps the user to visualise unpopulated areas of the world.

Potential improvements

The mobile version does not include the pop up statistics. While this stops the screen from becoming overcrowded, the design could be improved by listing the statistics on a separate page so that the user can still access this information.

Civitatis

A tourist map of London.

Desktop view

Civitatis-interactive-map-design

Mobile view

Civitatis-interactive-map-design

What works?

  • Search bar - clear search bar layered on top of the map
  • Large search bar for mobile view.
  • Scroll - easy to scroll with a mouse on desktop and touch screen on mobile. Users can move anywhere in London on the map.
  • Points of interest - list on right hand side relates to common points of interest in London. Clicking on one will take you straight to that location on the map. Each point of interest on the map is numbered to correspond to the list.

Civitatis-interactive-map-design

Icons - icons representing points of interest are easy to understand. Export - Clicking the KML button allows you to export the points of interest to Google Earth, so that you can view using satellite imagery.

Civitatis-icon

Civitatis-kml-button

Potential improvements

When selecting a category for example ‘Airports’ the map scale doesn’t change to fit all the points in. This means the user can’t compare the points without zooming.

Radio Garden

An audio map of all radio stations in the world.

Desktop view

radio-garden-interactive-map-design

Mobile view

radio-garden-interactive-map-design

What works?

  • Full-screen map on desktop and mobile
  • Toggle on / off sound icon
  • Points of interest - details for the selected point of interest displayed on right-hand side of the page. The map design might be improved by boxing off these details for clarity.
  • Social sharing icons

Potential improvements

  • Using a basic map vs. satellite map will provide better contrast for points of interest when zoomed in
  • When points are grouped, they just show a larger circle, which doesn’t clearly indicate how many stations there are

Windy

An in-depth, live weather map.

Desktop view

Windy-interactive-map-design

Mobile view

Windyty-interactive-map-design

What works?

  • Colour - heat map showing strength and direction of weather.
  • Points of interest - panel on right-hand side allows the users to switch between different weather elements. This feature is collapsed on the mobile version to stop the screen from looking crowded.
  • Social sharing icons

Potential improvements

On the desktop version, there are a lot of great features, but potentially a few too many all on one page. There are five keys and several options the user can select, which could confuse the user journey.

Onshore Oil and Gas Authority

A map of oil and gas onshore wells and mines in the UK. 

Desktop view

Onshore-oil-gas-authority-map-design

Mobile view

Onshore-oil-gas-interactive-map-design

What works?

  • Points of interest - colour coded points of interest makes it easy to visually distinguish between different types of wells
  • Geolocator icon enables user to instantly jump to the existing location

Potential improvements

The map design could be improved by grouping points of interest to reduce the volume of points visible at the same time.

Crossrail

A map of the Crossrail route, a new train line in London.

Desktop view

Crossrail-interactive-map-design

Mobile view

Crossrail-interactive-map-design

What works?

  • Points of interest - collapsable panel at the top of the screen on desktop view. This feature is adapted for mobile by having a collapsible panel that takes up the whole screen. This stops the map looking overcrowded.
  • Simple interface removes clutter on the map so users can focus on the data
  • Search functionality lets the user search by address or train station
Potential improvements

Scrolling with a mouse scrolls the map up / down rather than the typical map user experience zoom in and out.

Savills

A map of house price forecasts in the UK.

savills-interactive-map-design

What works?

  • Colour - colour coded areas of interest with corresponding details on the left-hand side of the page
  • Points of interest - details for selected areas of interest pop up when area is selected
  • Pop up when hovering over an area gives the user quick facts and makes comparison easy
Potential improvements

The interactive map design could be improved by adapting these features for a mobile screen. For example, the mobile design might place the map and list on separate pages, so that the user can view the map easily on a smaller screen.

Airbnb

Desktop view

airbnb-interactive-map-design

Mobile view

airbnb-interactive-map-design

What works?

  • Points of interest pop up when scrolling the map (rather than always being there) to draw attention to user to click
  • Artwork added on map to show local landmarks, e.g. St Petersburg Cathedral

To learn more about interactive map design and discuss your bespoke project using maps get in touch.

 

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 Mar 25, 2019
READ

How to make the perfect store locator website

Follow these tips to create a store locator page that will convert site visitors into customers at your physical store. Optimise your store locator website page to improve the user experience.

Niharika Sisodia Mar 20, 2019
READ

Site search box design inspiration

Perfect your site search box design. Use these tips to make your site search box easy to use. Improve user experience by anticipating how users search. Place your site search box in the best location and add filters that will save your users time.

Niharika Sisodia Mar 20, 2019
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 7, 2019
READ

5 retail web design tips for a store locator page

Reimagine your retail web design. Improve the user experience of your store locator page and convert site visitors into customers using these top 5 tips.

Niharika Sisodia Jan 30, 2019
READ

Why geocode?

Why geocode? Discover uses for geocoding in business. Find out the key benefits of geocoding and how geocoding can be implemented to improve your business.

Niharika Sisodia Jan 21, 2019
READ