Making a map for a website can be a daunting task. Some of the largest websites on the web are map-centric and have had massive amounts of resources to develop interactive experiences. So the question is, with limited budget, what are the main things to keep in mind as you make a map? We have summarized some of the biggest design trends in modern map making and hope you find them useful in building your maps.
Use Color To Your Advantage
Some guiding principals in using color on your map: 1) Areas with pops of color draw more attention than elements without 2) The most important information on the map should attract most of your user’s attention. With these two things in mind, we generally recommend a basemap that only has information that is relevant to your users. Monochromatic maps do a great job of highlighting locations. In the example from UBER below, they use a grayscale basemap with color only around the arrival and destination area and it really guides the user’s eyes and therefore their understanding of how to interact with the map.
Maps To The Right, Functionality to The Left
Real estate sites like Zillow and Trulia and vacation rental sites like Homeaway and Airbnb all follow the same design standard of having a split screen with map functionality and viewing on the right hand side of the screen and functionality panels on the left. This design norm helps situate users and gives them a comfortable experience to navigate.
Make Your Map Markers Functional
Map markers have come a long way from the classic “pin”. Modern map markers take on some serious functionality that include visualizing underlying content. The classic pin marker typically had some text tooltips that might show the phone number or lat/long of the location but modern markers should show comprehensive information including photos, videos, iconography and contact information. AirBNB does a great job of this, allowing users to select a property in a map and scroll through photos without leaving their browsing experience. You can also see the # of bedrooms/baths and the cost per night. This is a great map experience for users who are browsing.
Make it Mobile Friendly
Today’s consumers are ready to connect with your business on screens of all types and sizes. That’s a huge new opportunity, but only if your website is designed to give customers what they need on smaller smartphone screens as well as tablets and desktops. That’s especially true on screens of 7” or less, where space is at a premium. There are now 1.5 billion mobile subscribers globally, with an astonishing growth rate of 31% . In the U.S., smartphone adoption has passed 61%. Making your maps mobile friendly is key to making your map be a successful asset for your company. One of the biggest ways to make your map mobile friendly is to allow your map to be viewed in full screen mode or switch to a “list” mode where only content elements are displayed. This allows users who prefer to scroll on mobile easy access to the content they are seeking. Again, AirBNB shows us a great example of how to do this on mobile.
Don’t Take Users Away From The Map
Most map experiences whisk users off the map when they actually want to “take action” but this is a experience trend that we believe to be changing. Allowing for action directly from your marker is becoming the norm. Breather, a site for booking office space, is a great example of this functionality. When you click on a location, Breather allows for instant booking of that location within the map pane on the left hand side of the screen. The experience and consistency is phenomenal and allows a user to take action immediately and within the current context of their searching.