Touch and Gestures

[Dan Gorgone] Touchscreens have introduced a new kind of interaction 0:00 where users no longer need a keyboard, mouse, or any other device to make it work. 0:03 Simply by using a finger or 2, users can hit buttons, 0:08 they can select text, zoom in and out, scroll—and those are just the basics. 0:12 But by adding a new way to interact with your design, 0:16 a new set of concerns has been created 0:20 related to touch and gestures. 0:23 Since mobile devices can be held in one hand or both, 0:26 using a touch interface means that the fingers are very close to the screen at all times. 0:29 While this can speed up interaction, it can also lead to accidental touches or mistakes. 0:34 Users will also have different sized fingers and hands, 0:39 while others may have challenges with their vision and physical dexterity. 0:42 Therefore, trying to click a link, while potentially easier with a touch pad or a mouse, 0:47 can take a bit more focus on a much smaller screen and device. 0:52 [Amit Bijlani] So, we're talking about usability, right? And one of the key components 0:56 when it comes to a mobile interface are buttons. 1:00 There is that fine line where there are too many buttons, 1:05 so you're presenting too many options to the users 1:08 and then there's that fine line when there are not enough buttons. 1:11 There's this whole trend to add gestures—I get it. 1:16 You are using the smartphone that's capable of multitouch gestures or just gestures plainly. 1:19 You can have double-tap, long tap. You can have multiple finger swipes. 1:26 It's beautiful and I think all apps should take advantage of that, 1:31 but the problem with these gestures are sometimes that they are hidden. 1:35 What do I mean by hidden? An app takes great advantage of these gestures, 1:39 so you have swipe left, right, up, down, double-tap—all of these things, 1:43 but you don't know of these until you start swiping. 1:48 I'm not going to open up an app and swipe it all over to figure out what gestures are there. 1:52 You have to walk me through all these gestures 1:57 and explain to me what these gestures can do, 2:00 but where you have to visually indicate that something should be tapped, put a button there. 2:03 Make sure that button is the size of a finger, 2:09 so you're not putting tiny buttons all over the place— 2:14 when you're trying to tap one thing you end up tapping something else. 2:16 [Gorgone] Links and buttons should give some kind of visual feedback 2:21 to show that they've been clicked or pressed. 2:24 Since the early days of the Web, alternate colors could be chosen for active links 2:27 to show that they were clicked by the user. 2:32 These days, many apps have buttons of different shapes and sizes 2:34 that should also clearly show that they've been pressed. 2:38 This can help users confirm they pressed the right button. 2:42 You'll see this in action on many mobile touch keyboards now 2:45 used as a visual aid, since users probably won't be looking at what they're typing, 2:48 but rather what buttons they're pressing. 2:53 Something else to consider—people are using mobile devices everywhere. 2:56 You could count on laptops being on a lap or a desk when they're being used, 3:00 but phones and tablets are being used while walking, sitting, 3:05 laying down, exercising, and much more. 3:09 So what can you do about all this? Well, just like any design, 3:12 we can't guarantee 100% usability or satisfaction 3:16 and we really shouldn't try—attempting to solve every problem 3:19 for every exception is just not worth the effort. 3:22 On the contrary, we can simply try to anticipate 3:26 as many of the usual needs as possible 3:29 and take care of the majority of our users. 3:32 Part of this problem can be solved by using mobile-friendly design frameworks 3:36 that have accounted for many of these issues already 3:40 within its code, design, and best practices. 3:43 Another way to improve your designs is to continue to use them on mobile devices. 3:47 Designers should have regular access to smartphones and tablets, 3:52 so that they can proof their work, and again, 3:55 emulators can be another helpful alternative. 3:58 Either way, becoming used to using these designs yourself 4:01 and testing them with others can give you 4:05 insight into improving your work. 4:07