Building maps for mobile devices creates a unique challenge. Maps are complex systems that require you to consider both data and data-styling decisions, and how the map is being used. Understanding these variables informs how we create the map. A map to help drivers get to their destination quickly will look different from a POI map tailored to children. One designed to highlight built-up areas and road networks have data and styling decisions different from a map showcasing natural features. On the cartography team, it’s our job to know our users, what types of maps they need, and how they are using them, so we can design maps to fit their needs.
This is where the variable of ‘map medium’ comes in; not a technical term but one I will use to describe the final product or material medium the user interfaces with (ie. a printed map versus a desktop browser map). The medium influences the map style, informs how much data the map is comprised of, and when data is presented: due to zoomability, desktop maps typically have a lower data density than a print map at a fixed scale.
left: Mapbox, Mapbox Streets v-10, 2017, vector tile-set, dimensions variable right: Friedrich Theodor von Schubert, Moskau plate, 1837, copperplate engraving, scale 1,400,000
The most widely used medium is now mobile devices, and the cartography team is developing workflows that enhance our ability to provide mobile-specific maps.
Although mobile maps share similar challenges with desktop and print maps, they also have unique needs and a range of user and environmental variables that require consideration throughout the design process.
Here are a few things we like to consider when designing maps for mobile usage.
Spatial restriction, map interactivity, & manipulation
A map’s scale becomes amoebic and vague in a internet browser, compared to the restrictions of paper size and printing mediums. The mobile screen reintroduces spatial restriction to the design process. Not only is the screen smaller, but it’s also a smaller viewport showing a similar-sized desktop map, meaning much less map data is viewed at once. This means visual cues and connections are going to be harder to make, and different styling decisions must be made since fewer map elements can be seen.
map medium size in relationship to map scale
This means that users tend to manipulate the map more for mobile maps. Although using one’s fingers to zoom, pan, and pitch a map is really no different than using a laptop mousepad, the size constraint typically requires more user interaction and manipulation to view more map context and content. We can see a loose connection between screen size and interactivity, due to the simple fact that there is less map information shown at any given time on mobile maps.
map size & interactivity levels by map medium, and map size & distance between mobile user and map
This suggests that the user is constantly fiddling with the map so zoom, pan, and pitch variables can be automated and controlled by other information such as user location, user speed, and defined route distances. Not only does this free the user’s hands, but it also adds to list of variables designers must account for when designing mobile maps. This animation quality starts to suggest that the mobile map is a part of a larger, cinematic experience in which the design occurs somewhere between graphic design, cinematography, cartography, and gaming.
user-data that can be used to design mobile map transitions
Use case & user type considerations
When our team design maps for mobile, we start with a few basic questions to guide the design process. Whereas maps for desktops require some considerations of what a map is attempting to convey and to whom, on mobile we must also consider environmental, speed, and time factors. In the early phases of the map design process, it’s important to consider:
- The specific use: What is the map supposed to do? What map elements should be visually prominent or peripheral?
- The user type: Who is it for? Do the users have unique needs? Is it a map for the color blind or children?
- Physical relationship between the map and the user: How far away is the map from the person? Is it hand-held for a pedestrian, or fixed to a windshield for a driver?
- Viewing time: Is the user viewing the map in short, fragmented glances, or contemplatively sitting with it?
- Map viewing environment: Will this map be viewed outdoors in the sun? Will glare levels be high? Will the map be viewed only at night?
physical, speeds & spatial proximities of users & user duration spent with map, and interactivity level
Once we have considered these question, their answers determine the design trajectory of the map. We could make a diagram that houses all of these variables, and typically the answer to any design question could be found here.
user & medium variables to consider
User interface and user data styling
Designing mobile maps often gives us similar opportunities to integrate a map into a larger product design context: the map design must consider the user interface design, either to blend in or stand out. There is also user-data, such as route-lines and road labels in navigation maps, that need to co-exist with the map design.
Conceptual sketches showing route-line, current position and road labels
Platform & testing considerations
Even if we have identified that a map will only be used on mobile devices, and only at a certain time of day, a specific environment and use-case, there are still differences between platforms — iOS and Android — and color rendering within different screen assemblies.
Testing our maps on as many devices as possible gives us critical feedback that propels the iterative design process, and verifies that the user experience will be as fun and productive as possible. Whether we are putting ourselves in the shoes of the user or asking our clients for feedback, knowing how the maps are performing within real-life contexts ensures the maps are legible and performant for as many devices as possible.
One of the main tools we use to quickly test styles is the recently released Studio Preview for iOS. A companion to Mapbox Studio, the preview app allows us to log into our account and quickly prototype map styles within the environments it will be used in, and to mimic the user experience.
Join Us!
Designing maps for mobile devices demonstrates that the range of mobile map styles is dependent on the diversity and range of applications and use-cases. If you enjoy tackling complex issues like this and want to join us as we investigate and design mobile maps for the future, please check out the job openings on the cartography team.
Designing maps for mobile devices was originally published in Points of Interest on Medium, where people are continuing the conversation by highlighting and responding to this story.