WEBVTT 00:00:01.002 --> 00:00:04.440 Let’s continue our journey of these design heuristics. 00:00:04.440 --> 00:00:07.757 Before we do, I’d like to remind you that many of the interfaces 00:00:07.757 --> 00:00:11.192 that we’re going to look at could fit into multiple different heuristics, 00:00:11.192 --> 00:00:14.939 and the most important thing is to identify the problem: 00:00:14.939 --> 00:00:20.170 If you identify and fix the problem, the label is of secondary importance. 00:00:21.355 --> 00:00:24.540 Our next heuristic is “recognition over recall.” 00:00:24.540 --> 00:00:33.707 Create interfaces that make objects, actions, options, and directions visible or easily retrievable. 00:00:33.707 --> 00:00:38.627 And one of my favorite examples of this is [that] any time you see a Post-It note, 00:00:38.627 --> 00:00:45.212 that probably means that the relevant information isn’t as ready at hand as it ought to be. 00:00:45.212 --> 00:00:48.146 Here’s a photograph I took of one of our lunch meetings. 00:00:48.146 --> 00:00:51.632 And here you can see we have shwarma and falafel. 00:00:51.632 --> 00:00:54.020 They each have a number on them. 00:00:54.020 --> 00:01:00.544 And we have a code that’s used to distinguish which number means which kind of sandwich. 00:01:00.544 --> 00:01:05.343 And of course, the reason for this is that someone spent all their time making these delicious, 00:01:05.343 --> 00:01:08.436 and didn’t take the time to write out the whole label on it. 00:01:08.436 --> 00:01:10.935 So it’s understandable and fixable. 00:01:10.935 --> 00:01:15.174 But, from an interface design perspective, it would be faster to find the chicken shwarma 00:01:15.174 --> 00:01:21.423 if it was written directly on there, as opposed to in code. 00:01:24.360 --> 00:01:28.836 Here’s a screen shot of a ticket-buying website, and what you can see 00:01:28.836 --> 00:01:33.502 is that it gives you a couple of options like buy tickets for today or for a future day. 00:01:33.502 --> 00:01:37.814 There’s a couple of problems from a heuristics perspective with this screen. 00:01:37.814 --> 00:01:43.666 For starters — and we’ll get to this in a little bit — the layout is kind of all over the place. 00:01:43.666 --> 00:01:48.632 But also the thing that we’re going to look at here is the fact that we have this intermediate screen 00:01:48.632 --> 00:01:52.000 which I think could be done away with with clever design. 00:01:52.000 --> 00:01:55.394 It, for example, brings you to a page 00:01:55.394 --> 00:02:00.519 that offers up show times for today and offers you a dialog box to switch the day. 00:02:00.519 --> 00:02:05.358 And so, by setting up reasonable defaults, you can avoid extra hurdles . 00:02:05.358 --> 00:02:10.526 In addition to leading with reasonable defaults, it can be valuable to provide previews. 00:02:10.526 --> 00:02:16.028 This is a screen shot of a web design tool where there are many templates available. 00:02:16.028 --> 00:02:22.245 However, all of the templates are shown in textural listing, which is not well suited for the task. 00:02:22.245 --> 00:02:28.669 You have to think through whether that’s what you want, and that’s a difficult thing to do reliably. 00:02:28.669 --> 00:02:35.335 By contrast this is a different web design tool that offers previews of all of the templates available, 00:02:35.335 --> 00:02:39.521 and it’s much easier to see if that’s the design that you’d like. 00:02:40.275 --> 00:02:44.040 Next up, flexibility and efficiency. 00:02:44.040 --> 00:02:47.120 An simple and straight forward example of this 00:02:47.120 --> 00:02:52.051 is to provide keyboard accelerator shortcuts and similar things like that for experts. 00:02:52.051 --> 00:02:55.816 This is the View menu of the Firefox web browser. 00:02:55.816 --> 00:03:01.444 And this is a great example of offering flexibility and support for experts in two ways. 00:03:01.444 --> 00:03:05.371 First, we can see that there’s keyboard shortcuts available. 00:03:05.371 --> 00:03:12.138 And second, the View Source menu will let you retrieve the page source of any page that you’re looking at, 00:03:12.138 --> 00:03:18.078 so you can look under the hood — not something that most people want to do; valuable for experts. 00:03:18.078 --> 00:03:20.968 This is the Expedia hotel search, 00:03:20.968 --> 00:03:26.185 and it does a really nice job of making the common cases quite easy to get to. 00:03:26.185 --> 00:03:29.002 Popular cities are shown with a radio button. 00:03:29.002 --> 00:03:33.140 But also, if you’d like to go to a less popular city, 00:03:33.140 --> 00:03:36.390 there’s a free entry field that you can type in anything that you want. 00:03:36.390 --> 00:03:39.565 And so this is a nice example of defaults with options. 00:03:39.565 --> 00:03:44.764 Flexible interfaces can also foreground and push relevant ambient information. 00:03:44.764 --> 00:03:47.092 This is a screen shot of BusyCal, 00:03:47.092 --> 00:03:52.369 which will allow you to view the weather forecast on your weekly view of your calendar. 00:03:52.369 --> 00:03:57.363 Here’s another example of productivity in the user interface: This is Google’s Gmail, 00:03:57.363 --> 00:04:03.067 which, if you click Spam on a recipient that it knows how to unsubscribe you from, 00:04:03.067 --> 00:04:08.912 it will offer the opportunity to directly unsubscribe you from that email as well. 00:04:08.912 --> 00:04:13.933 And I think this is an example of how, if you’re going to be proactive in an interface, 00:04:13.933 --> 00:04:19.267 you need to do it well and offer a clear, immediate, task-relevant benefit. 00:04:19.267 --> 00:04:27.063 People generally don’t like proactive interfaces that distract, interrupt, break flow, or provide irrelevant information. 00:04:27.063 --> 00:04:33.730 Another nice example of support for richer use is to offer recommendations on a particular page. 00:04:33.730 --> 00:04:39.442 And so here you can see if you like this one beverage here, [there are] other beverages you might like. 00:04:44.365 --> 00:04:49.928 And again, if you’re going to offer recommendations, or other kinds of proactivity, keep it relevant. 00:04:49.928 --> 00:04:53.941 This is an example from Amazon, of discussion fora for products 00:04:53.941 --> 00:04:58.085 that are almost entirely unrelated to the product that is being shown. 00:04:58.085 --> 00:05:01.662 And it just distracts from the user’s main goal — Mostly they’re wondering 00:05:01.662 --> 00:05:06.905 “Why on earth did these things end up at the bottom of some completely unrelated webpage?” 00:05:06.905 --> 00:05:12.988 And finally, [while] flexibility can be incredibly valuable, it is possible to go overboard. 00:05:12.988 --> 00:05:17.949 This is a photograph from Bill Moggridge who shows an interview with a user 00:05:17.949 --> 00:05:24.609 who had hacked their remote control to limit it to just the relevant functionality that they needed. 00:05:24.609 --> 00:05:31.213 And so, flexibility can sometimes be at tension with minimalism. 00:05:31.213 --> 00:05:36.775 Our eighth heuristic is “aesthetic and minimalist design.” 00:05:36.775 --> 00:05:42.196 When people view your webpage, for example, they’re viewing it on a screen, 00:05:42.196 --> 00:05:47.495 and so they see not the entire page, but one screen’s worth at a given time. 00:05:47.495 --> 00:05:51.909 What they see is what’s called “above the fold” — it comes from newspapers. 00:05:51.919 --> 00:05:55.482 Here’s an example of a screen where the relevant information — 00:05:55.482 --> 00:06:00.055 what the weather forecast is — is not even visible anywhere above the fold. 00:06:00.055 --> 00:06:03.913 Everything above the fold is all of the chrome and extra stuff, 00:06:03.913 --> 00:06:07.034 but the core information you have to scroll down for. 00:06:07.034 --> 00:06:10.950 And to the extent that you’re trying to optimize for user experience, 00:06:10.950 --> 00:06:18.122 it would be better to have the core information above the fold. 00:06:18.122 --> 00:06:24.212 As we’ll talk about in visual design, if you’re going to use color and other cues, 00:06:24.212 --> 00:06:27.622 have them mean something, and do so judiciously. 00:06:27.622 --> 00:06:32.154 Here’s an example of a check out page that’s using lots of different colors, 00:06:32.154 --> 00:06:40.020 and has a real cacophony in terms of its hierarchical organization on screen, for no apparent purpose. 00:06:40.020 --> 00:06:43.804 And here’s a screen shot from Google’s help system. 00:06:43.804 --> 00:06:48.932 Google is often thought of as an example of minimalist design and they often do this quite well. 00:06:48.932 --> 00:06:54.042 I wanted to show one example where, I think, some more information could be stripped out, 00:06:54.042 --> 00:06:56.885 or rather some more noise could be stripped out. 00:06:56.885 --> 00:07:00.584 And what I’m looking at in particular is this stuff here, 00:07:00.584 --> 00:07:06.278 where all of the table borders and other stuff are what you most see, 00:07:06.278 --> 00:07:11.147 whereas what you actually most care about is the data in the survey, 00:07:11.147 --> 00:07:15.641 and so, if you get rid of all of the extra lines and chart junk, 00:07:15.641 --> 00:07:20.031 it can be clearer to see the parts that you cared the most about. 00:07:21.800 --> 00:07:26.605 Here’s a log in screen that I think does a nice job of keeping the email address only in one place 00:07:26.605 --> 00:07:30.433 because it’s right up top here, and then you get to say 00:07:30.433 --> 00:07:34.206 whether or not you’re a returning customer or a new customer. 00:07:34.206 --> 00:07:38.315 If you’re a returning customer you enter your password; or if you’re a new customer, 00:07:38.315 --> 00:07:46.595 like the screen shows here, you create a new password and then type it in and go on from there. 00:07:46.595 --> 00:07:50.404 By contrast, this flight search website has the exact same information — 00:07:50.404 --> 00:07:53.675 number of stops — in two separate places. 00:07:53.675 --> 00:07:56.630 And it’s possible that this increased clarity. 00:07:56.630 --> 00:08:02.665 However, there is a cost of complexity, and there’s also a cost of vertical screen real estate, 00:08:02.665 --> 00:08:07.193 where by listing the same thing twice, you’re pushing other stuff down. 00:08:07.193 --> 00:08:12.645 Often by being dynamic about what you show or figuring out how to show things just once, 00:08:12.645 --> 00:08:20.287 you can have all of the relevant information fit more clearly and in a less cluttered way on the screen. 00:08:20.287 --> 00:08:27.762 One of the easiest conceits to make as a design team is that the people using your site will care as deeply 00:08:27.762 --> 00:08:33.262 and will want to spend as much time using the site as you’ve spent building the site. 00:08:33.262 --> 00:08:37.385 And so it can be easy to have feature creep and lots of bells and whistles and doodads. 00:08:37.385 --> 00:08:39.880 But that’s not necessarily what people want. 00:08:39.880 --> 00:08:45.561 Here’s an example of a student loan website that offers you the ability to add widgets to your home screen. 00:08:45.561 --> 00:08:50.878 Now this is the kind of site that you log in to probably a couple times a year? [laugh] 00:08:50.878 --> 00:08:56.332 It’s not likely to be a site that you’re going to want to festoon with all sorts of gadgets. 00:08:56.332 --> 00:09:02.701 Next let’s talk about helping users recognize, diagnose, and recover from errors. 00:09:02.701 --> 00:09:06.405 One of the first steps of doing this is making the problem clear. 00:09:06.405 --> 00:09:14.396 Here’s a hotel reservation site where all it says is: “Mistake. month. back.” 00:09:14.396 --> 00:09:18.355 It’s hard to know what to do. 00:09:18.355 --> 00:09:22.716 Here’s one that’s a little bit better: It’s a registration site for an event. 00:09:22.716 --> 00:09:27.105 And what we see here is that it says you must fill out all the required fields. 00:09:27.105 --> 00:09:31.508 Okay, that’s a little better. But which fields didn’t I fill out? 00:09:31.508 --> 00:09:37.194 This page is screens and screens long; there’s lots and lots of things that need to be checked. 00:09:37.194 --> 00:09:41.416 Which of the myriad things on this page did I forget to check? 00:09:41.416 --> 00:09:46.127 Maybe you could show me just a page that has the one or two things forgotten 00:09:46.127 --> 00:09:51.477 rather than the whole pile of stuff and force me to scroll through it again. 00:09:51.477 --> 00:09:57.412 Here’s a dialog box that shows the error and explains it clearly, 00:09:57.412 --> 00:10:00.455 but it doesn’t offer you much in terms of solving the problem. 00:10:00.455 --> 00:10:04.029 It says that there’s not enough space on your iPod. Too bad. 00:10:04.029 --> 00:10:09.666 A more effective solution would be to offer some view into what’s taking up all the space, 00:10:09.666 --> 00:10:14.734 or to offer reasonable ways of limiting the amount of media 00:10:14.734 --> 00:10:17.489 that you’re trying to put on the device so that it can all fit. 00:10:17.489 --> 00:10:23.620 And in this particular case, more recent versions of this application handle this problem better. 00:10:23.620 --> 00:10:31.972 A common mistake in writing error messages is to offer one dialog box for all of the possibilities. 00:10:31.972 --> 00:10:37.064 Here’s a screen shot of trying to open a file where it doesn’t know the file type. 00:10:37.064 --> 00:10:41.662 And it says, “The application that you chose (‘(null)’), could not found. 00:10:41.662 --> 00:10:45.695 Check the file name or choose another application.” 00:10:45.695 --> 00:10:50.307 Well this would be a whole lot better if we were speaking the user’s language: 00:10:50.307 --> 00:10:52.210 “Null” may not be the best choice. 00:10:52.210 --> 00:10:58.260 And also if we offered up a reasonable application for that file type. 00:10:58.260 --> 00:11:02.100 A lot of common tasks on the web are search-based tasks. 00:11:02.100 --> 00:11:05.045 So here’s a screenshot from searching for a flight, 00:11:05.045 --> 00:11:08.772 where the constraint specified yielded no possible solution. 00:11:08.772 --> 00:11:13.812 For complex search tasks. if a user specifies an unreasonable set of constraints, 00:11:13.812 --> 00:11:16.992 one of the most powerful things that you can do as a designer 00:11:16.992 --> 00:11:22.619 is to offer a relaxation of those constraints that makes this more workable. 00:11:22.619 --> 00:11:27.408 Many years ago, I worked with Chuck Rich at Mitsubishi Research in Boston. 00:11:27.408 --> 00:11:30.558 And he was working on a research system called Collagen 00:11:30.558 --> 00:11:34.042 that would find ways to intelligently relax these constraints — 00:11:34.042 --> 00:11:37.577 among other things — to help users get their work done better. 00:11:37.577 --> 00:11:42.343 And this kind of smart relaxation can be a really powerful technique. 00:11:42.343 --> 00:11:45.738 I wanted to end talking about errors on a good note. 00:11:45.738 --> 00:11:50.486 Here’s a web browser dialog box that lets you know 00:11:50.486 --> 00:11:54.393 if you go to a URL that it believes to be suspect, 00:11:54.393 --> 00:11:57.591 it will let you know that you probably don’t want to be here, 00:11:57.591 --> 00:12:03.031 and it offers to get you out of here and explain more about why this webpage was blocked. 00:12:03.031 --> 00:12:08.075 There’s probably future further innovations that can happen in this kind of error work. 00:12:08.075 --> 00:12:13.568 But I think that this is a pretty good darn start and a lot better than the way things used to be. 00:12:13.568 --> 00:12:19.326 And that brings us to our last heuristic, which is better help and documentation. 00:12:19.326 --> 00:12:25.607 It can be easy to think about help as somebody else’s problem and not part of the real app. 00:12:25.607 --> 00:12:31.002 Fortunately, I think on the web, help and documents have become more integrated. 00:12:31.002 --> 00:12:37.302 One of my favorite examples for this is learning programming systems where websites like PHP, .NET 00:12:37.302 --> 00:12:41.786 can help you learn programming systems by providing examples. 00:12:41.786 --> 00:12:45.397 Here’s another example-driven strategy from UPS’s website. 00:12:45.397 --> 00:12:50.580 It offers you the opportunity to subscribe to a number of mailing lists. 00:12:50.580 --> 00:12:53.851 And if you wonder what each of these mailing lists might give you, 00:12:53.851 --> 00:12:56.211 on another screen I’ve batched them together here. 00:12:56.211 --> 00:13:01.564 It will show you examples from each of those mailing lists of the content you are likely to receive. 00:13:01.564 --> 00:13:04.066 That’s a really powerful kind of preview strategy. 00:13:04.066 --> 00:13:08.827 And here is an example of a print dialog box to tell you what the problem is, 00:13:08.827 --> 00:13:11.670 but doesn’t help you find the solution. 00:13:11.670 --> 00:13:17.853 For starters, I think somebody wants to know, is the stuff that’s outside the margins relevant? 00:13:17.853 --> 00:13:22.815 Is it just formally outside the margins, but nothing’s actually getting cut off? 00:13:22.815 --> 00:13:27.192 or is there important document parts that I care about that are being cut off from the page? 00:13:27.192 --> 00:13:31.088 And, what do you think the most reasonable path is to solving this problem? 00:13:31.088 --> 00:13:39.145 Should I change the page size, or orientation, or move the header and footer? Help me solve it! 00:13:39.145 --> 00:13:43.736 Here’s a dialog box for the photo merge feature of Adobe’s Photoshop Elements, 00:13:43.736 --> 00:13:46.311 which is a very cool feature if you set it up right. 00:13:46.311 --> 00:13:50.241 However, you need to specify multiple photos as input from the project bin. 00:13:50.241 --> 00:13:54.702 And this is something that the dialog box actually could do a better job of leading you through. 00:13:54.702 --> 00:14:00.587 It could then say let me show you and it could highlight the project bin on the screen or something like that. 00:14:00.587 --> 00:14:04.043 Here are two screenshots from eBay. 00:14:04.043 --> 00:14:08.877 On the left we have an interesting approach, where eBay has built its own internal messaging system. 00:14:08.877 --> 00:14:13.229 And if, for the sake of argument, we decided that’s the right thing to do, 00:14:13.229 --> 00:14:17.879 and that the internal messaging is better than directly responding to email — 00:14:17.879 --> 00:14:21.050 I’m not sure about that, but we’ll go with it for now — 00:14:21.050 --> 00:14:25.647 they’ve done a clever thing, which is, when you reply, the reply mail address says, 00:14:25.647 --> 00:14:31.764 “Hey, use the yellow button,” and in the middle of replying it, you can see, “Oops, I made a mistake. 00:14:31.764 --> 00:14:35.024 That’s right… I need to use the internal messaging system.” 00:14:35.024 --> 00:14:37.336 It’s an interesting hack. 00:14:37.351 --> 00:14:41.120 And here’s another screenshot from eBay, on the right hand side, 00:14:41.120 --> 00:14:44.405 where when new functionality is introduced — 00:14:44.405 --> 00:14:48.068 for example the ability to compare multiple options in your card — 00:14:48.068 --> 00:14:51.177 it can call that out inside the user interface. 00:14:51.177 --> 00:14:55.759 And I think the ability to combine help directly into the user interface 00:14:55.759 --> 00:14:58.794 is one of the most exciting advances in this area. 00:14:58.794 --> 00:15:03.204 And it’s something that was less common in previous desktop applications. 00:15:03.204 --> 00:15:06.843 And here’s an example that I think is interesting. 00:15:06.843 --> 00:15:12.488 This is the unsubscription dialog box for a mailing list, 00:15:12.488 --> 00:15:16.017 and if you click “I receive too many emails,” 00:15:16.017 --> 00:15:19.352 it says “Wait, you can change the frequency,” 00:15:19.352 --> 00:15:23.795 and you have the opportunity to receive mailing list mails at a less frequent interval. 00:15:23.795 --> 00:15:26.746 I think that this is an actually a really nice solution, 00:15:26.746 --> 00:15:29.717 because sometimes you want to receive some mail, but not too much. 00:15:29.717 --> 00:15:32.840 In other cases, maybe you’ll view this as harassing 00:15:32.840 --> 00:15:35.706 and you’ll wish that you could just be done with this task quickly, 00:15:35.706 --> 00:15:40.429 but in either case, I thought it was an interesting and creative solution. 00:15:40.429 --> 00:15:43.734 I think it’s really important that help be sincere, 00:15:43.734 --> 00:15:47.947 and there’s one class of help and additional information 00:15:47.947 --> 00:15:54.452 that I think is, at least in effect, not providing users with the information that they need, 00:15:54.452 --> 00:15:57.741 and that’s EULA’s, or end-user licensing agreements. 00:15:57.741 --> 00:16:05.566 Here’re two examples of EULA screens where it’s very easy to click through without ever read the EULA. 00:16:05.566 --> 00:16:13.025 And my hunch is that nearly all users do click through without reading the EULA. 00:16:13.025 --> 00:16:17.576 If nobody needs to know the terms of the licensing agreement, that’s very reasonable, 00:16:17.576 --> 00:16:20.717 but my hunch is that the reason these things exist is 00:16:20.717 --> 00:16:25.504 because they have consequence of some sort the user should probably be informed about. 00:16:25.504 --> 00:16:28.708 And so if you’re designing a site that has terms for users, 00:16:28.708 --> 00:16:34.964 think about “Is there a way that you can at least summarize what the key things somebody’s agreeing to are” 00:16:34.964 --> 00:16:42.426 without having them click through it or having never even seen or read a lick of the agreement at all. 00:16:42.426 --> 00:16:45.486 And to close on a positive note, one nice thing 00:16:45.486 --> 00:16:49.124 that you can do with help on a website is to help people have fun. 00:16:49.124 --> 00:16:51.185 Filling out forms can often be really boring, 00:16:51.185 --> 00:16:55.577 and here’s an example from a hotel website where one of the options has a little joke on the inside, 00:16:55.577 --> 00:17:00.039 and so that bit of levity can help increase the user experience.