All language subtitles for 07_visual-hierarchy.en

A really important design
principle is visual hierarchy, so

let's explore what it is we
mean by visual hierarchy.

In this most excellent map that I
just absolutely am super proud of and

think is amazing, sarcasm alert.

Okay, the [LAUGH],
why am I telling you all this?

The point here is that one of the problems
with this map, one of the many,

is that it has a poor visual hierarchy.

And what do we mean visual hierarchy?

What we're talking about is the relative
importance of things on the map.

So just like if you're
looking at the Mona Lisa, and

it should be obvious that you're
meant to look at her face first and

get an idea of the information that's
there about her expression or whatever,

when you look at a map like this,
your brain is trying to say to itself,

what's important here,
what am I supposed to focus on?

And so, when you do this, the fact that
this area is this really super high

contrast certainly makes it stand
out from everything around it,

so your eye is drawn to that, so
in a way, that's a good thing.

But within the map itself, it all looks
too bright, too contrasty, so you don't

know, am I supposed to be looking over
here, over here, is it this part?

There is no kind of visual connection or
contrast or information there.

It's just sort of this blah, it's just
sort of all yelling at me at once.

And so,
there's no indication of what's more or

less important within that mapped area.

Then, you also have things like the fact
that this north arrow was too large.

So it's more important if
you think of a size in being

in relation to importance on a map,
so the larger something is on a map,

the more important your brain
might think that it is.

And so, when it sees this really
big symbol down on the corner here,

it thinks this must be important,
and it's like, well, not really,

it's just telling you
what direction it is.

Same thing with the scale
is that it's too large so

it has too much visual importance,
it's too high in the visual hierarchy.

In other words, when your brain is
looking at this map it's going, okay,

there is this gigantic,
awful looking thing in the middle, but

then I'm supposed to look at this or
am I supposed to look at that?

Or maybe I'm supposed to go up there, or
maybe I'm supposed to look at that, but

that's really too small,
so the title is not clear.

You get the idea, I'm hoping,

is that there's not a clear sense of
what's the subject of the map, and

what is the things that are just meant to
be there in background if we need them.

This better version of the map,
l hope, has a better visual hierarchy,

at least l think that it does.

The geographic area is
certainly prominent,

it's in the center of the map, so

in terms of its location we're being told
that that's the thing we should focus on.

And then it's higher contrast
than the areas around it so

that helps us to know that
we're supposed to focus on it.

This area, in the downtown especially,

is darker because it's a higher value,
so that helps us focus on that part, and

we have a gradation of values from, say,
here out to here, so that gradation

tells us that there's a hierarchy
of higher values and lower values.

We have a nice prominent title here,
so it's easy for

people to interpret that they should be
looking at that, that that's important.

And then so on.

And so things like the scale and
the legend are much smaller, so

they're less important,
they're lower on the visual hierarchy.

And I actually made them a similar blue
to the water so that they're there but

they're subtle.

So if somebody wants to know about that
information there, it's there, but

it's not too big, it's not too bright,

it's not distracting people from what
they're supposed to be looking at.

So this has a stronger or more well
developed visual hierarchy in that it's

easy for somebody,
whether they're thinking about it or not,

to know what it is that they're
supposed to focus on and

what are the things they're
not supposed to focus on.

Hierarchical organization is a way of
visually indicating relative importance.

We're trying to show similarities,
differences and relationships.

So what do I mean by that?

So, for example, if you are looking
at a map with cities on it,

similarities might be the status of
those in terms of capital cities.

You might have, say, Washington DC, and
Ottawa is the capital of Canada, and so

they might be indicated with stars.

And what we're indicating there is
that they are both capital cities,

they're national capitals, and so,
we would have the same symbol for those.

Maybe we'd have a different signal for
state or provincial capitals and

then another symbol for regular cities,
another symbol for towns, another one for

villages.

And so we're trying to show people that
if they have the same symbol there's

a similarity, they're in the same class,
if they have different symbols there's

a difference between those and that that's
obvious and there may be a relationship.

And so, it could be that it's like this
different status in terms of a national

capital, a state or provincial capital,
a smaller city, and so on,

and so that would be a relationship in
relation to its status and to its size.

All right, we can do this in
lots of different ways, but

it could be through colors or
the thickness of lines.

There's lots of techniques for this and
we'll talk about some of them, but

the main thing I want you to kind of take
from this is that those are the things

we're looking for, similarities,
differences, and relationships when

we're looking at somebody else's map or
when we're designing our own.

For trying to establish visual hierarchy,

there's different ways
that we can do that.

So, for example,
here we have three different squares.

And [LAUGH] I know I use
these really simple examples,

but I want them to be obvious.

I want you to kind of get what
I'm saying really easily, right?

But there is more accurate than you think.

So, for example,
what do we see about these?

All right, they're three different sizes.

So remember, we were just talking
about similarities, differences, and

relationships.

So what's similar about these?

Well, they're the same shape and
in the same color.

So that might be something we
could use to our advantage.

So maybe they're all, I don't know,
shopping malls, something like that.

So we're trying to indicate to
somebody that these symbols represent

a particular class of data, okay?

What's the difference between them?

The only difference is the size.

So, maybe it's the number of customers
that visit different shopping malls,

so we can indicate a difference between
these based on just this one thing.

And by the way,

what we're talking about here are what
we would call visual variables.

We can vary these things visually
in order to communicate things.

So already we're talking about shape,
size and color,

these are three visual variables
that we can work with to try and

convey information in an efficient way,
okay?

So here we've kept two of the variables
constant, shape and color, and

we've only varied one of those with size.

Now, what I haven't said to you is which
of these three would you use to represent

more customers in a shopping mall and

which would you use to
indicate fewer customers.

Well, I'm hoping that it's fairly
obvious that the small square would

represent a lower value and the larger
square would represent a higher value.

Again, it may seem obvious, but a lot of
times it may not be that clear when you're

making your own map, so
you want to use that to your advantage.

People will naturally want to
interpret something that way,

and so use the assumptions that they're
making to make your map easier for

them to understand.

So we have a gradation here from low to
high, so we're showing a relationship.

We already, just with this one simple
example, have looked at similarities,

differences and relationships.

So, they're similar in terms of color and
shape, they're different in terms of size,

and there's a relationship in
terms of value from low to high.

See?

There's actually more there
than you might have thought.

Here we're working with
a different visual variable.

This is the saturation of the color or
how much the color is sort

of a true blue versus one that
has more white mixed in with it.

And, again, similarities,
differences and relationships,

what's similar now is the size and
the shape, what's being varied is the,

if you want to just think of
it in general terms, color.

We'll talk about color definitions and
components in another section, but for now

if you want to think of it like a lighter
blue versus a darker blue, the same

thing's working here, that we can work
with this to enhance our visual hierarchy.

We can even use something like a pattern
or a texture to do the same thing.

And you'll notice that in all
three of these cases we can work

with them to indicate something
that's low, either with size or

a lighter shade or
a more open grid versus high,

which is a larger square or a darker
square or a more dense grid pattern.

So these, again, these are all things that
are visual variables that can be used to

help people interpret the data
in a way that you intend,

that you want them to see
things a certain way, and

that's what helping to establish
this idea of visual hierarchy.