Transcript
[ Music ]
>> 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.
[ Applause ]
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 ]