The Ten Commandments of Web Cartography

Robin Tolochko Cartographer @ Uber

tolochko@uber.com @tolomaps

Fifteen Conventions

When I started off making interactive maps, I really wanted a handbook of design rules to follow. I wanted to know: what are the rules of web cartography? What are the dos and don’ts of web map design?

Expert interview study

17 participants, 4 criteria:

1. designed or supervised web map design in the last year

2. at least one year of professional experience in making web maps

3. not academic faculty 4. at least 18 years of age

I couldn’t find a handbook, so for my thesis I decided to interview expert web cartographers about their design workflows and best practices. The people I interviewed are leaders in the field, they come from a variety of industries, but they are all highly skilled and experienced cartographers.

cartographer designer • developer • manager • data analyst

editor • customer support • QA/QC tester project manager • business development

copy editor • researcher • journalist front-end developer • back-end developer

engineer • creative director • visual designer data engineer • data scientist • devops

systems administrator • user experience product manager • statistician • writer

Though many people I interviewed self-identified as cartographers, many did not. They also mentioned a wide range of roles that they or others on their team fulfill.

outline

interaction

data

representation

responsive design

From the interviews, I derived a bunch of design conventions for web cartography. I won’t go over all of them today, but I will go over many of them. I’ve broken them down into a few categories:

Just wanted to note before I start that this is not a practical talk - the point of this isn’t to tell you *how* to do these things, but rather the conventions you can work towards.

Lead us to the promised land of beautiful, usable web maps…

To help me along the way, I’ve enlisted my son, Moses. Fun fact: I was 6 months pregnant with him at my first NACIS 3 years ago. I was afraid it’d be weird to show up at a conference where I didn’t know

anyone with a basketball in my belly, but turns out that NACIS is nicest and everyone was awesome. Anyways, now I have a toddler who is obsessed with map puzzles. But I digress…

interaction

Why do we make **interactive** maps at all? From my interviews, there were two reasons: either to let the user explore complex data or to tell a story. As a general rule, with exploration, you can allow for broader interaction… but, if you’re trying to tell a story, you should constrain interaction.

In this section, I’m going to talk about design conventions for different types of interaction.

interaction

pan & zoomwhen to implement: • different levels of information can

be revealed at different zoom levels

• there are features that will be too small to be seen at lower zoom levels

pan & zoom

First is panning and zooming, which is arguably the most common form of interaction with a map. for example: state-level information and county-level information for example: to see Washington, DC on a national map of the United States

interaction

Constrain panning and zooming based on your

map purpose.

pan & zoom

Convention 0 1

If the purpose of your map is to explore a city, don’t allow the user to zoom out to see the whole world or pan far beyond the bounds of the city; likewise, if the purpose of the map is to look at information on a continental level, don’t allow the user to zoom into a city. That said, I’ll note that many people I interviewed said they initially limited panning and zooming for some maps, but ended up allowing full freedom to pan and zoom because clients didn’t like being constrained. These interactions have become so ubiquitous that people expect them.

interaction

Disable scroll wheel zooming when a web

map is embedded on a larger webpage.

pan & zoom

Convention 0 2

otherwise, attempting to scroll with the scroll wheel will instead zoom into the map. you want to allow the user to reach content below the map.

interaction pan & zoom

otherwise, attempting to scroll with the scroll wheel will instead zoom into the map. you want to allow the user to reach content below the map.

interaction

Make sure the height of a mobile map is shorter than the height of the

device.

pan & zoom

Convention 0 3

Otherwise, when you try to scroll past the map you will be stuck panning it.

interaction pan & zoom

This is basically the panning version of what we just saw with the scroll wheel zoom.

interaction

Include a home button to return to the default

map view.

pan & zoom

Convention 0 4

interaction pan & zoom

Rather than making someone click the zoom out button a bunch of times, you can provide one button that brings them to a default overview zoom level and extent.

interaction

retrievewhen to implement: • when the purpose of the map is

exploration

retrieve

Moving on from panning and zooming to the “retrieve” interaction. This is the idea of clicking or hovering over a feature on the map to reveal more information about it. Caveat: Though not to the same extent as pan and zoom, many people expect to be able to click around on the map to retrieve more information, regardless of whether or not the map purpose “requires” it. Therefore, you may elect to implement retrieve even when it is not considered necessary.

interaction

Use popups when there’s not very much information and panels when there’s a lot of

information.

retrieve

Convention 0 5

interaction retrieve

So, in this example of a map of a basketball court, the information you get when hovering over different points is quite succinct, so the popup follows the mouse cursor.

interaction retrieve

On the other hand, this map has a lot more information in a linked visualization, and it would be too much information floating around the map. So it is placed in a fixed panel next to the map.

interaction

searchwhen to implement: • when you want the user to be

able to find a specific location • when it would be hard to find a

location with just pan & zoom

when not to implement: • when you want to tell a story

search

interaction

Be intentional about which data layers will

be searchable.

search

Convention 0 6

Do you want to search addresses? Do you want to search counties or states or some particular aspect of your data? This should depend on the available data and the purpose of the exploration.

interaction search

