1
00:00:00,000 --> 00:00:09,491
[MUSIC]

2
00:00:09,491 --> 00:00:11,180
Hi, my name is Anwar.

3
00:00:11,180 --> 00:00:14,069
I'm a designer, a developer,
and a teacher at Treehouse.

4
00:00:14,069 --> 00:00:16,265
My pronouns are he/him.

5
00:00:16,265 --> 00:00:19,510
I'm here today to introduce
you to design patterns.

6
00:00:20,820 --> 00:00:24,335
If you're a frequent user of websites and
mobile applications, you're

7
00:00:24,335 --> 00:00:28,860
already familiar with design patterns,
whether you're aware of it or not.

8
00:00:28,860 --> 00:00:31,260
Let's check out a few examples and
you'll see what I mean.

9
00:00:32,760 --> 00:00:35,020
Let's start with a shopping website.

10
00:00:35,020 --> 00:00:38,687
I'm looking at Patagonia,
a store that sells clothing and gear 

11
00:00:38,687 --> 00:00:40,480
for outdoor sports.

12
00:00:40,480 --> 00:00:42,430
Take a look at the site for a moment.

13
00:00:42,430 --> 00:00:46,140
Do you instantly recognize
what type of site this is?

14
00:00:46,140 --> 00:00:50,360
How many features in the interface
look immediately familiar?

15
00:00:50,360 --> 00:00:54,121
When I loaded the site, I instantly 
knew it was called Patagonia,

16
00:00:54,121 --> 00:00:56,620
thanks to the logo in
the upper left corner.

17
00:00:57,720 --> 00:01:00,850
I saw several clues that
this was a shopping site:

18
00:01:00,850 --> 00:01:05,515
the word shop in the top navigation,
the shopping cart icon in

19
00:01:05,515 --> 00:01:10,820
the upper right corner, and
the product categories as I scroll down.

20
00:01:12,510 --> 00:01:17,480
I felt confident I could search the site
by clicking the magnifying glass icon.

21
00:01:19,380 --> 00:01:24,121
Patagonia actually does something a little
different with its hero illustration,

22
00:01:24,121 --> 00:01:28,910
encouraging users to volunteer
to support environmental causes.

23
00:01:28,910 --> 00:01:30,271
And as I scroll down,

24
00:01:30,271 --> 00:01:35,798
Patagonia continues to provide evidence of
its commitment to a cleaner environment,

25
00:01:35,798 --> 00:01:41,260
as well as combining images and text
to make it clear what Patagonia offers:

26
00:01:41,260 --> 00:01:45,820
clothing and gear for outdoor sports like
rock climbing, snowboarding, and fishing.

27
00:01:47,240 --> 00:01:49,450
How about a school website?

28
00:01:49,450 --> 00:01:53,508
I'm checking out arizona.edu,
the website for the University

29
00:01:53,508 --> 00:01:58,750
of Arizona, where I received my 
undergraduate degree in graphic design.

30
00:01:58,750 --> 00:02:01,430
What features of this interface
are you familiar with?

31
00:02:02,560 --> 00:02:03,286
Once again,
I knew where I

32
00:02:03,286 --> 00:02:08,490
was on the internet thanks
to the logo in the upper left corner.

33
00:02:08,490 --> 00:02:11,197
I recognize the search
bar in the upper right,

34
00:02:11,197 --> 00:02:15,440
as well as the top navigation allowing
me to browse the site's content.

35
00:02:16,520 --> 00:02:19,542
The hero banner welcomes
students back to school and

36
00:02:19,542 --> 00:02:24,680
directs our attention to a call to action
extending new students a Wildcat Welcome.

37
00:02:25,790 --> 00:02:30,783
As I scroll down, I see featured content,
news about the school's

38
00:02:30,783 --> 00:02:36,230
COVID-19 response, and a footer
full of resources and social links.

39
00:02:37,850 --> 00:02:41,070
One last test. Let's 
check out a mobile app.

40
00:02:41,070 --> 00:02:42,730
How about Spotify?

41
00:02:42,730 --> 00:02:46,200
What interface features
do you recognize here?

42
00:02:46,200 --> 00:02:50,220
Mobile apps tend to look and
function differently than websites.

43
00:02:50,220 --> 00:02:53,224
We tapped the Spotify logo
to launch the app, and

44
00:02:53,224 --> 00:02:56,540
the logo was featured
on the splash screen.

45
00:02:56,540 --> 00:03:00,620
But once we're inside the app,
I don't see the logo anywhere.

