1 00:00:00,000 --> 00:00:03,240 [Dan Gorgone] Touchscreens have introduced a new kind of interaction 2 00:00:03,530 --> 00:00:08,119 where users no longer need a keyboard, mouse, or any other device to make it work. 3 00:00:08,740 --> 00:00:12,000 Simply by using a finger or 2, users can hit buttons, 4 00:00:12,080 --> 00:00:16,290 they can select text, zoom in and out, scroll—and those are just the basics. 5 00:00:16,870 --> 00:00:20,200 But by adding a new way to interact with your design, 6 00:00:20,650 --> 00:00:22,810 a new set of concerns has been created 7 00:00:23,020 --> 00:00:25,150 related to touch and gestures. 8 00:00:26,260 --> 00:00:29,220 Since mobile devices can be held in one hand or both, 9 00:00:29,520 --> 00:00:33,850 using a touch interface means that the fingers are very close to the screen at all times. 10 00:00:34,560 --> 00:00:39,110 While this can speed up interaction, it can also lead to accidental touches or mistakes. 11 00:00:39,760 --> 00:00:42,460 Users will also have different sized fingers and hands, 12 00:00:42,900 --> 00:00:46,780 while others may have challenges with their vision and physical dexterity. 13 00:00:47,340 --> 00:00:51,990 Therefore, trying to click a link, while potentially easier with a touch pad or a mouse, 14 00:00:52,350 --> 00:00:56,440 can take a bit more focus on a much smaller screen and device. 15 00:00:56,910 --> 00:01:00,460 [Amit Bijlani] So, we're talking about usability, right? And one of the key components 16 00:01:00,460 --> 00:01:04,170 when it comes to a mobile interface are buttons. 17 00:01:05,820 --> 00:01:08,440 There is that fine line where there are too many buttons, 18 00:01:08,800 --> 00:01:11,220 so you're presenting too many options to the users 19 00:01:11,560 --> 00:01:14,780 and then there's that fine line when there are not enough buttons. 20 00:01:16,010 --> 00:01:19,190 There's this whole trend to add gestures—I get it. 21 00:01:19,680 --> 00:01:26,290 You are using the smartphone that's capable of multitouch gestures or just gestures plainly. 22 00:01:26,500 --> 00:01:31,070 You can have double-tap, long tap. You can have multiple finger swipes. 23 00:01:31,670 --> 00:01:35,130 It's beautiful and I think all apps should take advantage of that, 24 00:01:35,720 --> 00:01:39,090 but the problem with these gestures are sometimes that they are hidden. 25 00:01:39,630 --> 00:01:43,470 What do I mean by hidden? An app takes great advantage of these gestures, 26 00:01:43,560 --> 00:01:48,240 so you have swipe left, right, up, down, double-tap—all of these things, 27 00:01:48,690 --> 00:01:51,930 but you don't know of these until you start swiping. 28 00:01:52,460 --> 00:01:57,500 I'm not going to open up an app and swipe it all over to figure out what gestures are there. 29 00:01:57,830 --> 00:02:00,840 You have to walk me through all these gestures 30 00:02:00,840 --> 00:02:03,280 and explain to me what these gestures can do, 31 00:02:03,750 --> 00:02:09,270 but where you have to visually indicate that something should be tapped, put a button there. 32 00:02:09,729 --> 00:02:13,400 Make sure that button is the size of a finger, 33 00:02:14,230 --> 00:02:16,340 so you're not putting tiny buttons all over the place— 34 00:02:16,800 --> 00:02:20,130 when you're trying to tap one thing you end up tapping something else. 35 00:02:21,380 --> 00:02:24,510 [Gorgone] Links and buttons should give some kind of visual feedback 36 00:02:24,750 --> 00:02:26,980 to show that they've been clicked or pressed. 37 00:02:27,440 --> 00:02:32,110 Since the early days of the Web, alternate colors could be chosen for active links 38 00:02:32,110 --> 00:02:34,110 to show that they were clicked by the user. 39 00:02:34,530 --> 00:02:38,250 These days, many apps have buttons of different shapes and sizes 40 00:02:38,730 --> 00:02:41,760 that should also clearly show that they've been pressed. 41 00:02:42,420 --> 00:02:45,350 This can help users confirm they pressed the right button. 42 00:02:45,660 --> 00:02:48,630 You'll see this in action on many mobile touch keyboards now 43 00:02:48,790 --> 00:02:53,290 used as a visual aid, since users probably won't be looking at what they're typing, 44 00:02:53,460 --> 00:02:55,730 but rather what buttons they're pressing. 45 00:02:56,340 --> 00:03:00,280 Something else to consider—people are using mobile devices everywhere. 46 00:03:00,650 --> 00:03:05,090 You could count on laptops being on a lap or a desk when they're being used, 47 00:03:05,460 --> 00:03:08,870 but phones and tablets are being used while walking, sitting, 48 00:03:09,120 --> 00:03:11,460 laying down, exercising, and much more. 49 00:03:12,340 --> 00:03:15,660 So what can you do about all this? Well, just like any design, 50 00:03:16,060 --> 00:03:19,530 we can't guarantee 100% usability or satisfaction 51 00:03:19,800 --> 00:03:22,900 and we really shouldn't try—attempting to solve every problem 52 00:03:22,900 --> 00:03:25,910 for every exception is just not worth the effort. 53 00:03:26,510 --> 00:03:29,370 On the contrary, we can simply try to anticipate 54 00:03:29,400 --> 00:03:31,720 as many of the usual needs as possible 55 00:03:32,130 --> 00:03:35,110 and take care of the majority of our users. 56 00:03:36,170 --> 00:03:39,840 Part of this problem can be solved by using mobile-friendly design frameworks 57 00:03:40,140 --> 00:03:43,020 that have accounted for many of these issues already 58 00:03:43,050 --> 00:03:46,440 within its code, design, and best practices. 59 00:03:47,000 --> 00:03:51,290 Another way to improve your designs is to continue to use them on mobile devices. 60 00:03:52,000 --> 00:03:55,120 Designers should have regular access to smartphones and tablets, 61 00:03:55,520 --> 00:03:58,100 so that they can proof their work, and again, 62 00:03:58,670 --> 00:04:00,970 emulators can be another helpful alternative. 63 00:04:01,540 --> 00:04:04,820 Either way, becoming used to using these designs yourself 64 00:04:05,080 --> 00:04:07,420 and testing them with others can give you 65 00:04:07,420 --> 00:04:09,480 insight into improving your work.