Contents
The user interface (UI) of a map is an important part of front-end design. An effective map view UI can help turn a web visitor or app user into a customer. Poor map UI can create confusion and cause potential customers to leave the site. So, what works when it comes to Map UI? Let’s take a look at some examples.
Information architecture
How information is structured can have an impact on whether or not a website user becomes a customer. In an effective map UI, the map view clearly relates to relevant information.
The below example shows Macy’s stores within 25 miles of New York City. The map pins are lettered to correspond to the store locations on the map. The most important information is displayed in the list view, such as the store address, telephone number and opening hours.
The list shows the two closest stores and gives the user the option to scroll down in alphabetical order. The time it takes to scroll could cause some users to bounce from the page. However, users can also click the icon on the map and retrieve the same information instantly.
The map and list view are placed side by side. This placement means the user can easily understand the information being presented. By contrast, Hilton Hotels and Resorts displays their map view and list view on separate pages.
List view Map view
In this example, the list and map view work independently of each other. Splitting map view and list view gives the site opportunities to display more information on each page without confusing the user. When the user clicks on a map icon, more information is displayed. The example below shows a photo of the Hampton Inn, with a price and a prompt to call to action for the user to ‘Book now’.
Social proof
One way to legitimise your business is by providing social proof, such as reviews, star ratings and testimonials. This can be particularly important for sites that recommend services, such as restaurants and hotels.
The Foursquare app allows users to rate services out of 10.
These ratings are shown as part of the list view.
Clicking on an option allows the user to view a more detailed page.
This includes photos of the venue, the address and testimonials from other customers.
Personal recommendations from past customers can help users to connect the virtual world to the physical world and encourage them to make the physical journey to the restaurant.
Display
When displaying a large number of results, the map can start to look cluttered. The more crowded the map view, the harder it is for the user to navigate the page.
You can group the result pins. This lets the user know there are multiple results in a particular area. The example below shows the results from a search for properties within 5 miles of Bierton, Buckinghamshire.
Another factor to consider is mobile compatibility. Customers on mobile tend to have different priorities and parameters than those searching on a desktop computer. Users will have a smaller screen and usually be on the move, so they’re likely to be searching for a store near to their current location. A well-designed map view could increase footfall to a store or restaurant.
The Argos desktop design uses the entire screen for a map view and continues to display shop departments and a separate Argos search box at the top of the screen.
However, when searching on mobile, Argos have simplified the design to give the user all of the screens to view the map and the store search box.
The results page display on mobile has also been simplified to be more user-friendly and is adapted to suit the small screen. The desktop view shows a map and a list on one page.
The mobile version allows the user to click between map and list view.
Detail
A great map UI will provide users with the right amount of information at the right time to help them make a decision. Too much detail can overwhelm the user. Omitting details can cause them to look elsewhere for the information they need.
TripAdvisor, for example, displays the highest rated restaurants on a map, denoted by the common knife and fork icon. The map also shows the rest of the results but displays them as smaller dots. This allows the user to quickly view the best restaurants in the city, according to the site. The below example shows restaurants in San Francisco.
As a user selects an icon, TripAdvisor reveals more detailed information in an easily digestible way. For example, the price range is denoted by a dollar sign range, where one dollar sign is cheap and four dollar signs are expensive.
TripAdvisor then allows the user to layer even more information on the map, such as:
- Neighbourhood boundaries
- Hotels
- Things to do
This feature encourages the user to factor in all the elements of their trip, without ever leaving the TripAdvisor website.
Search
Allowing users to search by distance on a map can help clarify how far away a service is and how it can be reached. The Radius Map tool, powered by the TravelTime allows users to draw a radius distance on a map. The example below shows areas within 10 miles of central London.
However, this information is of limited use to the user because of the time it takes to navigate through a city
like London. The TravelTime map tool allows users to search by time, instead
of distance. The below example shows where is reachable within 45 minutes of central London by public transport. The
results produce a unique travel time shape based on public transport networks.
Users can then search for points of interest within the travel time shape. The example below shows all the cinemas that are reachable within 45 minutes travelling by public transport.
The travel time shape makes the results more accurate. This means users are more likely to convert. The TravelTime map tool can be integrated into any map on a website and has been shown to increase conversions by 300%.
Create a travel time map using the TravelTime map tool. To discuss your bespoke project, get in touch.