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
When a user jumps into a phone app or a web application for the first time, they need to be given some guidance. Using familiar design patterns and iconography can help, but hardly ever is a user interface self-explanatory.
Resources
- UI Patterns - UI Patterns is one of the most comprehensive resources for both UI patterns and behavioral patterns.
Downloads
- Balsamiq Mockups - Balsamiq Mockups is the drawing tool used in these lessons. If you'd like to follow along using the same tool, download and install it. However, any other drawing tool (including pencil and paper) will work fine.
- Project Files - This is the Balsamiq Mockup file that was created during these lessons (as it appears at the end of the course). It's not necessary to download it, it's just here for your review.
When a user jumps into a phone app or
a web application for
0:00
the first time,
they need to be given some guidance.
0:03
Using familiar design patterns
in iconography can help but
0:06
hardly ever is a user
interface self explanatory.
0:10
And if you do think your
app is intuitive and
0:14
obvious, I recommend doing
some user testing and
0:17
putting it in front of real people
without providing your own explanation.
0:20
Chances are people will get
lost pretty quickly, and
0:24
you'll realize that you need
some kind of tutorialization.
0:27
In app tutorials,
which are sometimes called on boarding,
0:32
should guide the users
through their first steps and
0:36
help elevate them to intermediate
users as quickly as possible.
0:39
Let's take a look at few
patterns that can help.
0:43
When you first log in to an application
for the first time, what do users see?
0:46
Here, I've created a simple mock-up for
0:51
a web application where users
can upload photos to a gallery.
0:54
But there's one thing missing,
0:59
users haven't put in any of their data yet
and there's no photos here.
1:01
So what do they see instead?
1:06
When an application doesn't
have any user data yet,
1:08
this is often referred
to as the blank slate.
1:10
Here we want to do two things.
1:14
First, we want to give users and
1:17
idea of what the app might look
like once it's populated with data.
1:18
So let's add some placeholder photos
along with some text that says just that.
1:23
So I'll add some text, and it'll say
1:29
Here's what your gallery will look
1:34
like after you've uploaded photos.
1:39
And we'll mix this a little bit, larger,
1:46
that's good and then let's add a couple
1:52
of image placeholders here, and
1:57
I'll just sort of paste these right along,
2:01
center them, let's make another row and
that's good.
2:06
This is a good start but
2:14
the second thing we need to do is guide
the user toward the first action.
2:17
This gets into other patterns that
are sometimes called a walk-through or
2:22
a guided tour.
2:27
As they go through each step for
the first time,
2:28
we can provide some additional helper
text that calls out the action and
2:31
intentionally looks
incongruent with the design.
2:36
So let's add some text here and we'll say,
2:39
Upload your first photo.
2:44
And we don't want the text to be kind of
straight with the rest of the design.
2:50
We'll put it on a bit of an angle,
maybe make it bold and
2:54
a little larger in size so
that it stands out a bit more as some
2:59
meta instructions that are not necessarily
part of the interface normally.
3:06
Next, I will type in arrow
into a search box up there.
3:11
And we want this arrow to be
pointing at the Upload button from
3:18
this instructional text.
3:23
So in the inspector here,
3:25
I can remove the arrow head on
the left side, so it's just pointing.
3:26
And then I can just drag
these handles here and
3:32
I'll even pull this middle handle to
make it a little bit curvy there.
3:36
Again, to make it with
the rest of the design.
3:41
So again, in this case, notice how the
text and the arrow are curvy and organic.
3:46
They don't follow the straight
geometric lines of the app.
3:54
This helps draw attention to them,
and it also informs the user
3:56
that these are meta elements
that are not normally present.
4:00
That about wraps things up for
tutorialization patterns and for
4:05
UI patterns.
4:09
There are dozens and
even hundreds more, but
4:10
that should help get you started
thinking in the right direction.
4:13
In the next several videos, we're going to
shift our focus away from UI patterns and
4:17
take a look at persuasive patterns.
4:21
You need to sign up for Treehouse in order to download course files.
Sign up