How to convert visitors into customers using map view

by Niharika Sisodia
on Dec 18, 2018 3:30:14 PM

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.

Macy’s-stores-map-view

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.

Macy’s-stores-map-view

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

hilton-hotel-map-viewhilton-hotel-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’.

 hampton-inn-map-view

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. 

foursquare-map-view

These ratings are shown as part of the list view.

foursquare-map-view

 Clicking on an option allows the user to view a more detailed page.

rudie's-map-view

This includes photos of the venue, the address and testimonials from other customers.

rudie's-map-view

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.

map-view

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. 

argos-map-view

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.

argos-map-view

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.

argos-map-view

The mobile version allows the user to click between map and list view.

argos-map-viewargos-map-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.

tripadvisor-map-view

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-map-view

TripAdvisor then allows the user to layer even more information on the map, such as:

  • Neighbourhood boundaries
  • Hotels
  • Things to do

tripadvisor-map-view

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 platform allows users to draw a radius distance on a map. The example below shows areas within 10 miles of central London.

radiusmap-map-view
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.

traveltime-map-view

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.

traveltime-map-view

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%.

Draw Free TravelTime Maps

Create a travel time map using the TravelTime map tool. To discuss your bespoke project, get in touch.

 

Related

TravelTime case study: healthcare development analysis

The Megahospital challenge is a tool created using the TravelTime API by Border City Data. See how the app was built for healthcare development analysis.

Niharika Sisodia Apr 8, 2019 9:08:00 AM
READ

Google Distance Matrix API vs. the TravelTime Search API

Google Distance Matrix and TravelTime Search both calculate travel times and distances from one to many points of interest. Compare the API features and pricing.

Niharika Sisodia Jan 28, 2019 4:04:45 PM
READ

10 brick and mortar store locator pages for inspiration

Get inspired by brick and mortar store locator pages. View store locator pages from top global retail brands. Attract customers to your brick and mortar store by creating an effective store locator page design.

Niharika Sisodia Dec 20, 2018 10:21:18 AM
READ

How far can I travel in 15 minutes or 1 hour? This map shows you.

How far can I travel within a time limit? Make a map to show you where you can reach within a certain travel time. Change the mode of transport and time of day. Add up to three starting locations and filter the intersection between them.

Niharika Sisodia Nov 26, 2018 9:17:41 AM
READ

What is geocoding? Use geocoding to display postcodes on a map

What is geocoding and how does it work. Use a geocoder to convert place names and postcodes into coordinates. Display coordinates on a map. Use geocoding to improve routing and map display.

Niharika Sisodia Nov 22, 2018 9:26:41 AM
READ