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

5 retail web design tips for a store locator page

Reimagine your retail web design. Improve the user experience of your store locator page and convert site visitors into customers using these top 5 tips.

Niharika Sisodia Feb 4, 2019 11:00:00 AM
READ

Why geocode?

Why geocode? Discover uses for geocoding in business. Find out the key benefits of geocoding and how geocoding can be implemented to improve your business.

Niharika Sisodia Jan 21, 2019 1:08:59 PM
READ

10 must read articles about map user experience

Read 10 articles that analyse map user experience. Take UX tips from expert analysis to help you build the perfect user experience for the map page on your website or app.

Niharika Sisodia Jan 16, 2019 10:00:00 AM
READ

Top 10 interactive map design & UX examples

Discover the best interactive map designs. Use map design to improve user experience for mobile and desktop users.

Niharika Sisodia Jan 7, 2019 10:09:19 AM
READ

5 ways to increase conversion rates using a map

Discover how using a map can increase conversion rates for your product or service. Increase the relevance of results for your users. Encourage users to take the desired action by filtering out irrelevant results.

Niharika Sisodia Jan 2, 2019 9:13:18 AM
READ