Contents

      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.

      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 using TravelTime for your interactive maps, get in touch.

      Map design

      Share this article

      Create travel time polygons and matrices with the TravelTime API