Mike Bifulco: This is Tiny Improvements.
I'm Mike by ko
Have you ever felt that you've seen a
design that just makes sense to you, but
you couldn't quite put your finger on why.
At some point, we're all faced with
the challenge of creating a design
that works intuitively and looks great.
When building a new interface,
there's a temptation to lean heavily
on obvious design elements, like
color or shape, or to use cards
and borders to hold bits of UI.
It makes sense.
These are easily visible to
the person using your app.
What you may not realize is why
these elements are so effective.
The people who use our designs
are silently and subconsciously
navigating questions.
Like what's the most
important thing on this page.
What's the relationship between
these elements and what's the best
way to navigate this interface.
Enter.
Gestalt principles, a set of psychological
concepts that go beyond aesthetics.
To form the foundation of how we
see and interpret user interfaces.
This is the bit of our mind that
guides us to parse the whole
picture by understanding the
relationships between its parts.
The gist of understanding gestalt
principles for design is this,
our brains are used to grouping things
together based on a few patterns.
These patterns are the foundation of
how we perceive the world around us.
By understanding these patterns.
We can create designs that are
easy to understand and navigate.
Additionally by breaking these patterns,
we can intentionally draw attention
to specific elements in our designs.
Some of the basic install
principles in short, our
past experience, our brains use past
experiences to interpret new information.
Proximity elements that are close
together are perceived as a group.
.Similarity elements that look
similar are perceived as a group.
Figuring ground our brains, separate
elements into background and foreground.
And finally assymetry in order our
brains perceive objects as symmetrical
shapes that form around their center.
There are a few more principles.
This isn't a comprehensive list and
they're all worth understanding.
But for now let's focus on how
these principles can be applied
to create better designs.
First up past experience.
Let's talk about the power of familiarity.
In your mind picture, a web forum used
to collect someone's mailing address.
You probably see a series of
fields, each labeled with a
specific piece of information.
The street address, city, state,
postal code, maybe country.
Where do each of these fields go?
If you're like most people, you
probably see street address at the top
followed by city, state and zip code.
Of course, this may vary based on where
you're from, but it's a perfect example
of how past experience influences
our perception of new information.
We've seen this pattern so many times that
we instantly recognize it as an address,
and we know how to interact with it.
Okay.
So let's talk about the power of
grouping with proximity and similarity.
These are two of the most powerful
tools in a designer's toolbox.
They allow us to group elements together
in a way that makes sense to the user.
This is why one of the fundamental
building blocks of most CSS
design systems is the grid.
It's a way to ensure that the space
in your design is consistent and
harmonious, guiding the users.
I and creating a sense
of order and structure.
What does that mean?
Well, it means that the space around
in between elements is just as
important as the elements themselves.
It's the difference between
a cluttered confusing design
and a clean, intuitive one.
Consistency is critical here.
Spacing related elements
should be consistent.
And the space between unrelated
elements should be distinct.
Up next to the power of
contrast with figure and ground.
The gestalt principle of figure
and ground is all about contrast.
It's the idea that our brains
separate elements into the
background in the foreground.
This is a powerful tool for
creating designs that are easy
to understand and navigate.
By using contrast, you can make
elements stand out from the
surroundings and draw attention
to specific parts of your design.
You can probably imagine in some of
your favorite apps, that there are
areas that are called out as specific
or grouped by putting them within a
box or wrapping them in a border that's
essentially figure and ground at work.
It's separating that box, that
card from everything else there.
Okay, so now let's talk about color.
A little bit of color can help
and too much can be a problem.
Color is a powerful tool in
any designer's arsenal, but
it's also a double-edged sword.
Relying on too much color
can lead to designs that fail
for a variety of reasons.
For instance, colorblind users may
struggle to distinguish between
different elements as a reminder
of something like 10% of all
men have color deficient vision.
That's more than you might think.
Conversely too much use of color can make
it difficult for people to understand
what colors are meant to convey.
Back when I was working as a user
experience designer at Microsoft,
it was common practice to design
interfaces in gray scale first.
This was a way to ensure that
the design was strong enough to
stand on its own without relying
on color, to convey meaning.
Once the design was solid.
We'd add color to enhance the
experience, not to define it.
A truly successful design maintains
its integrity, even in black and white.
This is a Testament to the strength
of its structure, spacing and
overall harmony of elements.
These are principles rooted
deeply in gestalt theory.
When color isn't the primary
means of conveying information.
It can be used to draw
attention to specific elements.
This is where the gestalt principle
of similarity comes into play by
using color to make certain elements
stand out, you can guide the user's
eye and create a sense of hierarchy.
Think about it.
If you're filling out a web form and one
of the fields is red, it probably means
there's something wrong with that field.
Right.
There you go.
That's similarity.
We're breaking the rule to draw
your attention to something.
Anyway, just taught principles are
really powerful tools for designers.
They help us understand how
people perceive and interpret
the world around them.
And they provide a framework
for creating designs that are
intuitive and easy to use.
By understanding these principles,
we can create designs that are not
only visually appealing, but also
more functional and effective.
I'm sure you've heard the old
trope about how breaking the
rules is the key to great design.
In truth.
It's hard to break the
rules in a useful way.
If you don't understand
them in the first place.
Just all principles, provide a
solid foundation for understanding
how people perceive and
interpret the world around them.
And they can help you create
designs that are both visually
appealing and easy to use.
