WEBVTT 00:00:16.000 --> 00:00:20.500 CAMERON DAIGLE: Oh. There it goes. 00:00:20.590 --> 00:00:22.840 The big red clock is counting down. I have to start. 00:00:22.840 --> 00:00:26.070 Hey guys. My name is Cameron Daigle. I'm the 00:00:26.070 --> 00:00:30.109 senior designer at HashRocket. We are out of Chicago, 00:00:30.109 --> 00:00:34.500 Boulder, and Jacksonville Beach is our main office. I'm 00:00:34.500 --> 00:00:37.260 the longest senior member of the design team. And 00:00:37.260 --> 00:00:39.739 we build Ruby on Rails apps. We build iOS 00:00:39.739 --> 00:00:42.079 apps. We do a lot of different things. 00:00:42.079 --> 00:00:43.360 So what I'm gonna talk to you guys about 00:00:43.360 --> 00:00:46.850 today is, well, this is gonna be yet another 00:00:46.850 --> 00:00:49.260 code-free design talk, so I hope you guys didn't 00:00:49.260 --> 00:00:51.879 want to see anymore code today. And it's almost 00:00:51.879 --> 00:00:54.539 an app and website-free talk as well, because what 00:00:54.539 --> 00:00:56.600 I'm really talking to you about today are not 00:00:56.600 --> 00:00:59.350 interactions that you're gonna have in a normal context, 00:00:59.350 --> 00:01:00.699 like on a, on a, on your phone or 00:01:00.699 --> 00:01:02.500 your laptop. But I want you to discover the 00:01:02.500 --> 00:01:04.280 interactions around you. 00:01:04.280 --> 00:01:06.550 So what that means is that I want, I 00:01:06.550 --> 00:01:08.720 want you guys to be able to build up 00:01:08.720 --> 00:01:13.240 the ability to actively participate in interactions and, that 00:01:13.240 --> 00:01:15.330 might not, that you might not otherwise think about, 00:01:15.330 --> 00:01:17.069 that may be your habits or that kind of 00:01:17.069 --> 00:01:19.690 stuff. And be able to quantify those and what 00:01:19.690 --> 00:01:21.649 you do and don't like about them, and hopefully 00:01:21.649 --> 00:01:23.750 apply that to how we design products. 00:01:23.750 --> 00:01:29.140 So, my first example. So this is Publix. Who 00:01:29.140 --> 00:01:32.190 likes Publix? Is anybody from the Florida area? OK. 00:01:32.190 --> 00:01:33.819 Publix is a really nice grocery store. I don't 00:01:33.819 --> 00:01:36.619 know what you guys in Chicago have. But Publix 00:01:36.619 --> 00:01:39.099 is, Publix is the best we've got in, in 00:01:39.099 --> 00:01:39.640 Florida. 00:01:39.640 --> 00:01:42.520 And it's a really nice grocery store, really nice 00:01:42.520 --> 00:01:45.470 user experience, getting your groceries there and everything. You 00:01:45.470 --> 00:01:47.780 go to pay, at Publix, and this, this is 00:01:47.780 --> 00:01:49.979 a regular occurrence for me. You go to pay, 00:01:49.979 --> 00:01:52.360 you go play with plastic because it's 2014. You 00:01:52.360 --> 00:01:55.200 don't have any cash. And you, this is the 00:01:55.200 --> 00:01:57.340 last screen that you see. 00:01:57.340 --> 00:02:00.050 So I've, I've, I've swiped my card, I've seen 00:02:00.050 --> 00:02:02.129 the total, I have agreed to everything. I get 00:02:02.129 --> 00:02:04.410 to the cash back screen and Publix, the little 00:02:04.410 --> 00:02:08.000 thingy at Publix says, cash back? And if I 00:02:08.000 --> 00:02:11.038 tap no here, the purchase is completed. That no 00:02:11.038 --> 00:02:13.060 is a, is a form submission, essentially. 00:02:13.060 --> 00:02:15.780 And it drives me nuts every time, because the 00:02:15.780 --> 00:02:18.730 last thing to tell Publix to get my, my 00:02:18.730 --> 00:02:22.780 weekend beer or whatever, is no. And so it's, 00:02:22.780 --> 00:02:25.599 it's this grating experience. But it's, it's just a 00:02:25.599 --> 00:02:28.459 little detail that, that really does matter. I mean, 00:02:28.459 --> 00:02:30.390 that every single person that goes to Publix and 00:02:30.390 --> 00:02:33.120 interacts with them as a store encounters this screen 00:02:33.120 --> 00:02:34.859 where, just for a half a second, you know, 00:02:34.859 --> 00:02:37.250 they stop breathing and they're like, wait, what? And 00:02:37.250 --> 00:02:40.069 then they press no and they're OK. 00:02:40.069 --> 00:02:42.659 In contrast, Target, which for me is about a 00:02:42.659 --> 00:02:46.180 hundred yards from Publix, their final screen looks like 00:02:46.180 --> 00:02:49.249 this. Now, there's a separate issue here which is 00:02:49.249 --> 00:02:51.319 that this kind of feels like a weird question 00:02:51.319 --> 00:02:53.189 to ask. I literally never wanted it all on 00:02:53.189 --> 00:02:56.450 my card. Like, I don't, I don't know why. 00:02:56.450 --> 00:02:58.359 And the no is super angry. You notice the 00:02:58.359 --> 00:03:02.310 no is all caps. It's like NO! But, but 00:03:02.310 --> 00:03:04.819 I mean the, it's a big red and a 00:03:04.819 --> 00:03:06.689 big green button. You press the big green button 00:03:06.689 --> 00:03:08.829 to buy your stuff. I mean that, that feels 00:03:08.829 --> 00:03:11.329 better. And now, the wording is a different issue. 00:03:11.329 --> 00:03:13.060 But my point here is that the world is 00:03:13.060 --> 00:03:16.659 full of forms. There, that we are constantly putting 00:03:16.659 --> 00:03:19.659 information into something and getting some sort of a 00:03:19.659 --> 00:03:23.280 result. And it, so, the interactions that we encounter 00:03:23.280 --> 00:03:25.849 when we're trying to build apps, whether we're developing 00:03:25.849 --> 00:03:28.560 or designing for them, have a lot of parallels 00:03:28.560 --> 00:03:31.349 in the actual world. And paying attention to these 00:03:31.349 --> 00:03:32.980 will help you pay attention to those. 00:03:32.980 --> 00:03:34.670 So, I was in Vegas a couple of years 00:03:34.670 --> 00:03:37.950 ago, and this is mostly what I remember of 00:03:37.950 --> 00:03:42.779 Vegas is the, the traffic and the concrete. But 00:03:42.779 --> 00:03:44.939 I took a cab ride. I was there with 00:03:44.939 --> 00:03:46.620 Daniel, our other designer, at a design conference. Took 00:03:46.620 --> 00:03:49.450 a cab ride and ended up paying like, eighteen 00:03:49.450 --> 00:03:53.219 dollars to go two blocks or something. And, and 00:03:53.219 --> 00:03:54.859 when I swiped my card, this was two or 00:03:54.859 --> 00:03:56.200 three years ago, I swiped my card and the 00:03:56.200 --> 00:03:59.120 little thing inside the cab calculated my tip for 00:03:59.120 --> 00:03:59.719 me. 00:03:59.719 --> 00:04:02.669 And I thought, that's fantastic. You know, it, on 00:04:02.669 --> 00:04:04.859 my otherwise miserable cab experience is made nicer by 00:04:04.859 --> 00:04:07.060 the fact that when someone built this thing, it 00:04:07.060 --> 00:04:09.180 didn't matter, necessarily, what it looked like, so I 00:04:09.180 --> 00:04:10.629 hate to say it was someone designed it, cause 00:04:10.629 --> 00:04:12.560 then you think it's visual. It's really just, when 00:04:12.560 --> 00:04:15.120 someone built this, the, the software for this, they 00:04:15.120 --> 00:04:17.488 thought to take, put, take advantage of the fact 00:04:17.488 --> 00:04:19.798 that there's an extra step here that's always going 00:04:19.798 --> 00:04:21.589 to happen. And you might recognize this, I mean, 00:04:21.589 --> 00:04:24.310 this is in Stripe now. So you see any 00:04:24.310 --> 00:04:26.740 businesses with Stripe, see that kind of stuff all 00:04:26.740 --> 00:04:27.600 the time. 00:04:27.600 --> 00:04:32.320 Now, in contrast to that, I took a monorail 00:04:32.320 --> 00:04:34.500 later, cause after two or three days of spending, 00:04:34.500 --> 00:04:36.510 like, fifty dollars a day on cabs, it turns 00:04:36.510 --> 00:04:40.260 out there's a monorail that's, like, way less money. 00:04:40.260 --> 00:04:42.070 So we, we were like cool. We're gonna take 00:04:42.070 --> 00:04:42.740 the monorail. 00:04:42.740 --> 00:04:45.500 Now, we walk up to the monorail display, and 00:04:45.500 --> 00:04:47.130 this is what we see. I wish I had 00:04:47.130 --> 00:04:49.560 a better picture, but I was. We were in 00:04:49.560 --> 00:04:51.870 a hurry. And this is, this is the screen. 00:04:51.870 --> 00:04:54.790 So, single ride tickets, five dollars each. First question. 00:04:54.790 --> 00:04:57.490 Would you like more than one individual ticket? 00:04:57.490 --> 00:04:58.590 No? 00:04:58.590 --> 00:05:05.160 Or. Yes, two, three, four, five. 00:05:05.160 --> 00:05:08.140 So all this has to be is just like, 00:05:08.140 --> 00:05:09.810 buttons of one, two, three, four, five, and it 00:05:09.810 --> 00:05:11.870 was this completely baffling thing that we were just 00:05:11.870 --> 00:05:15.370 floored by. But it was something we noticed. You 00:05:15.370 --> 00:05:17.500 know, who knows. So who knows why this came 00:05:17.500 --> 00:05:19.320 to be? So the, the, I, I mean, it's 00:05:19.320 --> 00:05:21.420 fun to send all this stuff up, but, what 00:05:21.420 --> 00:05:23.220 this talk is about is understanding why this might 00:05:23.220 --> 00:05:23.570 have happened. 00:05:23.570 --> 00:05:25.920 In this case, I have no clue why the, 00:05:25.920 --> 00:05:27.500 they chose to design it this way. I feel 00:05:27.500 --> 00:05:30.350 like there must be a reason. But, so I 00:05:30.350 --> 00:05:32.170 play a lot of video games. This is from 00:05:32.170 --> 00:05:35.130 Super Mario Galaxy a few years ago. I wish 00:05:35.130 --> 00:05:36.540 I had a better photo of this, but I'm 00:05:36.540 --> 00:05:38.430 not going through Super Mario Galaxy again just to 00:05:38.430 --> 00:05:41.640 find this one dialogue box. 00:05:41.640 --> 00:05:43.900 So this, this, this fat star man says, you 00:05:43.900 --> 00:05:45.160 gotta save her? Am I right? And my two 00:05:45.160 --> 00:05:47.640 options are that's right and yes. And I was 00:05:47.640 --> 00:05:50.800 like, heh. You know. That's, that's cute. Like, cool 00:05:50.800 --> 00:05:52.920 job, Super Mario Galaxy. Fun joke. 00:05:52.920 --> 00:05:55.090 But then I thought, like, maybe the reason that 00:05:55.090 --> 00:05:56.860 they did this was because there's like a dialogue 00:05:56.860 --> 00:06:00.830 prompt object somewhere and it expects, like, two answers. 00:06:00.830 --> 00:06:02.840 You know. So maybe it was a funny joke 00:06:02.840 --> 00:06:04.720 and maybe they were just, like, we're not rewriting 00:06:04.720 --> 00:06:09.140 the dialogue prompt thing. You know. Just to have, 00:06:09.140 --> 00:06:11.410 like, an OK button at the corner. 00:06:11.410 --> 00:06:14.340 So who knows? But, I mean, sometimes you, you 00:06:14.340 --> 00:06:16.240 get a glimpse into, like, behind the curtain, and 00:06:16.240 --> 00:06:16.890 sometimes you don't. 00:06:16.890 --> 00:06:18.910 Here's an example of getting a glimpse behind the 00:06:18.910 --> 00:06:21.840 curtain that I never, ever wanted to actually see. 00:06:21.840 --> 00:06:23.710 This is from the Amer app, a few versions 00:06:23.710 --> 00:06:26.390 ago, and it is, too date, the most terrifying 00:06:26.390 --> 00:06:28.620 error message I've ever seen in iOS. 00:06:28.620 --> 00:06:31.020 In case you can't read it, it's an unexpected 00:06:31.020 --> 00:06:35.590 token wanted and then a really strange list of 00:06:35.590 --> 00:06:38.470 symbols and commands, including the word string with double 00:06:38.470 --> 00:06:41.890 quotes around it, within single quotes. And things like 00:06:41.890 --> 00:06:44.610 that. So, I, you guys are the people that 00:06:44.610 --> 00:06:46.700 would know why this would happen or where it 00:06:46.700 --> 00:06:48.900 was coming from. I just took a screen shot 00:06:48.900 --> 00:06:50.750 and tried to get on with whatever I was 00:06:50.750 --> 00:06:51.870 trying to do. 00:06:51.870 --> 00:06:55.360 So, and honestly iOS is full of really fun 00:06:55.360 --> 00:07:00.750 stuff like this, where, you know, Siri sort of, 00:07:00.750 --> 00:07:04.930 I mean. She seems confident. But she parsed that 00:07:04.930 --> 00:07:06.580 sentence in a certain way that makes me wonder 00:07:06.580 --> 00:07:08.860 about, like, how that's being implemented. Like, how is 00:07:08.860 --> 00:07:11.550 this stuff being parsed. And, really, I can tell 00:07:11.550 --> 00:07:13.520 you one thing, the way that it tries to 00:07:13.520 --> 00:07:17.810 parse phrases is really more trouble than it's worth, 00:07:17.810 --> 00:07:19.350 you know. 00:07:19.350 --> 00:07:22.360 So, someone, they've decided to try to, you know, 00:07:22.360 --> 00:07:24.580 underskirt oats is what it says. It says that, 00:07:24.580 --> 00:07:26.990 not me. And what they're trying to do is 00:07:26.990 --> 00:07:28.990 parse spaces. But of course, as soon as you 00:07:28.990 --> 00:07:32.360 start throwing spaces into your grammatical checker, you're running, 00:07:32.360 --> 00:07:34.550 you're increasing the difficulty of doing this accurately versus 00:07:34.550 --> 00:07:37.410 doing it hilariously wrong. By an order of magnitude. 00:07:37.410 --> 00:07:40.350 And, man, I got, I got these for days. 00:07:40.350 --> 00:07:43.020 So, I feel like the, the one on the 00:07:43.020 --> 00:07:46.180 right, I really feel like iOS is getting tired 00:07:46.180 --> 00:07:48.920 of me making fun of it, a little it. 00:07:48.920 --> 00:07:52.370 I love Siri. We have a very intense relationship. 00:07:52.370 --> 00:07:55.010 But, my point here is that we judge truly 00:07:55.010 --> 00:07:57.200 good design not by its beauty or innovation or 00:07:57.200 --> 00:08:00.420 efficiency, but rather by how well it responds to 00:08:00.420 --> 00:08:03.430 its original problem. At what point are you sacrificing 00:08:03.430 --> 00:08:08.260 complexity, or sacrificing simplicity - either one - to 00:08:08.260 --> 00:08:10.540 confuse what problem you're actually responding to. 00:08:10.540 --> 00:08:12.710 I don't feel like I need iOS to, you 00:08:12.710 --> 00:08:14.370 know, to correct an entire phrase for me. It's 00:08:14.370 --> 00:08:16.730 very impressive when it works, but it's very frustrating 00:08:16.730 --> 00:08:18.950 when it doesn't. So at what point is, is 00:08:18.950 --> 00:08:21.500 the actual goodness of the design being hurt by 00:08:21.500 --> 00:08:21.780 that? 00:08:21.780 --> 00:08:25.250 So we're gonna look at three separate types of, 00:08:25.250 --> 00:08:28.660 of ways to quantify this stuff. So, it's one 00:08:28.660 --> 00:08:31.150 thing to be able to, to notice it and 00:08:31.150 --> 00:08:32.740 to get, to make, to laugh about it or 00:08:32.740 --> 00:08:34.390 to figure out a better way to do it. 00:08:34.390 --> 00:08:37.490 It's another thing to actually be able to do 00:08:37.490 --> 00:08:40.169 so on the basis of, like, a principle. So 00:08:40.169 --> 00:08:41.929 these are some basic principles, I think, that you 00:08:41.929 --> 00:08:44.449 could take and use when you, when you notice 00:08:44.449 --> 00:08:45.839 this stuff. 00:08:45.839 --> 00:08:48.420 Respect for intuition, having a common language, and having 00:08:48.420 --> 00:08:51.089 a sense of place. Respect for intuition is very 00:08:51.089 --> 00:08:53.920 simple. All I mean is, does it do what 00:08:53.920 --> 00:08:56.230 I think it will do? Which you think would 00:08:56.230 --> 00:08:58.560 be very basic, but honestly it's very easy to 00:08:58.560 --> 00:09:00.779 find stuff, all the time, where you put yourself 00:09:00.779 --> 00:09:03.360 in the shoes, in someone else's shoes, or even 00:09:03.360 --> 00:09:04.850 your shoes before you learned how to use the 00:09:04.850 --> 00:09:07.269 thing, and you, you realize some things are just 00:09:07.269 --> 00:09:08.610 not what they seem. 00:09:08.610 --> 00:09:11.540 So, this is two coffee makers ago for me. 00:09:11.540 --> 00:09:14.149 This guy broke. The guy after this wasn't good. 00:09:14.149 --> 00:09:16.839 And my current one. But this one, I, this 00:09:16.839 --> 00:09:18.850 is a very old photo, but I can not 00:09:18.850 --> 00:09:21.550 get over this button. All right, I'm gonna ask 00:09:21.550 --> 00:09:24.249 the room. The brew button. What do you think 00:09:24.249 --> 00:09:26.699 will happen when I press the brew button? 00:09:26.699 --> 00:09:31.879 AUDIENCE: It will brew a pot of coffee. 00:09:31.879 --> 00:09:32.779 C.D.: No, that says zero. None of you guys 00:09:32.779 --> 00:09:33.279 are gonna. All right, so, you press the brew 00:09:33.279 --> 00:09:35.910 button, and it wakes up the display, cause this 00:09:35.910 --> 00:09:38.920 coffee has a sleep mode. So the coffee maker 00:09:38.920 --> 00:09:41.870 has a sleep mode. So, the button says brew. 00:09:41.870 --> 00:09:43.180 It's on the front of the coffee maker. It 00:09:43.180 --> 00:09:46.110 looks aesthetic. You know, it's symmetrical, it looks good. 00:09:46.110 --> 00:09:48.029 But the button doesn't do what it says it 00:09:48.029 --> 00:09:48.759 will do. 00:09:48.759 --> 00:09:50.339 You actually have to press it again and then 00:09:50.339 --> 00:09:52.730 it lights up, and that means it's brewing coffee. 00:09:52.730 --> 00:09:54.540 So you've got two issues here. One, that the 00:09:54.540 --> 00:09:56.399 button straight up just doesn't do what it says 00:09:56.399 --> 00:09:59.259 it will do. It's a lying button. Number two, 00:09:59.259 --> 00:10:01.199 that the button now is lit up, which actually 00:10:01.199 --> 00:10:02.970 makes, makes it more of a call out. But 00:10:02.970 --> 00:10:04.560 it's actually an indicator. 00:10:04.560 --> 00:10:07.540 So what you have here is something where you, 00:10:07.540 --> 00:10:10.240 you've gotta talk about where something's an indicator or 00:10:10.240 --> 00:10:13.269 a call out. This is an app that I 00:10:13.269 --> 00:10:15.910 designed a really long time ago, in iOS years. 00:10:15.910 --> 00:10:19.110 This, this came out on iOS 3 I think. 00:10:19.110 --> 00:10:20.689 And it was a recording app. This came out 00:10:20.689 --> 00:10:25.170 before the Apple voice memos app was a thing. 00:10:25.170 --> 00:10:27.100 And we designed it, we said, hey, this app 00:10:27.100 --> 00:10:28.540 only needs to do one thing. It needs to 00:10:28.540 --> 00:10:29.660 record. So let's just make it a big red 00:10:29.660 --> 00:10:32.379 button that says press to record. 00:10:32.379 --> 00:10:34.899 Well, the issue with the app that we found 00:10:34.899 --> 00:10:37.360 after the first couple versions wasn't the press to 00:10:37.360 --> 00:10:38.720 record. It was what would have after you pressed 00:10:38.720 --> 00:10:41.990 press to record. So, initially, you press press to 00:10:41.990 --> 00:10:43.949 record, that button would turn bright green. Cause we 00:10:43.949 --> 00:10:46.040 said, or I said, it was my fault. We, 00:10:46.040 --> 00:10:48.879 I said red means record, like, I meant have, 00:10:48.879 --> 00:10:50.930 you gotta have the button say record. And green 00:10:50.930 --> 00:10:53.309 means go, so it's going. It's recording something. 00:10:53.309 --> 00:10:56.769 But we were confusing people, because they, they thought 00:10:56.769 --> 00:11:00.100 red meant recording and then. So people were like, 00:11:00.100 --> 00:11:01.550 it needs to turn red when it records, and 00:11:01.550 --> 00:11:02.740 I'm like, well then the record button will be 00:11:02.740 --> 00:11:04.899 green initially. That, that doesn't make any sense. Even 00:11:04.899 --> 00:11:06.959 though green is brighter. That's. 00:11:06.959 --> 00:11:09.970 So, there was this disconnect. And really, the solution 00:11:09.970 --> 00:11:11.850 that we ended up with was, after a couple 00:11:11.850 --> 00:11:13.309 of versions in the app store is, the button 00:11:13.309 --> 00:11:18.720 pulses. So the button pulses slowly brighter to darker. 00:11:18.720 --> 00:11:20.980 And so sometimes the, the, the solution that you're 00:11:20.980 --> 00:11:23.589 looking for is, you're just using the wrong format. 00:11:23.589 --> 00:11:25.199 I was in photoshop. It didn't occur to me 00:11:25.199 --> 00:11:26.759 to use animation at the time. 00:11:26.759 --> 00:11:29.399 So that's, that's that story. We're gonna talk a 00:11:29.399 --> 00:11:31.839 little bit about microwaves. And we're gonna talk a 00:11:31.839 --> 00:11:37.230 lot about microwaves, actually. Because microwaves are probably the 00:11:37.230 --> 00:11:40.649 single most-often used bad interface that there is, I 00:11:40.649 --> 00:11:43.519 think. That's probably way too strong. I, you know, 00:11:43.519 --> 00:11:44.709 it's worked well for this talk so I'm gonna 00:11:44.709 --> 00:11:45.860 go with it. 00:11:45.860 --> 00:11:47.949 This is a wall of controls. I mean, there's 00:11:47.949 --> 00:11:49.899 just a thousand things to do on a microwave. 00:11:49.899 --> 00:11:52.399 This, by the way, is the inside of a 00:11:52.399 --> 00:11:55.589 boat from ages ago, and there was a guy 00:11:55.589 --> 00:11:59.420 who stood there and did that. Whatever it was. 00:11:59.420 --> 00:12:03.619 So, I really like this quote from Gary Bernhardt. 00:12:03.619 --> 00:12:06.410 Programmers are good at building machines with seventeen meta-knobs 00:12:06.410 --> 00:12:08.420 that turn the ninety underlying knobs. They're bad at 00:12:08.420 --> 00:12:10.509 asking, why are there so many knobs? And I 00:12:10.509 --> 00:12:12.439 don't think that's just a, I mean, you can 00:12:12.439 --> 00:12:14.869 say that about programmers. I think it applies to, 00:12:14.869 --> 00:12:16.839 to anyone. So I'm not just trying to call 00:12:16.839 --> 00:12:17.480 you guys out. 00:12:17.480 --> 00:12:20.110 But, all right. So we have this microwave, and 00:12:20.110 --> 00:12:22.920 we have the, the intuition test. What. Does it 00:12:22.920 --> 00:12:24.379 do what I think it will do? Now, if 00:12:24.379 --> 00:12:26.110 you've never seen a microwave before, you've never seen 00:12:26.110 --> 00:12:30.119 this microwave before, and regardless of the fact that 00:12:30.119 --> 00:12:31.850 we've all sort of learned to bypass what the 00:12:31.850 --> 00:12:34.589 microwave says it will do, like, immediately. You might, 00:12:34.589 --> 00:12:36.670 you might say you try to start pressing buttons 00:12:36.670 --> 00:12:37.050 or whatever. 00:12:37.050 --> 00:12:40.160 Well, the top left button on this microwave says 00:12:40.160 --> 00:12:42.619 cook, right. So it's in the top left, which 00:12:42.619 --> 00:12:44.439 is normally a good place to put an important 00:12:44.439 --> 00:12:46.209 thing, and it says cook, which is normally what 00:12:46.209 --> 00:12:49.389 a microwave should do. So, maybe you try to 00:12:49.389 --> 00:12:51.319 push, you know, the cook button in the upper 00:12:51.319 --> 00:12:53.410 left. You press the cook button and this is 00:12:53.410 --> 00:12:56.529 my, obviously my beautiful hands. You press this, the 00:12:56.529 --> 00:13:03.029 cook button, and the microwave goes, Ac - 1. 00:13:03.029 --> 00:13:04.910 I don't know what Ac - 1 is. I 00:13:04.910 --> 00:13:08.300 didn't actually press start for fear of, of hurting 00:13:08.300 --> 00:13:11.379 something. This, this microwave fails the intuition test. It 00:13:11.379 --> 00:13:13.509 also fails the other test we'll get to that, 00:13:13.509 --> 00:13:14.980 let's finish this section with a button that does 00:13:14.980 --> 00:13:16.350 do what it says it's going to do, which 00:13:16.350 --> 00:13:18.889 is, this is from my xBox. That button returned 00:13:18.889 --> 00:13:20.430 me to what I was doing and I was 00:13:20.430 --> 00:13:23.420 like, all right. Thanks xBox. 00:13:23.420 --> 00:13:25.720 Kind of hilariously wordy but, that's why I took 00:13:25.720 --> 00:13:26.839 a picture of it, but. 00:13:26.839 --> 00:13:29.610 Second. Common language. So, and, and, by common language 00:13:29.610 --> 00:13:33.529 I mean, consistency both within interface and also outside 00:13:33.529 --> 00:13:36.300 of the interface. Like, a consistency with a user's 00:13:36.300 --> 00:13:39.559 common language. So let's look at a, a car 00:13:39.559 --> 00:13:42.449 dashboard really quick. Car dashboards are also, you know, 00:13:42.449 --> 00:13:45.480 this really crazy, like, heavy interface that tends to 00:13:45.480 --> 00:13:47.740 vary widely and things like that. 00:13:47.740 --> 00:13:50.339 This is actually Daniel, the other designer, this is 00:13:50.339 --> 00:13:52.629 his car. I think it's a Mazda. And every 00:13:52.629 --> 00:13:54.029 person that gets in this car does the same 00:13:54.029 --> 00:13:56.329 exact thing I did, which is they try to 00:13:56.329 --> 00:13:58.619 use that middle knob to adjust, like, the volume, 00:13:58.619 --> 00:14:01.559 or anything really. But that left knob is the 00:14:01.559 --> 00:14:01.970 volume. 00:14:01.970 --> 00:14:03.379 Let's break it down. So we've got three knobs 00:14:03.379 --> 00:14:07.730 here. This left knob. You push it to turn 00:14:07.730 --> 00:14:09.179 the stereo on and off. You turn it for 00:14:09.179 --> 00:14:11.509 volume. We could argue that it shouldn't be on 00:14:11.509 --> 00:14:13.170 the left. Someone else could say, but it's closer 00:14:13.170 --> 00:14:14.379 to the driver, so it should be on the 00:14:14.379 --> 00:14:16.949 left. So that one can go either direction. 00:14:16.949 --> 00:14:19.809 This middle knob. You push it to go to 00:14:19.809 --> 00:14:22.600 the next menu item. Like, cycle through, like, bass 00:14:22.600 --> 00:14:24.610 and treble and balance and stuff like that. And 00:14:24.610 --> 00:14:26.100 you turn it to change the value. So what's 00:14:26.100 --> 00:14:28.709 important about that is, it's not a toggle. The 00:14:28.709 --> 00:14:29.970 first button, when you push it, is a toggle. 00:14:29.970 --> 00:14:31.990 The second button, which looks more or less exactly 00:14:31.990 --> 00:14:34.749 the same, that walks you through a set of 00:14:34.749 --> 00:14:37.410 menu options. And the turning changes the value, which 00:14:37.410 --> 00:14:39.009 is sort of like volume, but it's important to 00:14:39.009 --> 00:14:40.949 remember that until you push it, this button doesn't, 00:14:40.949 --> 00:14:43.610 this knob doesn't do anything. Cause it hasn't selected 00:14:43.610 --> 00:14:43.779 anything. 00:14:43.779 --> 00:14:46.559 So, the initial interaction with that button, it was 00:14:46.559 --> 00:14:50.249 fifty percent non-functional until you know how to activate 00:14:50.249 --> 00:14:51.920 the button. The third one over here doesn't push 00:14:51.920 --> 00:14:55.759 in at all. And it's, and it tunes, when 00:14:55.759 --> 00:14:57.660 you turn it, which doesn't apply to like half 00:14:57.660 --> 00:14:59.040 the thing that you're, that you're doing with the 00:14:59.040 --> 00:15:02.339 car. So, I mean, there's an in, there's a 00:15:02.339 --> 00:15:06.059 severe lack of internal consistency here. 00:15:06.059 --> 00:15:07.689 Here's another example we're gonna go back to a 00:15:07.689 --> 00:15:11.269 couple times. This is the terminator-esque expensive coffee maker 00:15:11.269 --> 00:15:14.209 that we have in the Jacksonville office. It's very 00:15:14.209 --> 00:15:16.339 fancy and nice, but there are also some very 00:15:16.339 --> 00:15:19.550 fundamentally non-nice things about it. Let's look at the 00:15:19.550 --> 00:15:20.059 top. 00:15:20.059 --> 00:15:23.519 So, I've got controls over more than I probably 00:15:23.519 --> 00:15:26.480 ever would need. I've got nine sizes of cup. 00:15:26.480 --> 00:15:29.050 I'm sure you have nine sizes of cup for 00:15:29.050 --> 00:15:33.050 your. I've got flavor and shrink. Flavor goes from 00:15:33.050 --> 00:15:35.749 light to bold. I, I don't know what, I 00:15:35.749 --> 00:15:37.579 honestly don't know what flavor really does. We just 00:15:37.579 --> 00:15:39.129 crank it all to bold. 00:15:39.129 --> 00:15:42.220 And strength, strength goes from mild to strong to 00:15:42.220 --> 00:15:46.309 intense. So, there's three, there's, look, you can do, 00:15:46.309 --> 00:15:48.709 you can make a panopoly of coffees with this 00:15:48.709 --> 00:15:51.249 thing, apparently. But, so our buttons down here, our 00:15:51.249 --> 00:15:52.670 ways to interact with this coffee maker. We have 00:15:52.670 --> 00:15:54.989 a single cup button, caraf button, and up and 00:15:54.989 --> 00:15:57.970 down and a strength, all right. 00:15:57.970 --> 00:16:00.439 So, say I want to change the strength of 00:16:00.439 --> 00:16:02.489 my coffee. I press the strength button, which actually 00:16:02.489 --> 00:16:05.629 cycles between strength and flavor. And the proper one 00:16:05.629 --> 00:16:06.739 is lit up. And then I press my up 00:16:06.739 --> 00:16:08.809 and down arrows to, like, crank up the strength 00:16:08.809 --> 00:16:11.860 or crank down the strength. Whatever. By the way, 00:16:11.860 --> 00:16:16.259 intense is way too strong. It's really strong. 00:16:16.259 --> 00:16:17.470 So I go over here to the cup, and 00:16:17.470 --> 00:16:18.569 maybe I want to crank up or down my 00:16:18.569 --> 00:16:21.509 cup size. That button, you press that button, the 00:16:21.509 --> 00:16:23.360 up and down arrows don't do anything. That button 00:16:23.360 --> 00:16:26.720 actually cycles. It actually walks all the way through. 00:16:26.720 --> 00:16:28.739 Those two arrow buttons, they do set the clock 00:16:28.739 --> 00:16:31.050 and they do, like, obviously we didn't set the 00:16:31.050 --> 00:16:34.149 clock. No, I took all these pictures at exactly 00:16:34.149 --> 00:16:37.170 twelve o' clock. And they do change the strength 00:16:37.170 --> 00:16:39.350 but they don't, they don't, they don't function for 00:16:39.350 --> 00:16:41.939 those other two buttons, even though those buttons function. 00:16:41.939 --> 00:16:44.540 They do the exact same actual thing in the 00:16:44.540 --> 00:16:46.989 software side. They're cranking a value up or down. 00:16:46.989 --> 00:16:50.800 So, there's internal inconsistency there. Oh, yeah, so I, 00:16:50.800 --> 00:16:53.939 so, yeah. So there you go. I'm up to 00:16:53.939 --> 00:16:54.360 XL. 00:16:54.360 --> 00:16:56.779 Video games, again. Video games are great. I think 00:16:56.779 --> 00:16:59.689 they're really, I, I like playing video games, but 00:16:59.689 --> 00:17:03.149 also there's a re-invented UI all the time in 00:17:03.149 --> 00:17:04.990 video games, so I think it's really interesting how 00:17:04.990 --> 00:17:07.970 often those guys start from zero and work their 00:17:07.970 --> 00:17:09.920 way up into a completely different interface depending on 00:17:09.920 --> 00:17:11.579 what kind of game you're playing. It's tough. 00:17:11.579 --> 00:17:15.730 But, outside of the software, the controller has been 00:17:15.730 --> 00:17:17.799 the same for a relatively long time. There are 00:17:17.799 --> 00:17:19.640 more shoulder buttons and stuff but you have a 00:17:19.640 --> 00:17:22.519 directional control and you have A, B, X, and 00:17:22.519 --> 00:17:24.599 Y. Generally speaking, it's safe to say that A 00:17:24.599 --> 00:17:28.690 means cool, and B means no. Most of the 00:17:28.690 --> 00:17:31.610 time, right. Would you agree? I mean, since like 00:17:31.610 --> 00:17:34.760 1985 or whenever the NES game went out. Or 00:17:34.760 --> 00:17:37.559 actually, those buttons are reversed. But that's kind of. 00:17:37.559 --> 00:17:40.049 So, for example, in Mass Effect, this is old, 00:17:40.049 --> 00:17:42.070 in Mass Effect one, I think, which explains why 00:17:42.070 --> 00:17:46.279 the iPhone photo is bad quality. A is land 00:17:46.279 --> 00:17:48.799 and B is leave orbit for this part of 00:17:48.799 --> 00:17:50.409 the game where you are in orbit and you 00:17:50.409 --> 00:17:51.529 need to land or not. 00:17:51.529 --> 00:17:55.970 So, cool. Like, A, basically does the thing. B 00:17:55.970 --> 00:17:59.010 backs you out of the thing. Same exact game. 00:17:59.010 --> 00:18:01.919 Different screen. Same space ship, whatever. A is enter 00:18:01.919 --> 00:18:04.769 system, B doesn't do anything, and X is exit, 00:18:04.769 --> 00:18:08.769 which actually backs you out of the menu. So 00:18:08.769 --> 00:18:10.960 there's no particular reason for this, other than somebody 00:18:10.960 --> 00:18:14.620 didn't think about maintaining a common language with basically 00:18:14.620 --> 00:18:16.600 all of video games. At least I, I assume 00:18:16.600 --> 00:18:18.460 there isn't a reason. I don't know. I'm, I'm 00:18:18.460 --> 00:18:21.039 the user on the other side accidentally hitting B, 00:18:21.039 --> 00:18:21.490 right. 00:18:21.490 --> 00:18:23.090 So on this screen, my loud out screen, I 00:18:23.090 --> 00:18:26.299 think this is Mass Effect two, A doesn't actually 00:18:26.299 --> 00:18:28.890 bring me to the next screen here. It actually 00:18:28.890 --> 00:18:31.269 walks the weapon with another weapon. So there's a 00:18:31.269 --> 00:18:32.799 bunch of stuff going up on this page, but 00:18:32.799 --> 00:18:35.120 you're eventually gonna choose weapons and then go into 00:18:35.120 --> 00:18:37.419 the mission. 00:18:37.419 --> 00:18:40.570 A doesn't do that. A actually changes your weapon 00:18:40.570 --> 00:18:43.539 selection. X modifies, so it actually activates this weapon 00:18:43.539 --> 00:18:48.460 mod screen. Y toggles a, a flavorful sci-fi description. 00:18:48.460 --> 00:18:51.490 And B confirms and sends you into the mission. 00:18:51.490 --> 00:18:53.600 So I hope you weren't expecting to, like, back 00:18:53.600 --> 00:18:55.240 out of this screen, because you're just gonna get 00:18:55.240 --> 00:18:57.630 landed on a planet with angry people shooting at 00:18:57.630 --> 00:18:58.100 you. 00:18:58.100 --> 00:19:00.260 So, I mean, this, these are off. I mean, 00:19:00.260 --> 00:19:02.409 this is from the next game in the series. 00:19:02.409 --> 00:19:04.899 This a common language that is there that needs 00:19:04.899 --> 00:19:08.350 to be paid attention to and isn't. So, really, 00:19:08.350 --> 00:19:11.909 I like this quote. Innovate as a last resort. 00:19:11.909 --> 00:19:14.549 In that, that applies in so many different ways, 00:19:14.549 --> 00:19:17.390 but the context I'm talking about here, it's that 00:19:17.390 --> 00:19:20.289 before you start doing something different than maybe you've 00:19:20.289 --> 00:19:22.570 already done or, or, or other people have already 00:19:22.570 --> 00:19:24.019 done, you need to justify it and you need 00:19:24.019 --> 00:19:27.190 to be aware of like the, the existing languages 00:19:27.190 --> 00:19:31.299 that, that, or the commonality of the, the history 00:19:31.299 --> 00:19:33.659 of whatever you're using. 00:19:33.659 --> 00:19:38.179 So, obviously, accidentally, semi-accidentally putting a button on X 00:19:38.179 --> 00:19:40.080 instead of B is not innovation so much as 00:19:40.080 --> 00:19:42.750 an oversight. But this speaks to the respect that 00:19:42.750 --> 00:19:45.340 you need to have for existing patterns and existing 00:19:45.340 --> 00:19:46.659 user assumptions. 00:19:46.659 --> 00:19:49.990 Number three, we're gonna look at here is a 00:19:49.990 --> 00:19:53.909 sense of place. So, what I mean here is 00:19:53.909 --> 00:19:56.789 the navigation of an item. Where is a user 00:19:56.789 --> 00:19:59.779 when they're using your thing. Where are they in 00:19:59.779 --> 00:20:01.140 your website, for example. 00:20:01.140 --> 00:20:04.549 So Steve Krug says, navigating isn't just a feature 00:20:04.549 --> 00:20:06.210 of the website; it is the website, in the 00:20:06.210 --> 00:20:08.330 same way that the building, shelves, and cash registers 00:20:08.330 --> 00:20:11.830 are Sears. So like, navigation is everything when it 00:20:11.830 --> 00:20:14.370 comes to helping your user understand where they are. 00:20:14.370 --> 00:20:17.309 And this quote's pretty old. So he means like 00:20:17.309 --> 00:20:20.299 navigation between pages and stuff. We, with a lot 00:20:20.299 --> 00:20:21.840 of fat client apps and things like that, it's 00:20:21.840 --> 00:20:26.190 not just pages. It's modes of interface, it's states, 00:20:26.190 --> 00:20:28.639 it's what is active and available at any time 00:20:28.639 --> 00:20:31.070 to me. Maybe my url hasn't change for awhile, 00:20:31.070 --> 00:20:33.019 but there's all of these different ways and navigating 00:20:33.019 --> 00:20:36.090 and walking into and out of states of interface 00:20:36.090 --> 00:20:38.120 and flows. 00:20:38.120 --> 00:20:41.110 So, button modes might get you thinking about something 00:20:41.110 --> 00:20:45.260 that you're familiar with, which is VIM. And one 00:20:45.260 --> 00:20:47.130 of the reasons that I, I started using VIM 00:20:47.130 --> 00:20:50.480 like a month ago. I like it, I guess. 00:20:50.480 --> 00:20:52.809 So, the, all the HashRocket guys are making fun 00:20:52.809 --> 00:20:56.210 of me. So, VIM, if you've ever tried. How 00:20:56.210 --> 00:20:59.110 many of you have not tried to use VIM? 00:20:59.110 --> 00:21:01.630 OK. So there's a few of you. So when 00:21:01.630 --> 00:21:04.210 you try to use VIM, for you five guys, 00:21:04.210 --> 00:21:08.659 VIM is really popular. When you try to use 00:21:08.659 --> 00:21:10.570 VIM, you might try to just start typing a 00:21:10.570 --> 00:21:12.779 word. But it's not going to do anything. It's 00:21:12.779 --> 00:21:13.929 not going to do what you think it's going 00:21:13.929 --> 00:21:15.440 to do, even though it looks like a text 00:21:15.440 --> 00:21:17.590 editor and your keyboard looks like a keyboard. 00:21:17.590 --> 00:21:21.899 You actually have to, you actually have to go 00:21:21.899 --> 00:21:24.210 into insert mode, which is a specific mode, so 00:21:24.210 --> 00:21:26.179 the reason that VIM is so complicated is because 00:21:26.179 --> 00:21:28.760 the modes are not immediately apparent. And that's fine 00:21:28.760 --> 00:21:30.370 for an expert tool. You can do an incredible 00:21:30.370 --> 00:21:32.750 amount of powerful, incredible amount of powerful things with 00:21:32.750 --> 00:21:35.600 VIM. But it is so heavily modal that it 00:21:35.600 --> 00:21:37.820 is very fundamentally confusing and it can be really 00:21:37.820 --> 00:21:41.120 hard for someone to get the hang of initially. 00:21:41.120 --> 00:21:43.610 So, something else that's heavily modal is my microwave. 00:21:43.610 --> 00:21:47.070 And it is a lot worse designed than VIM. 00:21:47.070 --> 00:21:51.200 Let's, let's be clear. So say I want to, 00:21:51.200 --> 00:21:54.830 for some reason I want to soften something. So, 00:21:54.830 --> 00:22:00.470 I, I, I press soften with my well-manicured. That's 00:22:00.470 --> 00:22:06.029 my wife's hand. Press soften, and the, it says 00:22:06.029 --> 00:22:07.269 one. 00:22:07.269 --> 00:22:09.889 So, through trial and error, I was able to 00:22:09.889 --> 00:22:11.820 discover what it wants you to do here. And 00:22:11.820 --> 00:22:13.320 what the soften button wants you to do is 00:22:13.320 --> 00:22:14.860 select a value from one to four and then 00:22:14.860 --> 00:22:17.919 press start. All right. So the reason that that 00:22:17.919 --> 00:22:19.860 is confusing is not only, well, not only is 00:22:19.860 --> 00:22:22.059 there no indicator of that, what that, what is 00:22:22.059 --> 00:22:24.100 going to happen there, it's that the microwave has 00:22:24.100 --> 00:22:24.880 switched modes. 00:22:24.880 --> 00:22:26.470 And the reason I blacked all this out is 00:22:26.470 --> 00:22:28.250 once you press that soften button, you're no longer 00:22:28.250 --> 00:22:33.269 in microwave mode. You're in softness selector mode, right. 00:22:33.269 --> 00:22:35.070 So while all of these other buttons are still 00:22:35.070 --> 00:22:36.809 there, but the mode of the entire thing is 00:22:36.809 --> 00:22:38.840 switched. I'm actually, I've actually walked a step down 00:22:38.840 --> 00:22:41.799 into, I've navigated somewhere. Walked a step down into 00:22:41.799 --> 00:22:45.289 a flow, without getting any feedback or, you know, 00:22:45.289 --> 00:22:48.010 unless you count one on the screen as feedback. 00:22:48.010 --> 00:22:50.299 I have very little feedback that I have actually 00:22:50.299 --> 00:22:55.070 gone anywhere. So what the, what badly designed modes 00:22:55.070 --> 00:22:56.590 can do to you is that they result in 00:22:56.590 --> 00:23:00.019 a secret sequence of actions, like I, unless, till 00:23:00.019 --> 00:23:03.029 I discovered what the app or, or interface or 00:23:03.029 --> 00:23:05.649 microwave wants me to do, I don't know what 00:23:05.649 --> 00:23:08.570 it is. And if it's a mode, then that 00:23:08.570 --> 00:23:10.980 will drive me down what is, potentially, can be 00:23:10.980 --> 00:23:13.590 a long chain of, of sequential actions. 00:23:13.590 --> 00:23:15.760 So, for example, with this microwave, I like cooking 00:23:15.760 --> 00:23:17.919 things on power five, cause then, like, it heats 00:23:17.919 --> 00:23:19.480 it a little bit more evenly and you don't 00:23:19.480 --> 00:23:23.309 end up with, like, lava combined with ice, if 00:23:23.309 --> 00:23:26.830 you're cooking a Hot Pocket or whatever. So, like, 00:23:26.830 --> 00:23:28.720 I would say, with this microwave, and this is 00:23:28.720 --> 00:23:30.590 very specific to this microwave. Don't go back and 00:23:30.590 --> 00:23:32.370 think that this is, it will apply to your 00:23:32.370 --> 00:23:35.710 microwave. Because this, this microwave, you, you can't push 00:23:35.710 --> 00:23:37.309 the buttons first. You have to press cook time 00:23:37.309 --> 00:23:39.750 in order to put time in at all. 00:23:39.750 --> 00:23:41.909 Then, you actually have to press power, after you 00:23:41.909 --> 00:23:44.230 have time entered into the display. Then you can 00:23:44.230 --> 00:23:45.840 press five and change the power to five and 00:23:45.840 --> 00:23:50.710 then start. So this microwave has, like, there's so 00:23:50.710 --> 00:23:52.970 much here, but like, in order to do what 00:23:52.970 --> 00:23:55.190 is a relatively basic feature of the microwave, you 00:23:55.190 --> 00:23:57.659 have to know a specific chain of commands. 00:23:57.659 --> 00:24:00.350 I, I really don't want to compare that to 00:24:00.350 --> 00:24:03.820 VIM, but that is pretty much like VIM. But 00:24:03.820 --> 00:24:05.380 VIM is an expert tool and this microwave is 00:24:05.380 --> 00:24:07.080 supposed to be for, for everyone who needs to 00:24:07.080 --> 00:24:08.980 use a microwave. So, you know. 00:24:08.980 --> 00:24:11.049 But after entering a mode, you have to do 00:24:11.049 --> 00:24:13.440 one of two things. You have to either force 00:24:13.440 --> 00:24:15.460 completion of the mode, which is what my microwave 00:24:15.460 --> 00:24:17.019 does. None of the other buttons will work until 00:24:17.019 --> 00:24:19.230 you, you know, cancel out and panic and just 00:24:19.230 --> 00:24:21.559 cook on ten. And, you know, cook your thing 00:24:21.559 --> 00:24:24.809 too much. Or destroy your existing progress. 00:24:24.809 --> 00:24:28.559 So I actually checked with a very similar microwave 00:24:28.559 --> 00:24:30.380 at my parents' house when I was there over 00:24:30.380 --> 00:24:32.429 Easter. And their microwave, if you start typing and 00:24:32.429 --> 00:24:34.549 you press something else, it just kills whatever you 00:24:34.549 --> 00:24:36.889 were doing before. So what'll happen then is that 00:24:36.889 --> 00:24:38.580 you'll switch the power to five, but then you'll 00:24:38.580 --> 00:24:40.279 type in time and it'll start cooking at ten 00:24:40.279 --> 00:24:42.710 because when you switched to put in the time, 00:24:42.710 --> 00:24:44.960 it just canceled whatever you did before. 00:24:44.960 --> 00:24:48.980 So, microwaves. You know. 00:24:48.980 --> 00:24:52.370 So, let's go back to the coffee maker, because 00:24:52.370 --> 00:24:56.529 destroying progress can have very real-world implications aside from 00:24:56.529 --> 00:24:59.840 accidentally cooking a thing stronger than you wanted to. 00:24:59.840 --> 00:25:05.330 So this microwave has a very rich user experience 00:25:05.330 --> 00:25:08.000 when it comes to actually getting coffee into and 00:25:08.000 --> 00:25:08.980 out of the thing. 00:25:08.980 --> 00:25:11.330 So you press the open button. This flips out. 00:25:11.330 --> 00:25:14.149 That thing unfolds. You've got all of this different 00:25:14.149 --> 00:25:17.659 stuff going on there. Well, it's got, it's a 00:25:17.659 --> 00:25:19.320 grinder, too. I should point this out. It's out 00:25:19.320 --> 00:25:20.830 of frame. Up there at the top, you put 00:25:20.830 --> 00:25:23.279 your beans in there. You close, you get a, 00:25:23.279 --> 00:25:24.970 you get the filter emptied out. You close it 00:25:24.970 --> 00:25:27.399 up, you hit start. It goes whirr, and it 00:25:27.399 --> 00:25:28.889 starts grinding your coffee. 00:25:28.889 --> 00:25:32.639 Well, here's the problem. Is that open button, fully 00:25:32.639 --> 00:25:36.539 functional the whole time. So, and this has happened, 00:25:36.539 --> 00:25:38.110 I would say, this has happened a handful of 00:25:38.110 --> 00:25:39.889 times and it's really bad, because you, you end 00:25:39.889 --> 00:25:42.009 up wanting to fight somebody before the day has 00:25:42.009 --> 00:25:44.389 even started. But you're standing there with your mug 00:25:44.389 --> 00:25:46.399 next to it. You're first in line. You know, 00:25:46.399 --> 00:25:48.960 you've just started the coffee. It's finished grinding. It's 00:25:48.960 --> 00:25:49.960 started to brew. 00:25:49.960 --> 00:25:52.519 And some guy walks up and he goes boink, 00:25:52.519 --> 00:25:54.429 and he hits the open button and the coffee 00:25:54.429 --> 00:25:58.669 maker's like, pfft. You put it back in, you 00:25:58.669 --> 00:26:00.240 press start and it goes whirr, and it starts 00:26:00.240 --> 00:26:02.570 grinding a new batch of coffee. So you can 00:26:02.570 --> 00:26:06.090 destroy. That one button will destroy an entire, like, 00:26:06.090 --> 00:26:08.450 entire thing of coffee. Like, you don't, it, it 00:26:08.450 --> 00:26:11.570 doesn't know what it, why it's doing that. It's 00:26:11.570 --> 00:26:13.250 really annoying. You have to go in and empty 00:26:13.250 --> 00:26:15.019 the filter and reset the whole thing. So you 00:26:15.019 --> 00:26:18.049 can destroy an entire pot of semi-brewed coffee just 00:26:18.049 --> 00:26:20.919 by pressing the open button. 00:26:20.919 --> 00:26:22.190 So that's awful. 00:26:22.190 --> 00:26:25.320 Here's a, here's the coffee maker I have at 00:26:25.320 --> 00:26:27.970 home now. It is simple. It was, it was 00:26:27.970 --> 00:26:30.070 not expensive. It's not, it doesn't look like as 00:26:30.070 --> 00:26:32.210 much like a terminator as the other coffee maker 00:26:32.210 --> 00:26:34.700 does. You, it doesn't have a grinder in it 00:26:34.700 --> 00:26:37.159 or anything like that. We're talking pretty minimal. It 00:26:37.159 --> 00:26:39.950 makes water hot and it puts it on the 00:26:39.950 --> 00:26:40.090 coffee. 00:26:40.090 --> 00:26:42.419 On the inside here, this is a, this is 00:26:42.419 --> 00:26:45.289 the spout. So this is your little water spout 00:26:45.289 --> 00:26:47.509 that's actually gonna put the, the water into the 00:26:47.509 --> 00:26:50.940 coffee. It flips over here. So, like, you fill 00:26:50.940 --> 00:26:53.559 up the thing, the tank with water. You pull 00:26:53.559 --> 00:26:56.889 that over. Close the lid. It puts water on 00:26:56.889 --> 00:26:59.710 the coffee like it's supposed to, you know. Not 00:26:59.710 --> 00:27:00.750 very glamorous. 00:27:00.750 --> 00:27:02.850 But here's one thing that I discovered on, completely 00:27:02.850 --> 00:27:04.820 on accident that I thought was great and I 00:27:04.820 --> 00:27:06.970 got probably way too excited about it. Let's watch 00:27:06.970 --> 00:27:10.950 a cinematic recreation of, of this, of this coffee 00:27:10.950 --> 00:27:14.880 maker and what I discovered. 00:27:14.880 --> 00:27:20.029 I should have. I should have had music. 00:27:20.029 --> 00:27:25.500 Oh my gosh! I was so excited. I was 00:27:25.500 --> 00:27:28.409 like, oh, whoever designed this but a little tab 00:27:28.409 --> 00:27:31.009 thing right there, and it's slanted just a little 00:27:31.009 --> 00:27:33.929 bit, and it cost probably almost zero dollars, but 00:27:33.929 --> 00:27:36.789 it was. That pushes the little arm in there 00:27:36.789 --> 00:27:38.809 to keep you from accidentally just putting hot water 00:27:38.809 --> 00:27:42.710 back into your tank. And I was like, this 00:27:42.710 --> 00:27:49.179 coffee maker has developed a lowfi like very non-technical 00:27:49.179 --> 00:27:51.279 solution to a problem, and this was probably done 00:27:51.279 --> 00:27:53.639 by whoever engineered the coffee maker. Like, it was 00:27:53.639 --> 00:27:55.190 probably not done by the guy who designed the 00:27:55.190 --> 00:27:56.669 outside of the coffee maker. It was done by 00:27:56.669 --> 00:27:58.519 the guy who designed the inside of the coffee 00:27:58.519 --> 00:27:59.460 maker. 00:27:59.460 --> 00:28:02.509 But he's avoided a very basic kind of user 00:28:02.509 --> 00:28:05.570 error. So let's, let's do a, let's do a 00:28:05.570 --> 00:28:06.570 feature comparison here. 00:28:06.570 --> 00:28:10.730 This coffee maker was $200. This coffee maker's #35. 00:28:10.730 --> 00:28:15.649 This coffee maker has a one-button self-destruct, right. 00:28:15.649 --> 00:28:19.860 This has a one-tab coffee saver. 00:28:19.860 --> 00:28:20.970 This thing's got a thermal carafe. 00:28:20.970 --> 00:28:22.039 This thing's what I like to call a visual 00:28:22.039 --> 00:28:25.950 quantity indicator. That means, that means you can see 00:28:25.950 --> 00:28:27.429 how much coffee is in it, which is a 00:28:27.429 --> 00:28:29.090 whole other thing. 00:28:29.090 --> 00:28:31.769 All right, design is the decision making in the 00:28:31.769 --> 00:28:34.720 presence of constraint. You give somebody $200 and you 00:28:34.720 --> 00:28:36.629 want a coffee maker with this giant list of 00:28:36.629 --> 00:28:40.250 features, versus a #35 with, with like way less 00:28:40.250 --> 00:28:43.309 features. You're, maybe, well the design on the, of 00:28:43.309 --> 00:28:45.700 the later might actually be better. You know, it's 00:28:45.700 --> 00:28:48.740 not. Constraint is not necessarily a bad thing. I 00:28:48.740 --> 00:28:49.639 really like this quote. 00:28:49.639 --> 00:28:51.480 So here's what we're not talking about. I've got 00:28:51.480 --> 00:28:52.960 to speed it up. Here's what we're not talking 00:28:52.960 --> 00:28:54.820 about. We're not talking about button styles or what 00:28:54.820 --> 00:28:57.730 things look like. That's important, but generally speaking we 00:28:57.730 --> 00:28:59.000 know what a button looks like. We know where 00:28:59.000 --> 00:29:01.820 it is. You know, buttons have looked more or 00:29:01.820 --> 00:29:04.080 less the same up until this year. 00:29:04.080 --> 00:29:10.210 So, like, that's, that's decoration. It's ridiculously important, but 00:29:10.210 --> 00:29:11.590 that's not what you'd have to worry about in 00:29:11.590 --> 00:29:14.000 order to have an interaction feel good. And it's 00:29:14.000 --> 00:29:17.090 also. I also just want to say that, like, 00:29:17.090 --> 00:29:20.289 as a designer, I wanted to facilitate good experiences 00:29:20.289 --> 00:29:22.519 and not have them get hurt at the expense, 00:29:22.519 --> 00:29:25.299 or, at the expense of my design preferences. 00:29:25.299 --> 00:29:27.360 So Ancient City Ruby was at this hotel last 00:29:27.360 --> 00:29:29.179 year. This is, or, this year, too. This is 00:29:29.179 --> 00:29:32.539 the Casa Monica Hotel in Saint Augustine. So, beautiful 00:29:32.539 --> 00:29:35.200 on the outside. Absolutely gorgeous. Really nice architecture in 00:29:35.200 --> 00:29:35.610 the whole place. 00:29:35.610 --> 00:29:37.159 We walk into the room, and this is our 00:29:37.159 --> 00:29:41.240 window. All right, so our window is like three 00:29:41.240 --> 00:29:43.389 feet tall. It's this little square window. The room 00:29:43.389 --> 00:29:45.279 is all dim. There's just, if you see up 00:29:45.279 --> 00:29:46.159 here, there's a little plaque. This is what the 00:29:46.159 --> 00:29:47.240 plaque says. 00:29:47.240 --> 00:29:51.129 These uniquely shaped and placed windows, blah blah blah. 00:29:51.129 --> 00:29:53.019 As to why some windows are regularly shaped and 00:29:53.019 --> 00:29:54.830 low to the floor is known only to Franklin 00:29:54.830 --> 00:29:59.529 Smith, who is the, he was the amateur architect 00:29:59.529 --> 00:30:01.539 that designed this building. So he was really into 00:30:01.539 --> 00:30:03.139 the outside of the building and not so much 00:30:03.139 --> 00:30:05.389 the inside, at the expense of his users, I 00:30:05.389 --> 00:30:06.429 should say. 00:30:06.429 --> 00:30:09.019 Here's something that's actually well-designed, but it's not well-decorated. 00:30:09.019 --> 00:30:11.379 So this is the hotel receipt, or. Hotel receipt? 00:30:11.379 --> 00:30:15.850 Or, the parking receipt at the airport. It's ugly, 00:30:15.850 --> 00:30:17.679 you know. I would like to redesign it from 00:30:17.679 --> 00:30:21.990 a decorative sense. But the actual fundamental design of 00:30:21.990 --> 00:30:24.129 it is actually all right. Because it's probably really 00:30:24.129 --> 00:30:26.379 low-cost to print these things, like, that's like nine 00:30:26.379 --> 00:30:29.279 lines of dot matrix, right. So there's probably a 00:30:29.279 --> 00:30:31.919 lot of money saved just in terms of the 00:30:31.919 --> 00:30:33.860 complexity of the hardware and things like that. 00:30:33.860 --> 00:30:36.289 And here's the, here's the thing you put it 00:30:36.289 --> 00:30:40.279 in. This thing, also really ugly. But, it performs 00:30:40.279 --> 00:30:42.490 great. There's one slot. You put your ticket in. 00:30:42.490 --> 00:30:44.830 You put your card in after your ticket. It 00:30:44.830 --> 00:30:47.350 spits out your card and your receipt. So there's 00:30:47.350 --> 00:30:48.879 almost no way to screw this up. They actually 00:30:48.879 --> 00:30:52.409 have instructions. It says insert ticket. Insert credit card. 00:30:52.409 --> 00:30:54.480 Take credit card. Take receipt. You almost don't need 00:30:54.480 --> 00:30:57.149 instructions for that, but I appreciate it. 00:30:57.149 --> 00:30:59.590 It's well, it's not pretty. It's not well-decorated. But 00:30:59.590 --> 00:31:03.720 it's well-designed and that is solving the right problem. 00:31:03.720 --> 00:31:06.919 Good design solves the right problem. So this, when 00:31:06.919 --> 00:31:08.279 we come back to things like this, we look 00:31:08.279 --> 00:31:12.929 at the, the microwave. Why? Like, why did this 00:31:12.929 --> 00:31:14.870 end up like this? And I, I really think 00:31:14.870 --> 00:31:17.009 that it's because microwaves are not designed the way 00:31:17.009 --> 00:31:18.769 we design soft- or, hopefully not designed the way 00:31:18.769 --> 00:31:21.669 we design software. And, like, this industry doesn't necessarily 00:31:21.669 --> 00:31:23.779 work the same way we do. And I think 00:31:23.779 --> 00:31:27.220 that the process can have all the influence in 00:31:27.220 --> 00:31:28.929 defining the product. 00:31:28.929 --> 00:31:32.210 So, with that said, let's design a microwave the 00:31:32.210 --> 00:31:34.639 way we would design a product really quick here. 00:31:34.639 --> 00:31:37.639 So, I want to design to solve a problem. 00:31:37.639 --> 00:31:39.980 I want to design it feature by feature, to 00:31:39.980 --> 00:31:42.019 justify the most important stuff that you would need 00:31:42.019 --> 00:31:43.110 to have a microwave work well. 00:31:43.110 --> 00:31:45.590 So let's start with a clean slate. So the 00:31:45.590 --> 00:31:47.159 first thing I'm gonna need on my microwave, is 00:31:47.159 --> 00:31:49.070 I'm gonna need to know how much time, cause 00:31:49.070 --> 00:31:50.799 the microwave counts down, and I'm gonna need to 00:31:50.799 --> 00:31:53.370 know I'm gonna be able to start and stop 00:31:53.370 --> 00:31:53.690 it. 00:31:53.690 --> 00:31:55.889 So that's the first thing we'll need. Well, I 00:31:55.889 --> 00:31:57.249 need to be able to increment and decrement the 00:31:57.249 --> 00:32:01.539 time. So let's do that. I probably don't have 00:32:01.539 --> 00:32:04.759 a use case for less than ten second increments 00:32:04.759 --> 00:32:08.450 for cooking something. So that seems reasonable. 00:32:08.450 --> 00:32:10.259 I do have a use case for, like, defrosting 00:32:10.259 --> 00:32:10.799 or something like that, where I might have to 00:32:10.799 --> 00:32:13.629 hammer that button a bunch of times. So let's 00:32:13.629 --> 00:32:15.929 add minute selectors as well, so we can go 00:32:15.929 --> 00:32:18.620 up to, you know, five minutes relatively quickly, with 00:32:18.620 --> 00:32:21.269 very little fuss. It makes sense immediately. 00:32:21.269 --> 00:32:24.309 And I also need to adjust the power level. 00:32:24.309 --> 00:32:26.940 Well, let's do that too. Let's use our existing 00:32:26.940 --> 00:32:30.499 design metaphor. Let's use our existing design language, and 00:32:30.499 --> 00:32:33.970 we'll put a power selector right there. And that's 00:32:33.970 --> 00:32:35.120 it. 00:32:35.120 --> 00:32:39.049 So, what we've done is we've, we've followed user 00:32:39.049 --> 00:32:42.309 needs and we've followed specific feature needs. We've avoided 00:32:42.309 --> 00:32:47.820 inconsistency. We've avoided confusion. We've also avoided modes. So, 00:32:47.820 --> 00:32:50.220 hypothetically, if you were to design something that, that, 00:32:50.220 --> 00:32:52.649 that backed this up, hardware wise, you should be 00:32:52.649 --> 00:32:54.629 able to just change power on the fly. I 00:32:54.629 --> 00:32:56.210 mean, maybe there's something I don't know about microwaves 00:32:56.210 --> 00:32:57.230 where you can't do that and you wouldn't be 00:32:57.230 --> 00:32:59.440 able to use those buttons, but as far as 00:32:59.440 --> 00:33:02.230 I know, there is no, like, there's no secret 00:33:02.230 --> 00:33:04.850 sequence of events to set time and power and 00:33:04.850 --> 00:33:07.249 start. You should just be able to do it. 00:33:07.249 --> 00:33:08.700 So that's the kind of thing that we could 00:33:08.700 --> 00:33:12.590 do instead. And, so this talk is about, I 00:33:12.590 --> 00:33:14.690 mean. Hopefully at this point you know what this 00:33:14.690 --> 00:33:17.190 talk is about. But, we need, we need to 00:33:17.190 --> 00:33:18.440 look at things, and we need to look at 00:33:18.440 --> 00:33:20.409 the interactions around us and we need to learn 00:33:20.409 --> 00:33:22.999 from them, even if they don't apply to our, 00:33:22.999 --> 00:33:25.370 even if they're not software based. 00:33:25.370 --> 00:33:27.970 Because the way that you design something in the, 00:33:27.970 --> 00:33:29.590 fundamentally, like the way you think about it and 00:33:29.590 --> 00:33:30.929 the way you think about your users is gonna 00:33:30.929 --> 00:33:33.700 affect the final product every step of the way. 00:33:33.700 --> 00:33:36.440 And I feel like that's some, that's our obligation. 00:33:36.440 --> 00:33:38.289 We can show people that we value their experiences 00:33:38.289 --> 00:33:40.529 top to bottom and that we're constantly thinking about 00:33:40.529 --> 00:33:43.129 how to solve problems, ease friction, remove barriers, and 00:33:43.129 --> 00:33:45.889 serve them in world-class ways. And we have a 00:33:45.889 --> 00:33:49.350 huge opportunity to change someone's expectations. 00:33:49.350 --> 00:33:50.490 So what I want you guys to do is 00:33:50.490 --> 00:33:53.389 discover the interactions around you, no matter what they 00:33:53.389 --> 00:33:56.070 are. Respect your user's intuition, language, and their sense 00:33:56.070 --> 00:33:58.990 of place, those basic, fundamentals of understanding where those 00:33:58.990 --> 00:34:01.820 things can go wrong. And I really do think 00:34:01.820 --> 00:34:04.539 that interactions are for everyone. This isn't just design 00:34:04.539 --> 00:34:06.799 stuff. This isn't, this isn't based on some science 00:34:06.799 --> 00:34:09.210 that you don't know. There's a certain level of 00:34:09.210 --> 00:34:13.080 awareness and a certain level of active experiencing of 00:34:13.080 --> 00:34:15.570 interactions that I think apply to anybody in our 00:34:15.570 --> 00:34:16.168 field. 00:34:16.168 --> 00:34:23.168 So, that's all I got. Thanks a lot guys.