1 00:00:00,740 --> 00:00:04,670 Arguably the best known Material Design component, and 2 00:00:04,670 --> 00:00:10,170 the one most unique to Material Design, is the Floating Action Button, or FAB. 3 00:00:11,410 --> 00:00:16,660 The introduction to this element in the documentation sounds pretty simple. 4 00:00:16,660 --> 00:00:21,010 A Floating Action Button represents the primary action of a screen. 5 00:00:22,030 --> 00:00:26,580 Great, if my screen has one obvious action that's more 6 00:00:26,580 --> 00:00:31,330 important than any other, why not give users a prominent interface element? 7 00:00:32,380 --> 00:00:37,050 Gmail is probably the best known example of this concept. 8 00:00:37,050 --> 00:00:41,350 There are other tasks I might want to accomplish from my inbox, 9 00:00:41,350 --> 00:00:45,310 like reading messages, or switching to a different folder. 10 00:00:45,310 --> 00:00:47,340 But if I'm here to compose a new message, 11 00:00:47,340 --> 00:00:51,080 it would be hard to overlook this plus button. 12 00:00:51,080 --> 00:00:54,100 It's near my thumb, so it's easy to reach. 13 00:00:54,100 --> 00:00:56,750 And even as I scroll through my messages, 14 00:00:56,750 --> 00:01:00,820 the button stays in place floating above all other content. 15 00:01:02,180 --> 00:01:07,700 The Floating Action Button isn't appropriate for every situation, however. 16 00:01:07,700 --> 00:01:11,210 You'll notice I haven't used it yet in my demo. 17 00:01:11,210 --> 00:01:15,180 The Search Results page didn't have a single primary action, 18 00:01:15,180 --> 00:01:19,990 but rather a series of recipes with equal weight. 19 00:01:19,990 --> 00:01:25,440 While the Search page does have a primary action, searching for recipes, 20 00:01:25,440 --> 00:01:29,760 it makes more sense to provide users with a search interface right away. 21 00:01:31,870 --> 00:01:35,890 What if you're thinking of using more than one Floating Action Button 22 00:01:35,890 --> 00:01:36,840 on the same screen? 23 00:01:37,850 --> 00:01:40,360 You'll have to use your own best judgment. 24 00:01:40,360 --> 00:01:47,100 The Material Design docs say don't display multiple FABs on the same screen, 25 00:01:47,100 --> 00:01:52,330 except that you can use two when each button represents a distinct, 26 00:01:52,330 --> 00:01:53,680 equally important action. 27 00:01:54,830 --> 00:01:58,080 Now, here's the home screen for Google Maps. 28 00:01:58,080 --> 00:02:03,120 And I see three Floating Action Buttons, two larger default buttons for 29 00:02:03,120 --> 00:02:06,620 finding my location and getting directions, and 30 00:02:06,620 --> 00:02:10,160 a mini-sized FAB to toggle between map types. 31 00:02:11,400 --> 00:02:13,270 So I guess the lesson here is, 32 00:02:13,270 --> 00:02:18,170 don't use more than one FAB per screen, except when you really, really want to? 33 00:02:19,410 --> 00:02:21,990 The rules are clearer for designing the button. 34 00:02:23,250 --> 00:02:25,630 No layering badges above the button. 35 00:02:28,250 --> 00:02:33,430 No ambiguous icons, and no text labels on a default 36 00:02:33,430 --> 00:02:37,330 or mini FAB, and positive actions only. 37 00:02:38,920 --> 00:02:44,400 No using a Floating Action Button to trash a file, or cancel an activity. 38 00:02:46,510 --> 00:02:51,790 If your icon or primary activity is less than completely obvious, 39 00:02:51,790 --> 00:02:56,110 there's an extended FAB button available with room for a text label. 40 00:02:58,810 --> 00:03:03,360 If you check out the file called Design a Floating Action Button 41 00:03:03,360 --> 00:03:05,030 in the Project Files folder, 42 00:03:05,030 --> 00:03:10,580 you'll see that I have created a simple screen for an individual recipe. 43 00:03:10,580 --> 00:03:15,440 The only thing missing from the screen is some sort of primary action. 44 00:03:15,440 --> 00:03:18,020 Let's determine what that action should be. 45 00:03:19,740 --> 00:03:24,960 The FAB section of the Material Design UI kit contains designs for 46 00:03:24,960 --> 00:03:30,740 the standard mini, and extended Floating Action Button. 47 00:03:30,740 --> 00:03:36,600 If I've decided to make the primary action on the screen favorite this recipe, 48 00:03:36,600 --> 00:03:39,450 the heart icon indicates like or 49 00:03:39,450 --> 00:03:43,570 favorite in enough apps, that users should recognize it. 50 00:03:45,610 --> 00:03:50,700 I changed the background color from purple to gray for my wireframe. 51 00:03:56,610 --> 00:03:59,850 But otherwise, leave the design alone after I paste it in. 52 00:04:01,420 --> 00:04:06,620 However, note that my app has a category called Planner. 53 00:04:06,620 --> 00:04:11,790 Would pressing Favorite add the current recipe to the user's planner? 54 00:04:11,790 --> 00:04:14,610 If that's the primary action on the screen, 55 00:04:14,610 --> 00:04:17,380 the icon ought to make that more obvious. 56 00:04:19,100 --> 00:04:23,620 Let's see whether I can find a system icon to replace the heart. 57 00:04:30,900 --> 00:04:33,950 A plus icon, like Gmail uses, 58 00:04:33,950 --> 00:04:39,290 might suggest creating new content, like adding a brand new recipe. 59 00:04:39,290 --> 00:04:41,210 That could be misleading here. 60 00:04:48,520 --> 00:04:50,930 How about the calendar icon by itself? 61 00:04:51,960 --> 00:04:55,150 That doesn't really suggest an action. 62 00:04:55,150 --> 00:04:58,930 Users might expect this button to merely launch the planner. 63 00:05:00,480 --> 00:05:07,873 I could create a new icon by combining the calendar and plus icons. 64 00:05:13,850 --> 00:05:19,170 But I'm still not completely confident the meaning is clear. 65 00:05:19,170 --> 00:05:24,410 Fortunately, this is where the extended FAB comes in with room for a text label. 66 00:05:25,640 --> 00:05:30,488 I'll make a component of my new icon, combining the calendar and 67 00:05:30,488 --> 00:05:36,020 plus symbol, and 68 00:05:36,020 --> 00:05:39,130 paste the extended FAB in from the UI kit. 69 00:05:51,000 --> 00:05:55,910 I'll make the background gray once again, and 70 00:05:55,910 --> 00:05:59,310 change the text label to read Add to Planner. 71 00:06:07,890 --> 00:06:12,540 This takes up more screen real estate than the standard FAB, but 72 00:06:12,540 --> 00:06:17,360 should remove the ambiguity from the screen's primary action. 73 00:06:17,360 --> 00:06:22,150 To be sure which Floating Action Button approach is best, 74 00:06:22,150 --> 00:06:25,520 I'd want to test my design on users. 75 00:06:25,520 --> 00:06:28,560 Check the teacher's notes for more on user testing. 76 00:06:29,820 --> 00:06:32,730 That concludes our look at Material Design. 77 00:06:32,730 --> 00:06:37,630 If you're tasked with designing an Android app, keep those docs handy. 78 00:06:37,630 --> 00:06:41,550 And combine them with your own observations on how users interact 79 00:06:41,550 --> 00:06:43,590 with their Android devices. 80 00:06:43,590 --> 00:06:47,560 You'll have the tools you need to create predictable interfaces and 81 00:06:47,560 --> 00:06:50,020 satisfying user experiences.