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
Bottom navigation bars allow movement between primary destinations in an app.
Further reading
- Bottom navigation
- Keeping the Thumb Zone in mind
- Bow to the Thumb — Rethinking Navigation for Bigger Screens in 2018
- Material Design UI Kit for Adobe XD (Scroll down to "Design Resources")
- Work With Linked Assets
- Placeholders in Form Fields Are Harmful
- Best Practices For Mobile Form Design
- Mobile Form Usability: Never Use Inline Labels
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
The recipe app I've wireframed contains
three major categories of content.
0:00
A search page for finding recipes,
a planner page containing a meal calendar,
0:06
a profile page for
users to control settings and preferences.
0:13
I'm thinking a bottom navigation
bar could be an appropriate way
0:19
to allow Android users to navigate
between these categories.
0:24
But to be sure,
0:29
I need to review the Material Design
guidelines on bottom navigations.
0:30
The documentation begins with a definition
of the bottom navigation component.
0:37
They allow movement between
primary destinations in an app.
0:43
The principles section reminds me to
keep the bottom navigation consistent on
0:48
every screen and to make sure the link
destinations are of equal hierarchy.
0:53
In other words,
if this pencil icon meant edit and
0:59
edit was a sub-category of
this speech bubble link
1:03
that took me to the comments section, that
would be a faulty use of this component.
1:06
These links need to be independent of each
other and at the same hierarchical level.
1:12
Also, note that bottom navigations
have an ergonomic benefit.
1:19
They make the primary navigation easy for
the user to reach with their thumb.
1:24
For more on thumb-friendly mobile
patterns, see the teacher's notes.
1:30
Checking out the dos and don'ts,
1:37
I see I should only use this pattern
on a mobile or tablet device.
1:39
And only for
three to five categories of content.
1:44
I should highlight the active link,
provide clear text labels,
1:48
and stick to one uniform icon color.
1:59
If my demo app failed to
meet these requirements,
2:04
say if I had six major navigation links,
2:07
I would need to explore other navigation
patterns better suited to my app content.
2:11
To begin my demo,
2:18
I'm going to create a new XD file using
the default Android Mobile artboard.
2:20
Some Android screens are larger
than 360x640 pixels, but I
2:26
want to make sure my wireframe is legible
at the smallest possible screen size.
2:32
I'm also downloading
the Material Design UI Kit for Adobe XD.
2:38
I'll use this to get some of my
Material components started,
2:44
and as a resource for things like system
icons familiar to most Android users.
2:49
I'm going to rename my artboard
Search for Recipes.
3:01
And then I'll get started
by grabbing the system bar,
3:07
that'll be found under top app bars.
3:11
And the three up version
of the bottom navigation
3:18
from the Material Design UI Kit,
here under bottom navigation.
3:21
You'll notice after I paste
that I'm right-clicking and
3:36
choosing Unlink Component.
3:40
I've included a resource about linked
assets in the teacher's notes, but
3:43
I see no benefit to linking this
wireframe back to the original UI kit.
3:48
I'll change the purple of
the bottom navigation to
3:56
gray, as this is a wireframe.
3:59
I'll click the plus in my color
palette should I need this gray again.
4:05
Otherwise, I'm keeping
the default Roboto font for
4:11
now and sticking to the given font sizes.
4:14
Customizing color and typography
is reserved for the mockup stage.
4:18
My three links will be labeled Search,
Planner and Profile,
4:24
with the Search icon brighter,
since that section is currently active.
4:30
I might ungroup this component
just while I begin editing it.
4:35
I'll make sure this text
box contains centered text.
4:41
And I can duplicate it
a few times using Cmd+D.
4:46
To swap these two icons, I'll first
move the Calendar icon into place.
4:53
I'll use Cmd+X to cut for
a moment, or Ctrl+X on a PC.
4:58
Move the Profile icon in the place and
paste the Calendar back.
5:06
This icon will be called Profile.
5:13
This icon will be called Planner.
5:18
And finally, Search.
5:23
I'm choosing the default system icon for
each link, thus,
5:28
the Profile icon, the Planner icon, and
5:33
I need to go get the Search
icon from my UI kit.
5:37
I'll find that here under System Icons.
5:42
In a mockup, you could substitute
these with custom icons, but
5:51
use caution, as Android users
recognize the meaning of system icons.
5:56
All that's left is to change
the magnifying glass color
6:02
to make it 100% white.
6:06
And change the inactive link text to 50%
white to match the inactive icon color.
6:12
Search is brighter because it's active.
6:24
And now I have a navigation bar.
6:26
I'll turn it into a component and
call it Bottom navigation,
6:30
In case I need to use it again.
6:38
You can see that I'm frequently copying
and pasting from the UI kit, both
6:41
to speed up my wireframing process and
to borrow Material Design visual styles:
6:46
shapes, shadows, text labels, and spacing.
6:52
Next up, I'll create a search input field.
6:58
I'll use the headline style
from the UI kit's top app bar.
7:02
I'll change the background to gray and
7:10
position the heading 16
pixels from the left edge,
7:13
while changing the text to read,
Search for recipes.
7:19
I'll extend the background to
make room for the search box.
7:25
I'll copy and
paste a text field with slight edits for
7:32
users to input their search term.
7:36
I'll make the input background white so
it can be read on the dark background.
7:41
I'll change the placeholder text to read
7:49
"tacos", something the user
might typically search for.
7:52
And I'll use the magnifying glass to
further indicate this is a search box.
8:02
I'll start by pasting it over the eyeball
to get the positioning right.
8:09
And finish by changing the color.
8:18
For my first optional form field for
include ingredients,
8:26
I'll start by mocking up the fields
based on the design of the UI kit.
8:30
I'll mark the form fields optional
8:38
to make it clear to users these
are not mandatory search features.
8:42
And I'll create a plus button to allow
users to add additional ingredients.
8:50
However, usability best practices
9:08
might sometimes lead me
to alter a given pattern.
9:11
For example,
the Material Design UI Kit is using
9:16
placeholder text to label form inputs.
9:20
But inline labels like these
cause usability problems,
9:24
especially on a mobile device.
9:29
Once the user taps the input and
begins typing, whoops, no more label.
9:31
I've included links in the teacher's notes
to articles on this issue from sites like
9:38
Nielsen Norman group, Smashing Magazine,
and Baymard Institute,
9:44
which are all great resources for
learning more about form usability.
9:50
I'll make adjustments to this form field
to include a label above the input.
9:55
Once include ingredients feels complete,
I'll make it a component
10:10
which I'll label optional field.
10:17
And I'll use Repeat Grid in creating
another form field to exclude ingredients.
10:23
This wireframe is just a quick demo, so
I'm not demonstrating how the include and
10:38
exclude ingredients
features might function.
10:43
I do need to make a Go button to
link me to my search results screen.
10:47
My search results screen will
include a Material Design component
11:02
called a side sheet to allow
the user to filter the results.
11:07
We'll look at side sheets
in our next video.
11:12
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