Design a Side Sheet6:36 with Anwar Montasir
Side sheets provide supplementary content, and the Material Design documentation suggests them as a common pattern for filtering options.
Side sheets provide supplementary content. 0:00 And the Material Design documentation suggests them as a common pattern for 0:03 filtering options. 0:09 Side sheets look and 0:12 behave much like navigation drawers in Android apps with one key difference. 0:14 Navigation drawers contain primary navigation destinations. 0:20 If I were building an app with more than five primary categories, 0:25 a navigation drawer could be a useful pattern. 0:30 Side sheets don't contain navigation links. 0:34 They provide viewing options for the screen I'm already on, 0:37 like filtering a long list of search results based on user preferences. 0:42 We'll want a modal side sheet since we're designing for mobile. 0:48 This means the sheet containing filtering options will take up 0:54 a portion of the screen and can be exited three ways. 0:58 Tapping the scrim, or darkened area hiding the main page content. Dismissing the side 1:04 sheet using a horizontal swipe. Tapping the close button if one is provided. 1:10 The main page content cannot be interacted with 1:16 while supplementary side sheet content is visible. 1:20 And side sheets allow for vertical scrolling, but not horizontal scrolling. 1:24 If you check out the file called Design a Side Sheet in the Project Files folder, 1:29 you'll see that I've provided the search results design already. 1:35 The system icon representing filter and 1:40 the placeholder used to represent images came from the Material Design UI kit. 1:44 In terms of creating the filter menu, 1:52 I'll duplicate my existing search results art board. 1:55 Then start by borrowing a few elements from the navigation 2:06 drawer section of the UI kit 2:11 as this will inform the elevation of the side sheet, 2:15 the shadow cast by the side sheet, and the opacity of the scrim. 2:20 On a real project, I would interview and 2:41 observe users to find out which filtering options are most meaningful. 2:44 But for now I'll create options to filter by diet and by cuisine. 2:49 In terms of body copy, I'll work with 16 point Roboto regular, 3:05 Since that's the default body copy size suggested by the UI kit. 3:15 And it looks like 60% opacity. 3:25 I'll work with checkboxes rather than radio buttons since users might 3:37 conceivably want to select more than one option. 3:42 A user searching for tacos might be open to both Mexican and Korean tacos. 3:46 It's worth thinking about touch target sizes here. 3:53 Material Design recommends touch targets at least 48 pixels by 48 pixels in size. 3:58 But the checkboxes found in the UI kit are only 18 pixels square. 4:06 I could try making the checkboxes 48 pixels square, But giant 4:15 interface elements would make fitting a usable menu into a small space difficult. 4:22 I'd recommend communicating with your developer to make 4:30 sure the words are clickable as well as the checkboxes which 4:34 increases the width of the tappable area. 4:38 And make sure your vertical spacing is comfortable. 4:50 Material Design mandates at least eight pixels between interface elements. 4:53 But, let me use repeat grid to create six of these. 4:59 I'll try shrinking my spacing to eight pixels. 5:07 And I can see that's too close, it would be pretty easy for 5:10 a user to accidentally tap the wrong target. 5:15 I'll go with at least 16, 5:18 to make sure there's comfortable space. 5:23 Prototyping your wireframe and user testing your designs on an actual 5:29 phone is the best way to confirm your design choices are effective and usable. 5:34 I'm going to duplicate By Diet to make another heading called By Cuisine. 5:51 And provide some choices. 6:02 Oops, just as I did above. 6:08 Now we have a list of filtering options contained in a side sheet. 6:19 For our final step, I'll design a screen for an individual recipe. 6:24 While making use of one of Material Design's most recognizable features, 6:29 the Floating Action Button. 6:34
You need to sign up for Treehouse in order to download course files.Sign up