46
00:03:00,620 --> 00:03:02,898
I do recognize the links in the tab bar,

47
00:03:02,898 --> 00:03:07,140
which is found at the bottom
of the screen near my thumb.

48
00:03:07,140 --> 00:03:09,990
Above the tab bar is a media player.

49
00:03:09,990 --> 00:03:15,239
I can tap the play button to resume
listening to my most recently paused song,

50
00:03:15,239 --> 00:03:19,060
or tap the player bar to expand it 
and see more controls.

51
00:03:21,200 --> 00:03:24,539
Try visiting other clothing stores,
college websites, or

52
00:03:24,539 --> 00:03:27,660
other mobile apps featuring media players.

53
00:03:27,660 --> 00:03:31,815
Chances are you'll see a whole lot of
similar features to what we saw at

54
00:03:31,815 --> 00:03:36,030
Patagonia, the University 
of Arizona, and Spotify.

55
00:03:36,030 --> 00:03:40,740
That's because these websites and apps
are taking advantage of design patterns.

56
00:03:43,734 --> 00:03:48,790
Design patterns are visual strategies for
solving common usability problems.

57
00:03:50,610 --> 00:03:55,392
Design patterns keep cognitive
load to a minimum by making

58
00:03:55,392 --> 00:03:57,840
interfaces feel intuitive.

59
00:03:57,840 --> 00:03:59,750
When I say cognitive load,

60
00:03:59,750 --> 00:04:05,080
I mean the mental effort involved in
solving a problem or making a decision.

61
00:04:06,830 --> 00:04:11,297
When first learning to design web
interfaces, it's tempting to try creating

62
00:04:11,297 --> 00:04:16,600
something wildly innovative to make
your product stand out from the crowd.

63
00:04:16,600 --> 00:04:22,160
But make your design too unrecognizable
and users won't be able to understand it.

64
00:04:22,160 --> 00:04:25,935
If users can't quickly identify
what your site is called,

65
00:04:25,935 --> 00:04:29,870
what content it offers, and
how to navigate it, they leave.

66
00:04:31,140 --> 00:04:35,199
Jacob Nielsen, a web usability 
expert and co-founder

67
00:04:35,199 --> 00:04:38,557
of the Nielsen Norman
Group, describes it this way.

68
00:04:38,557 --> 00:04:42,260
Users spend most of their
time on other sites.

69
00:04:42,260 --> 00:04:45,752
This means they prefer your site to 
work the same way as all the other 

70
00:04:45,752 --> 00:04:47,700
sites they already know.

71
00:04:49,120 --> 00:04:51,860
Think about driving in a foreign country.

72
00:04:51,860 --> 00:04:56,640
Even if you can't read the local language,
you're bound to recognize stop signs,

73
00:04:56,640 --> 00:05:01,620
since international conventions
dictate their size, shape, and color.

74
00:05:01,620 --> 00:05:03,530
Which is a good thing.

75
00:05:03,530 --> 00:05:07,003
If a designer created a bright
green, star-shaped stop sign,

76
00:05:07,003 --> 00:05:11,390
you wouldn't applaud them for
being innovative, you'd crash your car.

77
00:05:12,800 --> 00:05:16,226
This doesn't mean there's no room for
innovation in design, or

78
00:05:16,226 --> 00:05:21,240
that patterns are something you'll simply
copy and paste into your own design.

79
00:05:21,240 --> 00:05:26,214
If this were true, then every shopping
website would look identical to Patagonia,

80
00:05:26,214 --> 00:05:29,310
and every music app would
behave just like Spotify.

81
00:05:30,350 --> 00:05:34,830
Design patterns aren't intended
to create identical experiences.

82
00:05:34,830 --> 00:05:39,160
They're foundational pieces to
help users minimize the time and

83
00:05:39,160 --> 00:05:42,450
effort spent on each interaction.

84
00:05:42,450 --> 00:05:46,527
Design patterns also streamline
communication within design and

85
00:05:46,527 --> 00:05:51,120
development teams by providing a common
language full of familiar terms.

86
00:05:52,500 --> 00:05:55,284
Before we look at some
common design patterns,

87
00:05:55,284 --> 00:05:57,720
we need to understand 
the motivations and

88
00:05:57,720 --> 00:06:02,280
mindset of users whenever they
encounter a new website or app.

89
00:06:02,280 --> 00:06:05,200
We'll take a look at user
psychology in our next video.