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
Mobile view
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
Mobile view
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
Mobile view
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.
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.
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
Mobile view
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
Mobile view
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
Mobile view
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
Mobile view
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
Mobile view
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.
Create travel time polygons and matrices with the TravelTime API
