Better visual hierarchy of features and a cleaner, lighter map
By: Alex Parlato
Last week, we launched a new version of our navigation maps, designed to be viewed in a small display, at arm’s length, or while in motion — perfect for drivers using mobile navigation.
We’ve updated both the day and night versions of the Preview and Guidance styles. The Preview styles were created for reviewing a route before you get moving, while the Guidance styles are for use while actually navigating to a destination.
Here’s a look at some of the key adjustments in this version, along with some of the original decisions we made while building our navigation specific map styles:
Based on where you are along your route, certain details of the map are more important than others. When a driver is planning a route, they usually have the map zoomed out so they can see more of the overall route, while specific details close to their destination are not needed yet. However, when a driver is looking for parking, they likely have the map zoomed in very close to catch details like public parking. Having a lighter background, while increasing the size and color saturation of critical navigation-related features based on zoom level, allows us to ensure drivers are oriented and have the most critical information when they need it.
Clearer differentiation of classes in the road network helps drivers get oriented faster. We’re using color and line widths to separate high traffic and limited access roads from the rest of the road network, as well as clearly distinguishing size differences for the different classes of roads.
We designed for optimal information at a glance, because we know it’s crucial for drivers to quickly get the information then get their eyes back on the road. That’s why we increased the size of labels on the map, so that drivers can more easily see the information they need quickly.
Both the larger labels as well as lighter background color of the map allow the labels to really pop, making them easily distinguishable at a quick glance. As you zoom in, important features for navigation, such as public parking lots, stand out with specialized styling (yellow below).
Road shields are larger and more prominent, letting drivers better verify the signs they see in the real world with those on the map.
We’ve also updated our night style for better visibility in the dark. Light pollution can cause eye-strain on drivers and can be a real safety hazard, so we made sure to use a more subtle color palette than the one we used for our day styles.
Importantly, we’ve made sure to optimize both the Day and Night styles to work well with the color palettes of our live traffic layers
Our new Navigation Map Styles are available today in Studio and can be added to our Navigation SDKs for iOS and Android. Take them for a spin and reach out to our team with any questions you may have.
Designing maps for navigation was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.