Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Design patterns are visual strategies for solving common usability problems. Design patterns keep the cognitive load to a minimum by making interfaces feel intuitive. When I say cognitive load, I mean the mental effort involved in solving a problem or making a decision.
Vocabulary
Design patterns: visual strategies for solving common usability problems.
Cognitive load: the mental effort involved in solving a problem or making a decision.
Further Reading
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Hi, my name is Anwar.
0:09
I'm a designer, a developer,
and a teacher at Treehouse.
0:11
My pronouns are he/him.
0:14
I'm here today to introduce
you to design patterns.
0:16
If you're a frequent user of websites and
mobile applications, you're
0:20
already familiar with design patterns,
whether you're aware of it or not.
0:24
Let's check out a few examples and
you'll see what I mean.
0:28
Let's start with a shopping website.
0:32
I'm looking at Patagonia,
a store that sells clothing and gear
0:35
for outdoor sports.
0:38
Take a look at the site for a moment.
0:40
Do you instantly recognize
what type of site this is?
0:42
How many features in the interface
look immediately familiar?
0:46
When I loaded the site, I instantly
knew it was called Patagonia,
0:50
thanks to the logo in
the upper left corner.
0:54
I saw several clues that
this was a shopping site:
0:57
the word shop in the top navigation,
the shopping cart icon in
1:00
the upper right corner, and
the product categories as I scroll down.
1:05
I felt confident I could search the site
by clicking the magnifying glass icon.
1:12
Patagonia actually does something a little
different with its hero illustration,
1:19
encouraging users to volunteer
to support environmental causes.
1:24
And as I scroll down,
1:28
Patagonia continues to provide evidence of
its commitment to a cleaner environment,
1:30
as well as combining images and text
to make it clear what Patagonia offers:
1:35
clothing and gear for outdoor sports like
rock climbing, snowboarding, and fishing.
1:41
How about a school website?
1:47
I'm checking out arizona.edu,
the website for the University
1:49
of Arizona, where I received my
undergraduate degree in graphic design.
1:53
What features of this interface
are you familiar with?
1:58
Once again,
I knew where I
2:02
was on the internet thanks
to the logo in the upper left corner.
2:03
I recognize the search
bar in the upper right,
2:08
as well as the top navigation allowing
me to browse the site's content.
2:11
The hero banner welcomes
students back to school and
2:16
directs our attention to a call to action
extending new students a Wildcat Welcome.
2:19
As I scroll down, I see featured content,
news about the school's
2:25
COVID-19 response, and a footer
full of resources and social links.
2:30
One last test. Let's
check out a mobile app.
2:37
How about Spotify?
2:41
What interface features
do you recognize here?
2:42
Mobile apps tend to look and
function differently than websites.
2:46
We tapped the Spotify logo
to launch the app, and
2:50
the logo was featured
on the splash screen.
2:53
But once we're inside the app,
I don't see the logo anywhere.
2:56
I do recognize the links in the tab bar,
3:00
which is found at the bottom
of the screen near my thumb.
3:02
Above the tab bar is a media player.
3:07
I can tap the play button to resume
listening to my most recently paused song,
3:09
or tap the player bar to expand it
and see more controls.
3:15
Try visiting other clothing stores,
college websites, or
3:21
other mobile apps featuring media players.
3:24
Chances are you'll see a whole lot of
similar features to what we saw at
3:27
Patagonia, the University
of Arizona, and Spotify.
3:31
That's because these websites and apps
are taking advantage of design patterns.
3:36
Design patterns are visual strategies for
solving common usability problems.
3:43
Design patterns keep cognitive
load to a minimum by making
3:50
interfaces feel intuitive.
3:55
When I say cognitive load,
3:57
I mean the mental effort involved in
solving a problem or making a decision.
3:59
When first learning to design web
interfaces, it's tempting to try creating
4:06
something wildly innovative to make
your product stand out from the crowd.
4:11
But make your design too unrecognizable
and users won't be able to understand it.
4:16
If users can't quickly identify
what your site is called,
4:22
what content it offers, and
how to navigate it, they leave.
4:25
Jacob Nielsen, a web usability
expert and co-founder
4:31
of the Nielsen Norman
Group, describes it this way.
4:35
Users spend most of their
time on other sites.
4:38
This means they prefer your site to
work the same way as all the other
4:42
sites they already know.
4:45
Think about driving in a foreign country.
4:49
Even if you can't read the local language,
you're bound to recognize stop signs,
4:51
since international conventions
dictate their size, shape, and color.
4:56
Which is a good thing.
5:01
If a designer created a bright
green, star-shaped stop sign,
5:03
you wouldn't applaud them for
being innovative, you'd crash your car.
5:07
This doesn't mean there's no room for
innovation in design, or
5:12
that patterns are something you'll simply
copy and paste into your own design.
5:16
If this were true, then every shopping
website would look identical to Patagonia,
5:21
and every music app would
behave just like Spotify.
5:26
Design patterns aren't intended
to create identical experiences.
5:30
They're foundational pieces to
help users minimize the time and
5:34
effort spent on each interaction.
5:39
Design patterns also streamline
communication within design and
5:42
development teams by providing a common
language full of familiar terms.
5:46
Before we look at some
common design patterns,
5:52
we need to understand
the motivations and
5:55
mindset of users whenever they
encounter a new website or app.
5:57
We'll take a look at user
psychology in our next video.
6:02
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up