Design a Bottom Navigation11:15 with Anwar Montasir
Bottom navigation bars allow movement between primary destinations in an app.
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 up