For example, this map about school districts only lets you search by school district, not by address, which fits well with their objective of letting people learn about specific school districts. Perhaps you could argue that someone might not know what school district they’re in but they know their address, so you should also let them search by address… but I think in this example you can limit the search functionality.

interaction

Save a specific search or location in the URL to easily share with others.

search

Convention 0 7

interaction search

Google Maps really does this well. If I search for “grocery stores in Madison, Wisconsin,” the exact search is included in the URL, so I can simply copy the URL and send it.

data

Now we’re going to switch gears to talk about conventions for working with data. Dealing with data, accounts for a large amount of the total work that goes into creating an interactive map. As one interview participant put it: “one of my professors told me that 90% of my time in geography was going to be data wrangling… and maybe 10% was going to be actual map design, and that’s totally still the case.”

data

Don’t alter the original data.

Convention 0 8

If you need to make changes or process the data in any way, do so without changing your original dataset. That way you can always go back to the original data in case you mess up the processing.

data

Automate your data processing.

Convention 0 9

For me, this is one of the most important best practices to come out of the research. I can’t tell you how many times I’ve manually moved around numbers on a spreadsheet, hoping that I didn’t mess up, but knowing that even if I did, I’d probably never know. Automate data processing from a raw to mappable format by scripting the process. Automation makes it easier to update your data later, account for and correct errors, and it makes the data processing workflow accessible to others.

representation

Discussion about best practices for representation design had more to do with how to think about design rather than specific design suggestions. A bunch of participants said that they had a difficult time pinpointing specific best practices for the representation design of web maps, with one saying, “I can tell it's a well-designed map when I see it, but I don't know exactly why.”

representation

Maintain consistency between the map and

the rest of the interface.

Convention 1 0

representation

Notice here the consistency of design - they use the same typeface throughout, they didn’t just use the default design for the zoom buttons, but they made them look like the rest of the interface.

representation

Don’t place labels below data layers.

Convention 1 1

representation

Here’s an example of what not to do - see how the labels are underneath the data layer, so it makes them hard to read.

representation

Provide a clear point of entry to the map.

Convention 1 2

help guide the user, either in the form of introductory text or as UI elements that suggest initial map locations to view

representation

I love this as an example of point of entry. This map does a good job of both letting you explore a lot of data, but it also gives you a clear point of entry with a bunch of different scenarios that you can select - it will zoom you in to the corresponding location and select the layers to tell that particular story.

responsive design

Responsive design is the idea that an interactive map will look different on a laptop than it will on a phone. Responsive design accounts for these differences and makes sure that the design works well everywhere. Being able to design maps for a variety of devices, a variety of screen sizes, and a variety of resolutions, is undeniably increasingly important. It’s also an area that the people I interviewed repeatedly said that they had not quite figured out yet.

responsive design desktop

responsive design mobile

responsive design

Imagine a thumb interacting with the

map.

Convention 1 3

On a mobile device, people won’t be using a mouse to interact with the map.

responsive design

I have to rep Uber here. Uber has a brilliant solution here - when you need to select a location on the map, instead of pressing down on the pin and trying to accurately place it, you pan around the map and the pin stays in the center. The map is a much bigger area for a thumb to interact with.

responsive design

Optimize loading time.

Convention 1 4

Mobile phones are more likely to have connectivity issues than computers, so make sure to optimize map loading time. Maybe this means removing some data, maybe it means not doing that crazy cool

visualization technique you had in mind.

user experience

user experience

Design with your users in mind.

Convention 1 5

Ask yourself: who will be using my map? What will they be using it for? Am I designing this map for myself or for the people who will actually be using it? Can I actually talk to the people who will be using it? Try and get feedback on your map design early and often, if possible, with people who will actually be using it.

user experience

“as important as getting outside opinions is trying to let go of your ego… accepting that you make a lot of decisions and a lot of them are probably not the correct decisions and other people might be able to

point that out to you… being open to receiving that feedback is a really

useful way to improve the map that you're working on in the end.”

Even if you can’t talk to your users, get feedback from others. It can be hard to let yourself be vulnerable, to get past any insecurities and show your designs to other people, but it’s so important. I love this

quote from one participant:

simplicity & clarity

Is adding this necessary for fulfilling the objectives of the map?

Can I remove anything from the map and still allow the user to achieve their goals?

The last bit of advice isn’t exactly a convention, but rather an overarching theme. Participants really drove home the point of not including any unnecessary interaction, data, or representation on the map. So before you deploy an interactive map, ask yourself, “Can I remove anything from the interactive map and still allow the user to achieve their goals?”

Rules are meant to be broken.

Despite my little tablet motif, these conventions aren’t commandments written in stone. If you find that it doesn’t make sense to follow them when making your own map, then don’t follow them. They’re

guidelines to keep in mind as you design your web maps.

Go forth to the promised land of beautiful, usable web maps!

So my friends, go forth and make maps!

thanks! questions?

tolochko@uber.com @tolomaps

Example maps and images from: Google Maps, Uber, New York Times, Washington Post, NPR, International Business Times, Los Angeles Times, Urbica Design, Rand McNally, Oliviu Stoian from the Noun Project