Illustration by Tridib Das
Maps have increasingly taken center stage in user interface design. Today, maps are an essential element of many popular web and mobile apps. People use maps to explore content, get directions, or find places (restaurants, gas stations, grocery stores, etc.).
This article shares some best practices that will help you design a good map UI as well as great map design inspirations.
What is UI mapping?
At first glance, map UI design looks simple. After all, maps don’t have many elements. However, when you start to look closely, you will notice that every map UI consists of multiple layers of information. Typically, it’s possible to define three layers of information:
- Basemap layer. Basemap is the map layer on which you display your features.
- Feature layer. This layer has features (usually, points of interest such as buildings, places, or anything else that is valuable for the user) that designers place on top of the basemap layer.
- Layer of controls. This is the layer with controls that allow users to interact with the map.
How to create a UI map
Unless you want to design a unique map and have relevant cartography skills, it’s better to avoid creating your own basemap style from scratch. Services like Google Maps or Mapbox offer nice ready-to-use mapping tools that will help you create a map in no time. Mapbox provides various templates that will help you create a visual appearance that works best for you.
What makes a good map design?
Good map UI design is a balance of design and data. Designers should balance information and visual appearance to create a proper context and make it easier for users to interact with a map.
Below you will find design recommendations created based on Mapbo’s Guide to Map Design as well as general visual design recommendations from Google Material Design that will help you design good map UI:
Limit the number of colors
Color is a powerful tool in designers’ toolboxes. Color can be used to attract attention, group objects, or improve the overall aesthetics of a map. Here are a few things to remember when selecting colors for map UI:
- Use a limited color palette. Limited color palette works the best for all UIs, and map UI is not an exception. It’s much easier to create visual harmony with a limited color palette. You should use between 10 to 12 colors for a full-body color palette, depending on the complexity of your map.
- Try to use the same hue for similar features. For example, features related to transportation (bus stops, railway stations, etc.) should share the same hue. The same hue will help users to decode visual elements without reading text, and this will help you to create a more cohesive UI.
- Always consider accessibility. Many people have limited color vision, so you also need to take this into account when selecting colors to ensure that you have a proper contrast ratio.
When you finish working on your palette, review it to ensure the colors are harmonious. You’ll then want to create a sample of your map UI layout and evaluate it with your peers and users.
Typography
Typography is an essential part of map UI design. Labels represent most of the text you find in maps, and their readability (i.e., whether or not they allow the reader’s eye to access the content easily) can make or break your map.
When it comes to typography, you should:
- Strive to select sans serif fonts. Sans serif fonts usually work best for map UIs because they have a lower DPI (dots per inch) on screens. This property makes it easier to create readable text on any screen.
- Control the spacing. Letter spacing adjusts the spacing between all the letters in a block of text. Proper spacing (120% to 145% of the point size) guarantees good readability.
- Use uppercase for small elements such as road labels. It will help you avoid descenders and improve readability.
- Consider the font’s personality. What mood do you want to convey in your map (e.g., classic or edgy)?
The font in this map creates a feeling of an old printed map. Image credit azavea.Contrast
Contrast helps users interact with the user interface. Contrasting elements naturally draw the eye and attract attention, and designers often use this to create emphasis and interest. When crafting a map UI, contrast determines how well your data or interactive elements stand out from the background (basemap).
In most cases, it’s recommended to keep the basemap subtle (just enough contrast to create proper context and help users understand what they are looking at) so it doesn’t distract the viewers from the content or points of interest.
Basemap has just enough contrast to create proper context. Image credit Mapbox.Visual hierarchy
Visual hierarchy is one of the most effective ways to increase comprehension. The hierarchy can be created using text (font weight such as light, normal, bold, etc.) or colors (pastel or vibrant colors). For example, we can use bold font weight for city names and normal font weight for districts on the map.
Good visual hierarchy makes it easier to understand the map. Image credit Mapbox.Information density
Information density defines how much information the user sees on the map. It is typically connected to the zoom level. Usually, the more the user zooms in, the more detailed information the user has. Designers should design with proper information density to prevent overwhelming users with too much information. It’s possible to achieve this goal by applying a progressive disclosure technique, which gradually discloses the information as a user interacts with a screen.
As you design your map, consider how the density of information may increase as the user zooms in. Image credit Mapbox.The importance of icons
Along with fonts and colors, icons are a part of visual language that designers use to communicate with their users. Map icons are typically used to indicate points of interest (POIs).
Properly selected icons strengthen your map’s readability and brand recognition. Here are a few things to consider when selecting icons for your UI map design:
- Use familiar icons. The user should be able to decode the meaning of an element just by looking at it. Successful map icons must be widely recognizable even across cultures.
- Use icons with the same visual style. Icons with the same visual style look better from the aesthetic point of view and make interactions with the UI more predictable.
- Scale well. The icons should remain legible at sizes as small as 11px.
Creating both light and dark themes
Dark themes are quickly becoming a default requirement for many user interfaces. But when it comes to maps, dark mode is essential. Light themes during the night time will cause a great deal of eyestrain and make the interaction with the map UI much less enjoyable.
Predictable controls
What makes a map UI design different from traditional print map design is that digital maps can respond in real time to user input. Typically, maps have the following set of control: zoom in and zoom out, a search box (for address or POI), a location indicator, and a way to change the basemap. When designing controls, you should:
- Place controls within the bounds of your map. By doing that, you make it easier for users to understand the purpose of controls (users will know that the controls are part of the map).
- Design finger-friendly touch targets for touch screen devices. Consider making touch targets at least 48x48dp (dp is a virtual pixel unit that’s roughly equal to one pixel on a medium-density screen).
Mobile map UI design examples
Mobile phones play an important role in helping people get where they need to go. Not surprisingly, mobile map UIs are quickly becoming an essential part of mobile app design. Here are a few excellent map design inspirations for you:
Plan a bicycle ride
“Plan a bicycle ride” is an excellent example of incorporating a map in the mobile frame. Even though the map takes up a significant portion of screen space, the layout remains clean and highly focused. All information is provided in an easy-to-digest format, so the users can read and interact with it.
Plan a bicycle ride demonstrates an excellent balance of data and aesthetics. Image credit Gleb Kuznetsov.Uber launch navigation
What makes this example a great map design is the transition between the splash screen and the main screen of the map. The user immediately knows that the blue circle is his or her current location and how many cars nearby are ready for booking.
The rider launch transition connects the splash screen and the main screen of the app. Image credit Uber.Mapbox turn-by-turn navigation
This map is an excellent example of a car navigation system. It uses 3D objects together with auto-zooming to help users navigate in the city. Plus, complex parts of the route, such as sharp turns, are highlighted with different colors.
Navigation experience in the city is an excellent example of a 3D map. Image credit Quintin Lodge.Local places
This concept helps users find interesting places near their current location. It’s an excellent example of how designers can use visual controls, which are predictable and located where users expect to find them. The layer of filters allows the user to find all relevant information in no time.
The concept of iPhone X map UI helps users find places around them. Image credit Jae-seong, Jeong.Conclusion
Just like any other product, a good map is one that is useful and usable. But a great map UI is more than that—it tells a story of your brand and creates a delightful experience for your users. It’s nearly impossible to create a memorable experience right from your first attempt. Only constant iterations of prototyping and validating your design by testing with your users will help you create something that you’ll be proud of.