WEBVTT 00:00:03.034 --> 00:00:07.009 The idea is to minimize  the amount of tapping that goes on. 00:00:07.009 --> 00:00:10.319 And so, we call this *tappability*. 00:00:14.100 --> 00:00:18.292 As we say with all UX, test it with users – make sure it's there. 00:00:18.292 --> 00:00:24.636 But there's a lot of little things that users can tap on – not everything has to be a huge button. 00:00:24.636 --> 00:00:32.259 And if it's task-oriented, then they can tap it and not have to do extra work  basically. 00:00:32.302 --> 00:00:39.000 So, it's kind of tap-tap efficiency, but I want to talk for a second about *affordances* or *tappability affordances*. 00:00:39.000 --> 00:00:46.865 Remember that an affordance is a UI element that *invites the expected interaction*. 00:00:46.865 --> 00:00:50.579 The one that always comes to mind for UX people is the Norman Doors. 00:00:50.579 --> 00:00:54.308 You know – Don Norman, in his *Design of Everyday Things* wrote famously about: 00:00:54.308 --> 00:00:58.976 is it a handle that you pull or is it a bar like a flat thing that you push? 00:00:58.976 --> 00:01:02.169 And that should be the correct affordance because push is 00:01:02.169 --> 00:01:06.000 the physical force, push, and the handle pull is pull. 00:01:06.000 --> 00:01:10.307 But then doors *mix it* – they go push, but it's a pull. 00:01:10.307 --> 00:01:14.980 And they go pull, but it's a push, and so he talked about that and it's called a Norman door. 00:01:14.980 --> 00:01:20.752 And it reminds us about that affordance should be the right one and should invite the interaction correctly. 00:01:20.752 --> 00:01:25.854 Now, the hilarious thing about Norman doors in the real world is you get signs like it's a help strategy. 00:01:25.854 --> 00:01:30.195 It's usually instead of a pull there's a handle and it says 'Push'. 00:01:30.195 --> 00:01:34.505 So, on mobile what this means is that users need to know what's tappable. 00:01:34.505 --> 00:01:40.309 There's a bias that visual designers have for making things so clean and so beautiful 00:01:40.309 --> 00:01:43.631 that you can't tell what you can tap. 00:01:43.631 --> 00:01:49.662 And so, that's what we're talking about, is making affordances *clean but also clear* 00:01:49.662 --> 00:01:54.000 so that you know what you've selected. 00:01:54.000 --> 00:01:59.977 And I just want to say that animation can really help with this. 00:01:59.977 --> 00:02:05.663 It can help invite that expectation and add that affordance. 00:02:05.663 --> 00:02:11.541 So, the other thing that Don Norman talks about in addition to affordances is *signifiers*. 00:02:11.541 --> 00:02:16.820 And *signifiers are UI elements* – think of them as visual nudges 00:02:16.820 --> 00:02:20.353 so that they give the user a little prompt, 00:02:20.353 --> 00:02:24.899 something that they can get a feel for – for example, a pulsating button. 00:02:24.899 --> 00:02:28.734 You know, my favorite one was a menu, like a hamburger menu 00:02:28.734 --> 00:02:32.220 that followed you down the page on a mobile website. 00:02:32.220 --> 00:02:38.384 And it kind of pulsated a little bit, and you want to time that pulsation to a heartbeat. 00:02:38.384 --> 00:02:43.126 It really is a good 'boo boom, boo boom', as opposed to 'boom-boom-boom-boom-boom', 00:02:43.126 --> 00:02:45.353 which is going to create anxiety or... 00:02:45.353 --> 00:02:50.837 So, think about how you can use Material Design-type of suggestions for motion, 00:02:50.837 --> 00:02:54.731 for motion graphics or little animations or 00:02:54.731 --> 00:03:00.134 little moments of – you know – magic that can help increase signifiers. 00:03:00.134 --> 00:03:04.790 If you don't offer it, it can lead to a lack of discoverability, 00:03:04.790 --> 00:03:06.978 false affordances, 00:03:06.978 --> 00:03:10.016 and can lead to user frustration, uncertainty and errors. 00:03:10.016 --> 00:03:12.822 This is what the research shows. 00:03:12.822 --> 00:03:16.689 And the other thing I would add to that – you know – user frustration, 00:03:16.689 --> 00:03:20.496 "uncertainty errors" is the technical term – how about feeling stupid? 00:03:20.496 --> 00:03:22.781 Like, you're like "oh..." – you know. 00:03:22.781 --> 00:03:26.325 You don't want users to feel stupid when they're interacting with your app, 00:03:26.325 --> 00:03:32.657 just because there are not strong tappability affordances and signifiers. 00:03:32.657 --> 00:03:37.612 Here's an example for you: check this one out – you may have seen it before: 00:03:37.612 --> 00:03:41.149 What is the tapping object here? 00:03:41.149 --> 00:03:43.200 What should you tap? 00:03:43.200 --> 00:03:46.153 Study this for just a second; see what you  think, 00:03:46.153 --> 00:03:49.579 well, just a second because you only have maybe three. 00:03:49.579 --> 00:03:53.547 It turns out that that virtual key card thing is not tappable. 00:03:53.547 --> 00:03:57.391 The object below, the grey thing, it's supposed to be a button, I think; 00:03:57.391 --> 00:04:01.563 it's related to like a help strategy, but the contrast is low. 00:04:01.563 --> 00:04:05.520 Notice the contrast, so you have grey on dark blue or something like that. 00:04:05.520 --> 00:04:10.660 The other problem with this is it's sort of  you're stuck in this conceptual model 00:04:10.660 --> 00:04:14.368 that just doesn't work; it's like, what is a virtual key card? It's used for unlocking 00:04:14.368 --> 00:04:18.534 a bike, for paying for a bike. And they've introduced this idea of physical and virtual 00:04:18.534 --> 00:04:22.171 key cards, which is like 'whoosh!' – way beyond. 00:04:22.171 --> 00:04:27.146 So, there are a lot of things – you know – and sort of stepping back from the UI and seeing 00:04:27.146 --> 00:04:31.854 – you know – you could make something really tappable, but it might be the wrong tap, 00:04:31.854 --> 00:04:36.629 a wasted tap; or in this case, yes, you're drilling down just to try and pay 00:04:36.629 --> 00:04:42.437 and they're leading you into this, into their mind, into their labyrinth of virtual key cards. 00:04:42.437 --> 00:04:47.502 So, be *careful* with making the *right things tappable to support the task* 00:04:47.502 --> 00:04:52.817 and *animating the right things and  using animation and motion graphics strategically*.