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 in iconography can help but

hardly ever is a user interface self explanatory.

And if you do think your app is intuitive and

obvious, I recommend doing some user testing and

putting it in front of real people without providing your own explanation.

Chances are people will get lost pretty quickly, and

you'll realize that you need some kind of tutorialization.

In app tutorials, which are sometimes called on boarding,

should guide the users through their first steps and

help elevate them to intermediate users as quickly as possible.

Let's take a look at few patterns that can help.

When you first log in to an application for the first time, what do users see?

Here, I've created a simple mock-up for

a web application where users can upload photos to a gallery.

But there's one thing missing,

users haven't put in any of their data yet and there's no photos here.

So what do they see instead?

When an application doesn't have any user data yet,

this is often referred to as the blank slate.

Here we want to do two things.

First, we want to give users and

idea of what the app might look like once it's populated with data.

So let's add some placeholder photos along with some text that says just that.

So I'll add some text, and it'll say

Here's what your gallery will look

like after you've uploaded photos.

And we'll mix this a little bit, larger,

that's good and then let's add a couple

of image placeholders here, and

I'll just sort of paste these right along,

center them, let's make another row and that's good.

This is a good start but

the second thing we need to do is guide the user toward the first action.

This gets into other patterns that are sometimes called a walk-through or

a guided tour.

As they go through each step for the first time,

we can provide some additional helper text that calls out the action and

intentionally looks incongruent with the design.

So let's add some text here and we'll say,

Upload your first photo.

And we don't want the text to be kind of straight with the rest of the design.

We'll put it on a bit of an angle, maybe make it bold and

a little larger in size so that it stands out a bit more as some

meta instructions that are not necessarily part of the interface normally.

Next, I will type in arrow into a search box up there.

And we want this arrow to be pointing at the Upload button from

this instructional text.

So in the inspector here,

I can remove the arrow head on the left side, so it's just pointing.

And then I can just drag these handles here and

I'll even pull this middle handle to make it a little bit curvy there.

Again, to make it with the rest of the design.

So again, in this case, notice how the text and the arrow are curvy and organic.

They don't follow the straight geometric lines of the app.

This helps draw attention to them, and it also informs the user

that these are meta elements that are not normally present.

That about wraps things up for tutorialization patterns and for

UI patterns.

There are dozens and even hundreds more, but

that should help get you started thinking in the right direction.

In the next several videos, we're going to shift our focus away from UI patterns and

take a look at persuasive patterns.