[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.77,0:00:05.97,Default,,0000,0000,0000,,So far we’ve talked a lot about strategies and techniques for designing user interfaces
Dialogue: 0,0:00:05.97,0:00:08.53,Default,,0000,0000,0000,,and we’ve talked a little bit about high-level principles.
Dialogue: 0,0:00:08.53,0:00:10.91,Default,,0000,0000,0000,,What I’d like to do now is to kind of dive deep
Dialogue: 0,0:00:10.91,0:00:15.12,Default,,0000,0000,0000,,and get down to brass tacks and talk about a number of concrete examples.
Dialogue: 0,0:00:15.12,0:00:19.78,Default,,0000,0000,0000,,And so these lectures are going to offer two benefits simultaneously:
Dialogue: 0,0:00:19.78,0:00:23.08,Default,,0000,0000,0000,,First, what I’d like to do in these next couple of lectures
Dialogue: 0,0:00:23.08,0:00:31.68,Default,,0000,0000,0000,,is introduce a set of design heuristics for identifying interface errors and strategies for correcting them.
Dialogue: 0,0:00:31.68,0:00:37.02,Default,,0000,0000,0000,,Second, I’d like to walk you through a number of examples of actual user interfaces,
Dialogue: 0,0:00:37.02,0:00:42.36,Default,,0000,0000,0000,,and talk about particular ways in which they’re successful or have problems.
Dialogue: 0,0:00:42.36,0:00:45.91,Default,,0000,0000,0000,,Now, these are all screen shots that I’ve gathered over several years.
Dialogue: 0,0:00:45.91,0:00:52.03,Default,,0000,0000,0000,,I keep a big file of interfaces that I think are effective or have problems,
Dialogue: 0,0:00:52.03,0:00:56.41,Default,,0000,0000,0000,,and it’s a good activity — I encourage you to do the same thing.
Dialogue: 0,0:00:56.41,0:00:59.07,Default,,0000,0000,0000,,For any voyeurs out there, you’ll get a sense of interfaces
Dialogue: 0,0:00:59.07,0:01:02.29,Default,,0000,0000,0000,,that I’ve stumbled across over the last several years —
Dialogue: 0,0:01:02.29,0:01:04.31,Default,,0000,0000,0000,,not a very exciting list, but, hey.
Dialogue: 0,0:01:04.31,0:01:07.58,Default,,0000,0000,0000,,And all of these interfaces are things that may come up again
Dialogue: 0,0:01:07.58,0:01:10.85,Default,,0000,0000,0000,,when we talk about visual design and other principles.
Dialogue: 0,0:01:10.85,0:01:15.76,Default,,0000,0000,0000,,So some of these screen shots you’ll see multiple times in this class.
Dialogue: 0,0:01:15.76,0:01:21.69,Default,,0000,0000,0000,,Finally, I’d like to emphasize that we really want to focus on narrow issues in these user interfaces.
Dialogue: 0,0:01:21.69,0:01:26.05,Default,,0000,0000,0000,,And I’m not going to talk about whether the broader ecosystem
Dialogue: 0,0:01:26.05,0:01:29.88,Default,,0000,0000,0000,,that the particular thing we’re looking at is effective or not.
Dialogue: 0,0:01:29.88,0:01:35.73,Default,,0000,0000,0000,,So, we may point out flaws in interfaces that are on the whole exemplary,
Dialogue: 0,0:01:35.73,0:01:42.55,Default,,0000,0000,0000,,or we may point out successes in interfaces that are on the whole not quite so good.
Dialogue: 0,0:01:42.55,0:01:46.05,Default,,0000,0000,0000,,And finally, because I’ve gathered these screen shots over a number of years,
Dialogue: 0,0:01:46.05,0:01:48.65,Default,,0000,0000,0000,,many of these interfaces no longer look like this.
Dialogue: 0,0:01:48.65,0:01:55.77,Default,,0000,0000,0000,,The point is not the current state of an interface, but rather the didactical of teaching you a principle.
Dialogue: 0,0:01:56.27,0:01:59.32,Default,,0000,0000,0000,,Here are the ten design heuristics that we’re going to talk about.
Dialogue: 0,0:01:59.32,0:02:01.18,Default,,0000,0000,0000,,Some of these names are mine.
Dialogue: 0,0:02:01.18,0:02:05.17,Default,,0000,0000,0000,,The principles are based on Jakob Nielsen’s work in heuristic evaluation;
Dialogue: 0,0:02:05.17,0:02:10.48,Default,,0000,0000,0000,,I’ve simply relabeled a few of them to make them, I think, clearer and shorter.
Dialogue: 0,0:02:12.36,0:02:14.12,Default,,0000,0000,0000,,And so let’s jump in.
Dialogue: 0,0:02:14.12,0:02:17.26,Default,,0000,0000,0000,,The first of these principles is “show system status.”
Dialogue: 0,0:02:17.26,0:02:20.95,Default,,0000,0000,0000,,I think one of the most important things you can do in user interface design
Dialogue: 0,0:02:20.95,0:02:28.80,Default,,0000,0000,0000,,is provide excellent feedback about where the system is and where the user is in a larger interaction flow.
Dialogue: 0,0:02:28.80,0:02:34.06,Default,,0000,0000,0000,,One important thing to provide feedback about is where the user is in time.
Dialogue: 0,0:02:34.06,0:02:39.48,Default,,0000,0000,0000,,If you have an interactive system where the response time is less than a second or so,
Dialogue: 0,0:02:39.48,0:02:43.35,Default,,0000,0000,0000,,there is no need to have intermediate feedback: It just feels interactive.
Dialogue: 0,0:02:43.35,0:02:48.37,Default,,0000,0000,0000,,As you get to something that’s on the order of a second or a couple of seconds,
Dialogue: 0,0:02:48.37,0:02:53.39,Default,,0000,0000,0000,,it becomes important to provide some kind of feedback that an activity is underway.
Dialogue: 0,0:02:53.39,0:02:56.60,Default,,0000,0000,0000,,You can think of this as hourglass or a spinning ball,
Dialogue: 0,0:02:56.60,0:02:59.80,Default,,0000,0000,0000,,and if you get to something that’s more than a couple of seconds,
Dialogue: 0,0:02:59.80,0:03:05.20,Default,,0000,0000,0000,,it’s useful to show progress of how far along in an activity that user is.
Dialogue: 0,0:03:05.20,0:03:09.02,Default,,0000,0000,0000,,Here we see an example from an installation of a piece of software.
Dialogue: 0,0:03:09.02,0:03:15.02,Default,,0000,0000,0000,,And you can see the same thing if you ask a user to fill out a survey or when they’re completing their taxes,
Dialogue: 0,0:03:15.02,0:03:20.29,Default,,0000,0000,0000,,or any other process that takes a long time or may require multiple steps of input.
Dialogue: 0,0:03:20.29,0:03:27.22,Default,,0000,0000,0000,,You’ll want to give people feedback about how far through the system is and how far through they are.
Dialogue: 0,0:03:29.49,0:03:35.10,Default,,0000,0000,0000,,Second important category of things to provide feedback about and to show to the user is space.
Dialogue: 0,0:03:35.10,0:03:41.77,Default,,0000,0000,0000,,Here’s a screen shot from Gmail which notifies me that I was out of the space allocated to me
Dialogue: 0,0:03:41.77,0:03:46.25,Default,,0000,0000,0000,,and that means that I need to do something about it.
Dialogue: 0,0:03:46.25,0:03:50.04,Default,,0000,0000,0000,,The third important thing to show people feedback about is change.
Dialogue: 0,0:03:50.04,0:03:54.46,Default,,0000,0000,0000,,Here we have a dialog box that says, “You’ve changed this document.
Dialogue: 0,0:03:54.46,0:03:57.48,Default,,0000,0000,0000,,Do you want to save those changes or don’t save them.”
Dialogue: 0,0:03:57.48,0:04:00.62,Default,,0000,0000,0000,,Our fourth category is action. Here’s a stoplight.
Dialogue: 0,0:04:00.62,0:04:04.21,Default,,0000,0000,0000,,So the red light means stop; the green light means go.
Dialogue: 0,0:04:04.21,0:04:10.18,Default,,0000,0000,0000,,And I like this user interface, because it uses a redundant coding to provide feedback to the user.
Dialogue: 0,0:04:10.18,0:04:15.37,Default,,0000,0000,0000,,So the red light is not only using red as a color, but it’s up at the top of the screen;
Dialogue: 0,0:04:15.37,0:04:18.82,Default,,0000,0000,0000,,and the green light is also always at the bottom.
Dialogue: 0,0:04:18.82,0:04:23.93,Default,,0000,0000,0000,,And this consistency in the dual coding both makes it faster to recognize
Dialogue: 0,0:04:23.93,0:04:27.02,Default,,0000,0000,0000,,and it helps work for a broader class of users —
Dialogue: 0,0:04:27.02,0:04:32.21,Default,,0000,0000,0000,,for example, not all users may be able to distinguish red from green.
Dialogue: 0,0:04:32.21,0:04:37.39,Default,,0000,0000,0000,,Especially in an online world, it can be important to show feedback about next steps.
Dialogue: 0,0:04:37.39,0:04:41.61,Default,,0000,0000,0000,,Here’s a screen shot from Amazon that says “Your message was sent to the seller
Dialogue: 0,0:04:41.61,0:04:44.72,Default,,0000,0000,0000,,and a copy was sent to the email address of your account.
Dialogue: 0,0:04:44.72,0:04:47.67,Default,,0000,0000,0000,,The seller will respond to you directly via email.”
Dialogue: 0,0:04:47.67,0:04:51.56,Default,,0000,0000,0000,,So we’re letting the user know what’s going to happen next.
Dialogue: 0,0:04:51.56,0:04:55.95,Default,,0000,0000,0000,,That’s important because otherwise you can wonder, “Was the message actually sent?”
Dialogue: 0,0:04:55.95,0:04:58.16,Default,,0000,0000,0000,,or, “Did anybody get it?”
Dialogue: 0,0:04:58.16,0:05:00.98,Default,,0000,0000,0000,,or “When they receive it, what are they going to do?”
Dialogue: 0,0:05:00.98,0:05:05.58,Default,,0000,0000,0000,,This lays out very clearly what has happened and what will happen next.
Dialogue: 0,0:05:05.58,0:05:08.88,Default,,0000,0000,0000,,And after you’ve crossed time, space, change, actions, and next steps,
Dialogue: 0,0:05:08.88,0:05:11.94,Default,,0000,0000,0000,,the last thing that you’ll want to show is completion.
Dialogue: 0,0:05:11.94,0:05:14.72,Default,,0000,0000,0000,,I also like this dialog box because it’s funny.
Dialogue: 0,0:05:14.72,0:05:17.94,Default,,0000,0000,0000,,And a little bit of humor can be really effective in user interfaces.
Dialogue: 0,0:05:17.94,0:05:22.96,Default,,0000,0000,0000,,Our second heuristic is to use familiar metaphors and language.
Dialogue: 0,0:05:22.96,0:05:28.01,Default,,0000,0000,0000,,And often this can mean trying to provide a match in the interface
Dialogue: 0,0:05:28.01,0:05:31.89,Default,,0000,0000,0000,,with things that people are familiar with from their real-world experience.
Dialogue: 0,0:05:31.89,0:05:35.17,Default,,0000,0000,0000,,This also means speak the user’s language,
Dialogue: 0,0:05:35.17,0:05:39.72,Default,,0000,0000,0000,,and follow conventions that they’re familiar with both in the online world and in the real world.
Dialogue: 0,0:05:39.72,0:05:43.36,Default,,0000,0000,0000,,One important kind of familiarity is metaphors.
Dialogue: 0,0:05:43.36,0:05:50.15,Default,,0000,0000,0000,,In this interface, I want to call your attention to the world in miniature that’s being used in the print dialog box,
Dialogue: 0,0:05:50.15,0:05:54.61,Default,,0000,0000,0000,,and that’s an effective user interface, because it makes very clear
Dialogue: 0,0:05:54.61,0:06:00.75,Default,,0000,0000,0000,,which pieces of the page are going to to be cropped, and which pieces of the page are going to to be printed.
Dialogue: 0,0:06:00.75,0:06:04.70,Default,,0000,0000,0000,,In general, one of the successes of the graphical user interface
Dialogue: 0,0:06:04.70,0:06:10.87,Default,,0000,0000,0000,,is that it leverages a lot of real-world metaphors, like desktop and trash and files and folders.
Dialogue: 0,0:06:10.87,0:06:18.19,Default,,0000,0000,0000,,And if these are activities that users are familiar with, it can help bring them into a new online world.
Dialogue: 0,0:06:18.19,0:06:23.63,Default,,0000,0000,0000,,Now over the last 25 years, as more and more people have gotten accustomed to computing,
Dialogue: 0,0:06:23.63,0:06:29.00,Default,,0000,0000,0000,,some of those real-world metaphors have fallen away and newer ones have developed.
Dialogue: 0,0:06:29.00,0:06:36.52,Default,,0000,0000,0000,,Remember that the reader of your interface is going to be a user and not your colleague, boss, or lawyer.
Dialogue: 0,0:06:36.52,0:06:43.10,Default,,0000,0000,0000,,And consequently, work hard to identify terms and language that will be familiar to them.
Dialogue: 0,0:06:43.10,0:06:45.88,Default,,0000,0000,0000,,Here’s a screenshot from a student loan website.
Dialogue: 0,0:06:45.88,0:06:50.16,Default,,0000,0000,0000,,And it uses two terms that at least I was unfamiliar with —
Dialogue: 0,0:06:50.16,0:06:54.45,Default,,0000,0000,0000,,It talked about me being I already enrolled in “Electronic Correspondence.”
Dialogue: 0,0:06:54.45,0:07:00.50,Default,,0000,0000,0000,,And it said that I was not eligible for “Electronic Bill Presentment.”
Dialogue: 0,0:07:00.50,0:07:05.47,Default,,0000,0000,0000,,What it really means by this, I think, is just “email,” and so it should say that.
Dialogue: 0,0:07:05.47,0:07:12.01,Default,,0000,0000,0000,,And I don’t think of myself as being “enrolled” in an “email correspondence service.”
Dialogue: 0,0:07:12.01,0:07:16.42,Default,,0000,0000,0000,,It would be nicer if it just said “We’re sending you email.”
Dialogue: 0,0:07:16.42,0:07:22.50,Default,,0000,0000,0000,,And there’s some fine print about why I’m not eligible for “Electronic Bill Presentment.”
Dialogue: 0,0:07:22.50,0:07:27.80,Default,,0000,0000,0000,,It would be much clearer if, for starters, it actually identified the reason:
Dialogue: 0,0:07:27.80,0:07:33.17,Default,,0000,0000,0000,,in my particular case this has passed a log-in wall, and so it knows the reason.
Dialogue: 0,0:07:33.17,0:07:37.70,Default,,0000,0000,0000,,And it would be nicer if it was able to use more common terms,
Dialogue: 0,0:07:37.70,0:07:46.64,Default,,0000,0000,0000,,like “We’re unable to send you bills and email because,” maybe, “we don’t have an address on file.”
Dialogue: 0,0:07:46.64,0:07:49.63,Default,,0000,0000,0000,,And it’s important to use familiar categories.
Dialogue: 0,0:07:49.63,0:07:55.40,Default,,0000,0000,0000,,Here’s an example from a Visa website that asks users to select a state.
Dialogue: 0,0:07:55.40,0:08:00.87,Default,,0000,0000,0000,,And, I got a kick out of it because there are more than 50 states here —
Dialogue: 0,0:08:00.87,0:08:06.17,Default,,0000,0000,0000,,in fact, there’s a separate listing for Northern California and Southern California.
Dialogue: 0,0:08:06.17,0:08:09.55,Default,,0000,0000,0000,,And many people in San Francisco might wish
Dialogue: 0,0:08:09.55,0:08:12.92,Default,,0000,0000,0000,,that Northern California and Southern California were different states;
Dialogue: 0,0:08:12.92,0:08:18.67,Default,,0000,0000,0000,,and for many people, which of those they live in or believe they live in is clear.
Dialogue: 0,0:08:18.67,0:08:25.16,Default,,0000,0000,0000,,But for some users, this may be ambiguous, and it would probably be simpler if you just selected California
Dialogue: 0,0:08:25.16,0:08:29.70,Default,,0000,0000,0000,,and then the system decided whether it use its Southern California routing
Dialogue: 0,0:08:29.70,0:08:34.23,Default,,0000,0000,0000,,or Northern California routing, based on the address that you provide later.
Dialogue: 0,0:08:34.23,0:08:40.35,Default,,0000,0000,0000,,And it’s important that the choices that you offer to people are things that they’re likely to be familiar with.
Dialogue: 0,0:08:40.35,0:08:46.37,Default,,0000,0000,0000,,Here is a dialog box that says that “You have a document encoding mismatch.
Dialogue: 0,0:08:46.37,0:08:52.55,Default,,0000,0000,0000,,You’ve got a document which describes itself as being UTF-8, no BOM.
Dialogue: 0,0:08:52.55,0:08:57.02,Default,,0000,0000,0000,,But, the encoding has been set to Western, ISO Latin-1.
Dialogue: 0,0:08:57.02,0:09:00.89,Default,,0000,0000,0000,,Now this is a developer tool,
Dialogue: 0,0:09:00.89,0:09:05.72,Default,,0000,0000,0000,,and so it’s reasonable to expect some fluency with things that are under the hood —
Dialogue: 0,0:09:05.72,0:09:12.90,Default,,0000,0000,0000,,like, users may in general be familiar with the idea that there are different character sets for documents —
Dialogue: 0,0:09:12.90,0:09:21.80,Default,,0000,0000,0000,,but users may be not familiar with what exactly the difference is between UTF-8 no BOM and ISO Latin-1,
Dialogue: 0,0:09:21.80,0:09:29.04,Default,,0000,0000,0000,,or which of them they should select, or how exactly they should go about fixing this problem.
Dialogue: 0,0:09:29.04,0:09:36.05,Default,,0000,0000,0000,,One way that this interface could be improved is beaconing what the most common solution is likely to be.
Dialogue: 0,0:09:36.05,0:09:41.48,Default,,0000,0000,0000,,Our third heuristic is user control and freedom, and this is going to encompass a number of things —
Dialogue: 0,0:09:41.48,0:09:48.72,Default,,0000,0000,0000,,like exits for mistaken choices, the ability to undo and redo, not forcing people down fixed paths.
Dialogue: 0,0:09:48.72,0:09:52.27,Default,,0000,0000,0000,,I think of this heuristic as being about making sure
Dialogue: 0,0:09:52.27,0:09:58.07,Default,,0000,0000,0000,,that the amount of control and freedom is appropriate for the users and appropriate for the tasks.
Dialogue: 0,0:09:58.07,0:10:03.13,Default,,0000,0000,0000,,So for example, if you have an interface that somebody’s only going to use once,
Dialogue: 0,0:10:03.13,0:10:06.84,Default,,0000,0000,0000,,a relatively constrained wizard may actually be a good solution.
Dialogue: 0,0:10:06.84,0:10:09.97,Default,,0000,0000,0000,,However, you may also want a way for users
Dialogue: 0,0:10:09.97,0:10:15.46,Default,,0000,0000,0000,,to break out of that constrained wizard if they know what they’re doing and are more expert,
Dialogue: 0,0:10:15.46,0:10:21.02,Default,,0000,0000,0000,,or have an uncommon or unique activity that they need to accomplish.
Dialogue: 0,0:10:21.02,0:10:24.88,Default,,0000,0000,0000,,Here’s an example from a conference registration site,
Dialogue: 0,0:10:24.88,0:10:30.18,Default,,0000,0000,0000,,and what you can see is that there’s a Continue button, but no Back button.
Dialogue: 0,0:10:30.18,0:10:37.04,Default,,0000,0000,0000,,Here’s an interface that provides more control and freedom in the context of browsing for airline tickets.
Dialogue: 0,0:10:37.04,0:10:41.38,Default,,0000,0000,0000,,What you see here is that there are a number of different ways
Dialogue: 0,0:10:41.38,0:10:46.11,Default,,0000,0000,0000,,in which the user can browse through the space of possible information.
Dialogue: 0,0:10:46.11,0:10:49.65,Default,,0000,0000,0000,,In particular you can see this calendar widget in the top left
Dialogue: 0,0:10:49.65,0:10:53.53,Default,,0000,0000,0000,,which shows you the fares for every day of that month.
Dialogue: 0,0:10:53.53,0:10:59.87,Default,,0000,0000,0000,,And this ability to preview what’s likely to be down a particular path is really valuable
Dialogue: 0,0:10:59.87,0:11:06.21,Default,,0000,0000,0000,,in helping people make decisions and know what options are available to them.
Dialogue: 0,0:11:06.21,0:11:09.30,Default,,0000,0000,0000,,Our fourth heuristic is consistency and standards.
Dialogue: 0,0:11:09.30,0:11:12.21,Default,,0000,0000,0000,,And this includes things like consistent layout.
Dialogue: 0,0:11:12.21,0:11:19.93,Default,,0000,0000,0000,,Here’s a screenshot of a very old set of dialog box options from Microsoft’s Visual Basic.
Dialogue: 0,0:11:19.93,0:11:22.93,Default,,0000,0000,0000,,This is many years old at this point.
Dialogue: 0,0:11:22.93,0:11:28.83,Default,,0000,0000,0000,,It’s pedagogically useful, because there are four different options for where the same set of buttons could be.
Dialogue: 0,0:11:28.83,0:11:32.92,Default,,0000,0000,0000,,And probably, applications will be easiest to learn
Dialogue: 0,0:11:32.92,0:11:38.98,Default,,0000,0000,0000,,if users can come to expect that the same buttons will always be in the same locations.
Dialogue: 0,0:11:38.98,0:11:41.76,Default,,0000,0000,0000,,We talked already about familiar language.
Dialogue: 0,0:11:41.76,0:11:44.81,Default,,0000,0000,0000,,It’s also important to be consistent in your use of language.
Dialogue: 0,0:11:44.81,0:11:49.63,Default,,0000,0000,0000,,And one thing that I’ve seen on the forums is, in teaching this class,
Dialogue: 0,0:11:49.63,0:11:54.80,Default,,0000,0000,0000,,whenever we’ve used terms interchangeably, that’s often been a source of confusion.
Dialogue: 0,0:11:54.80,0:11:57.60,Default,,0000,0000,0000,,And you can see that in this web site.
Dialogue: 0,0:11:57.60,0:12:03.75,Default,,0000,0000,0000,,I arrived at this screen because I wanted to get help with a USB cellular modem that I had,
Dialogue: 0,0:12:03.75,0:12:09.90,Default,,0000,0000,0000,,and I couldn’t figure out which of these categories was most likely to be the right one.
Dialogue: 0,0:12:09.90,0:12:16.14,Default,,0000,0000,0000,,My guess is that these categories were generated based on organizational chart for the business
Dialogue: 0,0:12:16.14,0:12:20.68,Default,,0000,0000,0000,,rather than based on the user’s conceptual model of what they cared about.
Dialogue: 0,0:12:20.68,0:12:24.87,Default,,0000,0000,0000,,So, for example, national access and broadband access
Dialogue: 0,0:12:24.87,0:12:30.17,Default,,0000,0000,0000,,may be different parts of a business and have different management structures;
Dialogue: 0,0:12:30.17,0:12:33.87,Default,,0000,0000,0000,,but from a user’s perspective, they may not know
Dialogue: 0,0:12:33.87,0:12:39.12,Default,,0000,0000,0000,,whether the mobile device they have is in one category or the other.
Dialogue: 0,0:12:39.12,0:12:41.68,Default,,0000,0000,0000,,So how do you solve this naming problem?
Dialogue: 0,0:12:41.68,0:12:47.17,Default,,0000,0000,0000,,Because I think that, once you get familiar with your own products and designs,
Dialogue: 0,0:12:47.17,0:12:50.75,Default,,0000,0000,0000,,it’s easy to refer to them using the terms that you’re familiar with.
Dialogue: 0,0:12:50.75,0:12:56.01,Default,,0000,0000,0000,,And, to some extent, eventually training people up on these terms will be useful for everyone.
Dialogue: 0,0:12:56.01,0:13:00.68,Default,,0000,0000,0000,,However, you’ll often want to elicit what terminology users use naturally
Dialogue: 0,0:13:00.68,0:13:03.46,Default,,0000,0000,0000,,and ensure sure that you use that consistency.
Dialogue: 0,0:13:03.46,0:13:06.44,Default,,0000,0000,0000,,This is actually a case where field work, or focus groups,
Dialogue: 0,0:13:06.44,0:13:09.41,Default,,0000,0000,0000,,or other kinds of direct user engagement can be really valuable,
Dialogue: 0,0:13:09.41,0:13:15.36,Default,,0000,0000,0000,,and you can ask people how they would describe certain things that they might want to get help with.
Dialogue: 0,0:13:15.36,0:13:20.29,Default,,0000,0000,0000,,Another thing that you can do is if you prefer a more web-based strategy,
Dialogue: 0,0:13:20.29,0:13:25.96,Default,,0000,0000,0000,,you can have a category initially that you call Other, and let people type in whatever they want.
Dialogue: 0,0:13:25.96,0:13:29.96,Default,,0000,0000,0000,,And then you can look at the set of responses that come in for Other,
Dialogue: 0,0:13:29.96,0:13:36.49,Default,,0000,0000,0000,,and use that to generate umbrellas terms that may be more user centered in terms of the language they use.
Dialogue: 0,0:13:36.49,0:13:41.14,Default,,0000,0000,0000,,Here is a screenshot of a license repair utility, and it has a warning about the fact
Dialogue: 0,0:13:41.14,0:13:47.38,Default,,0000,0000,0000,,that you’ll need to close all other Adobe applications before proceeding with the license repair utility.
Dialogue: 0,0:13:47.38,0:13:54.94,Default,,0000,0000,0000,,It’s a reasonable constraint, and it says, “Do you wish to…” blank — I have blocked it out.
Dialogue: 0,0:13:54.94,0:13:58.64,Default,,0000,0000,0000,,“Yes” or “No?”
Dialogue: 0,0:13:58.64,0:14:03.58,Default,,0000,0000,0000,,My guess is that a good fraction of you — maybe even most of you —
Dialogue: 0,0:14:03.58,0:14:09.59,Default,,0000,0000,0000,,would guess that [for] “Do you wish to…” the next thing would be “continue.”
Dialogue: 0,0:14:09.59,0:14:12.93,Default,,0000,0000,0000,,And so you might press Yes.
Dialogue: 0,0:14:12.93,0:14:16.32,Default,,0000,0000,0000,,However, what we actually have here is “Do you wish to cancel.”
Dialogue: 0,0:14:16.32,0:14:20.14,Default,,0000,0000,0000,,And so, if you pressed Yes to continue.
Dialogue: 0,0:14:20.14,0:14:23.16,Default,,0000,0000,0000,,It’s going to drop you out of the application and you’ll wonder what happened.
Dialogue: 0,0:14:23.16,0:14:26.04,Default,,0000,0000,0000,,Or if you pressed No, with the intent to cancel,
Dialogue: 0,0:14:26.04,0:14:30.01,Default,,0000,0000,0000,,you’ll actually continue, and you may run into problems.
Dialogue: 0,0:14:30.01,0:14:35.70,Default,,0000,0000,0000,,In this particular case, one way that you can solve this problem about what Yes or No or OK or Cancel mean
Dialogue: 0,0:14:35.70,0:14:40.92,Default,,0000,0000,0000,,is to replace Yes, No, OK and Cancel with more specific options.
Dialogue: 0,0:14:40.92,0:14:44.34,Default,,0000,0000,0000,,So here we see a dialog box where the options are very clear:
Dialogue: 0,0:14:44.34,0:14:50.100,Default,,0000,0000,0000,,One button says “Keep .do” as the extension name; the other one says “Use .pdf”.
Dialogue: 0,0:14:50.100,0:14:55.50,Default,,0000,0000,0000,,And this is much clearer then OK and Cancel, or Yes and No.
Dialogue: 0,0:14:55.50,0:15:00.93,Default,,0000,0000,0000,,Our fifth heuristic is about preventing errors, and there are lots of errors that are easy to make,
Dialogue: 0,0:15:00.93,0:15:05.00,Default,,0000,0000,0000,,and there are lots of ways that your interface can help people prevent them.
Dialogue: 0,0:15:05.00,0:15:09.10,Default,,0000,0000,0000,,The first kind of error to prevent people from making is data loss.
Dialogue: 0,0:15:09.10,0:15:13.97,Default,,0000,0000,0000,,Here we have a dialog box that says “This file already exists,”
Dialogue: 0,0:15:13.97,0:15:19.63,Default,,0000,0000,0000,,and it follows our message of having concrete button names — That’s good.
Dialogue: 0,0:15:19.64,0:15:23.22,Default,,0000,0000,0000,,However, I don’t know what that file looks like.
Dialogue: 0,0:15:23.22,0:15:29.67,Default,,0000,0000,0000,,If it offered me a preview, it’s much less likely that I would mistake what that file is.
Dialogue: 0,0:15:29.67,0:15:34.44,Default,,0000,0000,0000,,In addition to preventing data loss, you can also prevent cluttering duplicates.
Dialogue: 0,0:15:34.44,0:15:37.02,Default,,0000,0000,0000,,Here’s a screenshot that helpfully notifies you that
Dialogue: 0,0:15:37.02,0:15:41.23,Default,,0000,0000,0000,,this may be a duplicate paper that you’re trying to import into a library.
Dialogue: 0,0:15:41.23,0:15:44.60,Default,,0000,0000,0000,,So it says, “Hey, you’ve already got this on your computer.”
Dialogue: 0,0:15:44.60,0:15:50.69,Default,,0000,0000,0000,,And so far as it goes, that’s great; but what I want to know is:
Dialogue: 0,0:15:50.69,0:15:55.42,Default,,0000,0000,0000,,Is what it thinks is a duplicate actually a duplicate?
Dialogue: 0,0:15:55.42,0:16:00.93,Default,,0000,0000,0000,,And so one button that ought to be available here and that isn’t, and that would help me prevent errors,
Dialogue: 0,0:16:00.93,0:16:04.87,Default,,0000,0000,0000,,is by having of way of previewing what it believes the duplicate file to be,
Dialogue: 0,0:16:04.87,0:16:08.82,Default,,0000,0000,0000,,and allows me to compare the two files, side by side.
Dialogue: 0,0:16:08.82,0:16:12.58,Default,,0000,0000,0000,,Here’s a dialog box that says “You have unsaved data.
Dialogue: 0,0:16:12.58,0:16:18.30,Default,,0000,0000,0000,,Click OK to go back and save, or click Cancel to continue.”
Dialogue: 0,0:16:18.30,0:16:22.74,Default,,0000,0000,0000,,There’s a couple of problems here: For starters, we’ve got the “click Cancel to continue,”
Dialogue: 0,0:16:22.74,0:16:28.47,Default,,0000,0000,0000,,which I think may confuse many people, and they’ll consequently lose their unsaved data.
Dialogue: 0,0:16:28.47,0:16:34.94,Default,,0000,0000,0000,,Also, why isn’t Save one of the options on the dialog box? That would make a lot more sense.
Dialogue: 0,0:16:34.94,0:16:37.78,Default,,0000,0000,0000,,There are many ways we could redesign this dialog box.
Dialogue: 0,0:16:37.78,0:16:43.08,Default,,0000,0000,0000,,You could think about automatically saving things, or many other more drastic solutions.
Dialogue: 0,0:16:43.08,0:16:51.10,Default,,0000,0000,0000,,A simple solution that we can make here is to relabel this first button to be — call this…
Dialogue: 0,0:16:51.10,0:16:55.90,Default,,0000,0000,0000,,“Save,” and the other button we might call…
Dialogue: 0,0:16:55.90,0:17:03.73,Default,,0000,0000,0000,,“Don’t Save, Just continue.”
Dialogue: 0,0:17:03.73,0:17:08.44,Default,,0000,0000,0000,,And we will probably want the “Save” button to be the default action.
Dialogue: 0,0:17:08.44,0:17:11.84,Default,,0000,0000,0000,,One of the great advantages of a graphical user interface
Dialogue: 0,0:17:11.84,0:17:17.63,Default,,0000,0000,0000,,is that it can leverage its visual structure to enforce that users provide well-formed input
Dialogue: 0,0:17:17.63,0:17:20.91,Default,,0000,0000,0000,,and to remind them about what parameters are necessary.
Dialogue: 0,0:17:20.91,0:17:24.95,Default,,0000,0000,0000,,So this, for example, is the Find dialog box in Apple’s Keynote,
Dialogue: 0,0:17:24.95,0:17:29.73,Default,,0000,0000,0000,,and you can contrast that with the Find command in the terminal.
Dialogue: 0,0:17:29.73,0:17:38.43,Default,,0000,0000,0000,,In the graphical case, anything you can type into the dialog box will be a reasonable query to search for;
Dialogue: 0,0:17:38.43,0:17:42.04,Default,,0000,0000,0000,,it’s impossible to have incorrect syntax.
Dialogue: 0,0:17:42.04,0:17:46.79,Default,,0000,0000,0000,,However, in the terminal case, you have to remember every time what exactly the syntax is.
Dialogue: 0,0:17:46.79,0:17:50.92,Default,,0000,0000,0000,,Now the terminal has lots of power and is great in lots of ways.
Dialogue: 0,0:17:50.92,0:17:57.06,Default,,0000,0000,0000,,But the ability to make errors in terms of your syntax is one of its drawbacks.
Dialogue: 0,0:17:57.06,0:18:01.19,Default,,0000,0000,0000,,But that doesn’t mean that just because you have a graphical interface,
Dialogue: 0,0:18:01.19,0:18:04.51,Default,,0000,0000,0000,,it automatically will have this property of preventing errors.
Dialogue: 0,0:18:04.51,0:18:08.55,Default,,0000,0000,0000,,This is an example of a scheduling system, and the task that we’re midstream on
Dialogue: 0,0:18:08.55,0:18:12.94,Default,,0000,0000,0000,,is trying to schedule a weekly meeting into a conference room.
Dialogue: 0,0:18:12.94,0:18:19.40,Default,,0000,0000,0000,,And there are some things that you need to fill out that it has explicit dropdowns for, like time and room.
Dialogue: 0,0:18:19.40,0:18:25.00,Default,,0000,0000,0000,,However, the day field is required; it won’t let you schedule for every day..
Dialogue: 0,0:18:25.00,0:18:28.100,Default,,0000,0000,0000,,But it doesn’t provide much in the way of widgets to do that;
Dialogue: 0,0:18:28.100,0:18:32.70,Default,,0000,0000,0000,,and so if the user is in a hurry, they might forget to enter a day
Dialogue: 0,0:18:32.70,0:18:37.24,Default,,0000,0000,0000,,and it’ll give an error like this that says “No day is specified.”
Dialogue: 0,0:18:37.24,0:18:44.41,Default,,0000,0000,0000,,And what’s shocking is when you get to this point, it doesn’t give you a chance to specify the day.
Dialogue: 0,0:18:44.41,0:18:48.84,Default,,0000,0000,0000,,So, there are several ways that we might simply revise this interface.
Dialogue: 0,0:18:48.84,0:18:53.95,Default,,0000,0000,0000,,One is that we might make the day selection widget clearer and more salient.
Dialogue: 0,0:18:53.95,0:18:59.80,Default,,0000,0000,0000,,And the other thing is, if somehow somebody forgets to specify a day,
Dialogue: 0,0:18:59.80,0:19:05.28,Default,,0000,0000,0000,,the next thing that we show them would be an option to select which of the days that we want,
Dialogue: 0,0:19:05.28,0:19:08.28,Default,,0000,0000,0000,,as opposed to just saying, “No, I’m sorry you did it wrong.”
Dialogue: 0,0:19:08.28,0:19:12.84,Default,,0000,0000,0000,,And it’s not clear at this point how you would go back or start over to modify.
Dialogue: 0,0:19:12.84,0:19:17.32,Default,,0000,0000,0000,,Here’s an example of a search system that provides unnecessary constraints.
Dialogue: 0,0:19:17.32,0:19:22.60,Default,,0000,0000,0000,,I was searching for my colleague Dan Olson’s book, so I typed Olson into the search field, and Enter.
Dialogue: 0,0:19:22.60,0:19:27.36,Default,,0000,0000,0000,,And I was hoping that it would give me a list of books, and I could select from among them.
Dialogue: 0,0:19:27.36,0:19:33.25,Default,,0000,0000,0000,,However, it says, “No, I’m sorry, you must select a catalog to begin your search in.”
Dialogue: 0,0:19:33.25,0:19:38.93,Default,,0000,0000,0000,,There are a number of implementation reasons why it might be preferable to select a catalog.
Dialogue: 0,0:19:38.93,0:19:44.32,Default,,0000,0000,0000,,And in fact, once we get going, I may even want to narrow by catalog to improve the quality of my options.
Dialogue: 0,0:19:44.32,0:19:48.86,Default,,0000,0000,0000,,But it doesn’t seem like you should need to select a catalog to get started —
Dialogue: 0,0:19:48.86,0:19:51.76,Default,,0000,0000,0000,,at least give me some results based on any input.
Dialogue: 0,0:19:51.76,0:19:57.94,Default,,0000,0000,0000,,That’s one thing that I think search systems, when implemented well, do a fantastic job of.
Dialogue: 0,0:19:57.94,0:20:02.00,Default,,0000,0000,0000,,We’ll continue our tour of the heuristics in the next video.