WEBVTT

NOTE
This file was generated by Descript 

00:00:05.000 --> 00:00:06.290
Mike Bifulco: This is Tiny Improvements.

00:00:06.320 --> 00:00:07.369
I'm Mike by ko

00:00:13.174 --> 00:00:16.233
Have you ever felt that you've seen a
design that just makes sense to you, but

00:00:16.264 --> 00:00:17.794
you couldn't quite put your finger on why.

00:00:19.024 --> 00:00:21.753
At some point, we're all faced with
the challenge of creating a design

00:00:21.753 --> 00:00:23.644
that works intuitively and looks great.

00:00:24.574 --> 00:00:27.124
When building a new interface,
there's a temptation to lean heavily

00:00:27.124 --> 00:00:30.664
on obvious design elements, like
color or shape, or to use cards

00:00:30.664 --> 00:00:32.194
and borders to hold bits of UI.

00:00:32.704 --> 00:00:33.574
It makes sense.

00:00:33.784 --> 00:00:36.094
These are easily visible to
the person using your app.

00:00:36.704 --> 00:00:39.164
What you may not realize is why
these elements are so effective.

00:00:40.574 --> 00:00:43.454
The people who use our designs
are silently and subconsciously

00:00:43.454 --> 00:00:44.354
navigating questions.

00:00:44.354 --> 00:00:46.694
Like what's the most
important thing on this page.

00:00:47.054 --> 00:00:49.754
What's the relationship between
these elements  and what's the best

00:00:49.754 --> 00:00:51.224
way to navigate this interface.

00:00:52.064 --> 00:00:52.334
Enter.

00:00:52.394 --> 00:00:56.234
Gestalt principles, a set of psychological
concepts that go beyond aesthetics.

00:00:56.534 --> 00:00:59.624
To form the foundation of how we
see and interpret user interfaces.

00:01:00.044 --> 00:01:02.474
This is the bit of our mind that
guides us to parse the whole

00:01:02.474 --> 00:01:05.234
picture by understanding the
relationships between its parts.

00:01:05.994 --> 00:01:08.844
The gist of understanding gestalt
principles for design is this,

00:01:09.184 --> 00:01:12.064
our brains are used to grouping things
together based on a few patterns.

00:01:12.334 --> 00:01:15.274
These patterns are the foundation of
how we perceive the world around us.

00:01:15.604 --> 00:01:17.074
By understanding these patterns.

00:01:17.104 --> 00:01:19.804
We can create designs that are
easy to understand and navigate.

00:01:20.284 --> 00:01:23.914
Additionally by breaking these patterns,
we can intentionally draw attention

00:01:23.914 --> 00:01:25.864
to specific elements in our designs.

00:01:26.764 --> 00:01:29.314
Some of the basic install
principles in short, our

00:01:29.674 --> 00:01:34.084
past experience, our brains use past
experiences to interpret new information.

00:01:35.254 --> 00:01:38.644
Proximity elements that are close
together are perceived as a group.

00:01:40.064 --> 00:01:43.424
.Similarity elements that look
similar are perceived as a group.

00:01:44.024 --> 00:01:48.254
Figuring ground our brains, separate
elements into background and foreground.

00:01:48.944 --> 00:01:52.334
And finally assymetry in order our
brains perceive objects as symmetrical

00:01:52.334 --> 00:01:53.804
shapes that form around their center.

00:01:54.524 --> 00:01:55.784
There are a few more principles.

00:01:55.784 --> 00:01:58.664
This isn't a comprehensive list and
they're all worth understanding.

00:01:58.874 --> 00:02:01.424
But for now let's focus on how
these principles can be applied

00:02:01.424 --> 00:02:02.744
to create better designs.

00:02:03.764 --> 00:02:05.234
First up past experience.

00:02:05.264 --> 00:02:06.944
Let's talk about the power of familiarity.

00:02:07.424 --> 00:02:10.664
In your mind picture, a web forum used
to collect someone's mailing address.

