This course will be retired on March 8, 2022. We recommend "UX Design Patterns" for up-to-date content.
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
In addition to form validation, there are several other design patterns that can be applied to user input.
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.
In addition to form validation,
0:00
there are several other design patterns
that can be applied to user input.
0:02
When I schedule appointments
at my veterinarian for
0:06
my cats, the form asks for three
different dates that might work for me,
0:09
and they can be prioritized from
most desirable to least desirable.
0:14
Let's see how a problem like
picking prioritized dates
0:18
can be resolved with some design patterns.
0:22
We want the user to be able to add
appointment dates to a list, and
0:26
then reorganize that list according to
their most desired date and least desired.
0:31
The first thing we need to add
is a way to add these dates.
0:37
We could do this with say a text input, so
0:41
I could go to Forms here, and
I could drag out a Text Input like this.
0:46
But it would be very challenging
to get the user to format
0:52
the date in the way that the form is
expecting, so let's get rid of that.
0:57
Instead, when there's a limited
set of possibilities,
1:03
it's best to provide specialized input.
1:06
Many forms take dates using drop down
menus of days, months, and years.
1:09
That's probably best when there's a wide
number of possible dates such as when
1:15
you're asking the user for
their date of birth.
1:19
But if we just need a day that's in
the near future like within a few weeks.
1:22
It's best to use a design pattern
called a calendar picker.
1:27
Balsamiq has a field element just for
that in the forms section,
1:32
and they call it a Date Chooser.
1:37
So I'm going to scroll over
here to the Date Chooser and
1:42
drag that into the canvas area.
1:46
And when a user clicks this form element,
a calendar will pop up,
1:50
so let's add that calendar with
a small arrow to the left.
1:56
In Balsamiq,
you can find interface elements quickly
2:01
by typing in the search box up
in the right, so let's do that.
2:04
We'll type in Calendar,
and there it is, and
2:08
I'll drag that over here and
make it a little larger.
2:12
And then I want a little
arrow on the left side.
2:19
Believe they call it a Caret,
so we'll do a Caret Left,
2:23
and I'll just drag that so
it's flush with the calendar there.
2:29
And let's line that up a little better,
there we go.
2:36
So in the calendar picker pattern,
2:39
the user can use the arrows
in the top left and
2:41
right to change months, and
then click on a date to select it.
2:46
Sometimes if a range of
dates needs to be selected,
2:53
such as in the case of booking a hotel for
several days.
2:56
The user can click on the first day in
the range and then select the end date.
3:00
In this case, where we're adding
dates to a prioritized list,
3:04
we should add a button so
the user can confirm the selected date.
3:09
Once a user has picked a date,
they'll need to add it to the list.
3:14
So let's go back to Forms here,
and find the Button.
3:18
And I'm gonna put that just
below this calendar picker here,
3:24
and we'll change this to say Add Date.
3:31
That finishes the date picker, and
now we need to add the list of dates.
3:35
Each date should have the ability
to be deleted, so let's do that.
3:40
I'm going to use just some rectangles for
that, so I'll go to Common here,
3:46
and there is a rectangle.
3:51
And I'll make it roughly
the same size as the calendar
3:53
picker there, maybe a little thinner.
3:59
Change the Border Style, and
4:05
then I want to add some text to this so
I'll drag out a label here.
4:07
And let's just pick some dates here,
4:14
so here's my most desired date.
4:20
I will make this a little larger.
4:25
There we go, and we want to be
able to delete this too, so let's.
4:29
Add that times icon there, and
let's actually change this to maybe red.
4:42
So it looks like a delete button, and
maybe let's put a circle behind it too.
4:50
So we'll right-click on that,
send it backward, and
4:57
let's actually make that red, and
we'll make the times icon white.
5:02
There we go, this looks a little better.
5:10
So we'll do that, and now we'll just
select all this, and copy and paste it.
5:17
So let's say we've added three dates here,
and we'll just change the days on these.
5:23
And now we have some dates added there.
5:35
However, these dates need
to be prioritized, so
5:37
we can't just add them to a static list.
5:41
It would be really annoying if
the user had to delete items,
5:43
and re-add them just
to rearrange the list.
5:48
We can fix this with a UI
pattern called Drag and Drop.
5:52
In this pattern,
the user can click and drag a handle,
5:56
usually represented by a few
lines that are together.
6:00
And as I drag an item to another place on
the list, the list will rearrange itself.
6:04
So let's add those three lines,
usually this is called a hamburger menu.
6:10
And it looks like Balsamiq calls the Bars,
but
6:16
has thankfully also
tagged it with hamburger.
6:19
So this is a little large,
I'll make this smaller.
6:24
Put this here, the date over a little bit,
and then we'll just copy and paste.
6:28
Those bars and move these dates
over as well, just like that.
6:36
The handles on the left
indicate to the user
6:42
that these items can be
rearranged using drag and drop.
6:46
On a touchscreen, they can tap and
drag with their finger,
6:51
and on a computer they can click and
drag with their mouse cursor.
6:55
Once we're finished with a design pattern,
the solution might seem obvious.
7:00
But remember where we started with this,
we needed to choose dates and
7:04
prioritize those dates.
7:08
We avoided a lot of annoying UI
problems like badly formatted dates,
7:11
or deleting and
re-adding dates just to rearrange them.
7:15
While you're designing,
try to imagine yourself as a user
7:20
going through the process, and think about
the potential problems that might come up.
7:24
Chances are you're not the only one
that's had this problem before, and
7:29
there's a design pattern that can fix it.
7:33
As I mentioned previously,
7:37
we're only reviewing a few design patterns
here to get you started on the right path.
7:38
Be sure to check the notes
associated with these videos for
7:44
more design pattern resources.
7:46
You need to sign up for Treehouse in order to download course files.
Sign up