Design a Floating Action Button6:50 with Anwar Montasir
Arguably the best-known Material Design component, and the one most unique to Material Design, is the Floating Action Button, or FAB. A floating action button represents the primary action of a screen.
Arguably the best known Material Design component, and 0:00 the one most unique to Material Design, is the Floating Action Button, or FAB. 0:04 The introduction to this element in the documentation sounds pretty simple. 0:11 A Floating Action Button represents the primary action of a screen. 0:16 Great, if my screen has one obvious action that's more 0:22 important than any other, why not give users a prominent interface element? 0:26 Gmail is probably the best known example of this concept. 0:32 There are other tasks I might want to accomplish from my inbox, 0:37 like reading messages, or switching to a different folder. 0:41 But if I'm here to compose a new message, 0:45 it would be hard to overlook this plus button. 0:47 It's near my thumb, so it's easy to reach. 0:51 And even as I scroll through my messages, 0:54 the button stays in place floating above all other content. 0:56 The Floating Action Button isn't appropriate for every situation, however. 1:02 You'll notice I haven't used it yet in my demo. 1:07 The Search Results page didn't have a single primary action, 1:11 but rather a series of recipes with equal weight. 1:15 While the Search page does have a primary action, searching for recipes, 1:19 it makes more sense to provide users with a search interface right away. 1:25 What if you're thinking of using more than one Floating Action Button 1:31 on the same screen? 1:35 You'll have to use your own best judgment. 1:37 The Material Design docs say don't display multiple FABs on the same screen, 1:40 except that you can use two when each button represents a distinct, 1:47 equally important action. 1:52 Now, here's the home screen for Google Maps. 1:54 And I see three Floating Action Buttons, two larger default buttons for 1:58 finding my location and getting directions, and 2:03 a mini-sized FAB to toggle between map types. 2:06 So I guess the lesson here is, 2:11 don't use more than one FAB per screen, except when you really, really want to? 2:13 The rules are clearer for designing the button. 2:19 No layering badges above the button. 2:23 No ambiguous icons, and no text labels on a default 2:28 or mini FAB, and positive actions only. 2:33 No using a Floating Action Button to trash a file, or cancel an activity. 2:38 If your icon or primary activity is less than completely obvious, 2:46 there's an extended FAB button available with room for a text label. 2:51 If you check out the file called Design a Floating Action Button 2:58 in the Project Files folder, 3:03 you'll see that I have created a simple screen for an individual recipe. 3:05 The only thing missing from the screen is some sort of primary action. 3:10 Let's determine what that action should be. 3:15 The FAB section of the Material Design UI kit contains designs for 3:19 the standard mini, and extended Floating Action Button. 3:24 If I've decided to make the primary action on the screen favorite this recipe, 3:30 the heart icon indicates like or 3:36 favorite in enough apps, that users should recognize it. 3:39 I changed the background color from purple to gray for my wireframe. 3:45 But otherwise, leave the design alone after I paste it in. 3:56 However, note that my app has a category called Planner. 4:01 Would pressing Favorite add the current recipe to the user's planner? 4:06 If that's the primary action on the screen, 4:11 the icon ought to make that more obvious. 4:14 Let's see whether I can find a system icon to replace the heart. 4:19 A plus icon, like Gmail uses, 4:30 might suggest creating new content, like adding a brand new recipe. 4:33 That could be misleading here. 4:39 How about the calendar icon by itself? 4:48 That doesn't really suggest an action. 4:51 Users might expect this button to merely launch the planner. 4:55 I could create a new icon by combining the calendar and plus icons. 5:00 But I'm still not completely confident the meaning is clear. 5:13 Fortunately, this is where the extended FAB comes in with room for a text label. 5:19 I'll make a component of my new icon, combining the calendar and 5:25 plus symbol, and 5:30 paste the extended FAB in from the UI kit. 5:36 I'll make the background gray once again, and 5:51 change the text label to read Add to Planner. 5:55 This takes up more screen real estate than the standard FAB, but 6:07 should remove the ambiguity from the screen's primary action. 6:12 To be sure which Floating Action Button approach is best, 6:17 I'd want to test my design on users. 6:22 Check the teacher's notes for more on user testing. 6:25 That concludes our look at Material Design. 6:29 If you're tasked with designing an Android app, keep those docs handy. 6:32 And combine them with your own observations on how users interact 6:37 with their Android devices. 6:41 You'll have the tools you need to create predictable interfaces and 6:43 satisfying user experiences. 6:47
You need to sign up for Treehouse in order to download course files.Sign up