1 00:00:16,000 --> 00:00:20,500 CAMERON DAIGLE: Oh. There it goes. 2 00:00:20,590 --> 00:00:22,840 The big red clock is counting down. I have to start. 3 00:00:22,840 --> 00:00:26,070 Hey guys. My name is Cameron Daigle. I'm the 4 00:00:26,070 --> 00:00:30,109 senior designer at HashRocket. We are out of Chicago, 5 00:00:30,109 --> 00:00:34,500 Boulder, and Jacksonville Beach is our main office. I'm 6 00:00:34,500 --> 00:00:37,260 the longest senior member of the design team. And 7 00:00:37,260 --> 00:00:39,739 we build Ruby on Rails apps. We build iOS 8 00:00:39,739 --> 00:00:42,079 apps. We do a lot of different things. 9 00:00:42,079 --> 00:00:43,360 So what I'm gonna talk to you guys about 10 00:00:43,360 --> 00:00:46,850 today is, well, this is gonna be yet another 11 00:00:46,850 --> 00:00:49,260 code-free design talk, so I hope you guys didn't 12 00:00:49,260 --> 00:00:51,879 want to see anymore code today. And it's almost 13 00:00:51,879 --> 00:00:54,539 an app and website-free talk as well, because what 14 00:00:54,539 --> 00:00:56,600 I'm really talking to you about today are not 15 00:00:56,600 --> 00:00:59,350 interactions that you're gonna have in a normal context, 16 00:00:59,350 --> 00:01:00,699 like on a, on a, on your phone or 17 00:01:00,699 --> 00:01:02,500 your laptop. But I want you to discover the 18 00:01:02,500 --> 00:01:04,280 interactions around you. 19 00:01:04,280 --> 00:01:06,550 So what that means is that I want, I 20 00:01:06,550 --> 00:01:08,720 want you guys to be able to build up 21 00:01:08,720 --> 00:01:13,240 the ability to actively participate in interactions and, that 22 00:01:13,240 --> 00:01:15,330 might not, that you might not otherwise think about, 23 00:01:15,330 --> 00:01:17,069 that may be your habits or that kind of 24 00:01:17,069 --> 00:01:19,690 stuff. And be able to quantify those and what 25 00:01:19,690 --> 00:01:21,649 you do and don't like about them, and hopefully 26 00:01:21,649 --> 00:01:23,750 apply that to how we design products. 27 00:01:23,750 --> 00:01:29,140 So, my first example. So this is Publix. Who 28 00:01:29,140 --> 00:01:32,190 likes Publix? Is anybody from the Florida area? OK. 29 00:01:32,190 --> 00:01:33,819 Publix is a really nice grocery store. I don't 30 00:01:33,819 --> 00:01:36,619 know what you guys in Chicago have. But Publix 31 00:01:36,619 --> 00:01:39,099 is, Publix is the best we've got in, in 32 00:01:39,099 --> 00:01:39,640 Florida. 33 00:01:39,640 --> 00:01:42,520 And it's a really nice grocery store, really nice 34 00:01:42,520 --> 00:01:45,470 user experience, getting your groceries there and everything. You 35 00:01:45,470 --> 00:01:47,780 go to pay, at Publix, and this, this is 36 00:01:47,780 --> 00:01:49,979 a regular occurrence for me. You go to pay, 37 00:01:49,979 --> 00:01:52,360 you go play with plastic because it's 2014. You 38 00:01:52,360 --> 00:01:55,200 don't have any cash. And you, this is the 39 00:01:55,200 --> 00:01:57,340 last screen that you see. 40 00:01:57,340 --> 00:02:00,050 So I've, I've, I've swiped my card, I've seen 41 00:02:00,050 --> 00:02:02,129 the total, I have agreed to everything. I get 42 00:02:02,129 --> 00:02:04,410 to the cash back screen and Publix, the little 43 00:02:04,410 --> 00:02:08,000 thingy at Publix says, cash back? And if I 44 00:02:08,000 --> 00:02:11,038 tap no here, the purchase is completed. That no 45 00:02:11,038 --> 00:02:13,060 is a, is a form submission, essentially. 46 00:02:13,060 --> 00:02:15,780 And it drives me nuts every time, because the 47 00:02:15,780 --> 00:02:18,730 last thing to tell Publix to get my, my 48 00:02:18,730 --> 00:02:22,780 weekend beer or whatever, is no. And so it's, 49 00:02:22,780 --> 00:02:25,599 it's this grating experience. But it's, it's just a 50 00:02:25,599 --> 00:02:28,459 little detail that, that really does matter. I mean, 51 00:02:28,459 --> 00:02:30,390 that every single person that goes to Publix and 52 00:02:30,390 --> 00:02:33,120 interacts with them as a store encounters this screen 53 00:02:33,120 --> 00:02:34,859 where, just for a half a second, you know, 54 00:02:34,859 --> 00:02:37,250 they stop breathing and they're like, wait, what? And 55 00:02:37,250 --> 00:02:40,069 then they press no and they're OK. 56 00:02:40,069 --> 00:02:42,659 In contrast, Target, which for me is about a 57 00:02:42,659 --> 00:02:46,180 hundred yards from Publix, their final screen looks like 58 00:02:46,180 --> 00:02:49,249 this. Now, there's a separate issue here which is 59 00:02:49,249 --> 00:02:51,319 that this kind of feels like a weird question 60 00:02:51,319 --> 00:02:53,189 to ask. I literally never wanted it all on 61 00:02:53,189 --> 00:02:56,450 my card. Like, I don't, I don't know why. 62 00:02:56,450 --> 00:02:58,359 And the no is super angry. You notice the 63 00:02:58,359 --> 00:03:02,310 no is all caps. It's like NO! But, but 64 00:03:02,310 --> 00:03:04,819 I mean the, it's a big red and a 65 00:03:04,819 --> 00:03:06,689 big green button. You press the big green button 66 00:03:06,689 --> 00:03:08,829 to buy your stuff. I mean that, that feels 67 00:03:08,829 --> 00:03:11,329 better. And now, the wording is a different issue. 68 00:03:11,329 --> 00:03:13,060 But my point here is that the world is 69 00:03:13,060 --> 00:03:16,659 full of forms. There, that we are constantly putting 70 00:03:16,659 --> 00:03:19,659 information into something and getting some sort of a 71 00:03:19,659 --> 00:03:23,280 result. And it, so, the interactions that we encounter 72 00:03:23,280 --> 00:03:25,849 when we're trying to build apps, whether we're developing 73 00:03:25,849 --> 00:03:28,560 or designing for them, have a lot of parallels 74 00:03:28,560 --> 00:03:31,349 in the actual world. And paying attention to these 75 00:03:31,349 --> 00:03:32,980 will help you pay attention to those. 76 00:03:32,980 --> 00:03:34,670 So, I was in Vegas a couple of years 77 00:03:34,670 --> 00:03:37,950 ago, and this is mostly what I remember of 78 00:03:37,950 --> 00:03:42,779 Vegas is the, the traffic and the concrete. But 79 00:03:42,779 --> 00:03:44,939 I took a cab ride. I was there with 80 00:03:44,939 --> 00:03:46,620 Daniel, our other designer, at a design conference. Took 81 00:03:46,620 --> 00:03:49,450 a cab ride and ended up paying like, eighteen 82 00:03:49,450 --> 00:03:53,219 dollars to go two blocks or something. And, and 83 00:03:53,219 --> 00:03:54,859 when I swiped my card, this was two or 84 00:03:54,859 --> 00:03:56,200 three years ago, I swiped my card and the 85 00:03:56,200 --> 00:03:59,120 little thing inside the cab calculated my tip for 86 00:03:59,120 --> 00:03:59,719 me. 87 00:03:59,719 --> 00:04:02,669 And I thought, that's fantastic. You know, it, on 88 00:04:02,669 --> 00:04:04,859 my otherwise miserable cab experience is made nicer by 89 00:04:04,859 --> 00:04:07,060 the fact that when someone built this thing, it 90 00:04:07,060 --> 00:04:09,180 didn't matter, necessarily, what it looked like, so I 91 00:04:09,180 --> 00:04:10,629 hate to say it was someone designed it, cause 92 00:04:10,629 --> 00:04:12,560 then you think it's visual. It's really just, when 93 00:04:12,560 --> 00:04:15,120 someone built this, the, the software for this, they 94 00:04:15,120 --> 00:04:17,488 thought to take, put, take advantage of the fact 95 00:04:17,488 --> 00:04:19,798 that there's an extra step here that's always going 96 00:04:19,798 --> 00:04:21,589 to happen. And you might recognize this, I mean, 97 00:04:21,589 --> 00:04:24,310 this is in Stripe now. So you see any 98 00:04:24,310 --> 00:04:26,740 businesses with Stripe, see that kind of stuff all 99 00:04:26,740 --> 00:04:27,600 the time. 100 00:04:27,600 --> 00:04:32,320 Now, in contrast to that, I took a monorail 101 00:04:32,320 --> 00:04:34,500 later, cause after two or three days of spending, 102 00:04:34,500 --> 00:04:36,510 like, fifty dollars a day on cabs, it turns 103 00:04:36,510 --> 00:04:40,260 out there's a monorail that's, like, way less money. 104 00:04:40,260 --> 00:04:42,070 So we, we were like cool. We're gonna take 105 00:04:42,070 --> 00:04:42,740 the monorail. 106 00:04:42,740 --> 00:04:45,500 Now, we walk up to the monorail display, and 107 00:04:45,500 --> 00:04:47,130 this is what we see. I wish I had 108 00:04:47,130 --> 00:04:49,560 a better picture, but I was. We were in 109 00:04:49,560 --> 00:04:51,870 a hurry. And this is, this is the screen. 110 00:04:51,870 --> 00:04:54,790 So, single ride tickets, five dollars each. First question. 111 00:04:54,790 --> 00:04:57,490 Would you like more than one individual ticket? 112 00:04:57,490 --> 00:04:58,590 No? 113 00:04:58,590 --> 00:05:05,160 Or. Yes, two, three, four, five. 114 00:05:05,160 --> 00:05:08,140 So all this has to be is just like, 115 00:05:08,140 --> 00:05:09,810 buttons of one, two, three, four, five, and it 116 00:05:09,810 --> 00:05:11,870 was this completely baffling thing that we were just 117 00:05:11,870 --> 00:05:15,370 floored by. But it was something we noticed. You 118 00:05:15,370 --> 00:05:17,500 know, who knows. So who knows why this came 119 00:05:17,500 --> 00:05:19,320 to be? So the, the, I, I mean, it's 120 00:05:19,320 --> 00:05:21,420 fun to send all this stuff up, but, what 121 00:05:21,420 --> 00:05:23,220 this talk is about is understanding why this might 122 00:05:23,220 --> 00:05:23,570 have happened. 123 00:05:23,570 --> 00:05:25,920 In this case, I have no clue why the, 124 00:05:25,920 --> 00:05:27,500 they chose to design it this way. I feel 125 00:05:27,500 --> 00:05:30,350 like there must be a reason. But, so I 126 00:05:30,350 --> 00:05:32,170 play a lot of video games. This is from 127 00:05:32,170 --> 00:05:35,130 Super Mario Galaxy a few years ago. I wish 128 00:05:35,130 --> 00:05:36,540 I had a better photo of this, but I'm 129 00:05:36,540 --> 00:05:38,430 not going through Super Mario Galaxy again just to 130 00:05:38,430 --> 00:05:41,640 find this one dialogue box. 131 00:05:41,640 --> 00:05:43,900 So this, this, this fat star man says, you 132 00:05:43,900 --> 00:05:45,160 gotta save her? Am I right? And my two 133 00:05:45,160 --> 00:05:47,640 options are that's right and yes. And I was 134 00:05:47,640 --> 00:05:50,800 like, heh. You know. That's, that's cute. Like, cool 135 00:05:50,800 --> 00:05:52,920 job, Super Mario Galaxy. Fun joke. 136 00:05:52,920 --> 00:05:55,090 But then I thought, like, maybe the reason that 137 00:05:55,090 --> 00:05:56,860 they did this was because there's like a dialogue 138 00:05:56,860 --> 00:06:00,830 prompt object somewhere and it expects, like, two answers. 139 00:06:00,830 --> 00:06:02,840 You know. So maybe it was a funny joke 140 00:06:02,840 --> 00:06:04,720 and maybe they were just, like, we're not rewriting 141 00:06:04,720 --> 00:06:09,140 the dialogue prompt thing. You know. Just to have, 142 00:06:09,140 --> 00:06:11,410 like, an OK button at the corner. 143 00:06:11,410 --> 00:06:14,340 So who knows? But, I mean, sometimes you, you 144 00:06:14,340 --> 00:06:16,240 get a glimpse into, like, behind the curtain, and 145 00:06:16,240 --> 00:06:16,890 sometimes you don't. 146 00:06:16,890 --> 00:06:18,910 Here's an example of getting a glimpse behind the 147 00:06:18,910 --> 00:06:21,840 curtain that I never, ever wanted to actually see. 148 00:06:21,840 --> 00:06:23,710 This is from the Amer app, a few versions 149 00:06:23,710 --> 00:06:26,390 ago, and it is, too date, the most terrifying 150 00:06:26,390 --> 00:06:28,620 error message I've ever seen in iOS. 151 00:06:28,620 --> 00:06:31,020 In case you can't read it, it's an unexpected 152 00:06:31,020 --> 00:06:35,590 token wanted and then a really strange list of 153 00:06:35,590 --> 00:06:38,470 symbols and commands, including the word string with double 154 00:06:38,470 --> 00:06:41,890 quotes around it, within single quotes. And things like 155 00:06:41,890 --> 00:06:44,610 that. So, I, you guys are the people that 156 00:06:44,610 --> 00:06:46,700 would know why this would happen or where it 157 00:06:46,700 --> 00:06:48,900 was coming from. I just took a screen shot 158 00:06:48,900 --> 00:06:50,750 and tried to get on with whatever I was 159 00:06:50,750 --> 00:06:51,870 trying to do. 160 00:06:51,870 --> 00:06:55,360 So, and honestly iOS is full of really fun 161 00:06:55,360 --> 00:07:00,750 stuff like this, where, you know, Siri sort of, 162 00:07:00,750 --> 00:07:04,930 I mean. She seems confident. But she parsed that 163 00:07:04,930 --> 00:07:06,580 sentence in a certain way that makes me wonder 164 00:07:06,580 --> 00:07:08,860 about, like, how that's being implemented. Like, how is 165 00:07:08,860 --> 00:07:11,550 this stuff being parsed. And, really, I can tell 166 00:07:11,550 --> 00:07:13,520 you one thing, the way that it tries to 167 00:07:13,520 --> 00:07:17,810 parse phrases is really more trouble than it's worth, 168 00:07:17,810 --> 00:07:19,350 you know. 169 00:07:19,350 --> 00:07:22,360 So, someone, they've decided to try to, you know, 170 00:07:22,360 --> 00:07:24,580 underskirt oats is what it says. It says that, 171 00:07:24,580 --> 00:07:26,990 not me. And what they're trying to do is 172 00:07:26,990 --> 00:07:28,990 parse spaces. But of course, as soon as you 173 00:07:28,990 --> 00:07:32,360 start throwing spaces into your grammatical checker, you're running, 174 00:07:32,360 --> 00:07:34,550 you're increasing the difficulty of doing this accurately versus 175 00:07:34,550 --> 00:07:37,410 doing it hilariously wrong. By an order of magnitude. 176 00:07:37,410 --> 00:07:40,350 And, man, I got, I got these for days. 177 00:07:40,350 --> 00:07:43,020 So, I feel like the, the one on the 178 00:07:43,020 --> 00:07:46,180 right, I really feel like iOS is getting tired 179 00:07:46,180 --> 00:07:48,920 of me making fun of it, a little it. 180 00:07:48,920 --> 00:07:52,370 I love Siri. We have a very intense relationship. 181 00:07:52,370 --> 00:07:55,010 But, my point here is that we judge truly 182 00:07:55,010 --> 00:07:57,200 good design not by its beauty or innovation or 183 00:07:57,200 --> 00:08:00,420 efficiency, but rather by how well it responds to 184 00:08:00,420 --> 00:08:03,430 its original problem. At what point are you sacrificing 185 00:08:03,430 --> 00:08:08,260 complexity, or sacrificing simplicity - either one - to 186 00:08:08,260 --> 00:08:10,540 confuse what problem you're actually responding to. 187 00:08:10,540 --> 00:08:12,710 I don't feel like I need iOS to, you 188 00:08:12,710 --> 00:08:14,370 know, to correct an entire phrase for me. It's 189 00:08:14,370 --> 00:08:16,730 very impressive when it works, but it's very frustrating 190 00:08:16,730 --> 00:08:18,950 when it doesn't. So at what point is, is 191 00:08:18,950 --> 00:08:21,500 the actual goodness of the design being hurt by 192 00:08:21,500 --> 00:08:21,780 that? 193 00:08:21,780 --> 00:08:25,250 So we're gonna look at three separate types of, 194 00:08:25,250 --> 00:08:28,660 of ways to quantify this stuff. So, it's one 195 00:08:28,660 --> 00:08:31,150 thing to be able to, to notice it and 196 00:08:31,150 --> 00:08:32,740 to get, to make, to laugh about it or 197 00:08:32,740 --> 00:08:34,390 to figure out a better way to do it. 198 00:08:34,390 --> 00:08:37,490 It's another thing to actually be able to do 199 00:08:37,490 --> 00:08:40,169 so on the basis of, like, a principle. So 200 00:08:40,169 --> 00:08:41,929 these are some basic principles, I think, that you 201 00:08:41,929 --> 00:08:44,449 could take and use when you, when you notice 202 00:08:44,449 --> 00:08:45,839 this stuff. 203 00:08:45,839 --> 00:08:48,420 Respect for intuition, having a common language, and having 204 00:08:48,420 --> 00:08:51,089 a sense of place. Respect for intuition is very 205 00:08:51,089 --> 00:08:53,920 simple. All I mean is, does it do what 206 00:08:53,920 --> 00:08:56,230 I think it will do? Which you think would 207 00:08:56,230 --> 00:08:58,560 be very basic, but honestly it's very easy to 208 00:08:58,560 --> 00:09:00,779 find stuff, all the time, where you put yourself 209 00:09:00,779 --> 00:09:03,360 in the shoes, in someone else's shoes, or even 210 00:09:03,360 --> 00:09:04,850 your shoes before you learned how to use the 211 00:09:04,850 --> 00:09:07,269 thing, and you, you realize some things are just 212 00:09:07,269 --> 00:09:08,610 not what they seem. 213 00:09:08,610 --> 00:09:11,540 So, this is two coffee makers ago for me. 214 00:09:11,540 --> 00:09:14,149 This guy broke. The guy after this wasn't good. 215 00:09:14,149 --> 00:09:16,839 And my current one. But this one, I, this 216 00:09:16,839 --> 00:09:18,850 is a very old photo, but I can not 217 00:09:18,850 --> 00:09:21,550 get over this button. All right, I'm gonna ask 218 00:09:21,550 --> 00:09:24,249 the room. The brew button. What do you think 219 00:09:24,249 --> 00:09:26,699 will happen when I press the brew button? 220 00:09:26,699 --> 00:09:31,879 AUDIENCE: It will brew a pot of coffee. 221 00:09:31,879 --> 00:09:32,779 C.D.: No, that says zero. None of you guys 222 00:09:32,779 --> 00:09:33,279 are gonna. All right, so, you press the brew 223 00:09:33,279 --> 00:09:35,910 button, and it wakes up the display, cause this 224 00:09:35,910 --> 00:09:38,920 coffee has a sleep mode. So the coffee maker 225 00:09:38,920 --> 00:09:41,870 has a sleep mode. So, the button says brew. 226 00:09:41,870 --> 00:09:43,180 It's on the front of the coffee maker. It 227 00:09:43,180 --> 00:09:46,110 looks aesthetic. You know, it's symmetrical, it looks good. 228 00:09:46,110 --> 00:09:48,029 But the button doesn't do what it says it 229 00:09:48,029 --> 00:09:48,759 will do. 230 00:09:48,759 --> 00:09:50,339 You actually have to press it again and then 231 00:09:50,339 --> 00:09:52,730 it lights up, and that means it's brewing coffee. 232 00:09:52,730 --> 00:09:54,540 So you've got two issues here. One, that the 233 00:09:54,540 --> 00:09:56,399 button straight up just doesn't do what it says 234 00:09:56,399 --> 00:09:59,259 it will do. It's a lying button. Number two, 235 00:09:59,259 --> 00:10:01,199 that the button now is lit up, which actually 236 00:10:01,199 --> 00:10:02,970 makes, makes it more of a call out. But 237 00:10:02,970 --> 00:10:04,560 it's actually an indicator. 238 00:10:04,560 --> 00:10:07,540 So what you have here is something where you, 239 00:10:07,540 --> 00:10:10,240 you've gotta talk about where something's an indicator or 240 00:10:10,240 --> 00:10:13,269 a call out. This is an app that I 241 00:10:13,269 --> 00:10:15,910 designed a really long time ago, in iOS years. 242 00:10:15,910 --> 00:10:19,110 This, this came out on iOS 3 I think. 243 00:10:19,110 --> 00:10:20,689 And it was a recording app. This came out 244 00:10:20,689 --> 00:10:25,170 before the Apple voice memos app was a thing. 245 00:10:25,170 --> 00:10:27,100 And we designed it, we said, hey, this app 246 00:10:27,100 --> 00:10:28,540 only needs to do one thing. It needs to 247 00:10:28,540 --> 00:10:29,660 record. So let's just make it a big red 248 00:10:29,660 --> 00:10:32,379 button that says press to record. 249 00:10:32,379 --> 00:10:34,899 Well, the issue with the app that we found 250 00:10:34,899 --> 00:10:37,360 after the first couple versions wasn't the press to 251 00:10:37,360 --> 00:10:38,720 record. It was what would have after you pressed 252 00:10:38,720 --> 00:10:41,990 press to record. So, initially, you press press to 253 00:10:41,990 --> 00:10:43,949 record, that button would turn bright green. Cause we 254 00:10:43,949 --> 00:10:46,040 said, or I said, it was my fault. We, 255 00:10:46,040 --> 00:10:48,879 I said red means record, like, I meant have, 256 00:10:48,879 --> 00:10:50,930 you gotta have the button say record. And green 257 00:10:50,930 --> 00:10:53,309 means go, so it's going. It's recording something. 258 00:10:53,309 --> 00:10:56,769 But we were confusing people, because they, they thought 259 00:10:56,769 --> 00:11:00,100 red meant recording and then. So people were like, 260 00:11:00,100 --> 00:11:01,550 it needs to turn red when it records, and 261 00:11:01,550 --> 00:11:02,740 I'm like, well then the record button will be 262 00:11:02,740 --> 00:11:04,899 green initially. That, that doesn't make any sense. Even 263 00:11:04,899 --> 00:11:06,959 though green is brighter. That's. 264 00:11:06,959 --> 00:11:09,970 So, there was this disconnect. And really, the solution 265 00:11:09,970 --> 00:11:11,850 that we ended up with was, after a couple 266 00:11:11,850 --> 00:11:13,309 of versions in the app store is, the button 267 00:11:13,309 --> 00:11:18,720 pulses. So the button pulses slowly brighter to darker. 268 00:11:18,720 --> 00:11:20,980 And so sometimes the, the, the solution that you're 269 00:11:20,980 --> 00:11:23,589 looking for is, you're just using the wrong format. 270 00:11:23,589 --> 00:11:25,199 I was in photoshop. It didn't occur to me 271 00:11:25,199 --> 00:11:26,759 to use animation at the time. 272 00:11:26,759 --> 00:11:29,399 So that's, that's that story. We're gonna talk a 273 00:11:29,399 --> 00:11:31,839 little bit about microwaves. And we're gonna talk a 274 00:11:31,839 --> 00:11:37,230 lot about microwaves, actually. Because microwaves are probably the 275 00:11:37,230 --> 00:11:40,649 single most-often used bad interface that there is, I 276 00:11:40,649 --> 00:11:43,519 think. That's probably way too strong. I, you know, 277 00:11:43,519 --> 00:11:44,709 it's worked well for this talk so I'm gonna 278 00:11:44,709 --> 00:11:45,860 go with it. 279 00:11:45,860 --> 00:11:47,949 This is a wall of controls. I mean, there's 280 00:11:47,949 --> 00:11:49,899 just a thousand things to do on a microwave. 281 00:11:49,899 --> 00:11:52,399 This, by the way, is the inside of a 282 00:11:52,399 --> 00:11:55,589 boat from ages ago, and there was a guy 283 00:11:55,589 --> 00:11:59,420 who stood there and did that. Whatever it was. 284 00:11:59,420 --> 00:12:03,619 So, I really like this quote from Gary Bernhardt. 285 00:12:03,619 --> 00:12:06,410 Programmers are good at building machines with seventeen meta-knobs 286 00:12:06,410 --> 00:12:08,420 that turn the ninety underlying knobs. They're bad at 287 00:12:08,420 --> 00:12:10,509 asking, why are there so many knobs? And I 288 00:12:10,509 --> 00:12:12,439 don't think that's just a, I mean, you can 289 00:12:12,439 --> 00:12:14,869 say that about programmers. I think it applies to, 290 00:12:14,869 --> 00:12:16,839 to anyone. So I'm not just trying to call 291 00:12:16,839 --> 00:12:17,480 you guys out. 292 00:12:17,480 --> 00:12:20,110 But, all right. So we have this microwave, and 293 00:12:20,110 --> 00:12:22,920 we have the, the intuition test. What. Does it 294 00:12:22,920 --> 00:12:24,379 do what I think it will do? Now, if 295 00:12:24,379 --> 00:12:26,110 you've never seen a microwave before, you've never seen 296 00:12:26,110 --> 00:12:30,119 this microwave before, and regardless of the fact that 297 00:12:30,119 --> 00:12:31,850 we've all sort of learned to bypass what the 298 00:12:31,850 --> 00:12:34,589 microwave says it will do, like, immediately. You might, 299 00:12:34,589 --> 00:12:36,670 you might say you try to start pressing buttons 300 00:12:36,670 --> 00:12:37,050 or whatever. 301 00:12:37,050 --> 00:12:40,160 Well, the top left button on this microwave says 302 00:12:40,160 --> 00:12:42,619 cook, right. So it's in the top left, which 303 00:12:42,619 --> 00:12:44,439 is normally a good place to put an important 304 00:12:44,439 --> 00:12:46,209 thing, and it says cook, which is normally what 305 00:12:46,209 --> 00:12:49,389 a microwave should do. So, maybe you try to 306 00:12:49,389 --> 00:12:51,319 push, you know, the cook button in the upper 307 00:12:51,319 --> 00:12:53,410 left. You press the cook button and this is 308 00:12:53,410 --> 00:12:56,529 my, obviously my beautiful hands. You press this, the 309 00:12:56,529 --> 00:13:03,029 cook button, and the microwave goes, Ac - 1. 310 00:13:03,029 --> 00:13:04,910 I don't know what Ac - 1 is. I 311 00:13:04,910 --> 00:13:08,300 didn't actually press start for fear of, of hurting 312 00:13:08,300 --> 00:13:11,379 something. This, this microwave fails the intuition test. It 313 00:13:11,379 --> 00:13:13,509 also fails the other test we'll get to that, 314 00:13:13,509 --> 00:13:14,980 let's finish this section with a button that does 315 00:13:14,980 --> 00:13:16,350 do what it says it's going to do, which 316 00:13:16,350 --> 00:13:18,889 is, this is from my xBox. That button returned 317 00:13:18,889 --> 00:13:20,430 me to what I was doing and I was 318 00:13:20,430 --> 00:13:23,420 like, all right. Thanks xBox. 319 00:13:23,420 --> 00:13:25,720 Kind of hilariously wordy but, that's why I took 320 00:13:25,720 --> 00:13:26,839 a picture of it, but. 321 00:13:26,839 --> 00:13:29,610 Second. Common language. So, and, and, by common language 322 00:13:29,610 --> 00:13:33,529 I mean, consistency both within interface and also outside 323 00:13:33,529 --> 00:13:36,300 of the interface. Like, a consistency with a user's 324 00:13:36,300 --> 00:13:39,559 common language. So let's look at a, a car 325 00:13:39,559 --> 00:13:42,449 dashboard really quick. Car dashboards are also, you know, 326 00:13:42,449 --> 00:13:45,480 this really crazy, like, heavy interface that tends to 327 00:13:45,480 --> 00:13:47,740 vary widely and things like that. 328 00:13:47,740 --> 00:13:50,339 This is actually Daniel, the other designer, this is 329 00:13:50,339 --> 00:13:52,629 his car. I think it's a Mazda. And every 330 00:13:52,629 --> 00:13:54,029 person that gets in this car does the same 331 00:13:54,029 --> 00:13:56,329 exact thing I did, which is they try to 332 00:13:56,329 --> 00:13:58,619 use that middle knob to adjust, like, the volume, 333 00:13:58,619 --> 00:14:01,559 or anything really. But that left knob is the 334 00:14:01,559 --> 00:14:01,970 volume. 335 00:14:01,970 --> 00:14:03,379 Let's break it down. So we've got three knobs 336 00:14:03,379 --> 00:14:07,730 here. This left knob. You push it to turn 337 00:14:07,730 --> 00:14:09,179 the stereo on and off. You turn it for 338 00:14:09,179 --> 00:14:11,509 volume. We could argue that it shouldn't be on 339 00:14:11,509 --> 00:14:13,170 the left. Someone else could say, but it's closer 340 00:14:13,170 --> 00:14:14,379 to the driver, so it should be on the 341 00:14:14,379 --> 00:14:16,949 left. So that one can go either direction. 342 00:14:16,949 --> 00:14:19,809 This middle knob. You push it to go to 343 00:14:19,809 --> 00:14:22,600 the next menu item. Like, cycle through, like, bass 344 00:14:22,600 --> 00:14:24,610 and treble and balance and stuff like that. And 345 00:14:24,610 --> 00:14:26,100 you turn it to change the value. So what's 346 00:14:26,100 --> 00:14:28,709 important about that is, it's not a toggle. The 347 00:14:28,709 --> 00:14:29,970 first button, when you push it, is a toggle. 348 00:14:29,970 --> 00:14:31,990 The second button, which looks more or less exactly 349 00:14:31,990 --> 00:14:34,749 the same, that walks you through a set of 350 00:14:34,749 --> 00:14:37,410 menu options. And the turning changes the value, which 351 00:14:37,410 --> 00:14:39,009 is sort of like volume, but it's important to 352 00:14:39,009 --> 00:14:40,949 remember that until you push it, this button doesn't, 353 00:14:40,949 --> 00:14:43,610 this knob doesn't do anything. Cause it hasn't selected 354 00:14:43,610 --> 00:14:43,779 anything. 355 00:14:43,779 --> 00:14:46,559 So, the initial interaction with that button, it was 356 00:14:46,559 --> 00:14:50,249 fifty percent non-functional until you know how to activate 357 00:14:50,249 --> 00:14:51,920 the button. The third one over here doesn't push 358 00:14:51,920 --> 00:14:55,759 in at all. And it's, and it tunes, when 359 00:14:55,759 --> 00:14:57,660 you turn it, which doesn't apply to like half 360 00:14:57,660 --> 00:14:59,040 the thing that you're, that you're doing with the 361 00:14:59,040 --> 00:15:02,339 car. So, I mean, there's an in, there's a 362 00:15:02,339 --> 00:15:06,059 severe lack of internal consistency here. 363 00:15:06,059 --> 00:15:07,689 Here's another example we're gonna go back to a 364 00:15:07,689 --> 00:15:11,269 couple times. This is the terminator-esque expensive coffee maker 365 00:15:11,269 --> 00:15:14,209 that we have in the Jacksonville office. It's very 366 00:15:14,209 --> 00:15:16,339 fancy and nice, but there are also some very 367 00:15:16,339 --> 00:15:19,550 fundamentally non-nice things about it. Let's look at the 368 00:15:19,550 --> 00:15:20,059 top. 369 00:15:20,059 --> 00:15:23,519 So, I've got controls over more than I probably 370 00:15:23,519 --> 00:15:26,480 ever would need. I've got nine sizes of cup. 371 00:15:26,480 --> 00:15:29,050 I'm sure you have nine sizes of cup for 372 00:15:29,050 --> 00:15:33,050 your. I've got flavor and shrink. Flavor goes from 373 00:15:33,050 --> 00:15:35,749 light to bold. I, I don't know what, I 374 00:15:35,749 --> 00:15:37,579 honestly don't know what flavor really does. We just 375 00:15:37,579 --> 00:15:39,129 crank it all to bold. 376 00:15:39,129 --> 00:15:42,220 And strength, strength goes from mild to strong to 377 00:15:42,220 --> 00:15:46,309 intense. So, there's three, there's, look, you can do, 378 00:15:46,309 --> 00:15:48,709 you can make a panopoly of coffees with this 379 00:15:48,709 --> 00:15:51,249 thing, apparently. But, so our buttons down here, our 380 00:15:51,249 --> 00:15:52,670 ways to interact with this coffee maker. We have 381 00:15:52,670 --> 00:15:54,989 a single cup button, caraf button, and up and 382 00:15:54,989 --> 00:15:57,970 down and a strength, all right. 383 00:15:57,970 --> 00:16:00,439 So, say I want to change the strength of 384 00:16:00,439 --> 00:16:02,489 my coffee. I press the strength button, which actually 385 00:16:02,489 --> 00:16:05,629 cycles between strength and flavor. And the proper one 386 00:16:05,629 --> 00:16:06,739 is lit up. And then I press my up 387 00:16:06,739 --> 00:16:08,809 and down arrows to, like, crank up the strength 388 00:16:08,809 --> 00:16:11,860 or crank down the strength. Whatever. By the way, 389 00:16:11,860 --> 00:16:16,259 intense is way too strong. It's really strong. 390 00:16:16,259 --> 00:16:17,470 So I go over here to the cup, and 391 00:16:17,470 --> 00:16:18,569 maybe I want to crank up or down my 392 00:16:18,569 --> 00:16:21,509 cup size. That button, you press that button, the 393 00:16:21,509 --> 00:16:23,360 up and down arrows don't do anything. That button 394 00:16:23,360 --> 00:16:26,720 actually cycles. It actually walks all the way through. 395 00:16:26,720 --> 00:16:28,739 Those two arrow buttons, they do set the clock 396 00:16:28,739 --> 00:16:31,050 and they do, like, obviously we didn't set the 397 00:16:31,050 --> 00:16:34,149 clock. No, I took all these pictures at exactly 398 00:16:34,149 --> 00:16:37,170 twelve o' clock. And they do change the strength 399 00:16:37,170 --> 00:16:39,350 but they don't, they don't, they don't function for 400 00:16:39,350 --> 00:16:41,939 those other two buttons, even though those buttons function. 401 00:16:41,939 --> 00:16:44,540 They do the exact same actual thing in the 402 00:16:44,540 --> 00:16:46,989 software side. They're cranking a value up or down. 403 00:16:46,989 --> 00:16:50,800 So, there's internal inconsistency there. Oh, yeah, so I, 404 00:16:50,800 --> 00:16:53,939 so, yeah. So there you go. I'm up to 405 00:16:53,939 --> 00:16:54,360 XL. 406 00:16:54,360 --> 00:16:56,779 Video games, again. Video games are great. I think 407 00:16:56,779 --> 00:16:59,689 they're really, I, I like playing video games, but 408 00:16:59,689 --> 00:17:03,149 also there's a re-invented UI all the time in 409 00:17:03,149 --> 00:17:04,990 video games, so I think it's really interesting how 410 00:17:04,990 --> 00:17:07,970 often those guys start from zero and work their 411 00:17:07,970 --> 00:17:09,920 way up into a completely different interface depending on 412 00:17:09,920 --> 00:17:11,579 what kind of game you're playing. It's tough. 413 00:17:11,579 --> 00:17:15,730 But, outside of the software, the controller has been 414 00:17:15,730 --> 00:17:17,799 the same for a relatively long time. There are 415 00:17:17,799 --> 00:17:19,640 more shoulder buttons and stuff but you have a 416 00:17:19,640 --> 00:17:22,519 directional control and you have A, B, X, and 417 00:17:22,519 --> 00:17:24,599 Y. Generally speaking, it's safe to say that A 418 00:17:24,599 --> 00:17:28,690 means cool, and B means no. Most of the 419 00:17:28,690 --> 00:17:31,610 time, right. Would you agree? I mean, since like 420 00:17:31,610 --> 00:17:34,760 1985 or whenever the NES game went out. Or 421 00:17:34,760 --> 00:17:37,559 actually, those buttons are reversed. But that's kind of. 422 00:17:37,559 --> 00:17:40,049 So, for example, in Mass Effect, this is old, 423 00:17:40,049 --> 00:17:42,070 in Mass Effect one, I think, which explains why 424 00:17:42,070 --> 00:17:46,279 the iPhone photo is bad quality. A is land 425 00:17:46,279 --> 00:17:48,799 and B is leave orbit for this part of 426 00:17:48,799 --> 00:17:50,409 the game where you are in orbit and you 427 00:17:50,409 --> 00:17:51,529 need to land or not. 428 00:17:51,529 --> 00:17:55,970 So, cool. Like, A, basically does the thing. B 429 00:17:55,970 --> 00:17:59,010 backs you out of the thing. Same exact game. 430 00:17:59,010 --> 00:18:01,919 Different screen. Same space ship, whatever. A is enter 431 00:18:01,919 --> 00:18:04,769 system, B doesn't do anything, and X is exit, 432 00:18:04,769 --> 00:18:08,769 which actually backs you out of the menu. So 433 00:18:08,769 --> 00:18:10,960 there's no particular reason for this, other than somebody 434 00:18:10,960 --> 00:18:14,620 didn't think about maintaining a common language with basically 435 00:18:14,620 --> 00:18:16,600 all of video games. At least I, I assume 436 00:18:16,600 --> 00:18:18,460 there isn't a reason. I don't know. I'm, I'm 437 00:18:18,460 --> 00:18:21,039 the user on the other side accidentally hitting B, 438 00:18:21,039 --> 00:18:21,490 right. 439 00:18:21,490 --> 00:18:23,090 So on this screen, my loud out screen, I 440 00:18:23,090 --> 00:18:26,299 think this is Mass Effect two, A doesn't actually 441 00:18:26,299 --> 00:18:28,890 bring me to the next screen here. It actually 442 00:18:28,890 --> 00:18:31,269 walks the weapon with another weapon. So there's a 443 00:18:31,269 --> 00:18:32,799 bunch of stuff going up on this page, but 444 00:18:32,799 --> 00:18:35,120 you're eventually gonna choose weapons and then go into 445 00:18:35,120 --> 00:18:37,419 the mission. 446 00:18:37,419 --> 00:18:40,570 A doesn't do that. A actually changes your weapon 447 00:18:40,570 --> 00:18:43,539 selection. X modifies, so it actually activates this weapon 448 00:18:43,539 --> 00:18:48,460 mod screen. Y toggles a, a flavorful sci-fi description. 449 00:18:48,460 --> 00:18:51,490 And B confirms and sends you into the mission. 450 00:18:51,490 --> 00:18:53,600 So I hope you weren't expecting to, like, back 451 00:18:53,600 --> 00:18:55,240 out of this screen, because you're just gonna get 452 00:18:55,240 --> 00:18:57,630 landed on a planet with angry people shooting at 453 00:18:57,630 --> 00:18:58,100 you. 454 00:18:58,100 --> 00:19:00,260 So, I mean, this, these are off. I mean, 455 00:19:00,260 --> 00:19:02,409 this is from the next game in the series. 456 00:19:02,409 --> 00:19:04,899 This a common language that is there that needs 457 00:19:04,899 --> 00:19:08,350 to be paid attention to and isn't. So, really, 458 00:19:08,350 --> 00:19:11,909 I like this quote. Innovate as a last resort. 459 00:19:11,909 --> 00:19:14,549 In that, that applies in so many different ways, 460 00:19:14,549 --> 00:19:17,390 but the context I'm talking about here, it's that 461 00:19:17,390 --> 00:19:20,289 before you start doing something different than maybe you've 462 00:19:20,289 --> 00:19:22,570 already done or, or, or other people have already 463 00:19:22,570 --> 00:19:24,019 done, you need to justify it and you need 464 00:19:24,019 --> 00:19:27,190 to be aware of like the, the existing languages 465 00:19:27,190 --> 00:19:31,299 that, that, or the commonality of the, the history 466 00:19:31,299 --> 00:19:33,659 of whatever you're using. 467 00:19:33,659 --> 00:19:38,179 So, obviously, accidentally, semi-accidentally putting a button on X 468 00:19:38,179 --> 00:19:40,080 instead of B is not innovation so much as 469 00:19:40,080 --> 00:19:42,750 an oversight. But this speaks to the respect that 470 00:19:42,750 --> 00:19:45,340 you need to have for existing patterns and existing 471 00:19:45,340 --> 00:19:46,659 user assumptions. 472 00:19:46,659 --> 00:19:49,990 Number three, we're gonna look at here is a 473 00:19:49,990 --> 00:19:53,909 sense of place. So, what I mean here is 474 00:19:53,909 --> 00:19:56,789 the navigation of an item. Where is a user 475 00:19:56,789 --> 00:19:59,779 when they're using your thing. Where are they in 476 00:19:59,779 --> 00:20:01,140 your website, for example. 477 00:20:01,140 --> 00:20:04,549 So Steve Krug says, navigating isn't just a feature 478 00:20:04,549 --> 00:20:06,210 of the website; it is the website, in the 479 00:20:06,210 --> 00:20:08,330 same way that the building, shelves, and cash registers 480 00:20:08,330 --> 00:20:11,830 are Sears. So like, navigation is everything when it 481 00:20:11,830 --> 00:20:14,370 comes to helping your user understand where they are. 482 00:20:14,370 --> 00:20:17,309 And this quote's pretty old. So he means like 483 00:20:17,309 --> 00:20:20,299 navigation between pages and stuff. We, with a lot 484 00:20:20,299 --> 00:20:21,840 of fat client apps and things like that, it's 485 00:20:21,840 --> 00:20:26,190 not just pages. It's modes of interface, it's states, 486 00:20:26,190 --> 00:20:28,639 it's what is active and available at any time 487 00:20:28,639 --> 00:20:31,070 to me. Maybe my url hasn't change for awhile, 488 00:20:31,070 --> 00:20:33,019 but there's all of these different ways and navigating 489 00:20:33,019 --> 00:20:36,090 and walking into and out of states of interface 490 00:20:36,090 --> 00:20:38,120 and flows. 491 00:20:38,120 --> 00:20:41,110 So, button modes might get you thinking about something 492 00:20:41,110 --> 00:20:45,260 that you're familiar with, which is VIM. And one 493 00:20:45,260 --> 00:20:47,130 of the reasons that I, I started using VIM 494 00:20:47,130 --> 00:20:50,480 like a month ago. I like it, I guess. 495 00:20:50,480 --> 00:20:52,809 So, the, all the HashRocket guys are making fun 496 00:20:52,809 --> 00:20:56,210 of me. So, VIM, if you've ever tried. How 497 00:20:56,210 --> 00:20:59,110 many of you have not tried to use VIM? 498 00:20:59,110 --> 00:21:01,630 OK. So there's a few of you. So when 499 00:21:01,630 --> 00:21:04,210 you try to use VIM, for you five guys, 500 00:21:04,210 --> 00:21:08,659 VIM is really popular. When you try to use 501 00:21:08,659 --> 00:21:10,570 VIM, you might try to just start typing a 502 00:21:10,570 --> 00:21:12,779 word. But it's not going to do anything. It's 503 00:21:12,779 --> 00:21:13,929 not going to do what you think it's going 504 00:21:13,929 --> 00:21:15,440 to do, even though it looks like a text 505 00:21:15,440 --> 00:21:17,590 editor and your keyboard looks like a keyboard. 506 00:21:17,590 --> 00:21:21,899 You actually have to, you actually have to go 507 00:21:21,899 --> 00:21:24,210 into insert mode, which is a specific mode, so 508 00:21:24,210 --> 00:21:26,179 the reason that VIM is so complicated is because 509 00:21:26,179 --> 00:21:28,760 the modes are not immediately apparent. And that's fine 510 00:21:28,760 --> 00:21:30,370 for an expert tool. You can do an incredible 511 00:21:30,370 --> 00:21:32,750 amount of powerful, incredible amount of powerful things with 512 00:21:32,750 --> 00:21:35,600 VIM. But it is so heavily modal that it 513 00:21:35,600 --> 00:21:37,820 is very fundamentally confusing and it can be really 514 00:21:37,820 --> 00:21:41,120 hard for someone to get the hang of initially. 515 00:21:41,120 --> 00:21:43,610 So, something else that's heavily modal is my microwave. 516 00:21:43,610 --> 00:21:47,070 And it is a lot worse designed than VIM. 517 00:21:47,070 --> 00:21:51,200 Let's, let's be clear. So say I want to, 518 00:21:51,200 --> 00:21:54,830 for some reason I want to soften something. So, 519 00:21:54,830 --> 00:22:00,470 I, I, I press soften with my well-manicured. That's 520 00:22:00,470 --> 00:22:06,029 my wife's hand. Press soften, and the, it says 521 00:22:06,029 --> 00:22:07,269 one. 522 00:22:07,269 --> 00:22:09,889 So, through trial and error, I was able to 523 00:22:09,889 --> 00:22:11,820 discover what it wants you to do here. And 524 00:22:11,820 --> 00:22:13,320 what the soften button wants you to do is 525 00:22:13,320 --> 00:22:14,860 select a value from one to four and then 526 00:22:14,860 --> 00:22:17,919 press start. All right. So the reason that that 527 00:22:17,919 --> 00:22:19,860 is confusing is not only, well, not only is 528 00:22:19,860 --> 00:22:22,059 there no indicator of that, what that, what is 529 00:22:22,059 --> 00:22:24,100 going to happen there, it's that the microwave has 530 00:22:24,100 --> 00:22:24,880 switched modes. 531 00:22:24,880 --> 00:22:26,470 And the reason I blacked all this out is 532 00:22:26,470 --> 00:22:28,250 once you press that soften button, you're no longer 533 00:22:28,250 --> 00:22:33,269 in microwave mode. You're in softness selector mode, right. 534 00:22:33,269 --> 00:22:35,070 So while all of these other buttons are still 535 00:22:35,070 --> 00:22:36,809 there, but the mode of the entire thing is 536 00:22:36,809 --> 00:22:38,840 switched. I'm actually, I've actually walked a step down 537 00:22:38,840 --> 00:22:41,799 into, I've navigated somewhere. Walked a step down into 538 00:22:41,799 --> 00:22:45,289 a flow, without getting any feedback or, you know, 539 00:22:45,289 --> 00:22:48,010 unless you count one on the screen as feedback. 540 00:22:48,010 --> 00:22:50,299 I have very little feedback that I have actually 541 00:22:50,299 --> 00:22:55,070 gone anywhere. So what the, what badly designed modes 542 00:22:55,070 --> 00:22:56,590 can do to you is that they result in 543 00:22:56,590 --> 00:23:00,019 a secret sequence of actions, like I, unless, till 544 00:23:00,019 --> 00:23:03,029 I discovered what the app or, or interface or 545 00:23:03,029 --> 00:23:05,649 microwave wants me to do, I don't know what 546 00:23:05,649 --> 00:23:08,570 it is. And if it's a mode, then that 547 00:23:08,570 --> 00:23:10,980 will drive me down what is, potentially, can be 548 00:23:10,980 --> 00:23:13,590 a long chain of, of sequential actions. 549 00:23:13,590 --> 00:23:15,760 So, for example, with this microwave, I like cooking 550 00:23:15,760 --> 00:23:17,919 things on power five, cause then, like, it heats 551 00:23:17,919 --> 00:23:19,480 it a little bit more evenly and you don't 552 00:23:19,480 --> 00:23:23,309 end up with, like, lava combined with ice, if 553 00:23:23,309 --> 00:23:26,830 you're cooking a Hot Pocket or whatever. So, like, 554 00:23:26,830 --> 00:23:28,720 I would say, with this microwave, and this is 555 00:23:28,720 --> 00:23:30,590 very specific to this microwave. Don't go back and 556 00:23:30,590 --> 00:23:32,370 think that this is, it will apply to your 557 00:23:32,370 --> 00:23:35,710 microwave. Because this, this microwave, you, you can't push 558 00:23:35,710 --> 00:23:37,309 the buttons first. You have to press cook time 559 00:23:37,309 --> 00:23:39,750 in order to put time in at all. 560 00:23:39,750 --> 00:23:41,909 Then, you actually have to press power, after you 561 00:23:41,909 --> 00:23:44,230 have time entered into the display. Then you can 562 00:23:44,230 --> 00:23:45,840 press five and change the power to five and 563 00:23:45,840 --> 00:23:50,710 then start. So this microwave has, like, there's so 564 00:23:50,710 --> 00:23:52,970 much here, but like, in order to do what 565 00:23:52,970 --> 00:23:55,190 is a relatively basic feature of the microwave, you 566 00:23:55,190 --> 00:23:57,659 have to know a specific chain of commands. 567 00:23:57,659 --> 00:24:00,350 I, I really don't want to compare that to 568 00:24:00,350 --> 00:24:03,820 VIM, but that is pretty much like VIM. But 569 00:24:03,820 --> 00:24:05,380 VIM is an expert tool and this microwave is 570 00:24:05,380 --> 00:24:07,080 supposed to be for, for everyone who needs to 571 00:24:07,080 --> 00:24:08,980 use a microwave. So, you know. 572 00:24:08,980 --> 00:24:11,049 But after entering a mode, you have to do 573 00:24:11,049 --> 00:24:13,440 one of two things. You have to either force 574 00:24:13,440 --> 00:24:15,460 completion of the mode, which is what my microwave 575 00:24:15,460 --> 00:24:17,019 does. None of the other buttons will work until 576 00:24:17,019 --> 00:24:19,230 you, you know, cancel out and panic and just 577 00:24:19,230 --> 00:24:21,559 cook on ten. And, you know, cook your thing 578 00:24:21,559 --> 00:24:24,809 too much. Or destroy your existing progress. 579 00:24:24,809 --> 00:24:28,559 So I actually checked with a very similar microwave 580 00:24:28,559 --> 00:24:30,380 at my parents' house when I was there over 581 00:24:30,380 --> 00:24:32,429 Easter. And their microwave, if you start typing and 582 00:24:32,429 --> 00:24:34,549 you press something else, it just kills whatever you 583 00:24:34,549 --> 00:24:36,889 were doing before. So what'll happen then is that 584 00:24:36,889 --> 00:24:38,580 you'll switch the power to five, but then you'll 585 00:24:38,580 --> 00:24:40,279 type in time and it'll start cooking at ten 586 00:24:40,279 --> 00:24:42,710 because when you switched to put in the time, 587 00:24:42,710 --> 00:24:44,960 it just canceled whatever you did before. 588 00:24:44,960 --> 00:24:48,980 So, microwaves. You know. 589 00:24:48,980 --> 00:24:52,370 So, let's go back to the coffee maker, because 590 00:24:52,370 --> 00:24:56,529 destroying progress can have very real-world implications aside from 591 00:24:56,529 --> 00:24:59,840 accidentally cooking a thing stronger than you wanted to. 592 00:24:59,840 --> 00:25:05,330 So this microwave has a very rich user experience 593 00:25:05,330 --> 00:25:08,000 when it comes to actually getting coffee into and 594 00:25:08,000 --> 00:25:08,980 out of the thing. 595 00:25:08,980 --> 00:25:11,330 So you press the open button. This flips out. 596 00:25:11,330 --> 00:25:14,149 That thing unfolds. You've got all of this different 597 00:25:14,149 --> 00:25:17,659 stuff going on there. Well, it's got, it's a 598 00:25:17,659 --> 00:25:19,320 grinder, too. I should point this out. It's out 599 00:25:19,320 --> 00:25:20,830 of frame. Up there at the top, you put 600 00:25:20,830 --> 00:25:23,279 your beans in there. You close, you get a, 601 00:25:23,279 --> 00:25:24,970 you get the filter emptied out. You close it 602 00:25:24,970 --> 00:25:27,399 up, you hit start. It goes whirr, and it 603 00:25:27,399 --> 00:25:28,889 starts grinding your coffee. 604 00:25:28,889 --> 00:25:32,639 Well, here's the problem. Is that open button, fully 605 00:25:32,639 --> 00:25:36,539 functional the whole time. So, and this has happened, 606 00:25:36,539 --> 00:25:38,110 I would say, this has happened a handful of 607 00:25:38,110 --> 00:25:39,889 times and it's really bad, because you, you end 608 00:25:39,889 --> 00:25:42,009 up wanting to fight somebody before the day has 609 00:25:42,009 --> 00:25:44,389 even started. But you're standing there with your mug 610 00:25:44,389 --> 00:25:46,399 next to it. You're first in line. You know, 611 00:25:46,399 --> 00:25:48,960 you've just started the coffee. It's finished grinding. It's 612 00:25:48,960 --> 00:25:49,960 started to brew. 613 00:25:49,960 --> 00:25:52,519 And some guy walks up and he goes boink, 614 00:25:52,519 --> 00:25:54,429 and he hits the open button and the coffee 615 00:25:54,429 --> 00:25:58,669 maker's like, pfft. You put it back in, you 616 00:25:58,669 --> 00:26:00,240 press start and it goes whirr, and it starts 617 00:26:00,240 --> 00:26:02,570 grinding a new batch of coffee. So you can 618 00:26:02,570 --> 00:26:06,090 destroy. That one button will destroy an entire, like, 619 00:26:06,090 --> 00:26:08,450 entire thing of coffee. Like, you don't, it, it 620 00:26:08,450 --> 00:26:11,570 doesn't know what it, why it's doing that. It's 621 00:26:11,570 --> 00:26:13,250 really annoying. You have to go in and empty 622 00:26:13,250 --> 00:26:15,019 the filter and reset the whole thing. So you 623 00:26:15,019 --> 00:26:18,049 can destroy an entire pot of semi-brewed coffee just 624 00:26:18,049 --> 00:26:20,919 by pressing the open button. 625 00:26:20,919 --> 00:26:22,190 So that's awful. 626 00:26:22,190 --> 00:26:25,320 Here's a, here's the coffee maker I have at 627 00:26:25,320 --> 00:26:27,970 home now. It is simple. It was, it was 628 00:26:27,970 --> 00:26:30,070 not expensive. It's not, it doesn't look like as 629 00:26:30,070 --> 00:26:32,210 much like a terminator as the other coffee maker 630 00:26:32,210 --> 00:26:34,700 does. You, it doesn't have a grinder in it 631 00:26:34,700 --> 00:26:37,159 or anything like that. We're talking pretty minimal. It 632 00:26:37,159 --> 00:26:39,950 makes water hot and it puts it on the 633 00:26:39,950 --> 00:26:40,090 coffee. 634 00:26:40,090 --> 00:26:42,419 On the inside here, this is a, this is 635 00:26:42,419 --> 00:26:45,289 the spout. So this is your little water spout 636 00:26:45,289 --> 00:26:47,509 that's actually gonna put the, the water into the 637 00:26:47,509 --> 00:26:50,940 coffee. It flips over here. So, like, you fill 638 00:26:50,940 --> 00:26:53,559 up the thing, the tank with water. You pull 639 00:26:53,559 --> 00:26:56,889 that over. Close the lid. It puts water on 640 00:26:56,889 --> 00:26:59,710 the coffee like it's supposed to, you know. Not 641 00:26:59,710 --> 00:27:00,750 very glamorous. 642 00:27:00,750 --> 00:27:02,850 But here's one thing that I discovered on, completely 643 00:27:02,850 --> 00:27:04,820 on accident that I thought was great and I 644 00:27:04,820 --> 00:27:06,970 got probably way too excited about it. Let's watch 645 00:27:06,970 --> 00:27:10,950 a cinematic recreation of, of this, of this coffee 646 00:27:10,950 --> 00:27:14,880 maker and what I discovered. 647 00:27:14,880 --> 00:27:20,029 I should have. I should have had music. 648 00:27:20,029 --> 00:27:25,500 Oh my gosh! I was so excited. I was 649 00:27:25,500 --> 00:27:28,409 like, oh, whoever designed this but a little tab 650 00:27:28,409 --> 00:27:31,009 thing right there, and it's slanted just a little 651 00:27:31,009 --> 00:27:33,929 bit, and it cost probably almost zero dollars, but 652 00:27:33,929 --> 00:27:36,789 it was. That pushes the little arm in there 653 00:27:36,789 --> 00:27:38,809 to keep you from accidentally just putting hot water 654 00:27:38,809 --> 00:27:42,710 back into your tank. And I was like, this 655 00:27:42,710 --> 00:27:49,179 coffee maker has developed a lowfi like very non-technical 656 00:27:49,179 --> 00:27:51,279 solution to a problem, and this was probably done 657 00:27:51,279 --> 00:27:53,639 by whoever engineered the coffee maker. Like, it was 658 00:27:53,639 --> 00:27:55,190 probably not done by the guy who designed the 659 00:27:55,190 --> 00:27:56,669 outside of the coffee maker. It was done by 660 00:27:56,669 --> 00:27:58,519 the guy who designed the inside of the coffee 661 00:27:58,519 --> 00:27:59,460 maker. 662 00:27:59,460 --> 00:28:02,509 But he's avoided a very basic kind of user 663 00:28:02,509 --> 00:28:05,570 error. So let's, let's do a, let's do a 664 00:28:05,570 --> 00:28:06,570 feature comparison here. 665 00:28:06,570 --> 00:28:10,730 This coffee maker was $200. This coffee maker's #35. 666 00:28:10,730 --> 00:28:15,649 This coffee maker has a one-button self-destruct, right. 667 00:28:15,649 --> 00:28:19,860 This has a one-tab coffee saver. 668 00:28:19,860 --> 00:28:20,970 This thing's got a thermal carafe. 669 00:28:20,970 --> 00:28:22,039 This thing's what I like to call a visual 670 00:28:22,039 --> 00:28:25,950 quantity indicator. That means, that means you can see 671 00:28:25,950 --> 00:28:27,429 how much coffee is in it, which is a 672 00:28:27,429 --> 00:28:29,090 whole other thing. 673 00:28:29,090 --> 00:28:31,769 All right, design is the decision making in the 674 00:28:31,769 --> 00:28:34,720 presence of constraint. You give somebody $200 and you 675 00:28:34,720 --> 00:28:36,629 want a coffee maker with this giant list of 676 00:28:36,629 --> 00:28:40,250 features, versus a #35 with, with like way less 677 00:28:40,250 --> 00:28:43,309 features. You're, maybe, well the design on the, of 678 00:28:43,309 --> 00:28:45,700 the later might actually be better. You know, it's 679 00:28:45,700 --> 00:28:48,740 not. Constraint is not necessarily a bad thing. I 680 00:28:48,740 --> 00:28:49,639 really like this quote. 681 00:28:49,639 --> 00:28:51,480 So here's what we're not talking about. I've got 682 00:28:51,480 --> 00:28:52,960 to speed it up. Here's what we're not talking 683 00:28:52,960 --> 00:28:54,820 about. We're not talking about button styles or what 684 00:28:54,820 --> 00:28:57,730 things look like. That's important, but generally speaking we 685 00:28:57,730 --> 00:28:59,000 know what a button looks like. We know where 686 00:28:59,000 --> 00:29:01,820 it is. You know, buttons have looked more or 687 00:29:01,820 --> 00:29:04,080 less the same up until this year. 688 00:29:04,080 --> 00:29:10,210 So, like, that's, that's decoration. It's ridiculously important, but 689 00:29:10,210 --> 00:29:11,590 that's not what you'd have to worry about in 690 00:29:11,590 --> 00:29:14,000 order to have an interaction feel good. And it's 691 00:29:14,000 --> 00:29:17,090 also. I also just want to say that, like, 692 00:29:17,090 --> 00:29:20,289 as a designer, I wanted to facilitate good experiences 693 00:29:20,289 --> 00:29:22,519 and not have them get hurt at the expense, 694 00:29:22,519 --> 00:29:25,299 or, at the expense of my design preferences. 695 00:29:25,299 --> 00:29:27,360 So Ancient City Ruby was at this hotel last 696 00:29:27,360 --> 00:29:29,179 year. This is, or, this year, too. This is 697 00:29:29,179 --> 00:29:32,539 the Casa Monica Hotel in Saint Augustine. So, beautiful 698 00:29:32,539 --> 00:29:35,200 on the outside. Absolutely gorgeous. Really nice architecture in 699 00:29:35,200 --> 00:29:35,610 the whole place. 700 00:29:35,610 --> 00:29:37,159 We walk into the room, and this is our 701 00:29:37,159 --> 00:29:41,240 window. All right, so our window is like three 702 00:29:41,240 --> 00:29:43,389 feet tall. It's this little square window. The room 703 00:29:43,389 --> 00:29:45,279 is all dim. There's just, if you see up 704 00:29:45,279 --> 00:29:46,159 here, there's a little plaque. This is what the 705 00:29:46,159 --> 00:29:47,240 plaque says. 706 00:29:47,240 --> 00:29:51,129 These uniquely shaped and placed windows, blah blah blah. 707 00:29:51,129 --> 00:29:53,019 As to why some windows are regularly shaped and 708 00:29:53,019 --> 00:29:54,830 low to the floor is known only to Franklin 709 00:29:54,830 --> 00:29:59,529 Smith, who is the, he was the amateur architect 710 00:29:59,529 --> 00:30:01,539 that designed this building. So he was really into 711 00:30:01,539 --> 00:30:03,139 the outside of the building and not so much 712 00:30:03,139 --> 00:30:05,389 the inside, at the expense of his users, I 713 00:30:05,389 --> 00:30:06,429 should say. 714 00:30:06,429 --> 00:30:09,019 Here's something that's actually well-designed, but it's not well-decorated. 715 00:30:09,019 --> 00:30:11,379 So this is the hotel receipt, or. Hotel receipt? 716 00:30:11,379 --> 00:30:15,850 Or, the parking receipt at the airport. It's ugly, 717 00:30:15,850 --> 00:30:17,679 you know. I would like to redesign it from 718 00:30:17,679 --> 00:30:21,990 a decorative sense. But the actual fundamental design of 719 00:30:21,990 --> 00:30:24,129 it is actually all right. Because it's probably really 720 00:30:24,129 --> 00:30:26,379 low-cost to print these things, like, that's like nine 721 00:30:26,379 --> 00:30:29,279 lines of dot matrix, right. So there's probably a 722 00:30:29,279 --> 00:30:31,919 lot of money saved just in terms of the 723 00:30:31,919 --> 00:30:33,860 complexity of the hardware and things like that. 724 00:30:33,860 --> 00:30:36,289 And here's the, here's the thing you put it 725 00:30:36,289 --> 00:30:40,279 in. This thing, also really ugly. But, it performs 726 00:30:40,279 --> 00:30:42,490 great. There's one slot. You put your ticket in. 727 00:30:42,490 --> 00:30:44,830 You put your card in after your ticket. It 728 00:30:44,830 --> 00:30:47,350 spits out your card and your receipt. So there's 729 00:30:47,350 --> 00:30:48,879 almost no way to screw this up. They actually 730 00:30:48,879 --> 00:30:52,409 have instructions. It says insert ticket. Insert credit card. 731 00:30:52,409 --> 00:30:54,480 Take credit card. Take receipt. You almost don't need 732 00:30:54,480 --> 00:30:57,149 instructions for that, but I appreciate it. 733 00:30:57,149 --> 00:30:59,590 It's well, it's not pretty. It's not well-decorated. But 734 00:30:59,590 --> 00:31:03,720 it's well-designed and that is solving the right problem. 735 00:31:03,720 --> 00:31:06,919 Good design solves the right problem. So this, when 736 00:31:06,919 --> 00:31:08,279 we come back to things like this, we look 737 00:31:08,279 --> 00:31:12,929 at the, the microwave. Why? Like, why did this 738 00:31:12,929 --> 00:31:14,870 end up like this? And I, I really think 739 00:31:14,870 --> 00:31:17,009 that it's because microwaves are not designed the way 740 00:31:17,009 --> 00:31:18,769 we design soft- or, hopefully not designed the way 741 00:31:18,769 --> 00:31:21,669 we design software. And, like, this industry doesn't necessarily 742 00:31:21,669 --> 00:31:23,779 work the same way we do. And I think 743 00:31:23,779 --> 00:31:27,220 that the process can have all the influence in 744 00:31:27,220 --> 00:31:28,929 defining the product. 745 00:31:28,929 --> 00:31:32,210 So, with that said, let's design a microwave the 746 00:31:32,210 --> 00:31:34,639 way we would design a product really quick here. 747 00:31:34,639 --> 00:31:37,639 So, I want to design to solve a problem. 748 00:31:37,639 --> 00:31:39,980 I want to design it feature by feature, to 749 00:31:39,980 --> 00:31:42,019 justify the most important stuff that you would need 750 00:31:42,019 --> 00:31:43,110 to have a microwave work well. 751 00:31:43,110 --> 00:31:45,590 So let's start with a clean slate. So the 752 00:31:45,590 --> 00:31:47,159 first thing I'm gonna need on my microwave, is 753 00:31:47,159 --> 00:31:49,070 I'm gonna need to know how much time, cause 754 00:31:49,070 --> 00:31:50,799 the microwave counts down, and I'm gonna need to 755 00:31:50,799 --> 00:31:53,370 know I'm gonna be able to start and stop 756 00:31:53,370 --> 00:31:53,690 it. 757 00:31:53,690 --> 00:31:55,889 So that's the first thing we'll need. Well, I 758 00:31:55,889 --> 00:31:57,249 need to be able to increment and decrement the 759 00:31:57,249 --> 00:32:01,539 time. So let's do that. I probably don't have 760 00:32:01,539 --> 00:32:04,759 a use case for less than ten second increments 761 00:32:04,759 --> 00:32:08,450 for cooking something. So that seems reasonable. 762 00:32:08,450 --> 00:32:10,259 I do have a use case for, like, defrosting 763 00:32:10,259 --> 00:32:10,799 or something like that, where I might have to 764 00:32:10,799 --> 00:32:13,629 hammer that button a bunch of times. So let's 765 00:32:13,629 --> 00:32:15,929 add minute selectors as well, so we can go 766 00:32:15,929 --> 00:32:18,620 up to, you know, five minutes relatively quickly, with 767 00:32:18,620 --> 00:32:21,269 very little fuss. It makes sense immediately. 768 00:32:21,269 --> 00:32:24,309 And I also need to adjust the power level. 769 00:32:24,309 --> 00:32:26,940 Well, let's do that too. Let's use our existing 770 00:32:26,940 --> 00:32:30,499 design metaphor. Let's use our existing design language, and 771 00:32:30,499 --> 00:32:33,970 we'll put a power selector right there. And that's 772 00:32:33,970 --> 00:32:35,120 it. 773 00:32:35,120 --> 00:32:39,049 So, what we've done is we've, we've followed user 774 00:32:39,049 --> 00:32:42,309 needs and we've followed specific feature needs. We've avoided 775 00:32:42,309 --> 00:32:47,820 inconsistency. We've avoided confusion. We've also avoided modes. So, 776 00:32:47,820 --> 00:32:50,220 hypothetically, if you were to design something that, that, 777 00:32:50,220 --> 00:32:52,649 that backed this up, hardware wise, you should be 778 00:32:52,649 --> 00:32:54,629 able to just change power on the fly. I 779 00:32:54,629 --> 00:32:56,210 mean, maybe there's something I don't know about microwaves 780 00:32:56,210 --> 00:32:57,230 where you can't do that and you wouldn't be 781 00:32:57,230 --> 00:32:59,440 able to use those buttons, but as far as 782 00:32:59,440 --> 00:33:02,230 I know, there is no, like, there's no secret 783 00:33:02,230 --> 00:33:04,850 sequence of events to set time and power and 784 00:33:04,850 --> 00:33:07,249 start. You should just be able to do it. 785 00:33:07,249 --> 00:33:08,700 So that's the kind of thing that we could 786 00:33:08,700 --> 00:33:12,590 do instead. And, so this talk is about, I 787 00:33:12,590 --> 00:33:14,690 mean. Hopefully at this point you know what this 788 00:33:14,690 --> 00:33:17,190 talk is about. But, we need, we need to 789 00:33:17,190 --> 00:33:18,440 look at things, and we need to look at 790 00:33:18,440 --> 00:33:20,409 the interactions around us and we need to learn 791 00:33:20,409 --> 00:33:22,999 from them, even if they don't apply to our, 792 00:33:22,999 --> 00:33:25,370 even if they're not software based. 793 00:33:25,370 --> 00:33:27,970 Because the way that you design something in the, 794 00:33:27,970 --> 00:33:29,590 fundamentally, like the way you think about it and 795 00:33:29,590 --> 00:33:30,929 the way you think about your users is gonna 796 00:33:30,929 --> 00:33:33,700 affect the final product every step of the way. 797 00:33:33,700 --> 00:33:36,440 And I feel like that's some, that's our obligation. 798 00:33:36,440 --> 00:33:38,289 We can show people that we value their experiences 799 00:33:38,289 --> 00:33:40,529 top to bottom and that we're constantly thinking about 800 00:33:40,529 --> 00:33:43,129 how to solve problems, ease friction, remove barriers, and 801 00:33:43,129 --> 00:33:45,889 serve them in world-class ways. And we have a 802 00:33:45,889 --> 00:33:49,350 huge opportunity to change someone's expectations. 803 00:33:49,350 --> 00:33:50,490 So what I want you guys to do is 804 00:33:50,490 --> 00:33:53,389 discover the interactions around you, no matter what they 805 00:33:53,389 --> 00:33:56,070 are. Respect your user's intuition, language, and their sense 806 00:33:56,070 --> 00:33:58,990 of place, those basic, fundamentals of understanding where those 807 00:33:58,990 --> 00:34:01,820 things can go wrong. And I really do think 808 00:34:01,820 --> 00:34:04,539 that interactions are for everyone. This isn't just design 809 00:34:04,539 --> 00:34:06,799 stuff. This isn't, this isn't based on some science 810 00:34:06,799 --> 00:34:09,210 that you don't know. There's a certain level of 811 00:34:09,210 --> 00:34:13,080 awareness and a certain level of active experiencing of 812 00:34:13,080 --> 00:34:15,570 interactions that I think apply to anybody in our 813 00:34:15,570 --> 00:34:16,168 field. 814 00:34:16,168 --> 00:34:23,168 So, that's all I got. Thanks a lot guys.