10 Inspiring Interactive Map Design & UX Examples

24/9/21
7/1/19
Niharika Sisodia

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.

    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.

    Map design

    Share this article

    By signing up you agree to our privacy policy

    Get started today

    Speak to one of our expert team today and find out how we can help your business