Top 10 interactive map design & UX examples

by Niharika Sisodia
on Jan 7, 2019 10:09:19 AM

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

Discuss your project with us

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

 

Related

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 Feb 4, 2019 11:00:00 AM
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 1:08:59 PM
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

5 ways to increase conversion rates using a map

Discover how using a map can increase conversion rates for your product or service. Increase the relevance of results for your users. Encourage users to take the desired action by filtering out irrelevant results.

Niharika Sisodia Jan 2, 2019 9:13:18 AM
READ

How to convert visitors into customers using map view

Improve your map UI. Perfect your website map view to streamline the user journey. Convert visitors to your site into customers for your product or service.

Niharika Sisodia Dec 18, 2018 3:30:14 PM
READ