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 and the pet store too. And for the pet store we'll add a heart that matches the health indicator as a visual cue.

Okay. Now to restyle the parks. They're really prominent right now, but they're not as important as the sidewalks, mice, or hazards.

It makes sense to leave the park polygons green, since this color is often associated with parks. But I'm not satisfied with the shade. It's too dark and that makes it distracting.

Okay, I think this lighter green is a nice change.

White still seems like a good color for the sidewalks. Notice how it's standing out against the dark background. But I think we should bump up the line weight. Yeah, better. Okay. So, the so the base map is more muted now, and that means that we can turn our attention to the symbols and game elements. We need to talk about the photos.

They're cute, but I don't really think that they're the best choice. The colors are kind of distracting and there's a lot of detail.

Remember, maps are an abstracted representation of a place.

We don't have to be literal.

We often use simple symbols in maps. So, let's try a drawing of a mouse instead. I think this is better in line with our fun and simple aesthetic. But now we need to make sure that the other symbols match too. So, we'll switch up our dogs, and now the fountains.

Notice that we lost some detail here. When we were showing the fountains as photos, they were different sizes. But, this is a pretty simple game. So, our fountains don't deal different amounts of damage. We're simplifying the map here by having the symbols match. Also, if we had sized their placement symbols the way we did the photos, the fountain in the larger park would be the biggest symbol on the map, which would suggest that it's way more important than it actually is.

Okay, now to change Pantera from a photo to a symbol. Still pretty cute. So, this map is coming right along. We've moved away from the realism of the photos to some symbols that are easier to perceive at just a glance.

But now, let's tackle those game elements. They're just floating around at the top of the screen where we placed them initially, and I think that's kind of confusing. We don't need to do a lot to restyle them because I think they're looking pretty good already, but let's collect them and make it really clear that they're part of the game UI and not part of the map.

So, first we'll add a shaded bar.

And now we're going to reconfigure our health indicator to fit inside of it.

Nine lives is hard to accommodate, but could a cat game really have a different number? I don't think so, we've got to make it work. Now, we'll adjust the color, position, and size of our timer and our mouse counter. And now, I think we're getting closer.

This map is shaping up to be pretty cute and fun. And it's easy for users to glance at it and see the key features.

But you know I think we can make it even better.

I want to make sure that the symbols are really standing out against the colors of the base map.

Remember, the goal of the game is to collect the mice. So, we can give users a helpful cue by making them a really eye-catching color.

Let's try out an orangey-yellow. So, now they pop a little bit more.

And let's see what else we can do with color here.

I notice that Pantera and the dogs have similar markings on their faces. So, let's color them so that they're more distinct.

Pantera can be purple, like her house.

And let's make the dogs brown. Now the fountains look a little bit out of place. We should color them too. We'll go for blue, they're water after all.

Okay. So, I think we're really getting close. But this isn't quite it yet. I have some concerns about the dogs. We don't want them to actually looks scary, of course. Remember, our game is supposed to be fun and lighthearted. But they almost look too friendly. And we want to make it clear that players need to avoid them.

So, let's try adding some eyebrows. Okay. With the addition of these dog eyebrows, I think we've got something pretty good. Happens all the time. So, let's take a look back at our progress.

On purpose this time. We started here with all the elements we knew we'd need. And some that we weren't sure about. And then we removed some of those extraneous elements to get here.

This is getting clearer, but it's not really done yet.

Then we restyled the elements that we kept and we ended up here.

Notice that the data is very similar. We've changed the way that we've depicted it, but it's a lot of the same information just presented in a different way.

So, thinking back to those initial goals, is this map successful? Is it immediately apparent what matters most? Does it look kind of fun and cute? Do you think players will be able to understand what is where and what it means with just a glance? These are the kinds of questions to ask yourself throughout your design process.

Make sure that you're taking every opportunity to show your map to other people and get their feedback too.

Maybe your friends, family, and colleagues will agree that your map is nailing all those goals. Maybe they'll feel like it's still work in progress. If that's the case, keep iterating until you feel satisfied.

Are you ready to see this map in action? All right. So, I hope this exercise has helped inspire you for the next map that you get to make.

Remember to think carefully about knowing your audience, leaving out the things that they don't really need, and making it clear with visual hierarchy, what matters most.

[ Applause ]