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
Let’s take a look at the mockup of the form we’ll be building–a mobile food delivery checkout form for a restaurant called Tacos By Roscoe. I’m concentrating on getting just the first screen right, for gathering the user’s delivery information. I’ve included an error reporting screen as well.
Using the Project Files
The project file download is a .fig file. For instructions on importing into Figma, see Import Files Into Figma.
Further reading
- FontAwesome
- Designing for Cognitive Differences
- Cognitive Disabilities and the Web: Where Accessibility and Usability Meet?
- Checkout Usability: Auto-Detect ‘City’ and ‘State’ Inputs Based on the User’s Postal Code (60% of Sites Don’t)
- Form Field Usability: Consider Using Localized Input Masks for ‘Phone’ and Other Restricted Inputs (64% Don’t)
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
Let's take a look at the mockup
of the form we'll be building,
0:00
a mobile food delivery checkout form for
a restaurant called Tacos by Roscoe.
0:04
I'm concentrating on getting
just the first screen right for
0:11
gathering the user's delivery information.
0:15
I've included an error
reporting screen as well.
0:19
Now, let's take a look at the project
files included with this video.
0:22
I've provided a logo icon to work with,
as well as color swatches.
0:27
Our initial design frame labeled
delivery information is 320 pixels wide.
0:33
Many modern phones have
wider viewports, but
0:40
I want to make sure my form is legible
at the smallest possible screen size.
0:43
To get started,
I'll create a header bar and add my logo.
0:50
I'll start with an instance of
my linear gradient component
0:55
from the Design Assets frame.
0:59
I'm resizing the gradient
to 320 pixels by 70 pixels,
1:02
adding an instance of
my taco emoji logo, and
1:08
typing the name of the restaurant in
a Google Font called Nunito Black.
1:12
I'll convert the header into a component
just to keep my content organized.
1:45
And I'll call that logo header.
1:54
Next, I'll create one of my
three navigation buttons for
2:01
my checkout process.
2:05
It's important to give users context clues
2:21
to let them know exactly
where they are and
2:24
how many steps remain.
2:26
Once I've created one button,
2:44
I'll make it a component which
I'll name nav button and
2:47
use Command+D to duplicate twice more to
create two more button instances.
2:53
Now I'll change the color and text of
the billing and the review buttons.
3:04
I could leave these buttons white, but
I'd like to suggest that they're inactive.
3:33
Users can't visit these upcoming stages
without completing the current stage.
3:39
I'll choose a grey color for
3:46
the inactive button, while keeping
an eye on the contrast ratio.
3:48
I want to make sure users with
low vision can still read
3:53
the labels of the upcoming steps.
3:57
I'd like to give users a brief
summary of their order.
4:16
On a desktop screen, I'd have space for
a separate column of order details.
4:31
But on mobile, a brief summary will do
until users reach the review order screen.
4:37
People don't like filling out
credit card details without knowing
4:55
exactly how much they'll be charged.
5:00
To create the fork and knife icon,
I'll head over to fontawesome.com and
5:03
choose Copy Unicode Glyph
on an icon called utensils.
5:09
Font Awesome Free is already available for
use in Figma, so
5:16
I just need to paste in the glyph using
the solid version of that typeface.
5:21
You might notice that as I've been
making components, such as my newest
5:35
component labeled order summary,
5:39
that I've been rearranging them so
that they appear from top to bottom
5:45
in my layers panel,
to reflect their order in my design frame.
5:50
This is completely optional, but
I find it helps me locate design
5:56
components quicker later as I add more and
more layers to my document.
6:00
I'd like to make the form heading,
"Delivery Information", pretty obvious,
6:07
as well as distinguish between required
and optional fields.
6:14
This is something you'll
want to test on users.
6:33
Are they clear which fields
are optional and mandatory?
6:36
Now I'm ready to create some form inputs.
6:51
I'll make them at least 44 pixels high
to respect the target size guideline.
7:03
I'm choosing my form labels
carefully to try to be as clear as
7:28
possible about what information
is needed in each blank.
7:32
By choosing "Your Name" and "Email Address"
7:46
over just plain "Name" and "Email",
I'm aiming for clarity, not concision.
7:55
Users with cognitive disabilities
might struggle with a shorter label.
8:02
Some form fields may need
more than just a label.
8:08
Even if users understand what belongs
in the input labeled email address,
8:12
they may still wonder why
an email address is required.
8:18
I'm creating an explanatory note.
8:23
Receipt will be sent to this address.
8:31
I'm making the text a little lighter, so
8:42
let me double check my background
against my foreground,
8:45
still receives higher than
4.5 to 1 contrast ratio.
8:50
Before I move on, I'll add an additional
rectangle to the name field,
9:08
which I'll call focus indicator.
9:13
I'm using a three pixel stroke
rather than a single pixel and
9:36
a blue color that doesn't
appear elsewhere in my design.
9:38
If the user were to tab to the next field,
9:41
this blue border would shift to indicate
9:47
the email address input is now selected.
9:53
I'm creating blanks for
Street Address which will be required,
9:59
and Apartment or
Office Number which won't.
10:09
You'll notice I'm placing labels
above the form inputs as there isn't
10:21
room to place them side by
side on a mobile screen.
10:26
I'm also not using placeholder text.
10:30
It's tempting to save space by using
placeholder text instead of form labels.
10:33
But then it's up to the user to
remember the purpose of the input
10:39
once they begin typing and
the placeholder disappears.
10:43
Placeholder text also creates
a tricky color contrast problem.
10:48
Make the text too light and
users with low vision can't read it.
10:54
Make it too dark and
users might confuse the placeholder
10:59
with a pre-filled form input.
11:03
I'm assuming this particular food delivery
service is limited to the United States,
11:08
so I'll reduce the number of form inputs
11:13
by providing instructions
indicating that the user's city and
11:18
state can be looked up based
on the user's zip code.
11:22
I've included an article on the benefits
of this technique in the teacher's notes.
11:33
I'm not requiring a phone number for
reasons covered in the previous video.
11:41
I'm also not using placeholder
text here because I'm not
11:57
requiring the phone number to be
formatted in a particular way.
12:00
If you need to require
a particular format,
12:05
you could use placeholder text to
suggest the desired formatting.
12:08
But many users struggle to recall
that format once they begin typing.
12:13
A better solution is
a technique called Input Masks.
12:19
I've included an article from Baymard
Institute in the teacher's notes to learn
12:23
more about converting the user's text
to the proper format as they type.
12:28
To allow the user to include
delivery instructions,
12:35
I'll create a taller text area input.
12:40
And finally, I'll duplicate and
detach an instance
13:16
of my linear gradient asset to create
a Submit button with rounded corners.
13:21
I'll label this button carefully.
Labeling it Continue to Billing
13:42
should make it clear what step
the user will see next upon submit,
13:52
provided they haven't made any errors.
13:56
Since all users do make
errors from time to time,
14:12
we'll need to provide clear
instructions on how to fix them.
14:16
We'll create error messaging
in the next video.
14:21
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