6 ways to display a map on a website

by Niharika Sisodia
on Dec 10, 2018 3:06:44 PM

A clear and simple map on a website can lead users to take the desired action, like visiting a restaurant, taking a journey or buying a product. An effective map display can turn a web visitor into a customer. A badly placed map can create confusion and cause potential customers to leave the site.

Let’s take a look at some examples.

Top of the page

Civitatis display their London city map at the top of the page. This map is clear, bold and interactive. It is the first thing the user sees, so they can immediately start searching.

map-on-a-website-Civitatis

Civitatis layer the search bar on top of the map. This display means that space is not taken up by the search bar and that the map is easy to see.

Civitatis-map-layer

Civitatis list points of interest on the right-hand side of the page, including icons that correspond to the map. This design simplifies the search for the user. The commonly used icons make it easy to understand. For example, the aeroplane icon is easy to interpret without needing the user to read the text.

Civitatis-map-layer

Bottom of the page

Searcy’s at King’s Cross St. Pancras head their ‘Contact’ page with a photo of the bar.

Searcy’s-map-on-a-website

The map is displayed at the bottom of the page, following opening times and information about Christmas and New Year.

Searcy’s-map-on-a-website

Searcy’s have prioritised the information that allows customers to get in touch and added a map for additional information. This is a great place if the map is not integral to the user but may be useful.  

Separate page

Like Searcys, Selfridges know that customers usually require more than a map to drive customers to their location. Selfridges displays opening times and the map side by side. Customers can also link to a full page google map of the store’s location.

Selfridges-map-on-a-website

The links to the map, ‘view map’ and ‘get directions’ are bold and clear. This interface may be used by the website provider because it’s simple. However, clicking one of these links takes the user off the Selfridges website to Google, making them less likely to purchase an item online. It also can be hard to track conversions once off the site and starting a new session.

Selfridges-map-on-a-website

The link also highlights the location of multiple other stores but does not directly indicate where Selfridges is situated. This could cause the user to become distracted by other points of interest on the map.

Whole page

By contrast, the US brand, Walmart, has created a dedicated store finder page on their website. A big brand, such as Walmart, have stores across the United States. A search on their store finder could bring up multiple results. Walmart has given their map view an entire page.

walmart-map-on-a-website

This stops the page from looking cluttered. Clicking on an item from the list view changes the colour of the corresponding map icon. The details of the store, such as opening times, services and directions can also be found.

walmart-map-on-a-website

Pop up

map-on-a-website-booking.com

map-on-a-website-booking.com

Booking.com initially shows a list view, but gives the option to view the list and map side by side in a pop-up screen. The split page map and list view allow the user to view the details of each hotel and visualise the location on a map at the same time. Users can also add additional filters, such as price range and hotel facilities to narrow down the results.

Mobile

Foursquare’s app allows users to search for points of interest in their local area. While the desktop view shows the maps and list view side by side, Foursquare have chosen a different design for mobile.

Desktop view

map-on-a-website-fouresquare

Users see a list view and can click to see a corresponding map. This feature means that the screen does not become cluttered. As screen size is smaller on a mobile device displaying information clearly improves the user experience.

fouresquare-mobile-view

fouresquare-mobile-view

On the map view, the numbered icons correspond to the list view. The list view information is displayed at the bottom of the screen for the selected icon. If the user then selects a new pin, the information changes at the bottom of the screen. 

fouresquare-mobile-view

This feature allows the user to quickly assess the points of interest in relation to their location without having to switch between the list and map view.

DOWNLOAD  SITE SEARCH E-BOOK

To find out more about how maps can help your business. 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

How to convert visitors into customers using map view

Improve your map UI. Perfect your website map view to streamline the user journey. Convert visitors to your site into customers for your product or service.

Niharika Sisodia Dec 18, 2018 3:30:14 PM
READ