Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed UX Design Patterns!
You have completed UX Design Patterns!
Preview
To recap what we’ve covered so far, recognizable patterns help users navigate through unfamiliar websites and apps with a minimum of cognitive effort. But we also learned that design patterns can’t just be copied and pasted into our design. So how do we approach implementing existing patterns? Before choosing a pattern, there are four preparatory steps to take in your design. Identifying the problem, defining the context, finding a common solution, and checking out examples.
Four steps to take before implementing a design pattern
-
Identify the problem
- What does the user want to do?
- What is preventing the user from doing it?
-
Define the context
- Where does the problem occur?
-
Find a common solution
- Does an existing pattern address this problem?
-
Check out examples
- Where and how is this pattern being implemented?
Vocabulary
- Web analytics: the collection and analysis of data to help understand user behavior across web pages.
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
To recap what we've covered so far,
recognizable patterns help users navigate
0:00
through unfamiliar websites and
apps with a minimum of cognitive effort.
0:06
But we also learned that design
patterns can't just be copied and
0:11
pasted into our design.
0:15
So how do we approach
implementing existing patterns?
0:17
Before choosing a pattern,
there are four preparatory steps to take
0:21
your design through: identifying
the problem, defining the context,
0:25
finding a common solution,
and checking out examples.
0:31
Let's take a closer look
at each of these steps,
0:35
starting with identifying the problem.
0:38
Completing this step involves
answering two questions,
0:41
what does the user want to do?
0:45
And what is preventing
the user from doing it?
0:47
If your website or app has already
launched, you can use web analytics to
0:50
identify the problem users
are having with your interface.
0:55
Web analytics means the collection and
0:59
analysis of data to help understand
user behavior across web pages.
1:02
If users are failing to
complete a specific task,
1:07
such as filling out a checkout form,
1:11
analytics provide detailed information
about where users are bailing out.
1:13
Are users frustrated because
you're requiring them to log in?
1:18
Are they completing the shipping
information screen,
1:23
then abandoning the checkout on
the billing information screen?
1:26
Or maybe your desktop users are
completing the checkout process
1:29
at a much higher
rate than mobile users.
1:32
The more detail you can
gather about user behavior,
1:40
the better you can define the context
of where the problem occurs.
1:43
Once you've completed these first two
steps, you'll want to do some research
1:49
to discover how other websites and
apps have solved the same problem.
1:54
To help you locate common patterns,
I've included a link to a collection of
1:58
UI patterns and inspiration from a website
called UX Library in the Teacher's Notes.
2:03
This is a helpful resource to keep
bookmarked since there are quite
2:09
a number of pattern
libraries in existence, and
2:13
some of them charge money to
access advanced features.
2:16
Let's check out a few.
2:19
Checklist Design calls itself
a collection of the best design practices.
2:22
Scrolling through the list of content
categories, I see one called Flows.
2:27
If users are bailing out from our website
or app during the checkout process,
2:32
this looks like a good place to start.
2:37
Under making a payment, I see a series
of six steps outlining a successful
2:39
credit card payment process that I
can compare against my current flow.
2:45
While Checklist Design can help me
identify a common problem-solving pattern,
2:51
it doesn't include screenshots of websites
or apps making use of the pattern.
2:57
So while this is a useful resource,
it can't help us with
3:02
our final preparatory step,
checking out examples.
3:06
Checking out examples might take some
creativity, as many of these pattern
3:13
resources might not entirely
match what you're looking for.
3:17
For example, UX Archive describes
itself as the world's largest
3:21
library of mobile user flows, and
it looks like it's free to use.
3:26
If I click purchasing in the sidebar,
3:30
I see purchasing flows from
a variety of mobile apps.
3:33
So if my current product is a mobile app,
this could be an inspiring collection.
3:37
If my current project is
an e-commerce website, however,
3:44
a site like Page Flows offers desktop and
mobile flows, as well as mobile apps.
3:48
I'll click desktop and scroll down
to the making a purchase section.
3:54
And here are 17 different videos
documenting ecommerce flows.
4:01
The catch here is that Page Flows
is a subscription service and
4:06
I need to pay to view the results.
4:10
If your project has sufficient budget,
this might be a worthwhile expense.
4:13
But if not, there's nothing preventing you
from testing out these sites yourself.
4:17
I've never heard of Moonpig,
but I can visit the site now,
4:22
test out adding and removing
items from the cart, and
4:26
test out a few of the checkout screens
without actually making a purchase.
4:29
So when I say checking out
examples takes some creativity,
4:36
don't forget to take notes on
your own experience as a user.
4:40
If you've experienced a really
frustrating checkout flow recently, or
4:44
a particularly smooth one, jot
down some notes in your sketchbook.
4:48
What pain points did you encounter?
4:53
What experiences kept your
slow thinking to a minimum?
4:55
Great UX designers learn something
new each time they use the internet.
4:59
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