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
On the web and in mobile apps, it's common for the user to input information in a web form. This comes with many common problems and many patterns we can use to fix them.
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.
[MUSIC]
Earlier we explored the difference between
0:00
UI patterns and persuasive patterns.
0:04
Now we're going to look
closer at some examples and
0:09
we'll start by focusing on UI patterns.
0:13
For the rest of these lessons, we're
going to look at specific problems and
0:16
apply design patterns to fix them.
0:20
First, UI patterns, and
then later persuasive patterns.
0:22
I want to warn you, many of these
patterns may seem like obvious advice,
0:26
because you've probably seen
them before in web apps and
0:31
mobile apps that you've used in the past.
0:33
The thing you should learn to
identify is the initial problem
0:36
because the solution will follow.
0:40
Oftentimes when creating apps, it's easy
to build things a little too quickly and
0:42
create user experience issues.
0:47
But, if you can spot these problems early,
and
0:50
fix them with a pattern, your users
will have a smoother experience.
0:54
The other caveat that I
would like to point out now
0:59
is that this will not be an exhaustive
look at every design pattern out there.
1:03
There is simply way to many to
give each one it's own example.
1:08
Instead, we will break down
patterns into broad categories and
1:13
take a look at a few select
examples to give you an idea
1:17
of the types of problems that
design patterns can solve.
1:21
On the web and in mobile apps,
it's common for
1:25
the user to input
information in a web form.
1:28
And if the user doesn't put in data
in the way the system expects,
1:32
we need to provide the user with
feedback so they can make corrections.
1:37
This is called form validation.
1:42
Let's take a look at a few UI examples and
try to improve them.
1:45
In these lessons i'm going
to use Balsamiq mockups,
1:51
which is available for Windows and Mac OS.
1:55
Check out the notes associated
with this video for
1:58
a link to Balsamiq,
if you don't have it already.
2:01
You don't have to use Balsamiq for these
lessons because really any drawing app or
2:04
mockup program will do.
2:09
Even a pen and paper will work fine.
2:11
I'm just using Balsamiq because I find
it's one of the easiest tools for
2:14
me to use when demonstrating
UI concepts on video.
2:17
First, let's quickly draw out
a typical registration form.
2:22
The fields we want are an email address,
password,
2:27
password confirmation, and a phone number.
2:31
And lastly a submit button
2:34
that says register to indicate
the action we're taking.
2:37
So here in Balsamiq there's a couple
of ways we can create UI elements.
2:41
I'm going to go up to Common here.
2:47
And I just need some text or a label.
2:50
And I'll call this email and
then we're gonna need a button.
2:55
So let's just that grab that now.
3:00
We'll put that down at the bottom and
rename it later.
3:01
And then we're also going
to need an input box.
3:05
So I'll jump over to forms here,
3:09
scroll over to the right and
grab this text input.
3:12
So let's drag that out for Email.
3:20
And I can select these.
3:25
And just Command+C and Command+V.
3:27
To copy them and paste.
3:32
And, I'll rename Email to Password.
3:36
And then we'll just paste again,
3:38
and say Confirm Password.
3:43
And paste one more time And
3:46
double-click to rename this to Phone.
3:50
And then we change the label on
this button by double clicking and
3:56
we'll call this Register.
4:01
Hit enter to confirm.
4:04
So this form is okay on its own but
pause the video and
4:07
think about what might make this better.
4:11
The first thing I notice about this form
is that I don't know what's required and
4:17
what's optional.
4:22
Let's say this service doesn't require
a phone number and it's optional.
4:24
That's great, because personally, I don't
like putting in my phone number into
4:29
services, because I want
to avoid spam calls.
4:32
It's great that it's optional here,
4:36
but how do I know that it's optional
without submitting the form first?
4:38
There's two ways we could approach this.
4:44
We could mark all the required
fields with a red asterisk or
4:46
text that says it's required, since that's
a common pattern across many web forms.
4:51
But in this case, all of the fields
are required, except for the phone.
4:56
So, the second way to approach this,
is to only mark what's optional.
5:02
A typical way to do that
is to include the term
5:08
optional in parenthesis
next to a form field.
5:12
So let's do that now.
5:16
I'll double click on Phone and
I'll add a space and
5:17
in parenthesis I will say it's optional.
5:21
Great, now what happens if the user
puts in a bad email address or
5:26
an invalid phone number?
5:32
And what if they type in a weak password?
5:33
We should always have server side
validation to check the input.
5:36
So if they hit enter to submit the form,
even if they've hacked the JavaScript,
5:41
or have JavaScript disabled,
5:46
the server will still return them to
the same page with the errors highlighted.
5:48
However, that's kind of
a clunky way to find out
5:54
after the fact that
your input was no good.
5:57
Instead, let's add some
real-time form validation.
6:00
Real time form validation is advice
that will pop up when the user moves
6:04
from one form field to the next.
6:09
There are lots of ways you
could display this information.
6:12
But I'll put them in yellow bubbles
to the right of each field.
6:15
A check mark will note a good input and
6:20
an X will show where
corrections need to be made.
6:24
So I'm going to go to containers here and
6:29
I will draw out a rectangle.
6:34
Next to email here.
6:40
That should be good.
6:43
And I want the style to be rounded,
so I'll change that in the inspector,
6:45
and then next I want to add a text label.
6:50
And let's say that this
email address was invalid.
6:57
We'll say in,
7:00
valid email address.
7:03
And let's make that
a little bit larger here.
7:07
That's good.
7:12
And then i'm looking for the X icon.
7:14
So we can just come up to the search
in the upper right here, and
7:18
I think we can find that.
7:23
That's called Times, in this case.
7:24
I actually think I want this Times Circle.
7:27
So we'll put that there.
7:32
And let's change the color on this to red.
7:34
And on this rectangle, we'll change
the background color to a light yellow.
7:39
And I think that looks good so far.
7:47
Let's actually double-click on the input
here to change this to an invalid
7:52
email address.
7:56
We'll see nick@example@com.
7:56
Of course that is wrong.
8:00
And then let's have
a password mismatch here.
8:03
So I'll type in a password first and I'll
just type in a bunch of asterisks here.
8:07
And then I'll only type in a few here.
8:15
And let's copy this, actually let's
make this a little smaller first.
8:18
And then we'll copy all of this stuff.
8:24
Paste it a few times here, because we're
going to need it, for these other two.
8:28
And here we'll say passwords don't match.
8:35
And here it will say that this is
actually a strong password and
8:44
we need to change this to a check mark.
8:49
So let's search icons here for the check.
8:52
There it is and we'll change that to
green and I think that looks okay.
8:56
Contrasting colors and
9:03
shapes can be used to call
attention to information like this.
9:05
And if the user happens to
have a valid response and
9:09
changes it to something that's invalid, or
9:13
if they make a correction these bubbles
can update as the user types input.
9:17
Updating after each character is
particularly useful on the password field,
9:22
we can tell the user if they have weak
password, or a strong password but
9:28
still accept weak passwords,
if they choose to submit them.
9:33
This is actually one form of another
pattern called a password strength meter.
9:38
If you wanted to take this idea a step
further, you could include a set of
9:44
bars below the password box to
indicate the strength of the password.
9:48
This is much better than where we started.
9:54
Now users can get feedback before they
submit the form, which can encourage
9:57
good security practices with stronger
passwords, and it saves some time
10:02
because they don't have to submit
the form to see if their input is valid.
10:07
And if the user happens to submit
the form anyway, these same bubble can
10:11
appear after a page reload once the data
is validated on the server side.
10:16
As you can imagine there
are many more design patterns,
10:23
in the notes associated with these
videos you can find resources that list
10:26
examples of many other
types of design patterns.
10:31
Don't worry about trying
to memorize all of these,
10:34
what's important is learning
to recognize UX problems.
10:37
Then, you can search these resources, or
10:42
search the web, see if there's
a pattern that matches the problem.
10:45
Now, let's move on and
look at some more UI patterns.
10:50
You need to sign up for Treehouse in order to download course files.
Sign up