Contents
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.
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 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.
Bottom of the page
Searcy’s at King’s Cross St. Pancras head their ‘Contact’ page with a photo of the bar.
The map is displayed at the bottom of the page, following opening times and information about Christmas and New Year.
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.
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.
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.
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.
Pop up
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
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.
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.
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.
To find out more about how maps can help your business. To discuss your bespoke project, get in touch.