00:02:10.694 --> 00:02:13.154
You probably see a series of
fields, each labeled with a

00:02:13.154 --> 00:02:14.534
specific piece of information.

00:02:15.074 --> 00:02:18.644
The street address, city, state,
postal code, maybe country.

00:02:19.214 --> 00:02:20.354
Where do each of these fields go?

00:02:20.774 --> 00:02:23.294
If you're like most people, you
probably see street address at the top

00:02:23.324 --> 00:02:25.004
followed by city, state and zip code.

00:02:25.784 --> 00:02:29.054
Of course, this may vary based on where
you're from, but it's a perfect example

00:02:29.054 --> 00:02:32.204
of how past experience influences
our perception of new information.

00:02:32.924 --> 00:02:36.524
We've seen this pattern so many times that
we instantly recognize it as an address,

00:02:36.524 --> 00:02:37.844
and we know how to interact with it.

00:02:39.244 --> 00:02:39.544
Okay.

00:02:39.574 --> 00:02:42.334
So let's talk about the power of
grouping with proximity and similarity.

00:02:42.694 --> 00:02:45.424
These are two of the most powerful
tools in a designer's toolbox.

00:02:45.784 --> 00:02:49.353
They allow us to group elements together
in a way that makes sense to the user.

00:02:49.714 --> 00:02:52.654
This is why one of the fundamental
building blocks of most CSS

00:02:52.654 --> 00:02:54.184
design systems is the grid.

00:02:54.603 --> 00:02:57.424
It's a way to ensure that the space
in your design is consistent and

00:02:57.424 --> 00:02:59.134
harmonious, guiding the users.

00:02:59.134 --> 00:03:01.324
I and creating a sense
of order and structure.

00:03:01.804 --> 00:03:02.464
What does that mean?

00:03:03.443 --> 00:03:06.473
Well, it means that the space around
in between elements is just as

00:03:06.473 --> 00:03:08.243
important as the elements themselves.

00:03:08.603 --> 00:03:11.093
It's the difference between
a cluttered confusing design

00:03:11.093 --> 00:03:12.473
and a clean, intuitive one.

00:03:13.193 --> 00:03:14.664
Consistency is critical here.

00:03:15.053 --> 00:03:17.063
Spacing related elements
should be consistent.

00:03:17.153 --> 00:03:20.033
And the space between unrelated
elements should be distinct.

00:03:21.573 --> 00:03:24.333
Up next to the power of
contrast with figure and ground.

00:03:25.353 --> 00:03:28.563
The gestalt principle of figure
and ground is all about contrast.

00:03:28.983 --> 00:03:31.203
It's the idea that our brains
separate elements into the

00:03:31.203 --> 00:03:32.463
background in the foreground.

00:03:32.913 --> 00:03:35.283
This is a powerful tool for
creating designs that are easy

00:03:35.283 --> 00:03:36.453
to understand and navigate.

00:03:36.933 --> 00:03:39.333
By using contrast, you can make
elements stand out from the

00:03:39.333 --> 00:03:42.303
surroundings and draw attention
to specific parts of your design.

00:03:43.763 --> 00:03:45.953
You can probably imagine in some of
your favorite apps, that there are

00:03:45.953 --> 00:03:49.254
areas  that are called out as specific
or grouped by putting them within a

00:03:49.254 --> 00:03:52.884
box or wrapping them in a border that's
essentially figure and ground at work.

00:03:52.884 --> 00:03:55.374
It's separating that box, that
card from everything else there.

00:03:55.943 --> 00:03:57.344
Okay, so now let's talk about color.

00:03:57.494 --> 00:04:00.104
A little bit of color can help
and too much can be a problem.

00:04:01.274 --> 00:04:03.794
Color is a powerful tool in
any designer's arsenal, but

00:04:03.794 --> 00:04:05.054
it's also a double-edged sword.

00:04:05.354 --> 00:04:07.604
Relying on too much color
can lead to designs that fail

