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.

    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.

     

    Site search
    Map design

    Share this article

    Create travel time polygons and matrices with the TravelTime API