NACIS 2016 Presentation Robin Tolochko, Uber What are the dos and don'ts of making an interactive map? What are different things to consider for different mapping scenarios? What do you need to think about when designing mobile maps? I talked with a bunch of professional mapmakers about how they make interactive maps and, from those interviews, created a comprehensive list of best practices and conventions for designing maps for the web.

1. 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?

2. 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.

3. 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.

4. 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.

5. 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…

6. 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.

7. interaction
pan & zoom
when 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

8. 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.

9. 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.

10. 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.

11. 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.

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

13. interaction
Include a home button
to return to the default
map view.
pan & zoom
Convention 0 4

14. 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.

15. interaction
retrieve
when 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.

16. interaction
Use popups when
there’s not very much
information and panels
when there’s a lot of
information.
retrieve
Convention 0 5

17. 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.

18. 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.

19. interaction
search
when 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

20. 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.

21. 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.

22. interaction
Save a specific search
or location in the URL to
easily share with others.
search
Convention 0 7

23. 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.

24. 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.”

25. 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.

26. 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.

27. 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.”

28. representation
Maintain consistency
between the map and
the rest of the interface.
Convention 1 0

29. 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.

30. representation
Don’t place labels below
data layers.
Convention 1 1

31. 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.

32. 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

33. 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.

34. 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.

35. responsive design desktop

36. responsive design mobile

37. 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.

38. 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.

39. 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.

40. user experience

41. 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.

42. 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:

43. 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?”

44. 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.

45. Go forth to the promised land of
beautiful, usable web maps!
So my friends, go forth and make maps!

46. 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