Tips for Great Maps

Maps are everywhere.

People have been recording information about the world around them as far as we can tell. And we use maps for a wide variety of purposes.

Like finding a new hiking trail or keeping tabs on the progress of our dinner or dessert order.

We can even use maps to orient ourselves in imaginary places, tracking our movement through levels of a game, or a character's position on a fictional battlefield.

Mapping technologies continue to evolve, but the essential characteristics of maps remain the same.

They are abstract representations of real or fictional places, that show features relative to other features in space, and they offer information about the attributes of those features. Maps are tremendously useful and they're really fun to make. One option to consider is MapKit, our native framework. You can see it here in the activity app.

MapKit does a lot of work for you. It integrates cleanly with the rest of our UI.

It contains base map data and satellite imagery for the entire world.

It allows users to pan and zoom, and it looks great. But depending on your data and design requirements, you sometimes need something a bit more custom. So, we'll talk about the process of map creation and review three key tips for making a map shine, which will be relevant regardless of how you're creating your maps.

There's a lot to know about making exceptional maps, but here's an excellent place to start. First, know your audience and what they need.

Second, carefully choose your map elements and leave out the things that aren't necessary. And third, focus on hierarchy so that it's immediately clear what is most important.

Why know your audience? Well, you need to know what your users are trying to do. Because this knowledge will shape every part of your map, from the features you include to your design decisions. And the success of your map really depends on its responsiveness to those user goals.

Keep in mind that you sometimes have more than one group of users with different needs.

For instance, if you're making a navigation map, perhaps you'll have some users traveling by bike, others on transit, and the rest by boat. So, these different modes of transportation will mean that your users are concerned about different things.

Grade matters a lot to cyclists, so they might need contour lines or other indications about topography.

Train passengers are especially likely to want transit stations represented very clearly. And those arriving by boat care much more about dock amenities and bathymetry than others.

Keeping these types of needs in mind helps you make a more useful map.

Let's look at an example. We're going to build a map for a fictional game about my cat. It's is called Pantera's Big Adventure and in it, players travel Pac-Man style around the neighborhood picking up as many catnip mice as they can before it's time to go home for dinner.

We'll build out the game map and use this exercise to illustrate those three tips. This map is a bit unusual for a few reasons. It will also function as a gameboard, it's showing an imaginary place, and perhaps most importantly, it's only going to exist at one scale.

If we were making a map where users could zoom in and out, we'd need to think carefully about how our data and display might change at different zooms. But this is a design studio short, not a design studio long. So, we're going to stick with just one zoom.

However, the principles are going to be the same whether your mapping a cat's escapades through a fictional neighborhood or making a dynamic map of the whole entire world. So, let's get started by thinking about the purpose of this map.

We want to make a game that would be perfect to play for a few minutes on the bus, or while relaxing in a park. And we're going to want to make sure that our map really reflects this.

It should be fun, kind of cartoony, cute and lighthearted, and really simple to understand.

So, let's think about what players will be doing within this game.

It's pretty intuitive, they're going to be moving around the map finding the mice and avoiding the hazards. So, they'll need to see sidewalks, mice, and hazards. Okay, enough talking about maps. Let's get started building it. We're not going to take the time to style it right away and we're going to be iterating on this design throughout. This is going to be a work in progress but we're going to keep the map purpose and the user goals in mind throughout.

So, we'll start with sidewalks because the street is too hot for delicate kitty toes and sometimes the grass is damp.

And then, we'll add the mice, and now those hazards.

Dogs, Pantera is not a fan, as well as fountains, which sometimes unpredictably spray water.

So, these are the essential elements from that list. But we should also include Pantera's house, where she begins each round. Of course, Pantera herself.

And the pet store where she can regain her health. Okay so, this is starting to come together. Remember we're going to restyle later on, but this map looks kind of bare in places, and doesn't give us all the information that we might really want. So, we can all think of elements that we've seen in other maps.

Let's add some of them and then decide whether or not they really belong in this particular map.

We could, for example, include the rest of the building footprints.

Maybe some polygons for those parks.

Perhaps a title.

Possibly even a legend. Lots of maps have a compass rose and a scale bar. Oh, right, and since this map is doubling as a gameboard, we'll need a few other elements too. Like a health indicator, a mouse counter. How can we know if we're successful otherwise. And a timer. This game doesn't last forever.

All right.

But wait. It's easy for maps to get overloaded. And this is a great example of that exact problem. Way too much is happening here. Our map is chaotic and it's not necessarily reflective of our intent, which was to create something that's cute, fun to look at, and easy to understand. And, thinking back to the purpose of this map, we're losing sight of the features that are most important to users, mice, sidewalks, and hazards. So, let's fix this.

It's time to think seriously about leaving things out.

Because when it comes to maps, knowing what to omit is just as important as knowing what to include. We're going to remove some of the elements that aren't really necessary for this particular map.

So, as we know the map exists within our game. So, don't really need a title here though of course we'd want a title on many other maps. Legends are really important for maps with more complicated symbology. But I don't think we need one here. It's pretty straightforward.

The compass rose is demanding a lot of attention.

But this isn't a navigation map and cardinal directions are irrelevant in this game.

And let's lose the scale bar too. We'd want it if we were using the map to plan a trip but were not. Okay. So, take a look over there on the right.

We've removed a lot of noise from the map. And we've ended up with a leaner set of elements. Notice too that we aren't including things like road or park labels. They aren't needed for this map, and they would add a lot of clutter. You can probably think of other map elements that we're leaving out too.

So, this is moving us in the right direction. But our map definitely still need some work.

Let's think about how to modify our display and make sure that we're highlighting what really matters and minimizing what doesn't.

So, to do this, we're going to look back on our list of key elements. Sidewalks, mice, and hazards.

And remind ourselves of the overall vibe that we're aiming for.

Fun, cute, and simple. We'll start with some big changes and then we'll move on to tuning the map. So, first up, our buildings. I like this color of blue, personally. But it's really not working here for two reasons. First many map users associate blue with water, making this neighborhood look like some strange collection of pools. And second, I think the color is distracting here. Remember that the building polygons are really only here to give us some context and fill out the city blocks a bit. This gray is more subdued, and it lets other elements stand out better. But remember, there are those two important buildings. Let's restyle Pantera's house