00:04:07.604 --> 00:04:08.804
for a variety of reasons.

00:04:09.194 --> 00:04:12.164
For instance, colorblind users may
struggle to distinguish between

00:04:12.164 --> 00:04:15.024
different elements  as a reminder
of something like 10% of all

00:04:15.024 --> 00:04:16.524
men have color deficient vision.

00:04:16.854 --> 00:04:18.024
That's more than you might think.

00:04:18.714 --> 00:04:22.014
Conversely too much use of color can make
it difficult for people to understand

00:04:22.014 --> 00:04:23.214
what colors are meant to convey.

00:04:23.974 --> 00:04:26.614
Back when I was working as a user
experience designer at Microsoft,

00:04:27.264 --> 00:04:30.294
it was common practice to design
interfaces in gray scale first.

00:04:30.774 --> 00:04:33.084
This was  a way to ensure that
the design was strong enough to

00:04:33.084 --> 00:04:35.724
stand on its own without relying
on color, to convey meaning.

00:04:36.504 --> 00:04:37.734
Once the design was solid.

00:04:37.764 --> 00:04:40.464
We'd add color to enhance the
experience, not to define it.

00:04:41.334 --> 00:04:44.604
A truly successful design maintains
its integrity, even in black and white.

00:04:45.054 --> 00:04:47.934
This is a Testament to the strength
of its structure, spacing and

00:04:47.934 --> 00:04:49.254
overall harmony of elements.

00:04:49.674 --> 00:04:51.894
These are principles rooted
deeply in gestalt theory.

00:04:52.434 --> 00:04:54.894
When color isn't the primary
means of conveying information.

00:04:54.924 --> 00:04:57.234
It can be used to draw
attention to specific elements.

00:04:57.564 --> 00:05:00.804
This is where the gestalt principle
of similarity comes into play by

00:05:00.804 --> 00:05:03.864
using color to make certain elements
stand out, you can guide the user's

00:05:03.864 --> 00:05:05.514
eye and create a sense of hierarchy.

00:05:06.304 --> 00:05:06.874
Think about it.

00:05:07.024 --> 00:05:10.534
If you're filling out a web form and one
of the fields is red, it probably means

00:05:10.534 --> 00:05:11.704
there's something wrong with that field.

00:05:11.704 --> 00:05:12.034
Right.

00:05:12.424 --> 00:05:12.874
There you go.

00:05:12.934 --> 00:05:13.684
That's similarity.

00:05:13.714 --> 00:05:15.964
We're breaking the rule to draw
your attention to something.

00:05:17.124 --> 00:05:20.364
Anyway, just taught principles are
really powerful tools for designers.

00:05:20.514 --> 00:05:22.914
They help us understand how
people perceive and interpret

00:05:22.914 --> 00:05:23.694
the world around them.

00:05:23.724 --> 00:05:26.094
And they provide a framework
for creating designs that are

00:05:26.094 --> 00:05:27.534
intuitive and easy to use.

00:05:27.834 --> 00:05:30.684
By understanding these principles,
we can create designs that are not

00:05:30.684 --> 00:05:33.834
only visually appealing, but also
more functional and effective.

00:05:34.494 --> 00:05:36.624
I'm sure you've heard the old
trope about how breaking the

00:05:36.624 --> 00:05:38.034
rules is the key to great design.

00:05:39.084 --> 00:05:39.564
In truth.

00:05:39.924 --> 00:05:41.694
It's hard to break the
rules in a useful way.

00:05:41.694 --> 00:05:43.464
If you don't understand
them in the first place.

00:05:44.314 --> 00:05:46.984
Just all principles, provide a
solid foundation for understanding

00:05:46.984 --> 00:05:49.504
how people perceive and
interpret the world around them.

00:05:49.754 --> 00:05:52.034
And they can help you create
designs that are both visually

00:05:52.034 --> 00:05:53.324
appealing and easy to use.