Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Keynote: The Art of Deception39:53 with Stephen Hay
There's a fine line between persuasion and deception. On the web, that line is frequently crossed. Sometimes purposefully, sometimes unwittingly. The best way to avoid falling prey to those attempting to deceive (or accidentally becoming the deceiver) is to be able to recognise the techniques yourself. Find out how people deceive through design, why these practices eventually fail, and how you can make your work persuasive without being deceptive.
[MUSIC] 0:00 We're going to start of the day with a bit of evil, if that's okay with you. 0:13 Just to wake everyone up. 0:16 There's a lot of deception in Web design but not all deception is quite obvious. 0:22 We've all heard of dark patterns, which we're gonna talk about in a little 0:27 while but there's some deception that's really, really subtle, and 0:30 we're gonna talk about that today and some alternatives to using deception in design. 0:33 Now when I do these conferences, I usually book a single trip travel insurance. 0:39 So let me show you what that looks like. 0:48 It's a little bit hard to read but right up here is the menu for insurance. 0:52 So they have a lot of insurance. 0:57 In the Netherlands, this is an automobile club, 0:59 which has branched out into all these different products. 1:02 They have all these different types of insurance and 1:06 what I'm interested in is travel insurance. 1:08 Now I know they have single trip travel insurance, and 1:10 I know they have long term yearly subscription travel insurance. 1:13 When I click on the page for insurance because that single trip insurance is not 1:19 in the menu, I get this, which is actually a little block for 1:24 the long term subscription travel insurance. 1:29 So they have this product, single trip travel insurance but 1:34 they don't put it in the menu. 1:37 They do have the long term in the menu but not the short term. 1:38 When you get to the general travel insurance page, 1:42 you get to this block, and it's only when you scroll 1:45 down that you see that you get the single trip travel insurance. 1:48 So you can see what's going on here. 1:51 They want you to get this yearly subscription thing, and 1:53 they're just making it more prominent than the other product, so 1:57 that the chances are bigger that you'll do that. 2:00 You could see they have a little bit of an affordance on the left-hand side there for 2:05 the long term travel insurance, I'm sorry you can't read this because it's in Dutch. 2:12 Maybe, some of you can. 2:17 This is what happens when you start filling in this form. 2:19 It's a four-part form, so there's quite a bit of stuff that you have to fill in. 2:22 So I would fill it in, and again, it's kind of hard to read but 2:27 there's a little link right above that blue button, and 2:30 that's a link to go ahead and figure out what 2:36 your long term travel insurance would cost if you were to choose that. 2:41 The blue button is to continue with your short term, single trip travel insurance. 2:46 They're still trying to upsell you with that little link but it's not that bad. 2:52 Then I get to the last phase of the process, and you see this total on 2:57 the right hand side with a blue button, which to me seemed like a continue button. 3:00 In fact, when I scrolled the page that right hand pane scrolled and 3:06 then that little blue button stuck to the bottom right hand side of the page. 3:12 I didn't see what was at the bottom of the other side, 3:16 which is the actual Continue button. 3:20 They designed the button on the right hand side, which is actually 3:23 a button to take whatever you filled in and then go to the long term insurance 3:28 page as opposed to continuing the process that you were already involved in. 3:32 You would have had to scroll the left hand side all the way to the bottom and 3:36 click on the the blue link on the left hand side to continue on. 3:40 So this was confusing to me and because nobody reads on the internet, 3:44 including me, I just saw the blue button and I'm like, 3:47 click, continue and then I realized, I'm on the wrong thing. 3:50 I'm paying a lot more money for a yearly subscription that kind of silently 3:55 continues on every single year, and that's not what I wanted. 4:00 So the strange thing is, they offer both of these products. 4:04 The single trip product is something that they do offer, 4:08 I'm willing to pay them money for it. 4:12 Yet, they're still trying to upsell me to some other product and 4:14 the end effect is that I didn't end up buying any product at all. 4:19 One tip to anybody out there who's making a site with a bunch of products, 4:23 if we want to give you your money, you don't make it possible to do so and 4:29 don't keep putting things in our way. 4:34 So, I clicked on this button, I ended up getting to that one page and 4:36 there was no way to go back. 4:41 I had to click the back button in the browser and this is what I got. 4:44 For the non Dutch here, the heading there is short term travel insurance and 4:48 then there's a product choice of one product which is a radio button 4:55 next to a text that says long term yearly subscription to travel insurance. 5:00 >> [LAUGH] Then there's a button that says Continue. 5:07 Now, luckily the radio button was not checked. 5:09 So I thought, 5:12 maybe I can just press Continue without choosing this product because it's 5:14 kind of funny that that's the only product on the short term travel insurance page. 5:19 But then I got this which says, I can't even read it. 5:24 It says, the product field is required. 5:28 So you have to choose product and the only product that's not there, 5:32 out of the two that exist, is the one that I need. 5:38 So I didn't get travel insurance, that's the short story. 5:41 This is kind of my fault in a way because I clicked too quickly. 5:47 I've been using the web for a very long time and I just didn't read it, 5:54 I wasn't careful, and I clicked the wrong button but that's kind of blaming 5:58 the victim in a sense because shouldn't we think about these things as designers? 6:02 What would happen if someone makes a mistake? 6:06 People don't read things, people go too quickly. 6:08 Plus, I'm not completely convinced that it was an accident that 6:12 the affordances around the button, that whole little thing on the right hand side, 6:16 that took me to the long term insurance. 6:21 It looked a lot like what they had been doing through the whole process for 6:24 the short term insurance, so they kinda flipped things on me, in a sense, and 6:27 I'm not totally convinced that that was an accident. 6:31 It could be, and to their credit they fixed this problem, so if you end up 6:34 clicking on the wrong insurance, it'll open in a new tab, which is easy to just 6:38 close the tab and end up back where you were but I think they hate me. 6:42 They hate me but they have a better website because of it, so that's good. 6:47 So things like this, where we take things and we switch them around, 6:54 we're not really used to what these things would do, we might play with colors and 6:59 affordances to make things look like a different version of reality. 7:05 Then we get some kind of purchase a yearly subscription, something that traps you. 7:12 I'll give you a chance to read that while I get some water here. 7:19 You'd be surprised how many people actually get things like this. 7:29 The only way to win is not to play. 7:34 So yesterday, I flew over on EasyJet and I had this EasyJet app. 7:42 Anyone have that app? 7:47 Yeah, like everybody has that app. 7:50 If you look at the time it's 3:17 and down here, 7:54 at the bottom, it says scheduled departure time 3:40 and 8:00 estimated departure time 3:45 and 8:04 scheduled arrival time 3:55 and estimated arrival time, 4:00. 8:09 Obviously, that means on time, that's what they have at the bottom, on time. 8:15 So we're five minutes late, we're on time. 8:19 I understand they probably have this threshold, I don't know what it is. 8:22 I don't know what constitutes on time or not on time. 8:25 It could be five minutes, it could be ten minutes. 8:28 As it turns out, I was five minutes late to the hotel 8:31 to go to the speaker's dinner, so that was kinda those five minutes but 8:35 then, if you look at this one, it's 3:45 and 8:40 here it says estimated departure time 3:43, 8:44 which means that we left two minutes ago but I didn't realize it. 8:50 So I must have been imagining things. 8:56 This isn't really that evil but there's something going on there. 8:58 It's either a bug or someone's just trying to give themselves a little padding as to 9:01 what is on time and these little things, that's what we mean with deception. 9:05 Deception is really just distorting reality for someone else. 9:10 Anyone who stands to gain something from you has a motive to deceive. 9:16 They have a motive to somehow change reality as you see it. 9:21 I have a confession to make because I love deception. 9:27 When I was about six years old, I think it was the first time I saw 9:31 a magician performing and since then, 9:35 I've loved being involved in magic and mentalism and things like that as a hobby. 9:41 Besides the typical books and materials that you might read about influence and 9:48 deception and persuasion and these types of things, 9:55 it all started for me In magic, conjuring. 10:00 And so you could see that there's [LAUGH] the perception of reality is changed, 10:03 when you're looking at cups and balls and 10:09 you see that little purple arrow that points out. 10:11 Some guy's looking at the sky and pulling out [LAUGH] the guy's wallet, right? 10:15 So this is what happens, we're fooling people. 10:20 It's trickery. 10:23 So I thought it's kind of interesting. 10:24 I wonder if these techniques could be applied to user interface design, 10:29 and obviously deceptive tricks have been applied to UX design, but 10:33 it turns out that Bruce Tognuzzini, who used to work at Apple, and 10:38 worked on the Apple 2 interface. 10:43 He actually wrote a paper about stage magic and 10:47 how this can work, how this can be applied to user experience. 10:50 So this was fascinating to me. 10:55 And there have been a lot of other papers that have been written about deceptive 10:59 techniques used in UX. 11:01 And unfortunately, a lot of deceptive techniques are kind of evil. 11:03 They're for the profit of the person who owns the system, but Bruce said this. 11:09 A trash can instead of a dialogue requesting track and 11:16 sector identification for zero overwrite is simulation. 11:19 And he was referring to a book by Daniel Fitsky, 11:23 a magician who was talking about simulation in magic. 11:26 Because when you make something appear one way when it's actually another way. 11:29 And the trash can metaphor is actually a positive form of deception. 11:34 We don't get a dialogue. 11:40 Imagine if only technical people designed computer interfaces. 11:41 We wouldn't have a trash can, we would have a dialogue that would ask us to find 11:46 the part of the disk that we wanted to erase [LAUGH] and then click on okay. 11:51 So we have these kind of metaphors that kind of give us a different impression of 11:55 reality. 11:58 And we can pick something up and drag it to the trash. 12:00 And we take it for granted today, but that's not how it always was. 12:02 So this is kind of a positive form of deception. 12:07 As a matter of fact, there's another paper written by Eyton Adar from 12:12 University of Michigan and two Microsoft researchers about benevolent deception. 12:17 And when I first read it, 12:24 I was kind of like, is there such thing as benevolent deception? 12:25 It's kind of an oxymoron. 12:28 It's like metropolitan forestry service or something, so I didn't really buy it. 12:29 But the more I read it, the more I thought yeah, 12:35 there is something to say for benevolent deception. 12:37 And you can see it in UIs all around us. 12:42 Like for example, the pedestrian crossing buttons. 12:47 So, how many of you have heard that story that a lot of these buttons 12:52 don't really work? 12:55 They're placebo buttons. 12:55 Okay, not that many, well guess what. 12:58 [LAUGH] A lot of these buttons don't do anything at all. 13:00 So in New York City most of them don't function, they don't do anything at all. 13:04 And I'm not willing to bet that they didn't ever do anything. 13:10 But I know that in London, 13:14 a lot of these buttons they only will do something during certain times. 13:16 Like during the evening. 13:22 And most of them are preprogrammed. 13:23 So what this gives you is the illusion of control. 13:25 It gets people to wait [LAUGH] for traffic. 13:30 So, it's kind of benevolent and kind of evil in a way. 13:34 The thing about deception is that you don't know it's happening. 13:40 So how can that be good for you? 13:45 So there's kind of a dilemma in that. 13:47 But adjusting someone's world view at that point in time can really be helpful. 13:49 Like the London Tube map. 13:54 This is not actually the position of all these places. 13:58 Along these perfectly, perfect lines. 14:01 But it's really easy to follow. 14:05 By looking at a map when the world has been changed to look like this. 14:07 So this is great. 14:13 Another thing that's more applicable to web design is performance, 14:14 perceived performance. 14:20 So we have actual performance, and we have perceived performance, 14:21 which only deals with, how fast does it feel? 14:24 It doesn't matter if it's actually fast. 14:28 It matters how fast it feels, and it could take three seconds but 14:30 feel like it took only half a second. 14:35 So, that's one of the things, 14:38 Ajax is one of the most useful deceptions on the web still today. 14:40 Because something's happening 14:46 asynchronously to when we think it's happening, right? 14:48 So we get this thing about good and evil. 14:52 Can we justify doing deception in design? 14:56 And is there a line that we draw between malevolent deception and not? 15:02 So we could say that malevolent deception is when it's bad for 15:06 the user and good for the system owner. 15:11 We could say that. 15:14 I think I would agree with that. 15:15 But, could it be good for the user and good for the system owner? 15:17 Maybe probably. 15:21 And I don't think anyone would argue that if it's good for the user. 15:23 And it's neutral to the system owner. 15:27 That you could be speaking of good deception. 15:29 The problem is that a lot of deception on the web is bad. 15:33 So how many of you have heard of dark patterns before? 15:38 Quite a few. 15:41 Okay, not as many as I thought. 15:42 UX designer, Harry Brignull, came up with this term, dark patterns, 15:45 to describe these little tricks, little bits of deceit that designers put into 15:51 their products in order to trick users into doing something they want them to do. 15:57 Okay? 16:02 So there's a site, darkpatterns.org, and 16:03 if you have a couple hours, go through and look at this. 16:06 You'll be amazed at some of the stuff that people do. 16:10 It's just crazy. 16:13 And I'll just give you a couple of examples. 16:15 So one, Harry has very descriptive names for these dark patterns. 16:18 The one is called Roach Motel. 16:23 Roach Model is kind of a, a lot of sites do this, 16:25 it's easy to get in, it's hard to get out. 16:30 Right? 16:33 So this one's talking about Skype accounts, 16:33 which are really hard to get rid of. 16:36 And if you read the Skype FAQ, one of the suggestions 16:38 is that you go into your user account and just replace all the text with gibberish. 16:43 In all the fields, and 16:47 this is a company [LAUGH] that's supposed to have a lot of money, right? 16:49 [LAUGH] That's one example. 16:53 This is something that happens all the time. 16:57 You get into something. 17:00 You think it's a one-time thing. 17:01 It's just a single purchase, and it ends up being a subscription and it continues. 17:03 And you actually have to contact a real person to be able to get, 17:08 get this thing stopped. 17:13 Happens all the time. 17:15 Another one is called the bait and switch, where you think you're going to do one 17:16 thing, and then they switch it up on you, okay? 17:19 which is kind of like the example that I had in the very beginning. 17:22 This one is in a chat. 17:25 Where you can choose the colors in the chat, and 17:31 then it has this little link that says more colors. 17:33 And if you click on more colors, you expect to get more colors, right? 17:37 But what happens is that when you click on more colors, 17:40 it take you to a page where they try to sell you premium subscriptions. 17:43 So there is no way to get more colors except for paying money. 17:47 But they don't tell you that up front, okay? 17:51 And this one really got me. 17:54 This is a website for a Dutch television network. 17:57 And I saw this guy. 18:00 There was, it was like a trailer on television, 18:02 there was a guy hanging form a crane. 18:05 I think he was from London or somewhere around here and 18:08 he hangs from those building cranes by one hand and he takes selfies of himself. 18:10 [LAUGH] Which is. 18:16 I guess every one's got their hobbies. 18:17 But this was a whole documentary about that guy. 18:19 And I wanted to see it. 18:23 What kind of guy does this stuff? 18:24 So I really wanted to see this. 18:26 So I went to this website that has 18:27 episodes of stuff on TV that you've missed, and so I found it. 18:31 I clicked on it, and then it said, this does not work in Chrome. 18:37 It will work in any other browser like Internet Explorer, 18:44 [LAUGH] Firefox, or Safari. 18:48 But it's not going to work in Chrome. 18:50 It literally says that. 18:52 That's the error I got. 18:54 So I stopped Chrome. 18:55 I think I went to Firefox, and 18:56 then of course I get this message, [LAUGH] you need to load Silverlight. 18:59 All right? 19:05 So at this point I've never wanted to see a documentary 19:06 more than I wanted to see this one. 19:09 And then I get this which means loading in English. 19:12 And when this was done, it said I had to pay 99 cents to [LAUGH] see this thing. 19:17 So I was really, really frustrated. 19:23 Ended up that five minutes later, I went on YouTube. 19:25 Turns out it's a channel four documentary in English. 19:27 And I could watch it for free, so there you go. 19:30 [LAUGH] So a pro tip for anyone who has that same situation. 19:32 Why do people use dark patterns? 19:41 Harry Brignull has this theory about it. 19:44 And I think I agree with that. 19:47 And at that step people want results. 19:49 So your job as a designer, your boss comes up to you and says listen. 19:55 We don't have enough people clicking on this button, or 19:59 we don't have enough people buying this premium product. 20:01 We don't have enough this or that or whatever, and 20:04 it's your job to make sure they do that. 20:07 So people do things like AB testing. 20:10 And then they find out that this little thing they changed works better than 20:13 the other thing, or at least they think it works better than the other thing. 20:16 And then, they just do that. 20:19 And I think some people probably study deception a little bit and 20:22 do things on purpose. 20:25 Some of them are just so bad, 20:26 like automatically adding items to your shopping cart, and things like that. 20:28 Terrible, terrible things. 20:32 So, I think that, that type of pressure to get results as 20:34 a designer can push you into using dart patterns. 20:39 But it's kind of the low hanging fruit of getting a persuasion, 20:43 getting someone to do what you would like them to do. 20:47 It's easy to grasp like evil techniques to do that. 20:50 It's easier to pick someone's pocket than to go get a job. 20:54 Right? 20:57 So, we've heard about AB testing as well. 20:58 Anyone read that article recently that's about AA testing? 21:02 Some guy did AA testing. 21:06 He just had the same design twice and he served the same thing to half the users 21:09 and the same one to the other half of the users, and 21:13 he got totally different results. 21:15 Did you read that? 21:17 So, there's absolutely no way to convince yourself that AB testing is really a sound 21:19 scientific method unless you, A, have like literally tens of thousands of results so 21:24 that it becomes statistically significant. 21:30 Or, you have to do a literal double blind type of scientific 21:33 project to figure out if your results are really significant. 21:39 Because you don't have the same types of people necessarily that get A or B. 21:44 Plus, A is just one out of millions of ideas, and 21:48 B is just something that might be slightly better than A. 21:53 So, you don't know if that's the best way to do things. 21:59 So just blindly using AB testing would probably lead to some 22:01 things that aren't necessarily in the best interest of the user. 22:06 So I think rather than deceiving users, 22:11 we should enable them to do what you'd like them to do. 22:13 The thing about products on the web, if we're trying to sell them and 22:18 we're trying to use design to sell them, is that people want what they want. 22:22 You can try to force people to want something that they don't want, and 22:27 you might succeed. 22:30 And obviously, it succeeds enough that people do it. 22:31 But its not necessarily the best way to go about doing things. 22:36 Let's say I were selling beer, now I think, that's an easy one. 22:39 But if I were holding up a sign that said, beer, in this room and 22:43 there were other signs like chocolate, and pastries, or 22:47 whatever, the people who wanted pastries would go to the pastry table, and 22:50 the people who wanted beer would go to the beer table. 22:55 So what you have to do is make it easy for them. 22:58 Letting them know what you have, making it easier for them to purchase this. 23:01 And there's a researcher at Stanford University, BJ Fogg, 23:06 who wrote a book called Persuasive Technology, started the persuasive 23:10 technology lab at Stanford which focuses on all different types 23:16 of things that you can do in technology to persuade people to do things. 23:21 And what he found that when you increase the simplicity of something, when you 23:26 focus on how simple it is to do something, you increase the user's ability. 23:30 Okay. 23:36 So this is BJ Fogg's behavioral model, and it's just this L shape here. 23:37 And on the left-hand side, on the Y-axis, you have motivation, 23:44 low to high, and on the X-axis, you have ability. 23:49 So hard to do all the way to easy to do. 23:53 And then up there on the top right, you have the triggers. 23:57 So those are your calls to action. 24:02 Your buttons, the things people have to do. 24:03 And the thing that they found out at Stanford is that, if you have very, very, 24:05 very high motivation, even if something's kind of hard to do, you'll still do it. 24:10 If something is very, very simple and 24:17 you don't have a very high motivation, you can still do it. 24:21 And if you have both high motivation and 24:27 something is really easy to do, then, you'll absolutely do it. 24:30 Okay. 24:34 A lot of the design work that's being done, a lot of marketing and 24:35 things focus on motivation and on the triggers themselves that calls the action. 24:39 How do we design this? 24:45 We can make it bright yellow, so people see it and they'll click on it. 24:47 That is where a lot of the focus is. 24:52 But if we focus a little bit more on making things simple, 24:54 making things more clear, then, we have a big chance of increasing the chance that 24:58 someone's going to do what we want them to do, as long as it's good for them, okay? 25:04 So, there's this ethical question that we're talking about, 25:09 do we want to force people to do things that they don't want to do? 25:15 I would say no. 25:20 It will always come back to haunt you. 25:22 Darwin Ortiz is a magician. 25:25 He works in Las Vegas. 25:28 If you're not a magician or if you've never been to Vegas, 25:29 you might never have heard of him. 25:31 But he's absolutely one of the best thinkers in modern magic today. 25:33 And in one of his works, he lays out eight clarifying techniques 25:37 that are absolutely, they have their parallels in UX design. 25:43 And so, I want to share those with you today and 25:49 kind of translate them to design. 25:51 Because if you choose to not deceive, these techniques 25:53 were designed to make magic tricks more clear and more amazing to an audience. 25:59 And they can actually clarify your UX processes as well. 26:06 So the first one is to just use fewer props, 26:13 which I would say translates to add only the necessary things to the UI. 26:16 Now, if any of you were here last year, I had a talk about simplicity, and 26:20 there's this concept that I've been talking about that 26:24 I named my consultancy after called the Zero Interface. 26:28 The Zero Interface is just based on zero-based budgeting. 26:31 That's an accounting term that means, 26:36 instead of looking at what we spent last year to determine the budget for 26:38 this year, we're going to just throw everything away. 26:41 All the design baggage is thrown away. 26:45 So, we're gonna act like we have nothing. 26:47 And then every single thing you add has to go through this kind of boot camp. 26:51 You have to make sure that it's absolutely necessary. 26:56 And if you think of any process as a state of A, where the user is right now, 26:59 and B, where the user needs to be, any step you put between A and 27:04 B is potentially one step too many. 27:08 So, if we focus on starting at A and just adding one step, 27:11 that's absolutely necessary. 27:15 And then thinking, if I could only add one more step, what can I add to that? 27:18 And then, do that again until you have what you need and then stop. 27:23 Then, you'll make things simpler automatically by having less things 27:28 in your UI. 27:31 So one of the best examples, I think, is Todoist. 27:32 Anyone use Todoist here? 27:35 No? Oh, man. 27:38 This is an amazing application. 27:39 And I don't work for them. 27:42 They're not paying me any money or 27:43 anything, but this is an application that works everywhere. 27:45 It's a to-do application. 27:47 So, arguably, that's kind of a simple thing to solve. 27:50 But there's a lot of stuff in there like collaboration, and 27:53 notifications, and all kinds of stuff. 27:58 And they have this across all different platforms, and 28:01 the way they keep it simple is just amazing. 28:03 Cuz usually, these products start off simple and you love to use them, and 28:05 then they get bought, and they add a bunch of stuff to it, 28:10 and eventually, you just drop it because it's too much stuff. 28:13 So that's what everyone wants. 28:17 Features, features, features. 28:18 But sometimes, it's fantastic to see when a company makes a product and 28:19 just sticks to the simple thing, because it works really well. 28:24 I've had to-do apps that took me three minutes to enter one to-do. 28:28 It should be done in like two seconds. 28:33 And that's what Todoist does, so it works very well. 28:35 Another technique is to use a memory hook, which translates to being consistent. 28:39 So placement, color, size, proximity, the order of things. 28:46 Be consistent, so users don't end up confused. 28:52 Sometimes, we just look at a screen as its own thing within a vacuum, and 28:56 we try to make things great for that screen. 29:00 But if we lose consistency, and 29:02 that doesn't mean do everything exactly the same way. 29:04 But when we do things consistently, it allows us to jump out of that consistent, 29:08 confined to do something extra to get someone else's attention. 29:13 So if we look at the first example that I gave, 29:17 on the left hand side, you see that the affordance for 29:20 the call to action to get the premium yearly travel insurance was just a link. 29:24 And to continue on with the process that I was involved in, we had this blue button. 29:31 But then, when we get to next page, the call to action for 29:37 that completely different product was the blue button. 29:41 Okay. So, they switched it up on me. 29:45 They weren't consistent. 29:46 And if they had been consistent, I probably wouldn't have made that mistake. 29:48 So consistency is very important. 29:53 Visually clarifying the props. 29:56 Make it clear what everything does. 29:59 Right now when we talk about simplicity, 30:02 a lot of people are talking about minimalism visually. 30:06 And actual minimalism is deconstructing something to the most essential elements. 30:11 It's not getting rid of stuff just to make it look simple. 30:17 So simple is not simple looking, and you should make it clear what everything does. 30:21 And sometimes it's not always clear because right now, 30:26 I think Oliver Reichenstein had a little post on Twitter about icons. 30:30 Everybody's using icons, and we assume that everybody knows what all these icons 30:37 mean and what they do, but they don't. 30:41 So Todoist, I'm using this one more time. 30:44 I have no idea what these three dashes, 30:47 one right on top of the other, what that means. 30:51 So what they do is, when you're using the app and you've never been to that thing, 30:54 you get this little thing that pops up and tells you what that menu does. 30:59 That is actually a menu that allows you some options for sharing your project. 31:05 You would never know that just by looking at it. 31:11 What they've chosen to do, this is a native app so 31:13 they can do this kind of thing, is just let you know the very first time. 31:17 And then hopefully, that's kind of a gamble, but 31:22 hopefully they won't have to tell you again. 31:24 And that means that you can keep using the icon and 31:27 you don't have to put a visible text right next to that icon. 31:30 You'd probably still want a hidden text, but 31:34 you wouldn't have to put a visible text next to the icon. 31:37 So visually clarifying the layout, I think that's pretty clear what that is. 31:41 If we look at Dan Mall's site, this is kind of playful but 31:46 he's also very strict in the sections of the site. 31:50 It's really easy to follow, and he plays around with that. 31:53 So he's got these little images in round shapes just 31:55 like dropping over the lines and kind of overlapping, but it's still really clear. 32:00 Even though there's a lot going on visually, 32:04 it's very clear what all these things do. 32:06 Another thing is make the hidden visible. 32:10 If it needs to be there, put it there. 32:14 So again, simple does not mean simple looking. 32:17 And we see lots of things like this. 32:21 And with all respect to this company, this is a very simple website. 32:24 But what this does is kind of like the equivalent of 32:31 the Flash intros that we used to have. 32:35 You saw something and then you had to click on something to continue on. 32:37 And I mean no offense. 32:42 These people do great work. 32:43 They did great work on slack. 32:44 But I see this. 32:47 We make interfaces which kind of, yeah, I know that. 32:48 That's why I came to your site, but I want to see what you do. 32:50 And I can, but I have to click on that at on the bottom and 32:53 then I'll go to actual content. 32:56 So why not put actual content there? 32:59 What's the problem with doing that? 33:02 Cuz they wanted to keep it visually simple. 33:06 So, you know, that's kind of, you can argue for or against it. 33:08 But I think that when you go to this website, you want some information, 33:13 you're gonna click anyway, so this adds nothing to it. 33:16 Eliminating time lags. 33:22 So designing for performance. 33:24 It's something that we have to think about. 33:25 The things that we think up have technological implications. 33:28 I always make fun of carousels. 33:31 So I wrote a blog post a while back called carousel-based web design, 33:35 in which I said I think that we should just put everything in a carousel. 33:40 Like navigation we should put in a carousel, just everything. 33:44 Wouldn't you agree? 33:48 No? [LAUGH] So the thing is, 33:49 if someone chooses to do something, it's going to have performance implications, 33:51 and we have to think about that as well. 33:56 Not only leave that to the technologists, but 33:59 we have to think about it as well, so know your medium. 34:02 And then interruptions, eliminate them. 34:06 Just this morning, reading the news, I got three, four, 34:10 five pop-ups that interrupted me while I was reading the news. 34:15 Remember Clippy? 34:21 You're writing something? 34:24 Hey, it looks like you're writing a letter. 34:25 I was writing a letter until you interrupted me, right? 34:28 Everybody hated Clippy. 34:32 Did anyone like Clippy? 34:33 No, good, don't raise your hand now. 34:37 [LAUGH] This is a scary room. 34:38 But this thing, like on the New York Times, 34:41 as soon as the page loads, which takes quite a while actually, 34:45 this little pop-up just slides up from the bottom of the screen. 34:50 I know that someone thought, you know what, let's do a pop-up. 34:55 And some designer thought, well, let's not be that intrusive. 34:59 Let's do a slide-up from the bottom of the screen so 35:03 it doesn't hijack the entire screen. 35:06 So I value that designer, but still, I'm like, 35:09 what's moving at the bottom of the screen? 35:12 And then it just kind of moves up, but at soon as it gets to 35:13 about one-fifth of the height of your screen, it just zips back down. 35:18 So why? 35:22 I couldn't even read it. 35:24 So I know that that designer went to some seminar or 35:26 conference where someone was talking about if you put a little movement in there 35:32 then someone will know it's there. 35:35 Believe me, I knew it was there. 35:37 So this is an interruption. 35:40 It just totally distracts you from reading. 35:41 All right, and the last thing is procedural directness. 35:44 It's really important to design fluid procedures. 35:49 I always say, think in components. 35:53 Brad Frost is always talking about thinking in components. 35:54 Dan Mall has element collages, which is a way of thinking in components visually. 35:57 But what people forget is that you have this whole as well, 36:03 and you kinda have to zoom in to these components and zoom out and 36:09 see the whole thing and then zoom in and then zoom out. 36:12 And keep doing that, constantly, so that things are really easy to follow. 36:14 Users go through an entire process, whatever that process might be. 36:20 E-commerce is obviously the thing that we think about 36:23 when we think about these kind of processes. 36:27 I think Crate and Barrel does it pretty well. 36:31 It's just so easy to walk through the site. 36:34 And I've never purchased anything from Crate and Barrel, but 36:36 a friend of mine told me you've got to see how they do their whole flow. 36:40 So I was like, okay, I'll check it out. 36:44 And it was just super easy, very clear. 36:46 You knew exactly what to fill in where. 36:49 You knew exactly where you were, what the next step was that you has to take to 36:51 get something in your cart, to purchase something. 36:56 Even to add something to your cart they have a button next to 37:00 the product that just zips you down to all the product variants that you have, 37:05 and you can add them to your cart really simply. 37:10 So it's really well done. 37:12 And Amazon actually does a lot of good stuff, a lot of stuff 37:13 that I would probably change as well, but still they do a lot of good stuff. 37:19 They've thrown a lot of money against it. 37:24 But it's not too hard to buy something at Amazon, which is good, 37:27 because that's their whole idea is to sell something. 37:30 But you'd be surprised how many sites want to sell you something and 37:32 they make it incredibly hard to do so, okay? 37:36 So I recently saw a talk by Jared Spool, 37:40 and the talk was called Is Design Metrically Opposed? 37:44 If you ever get a chance to see this talk, which I think he just gave for 37:49 the first time in Salt Lake City a couple weeks ago, it is fantastic. 37:53 I absolutely recommend that you see this talk. 37:57 And I'm not gonna spoil his talk, but 38:00 he does talk about a spectrum of delight to frustration, 38:03 and how he tries to limit the choices of feedback that users could give, 38:08 about a particular flow or site or process, to these two things. 38:14 It's either helping delight people or it's helping to frustrate people. 38:21 And if you start thinking in terms of kind of black or white in this sense, 38:26 it'll help you to swing things over to the delight section, if you will. 38:30 So you're basically, everything you do, every design choice you make, 38:36 you're either helping your users or you're hurting them in some way. 38:42 So if you think that way, zeroes or ones, black or white, it can really, 38:46 really help. 38:51 So the thing about deception is that it's a short-term solution. 38:52 It's low-hanging fruit. 38:59 And Henning Nelms, in his book Magic and Showmanship, 39:01 said that some deceptions are permissible, others are unforgivable. 39:04 No one expects a poker player to tell the truth about the cards he holds. 39:08 However, if you try to deceive by dealing from the bottom of the deck, 39:12 you may get shot and will certainly be shunned. 39:16 So the important thing to remember is, 39:20 maybe if you can increase the user's ability by making things simple and 39:23 easy to follow and adding clarity to your designs, 39:28 maybe that will help you more than deceiving other people. 39:33 So thank you very much and have a great two days. 39:38 [APPLAUSE] 39:41 [MUSIC] 39:48
You need to sign up for Treehouse in order to download course files.Sign up