0:00:01.769,0:00:05.966
So far we’ve talked a lot about strategies and techniques for designing user interfaces

0:00:05.966,0:00:08.532
and we’ve talked a little bit about high-level principles.

0:00:08.532,0:00:10.910
What I’d like to do now is to kind of dive deep

0:00:10.910,0:00:15.119
and get down to brass tacks and talk about a number of concrete examples.

0:00:15.119,0:00:19.776
And so these lectures are going to offer two benefits simultaneously:

0:00:19.776,0:00:23.080
First, what I’d like to do in these next couple of lectures

0:00:23.080,0:00:31.676
is introduce a set of design heuristics for identifying interface errors and strategies for correcting them.

0:00:31.676,0:00:37.019
Second, I’d like to walk you through a number of examples of actual user interfaces,

0:00:37.019,0:00:42.362
and talk about particular ways in which they’re successful or have problems.

0:00:42.362,0:00:45.913
Now, these are all screen shots that I’ve gathered over several years.

0:00:45.913,0:00:52.029
I keep a big file of interfaces that I think are effective or have problems,

0:00:52.029,0:00:56.412
and it’s a good activity — I encourage you to do the same thing.

0:00:56.412,0:00:59.074
For any voyeurs out there, you’ll get a sense of interfaces

0:00:59.074,0:01:02.290
that I’ve stumbled across over the last several years —

0:01:02.290,0:01:04.306
not a very exciting list, but, hey.

0:01:04.306,0:01:07.580
And all of these interfaces are things that may come up again

0:01:07.580,0:01:10.854
when we talk about visual design and other principles.

0:01:10.854,0:01:15.764
So some of these screen shots you’ll see multiple times in this class.

0:01:15.764,0:01:21.694
Finally, I’d like to emphasize that we really want to focus on narrow issues in these user interfaces.

0:01:21.694,0:01:26.050
And I’m not going to talk about whether the broader ecosystem

0:01:26.050,0:01:29.882
that the particular thing we’re looking at is effective or not.

0:01:29.882,0:01:35.732
So, we may point out flaws in interfaces that are on the whole exemplary,

0:01:35.732,0:01:42.549
or we may point out successes in interfaces that are on the whole not quite so good.

0:01:42.549,0:01:46.046
And finally, because I’ve gathered these screen shots over a number of years,

0:01:46.046,0:01:48.649
many of these interfaces no longer look like this.

0:01:48.649,0:01:55.774
The point is not the current state of an interface, but rather the didactical of teaching you a principle.

0:01:56.266,0:01:59.315
Here are the ten design heuristics that we’re going to talk about.

0:01:59.315,0:02:01.185
Some of these names are mine.

0:02:01.185,0:02:05.168
The principles are based on Jakob Nielsen’s work in heuristic evaluation;

0:02:05.168,0:02:10.481
I’ve simply relabeled a few of them to make them, I think, clearer and shorter.

0:02:12.356,0:02:14.117
And so let’s jump in.

0:02:14.117,0:02:17.259
The first of these principles is “show system status.”

0:02:17.259,0:02:20.954
I think one of the most important things you can do in user interface design

0:02:20.954,0:02:28.802
is provide excellent feedback about where the system is and where the user is in a larger interaction flow.

0:02:28.802,0:02:34.062
One important thing to provide feedback about is where the user is in time.

0:02:34.062,0:02:39.482
If you have an interactive system where the response time is less than a second or so,

0:02:39.482,0:02:43.347
there is no need to have intermediate feedback: It just feels interactive.

0:02:43.348,0:02:48.369
As you get to something that’s on the order of a second or a couple of seconds,

0:02:48.369,0:02:53.390
it becomes important to provide some kind of feedback that an activity is underway.

0:02:53.390,0:02:56.595
You can think of this as hourglass or a spinning ball,

0:02:56.595,0:02:59.800
and if you get to something that’s more than a couple of seconds,

0:02:59.800,0:03:05.195
it’s useful to show progress of how far along in an activity that user is.

0:03:05.195,0:03:09.023
Here we see an example from an installation of a piece of software.

0:03:09.023,0:03:15.018
And you can see the same thing if you ask a user to fill out a survey or when they’re completing their taxes,

0:03:15.018,0:03:20.289
or any other process that takes a long time or may require multiple steps of input.

0:03:20.289,0:03:27.217
You’ll want to give people feedback about how far through the system is and how far through they are.

0:03:29.493,0:03:35.098
Second important category of things to provide feedback about and to show to the user is space.

0:03:35.098,0:03:41.767
Here’s a screen shot from Gmail which notifies me that I was out of the space allocated to me

0:03:41.767,0:03:46.252
and that means that I need to do something about it.

0:03:46.252,0:03:50.045
The third important thing to show people feedback about is change.

0:03:50.045,0:03:54.464
Here we have a dialog box that says, “You’ve changed this document.

0:03:54.464,0:03:57.483
Do you want to save those changes or don’t save them.”

0:03:57.483,0:04:00.616
Our fourth category is action. Here’s a stoplight.

0:04:00.616,0:04:04.207
So the red light means stop; the green light means go.

0:04:04.207,0:04:10.183
And I like this user interface, because it uses a redundant coding to provide feedback to the user.

0:04:10.183,0:04:15.369
So the red light is not only using red as a color, but it’s up at the top of the screen;

0:04:15.369,0:04:18.816
and the green light is also always at the bottom.

0:04:18.816,0:04:23.927
And this consistency in the dual coding both makes it faster to recognize

0:04:23.927,0:04:27.022
and it helps work for a broader class of users —

0:04:27.022,0:04:32.214
for example, not all users may be able to distinguish red from green.

0:04:32.214,0:04:37.388
Especially in an online world, it can be important to show feedback about next steps.

0:04:37.388,0:04:41.612
Here’s a screen shot from Amazon that says “Your message was sent to the seller

0:04:41.612,0:04:44.719
and a copy was sent to the email address of your account.

0:04:44.719,0:04:47.673
The seller will respond to you directly via email.”

0:04:47.673,0:04:51.557
So we’re letting the user know what’s going to happen next.

0:04:51.557,0:04:55.950
That’s important because otherwise you can wonder, “Was the message actually sent?”

0:04:55.950,0:04:58.162
or, “Did anybody get it?”

0:04:58.162,0:05:00.983
or “When they receive it, what are they going to do?”

0:05:00.983,0:05:05.584
This lays out very clearly what has happened and what will happen next.

0:05:05.584,0:05:08.884
And after you’ve crossed time, space, change, actions, and next steps,

0:05:08.884,0:05:11.935
the last thing that you’ll want to show is completion.

0:05:11.935,0:05:14.719
I also like this dialog box because it’s funny.

0:05:14.719,0:05:17.942
And a little bit of humor can be really effective in user interfaces.

0:05:17.942,0:05:22.964
Our second heuristic is to use familiar metaphors and language.

0:05:22.964,0:05:28.014
And often this can mean trying to provide a match in the interface

0:05:28.014,0:05:31.894
with things that people are familiar with from their real-world experience.

0:05:31.894,0:05:35.174
This also means speak the user’s language,

0:05:35.174,0:05:39.716
and follow conventions that they’re familiar with both in the online world and in the real world.

0:05:39.716,0:05:43.356
One important kind of familiarity is metaphors.

0:05:43.356,0:05:50.150
In this interface, I want to call your attention to the world in miniature that’s being used in the print dialog box,

0:05:50.150,0:05:54.606
and that’s an effective user interface, because it makes very clear

0:05:54.606,0:06:00.749
which pieces of the page are going to to be cropped, and which pieces of the page are going to to be printed.

0:06:00.749,0:06:04.700
In general, one of the successes of the graphical user interface

0:06:04.700,0:06:10.866
is that it leverages a lot of real-world metaphors, like desktop and trash and files and folders.

0:06:10.866,0:06:18.186
And if these are activities that users are familiar with, it can help bring them into a new online world.

0:06:18.186,0:06:23.633
Now over the last 25 years, as more and more people have gotten accustomed to computing,

0:06:23.633,0:06:29.004
some of those real-world metaphors have fallen away and newer ones have developed.

0:06:29.004,0:06:36.523
Remember that the reader of your interface is going to be a user and not your colleague, boss, or lawyer.

0:06:36.523,0:06:43.098
And consequently, work hard to identify terms and language that will be familiar to them.

0:06:43.098,0:06:45.875
Here’s a screenshot from a student loan website.

0:06:45.875,0:06:50.162
And it uses two terms that at least I was unfamiliar with —

0:06:50.162,0:06:54.449
It talked about me being I already enrolled in “Electronic Correspondence.”

0:06:54.449,0:07:00.504
And it said that I was not eligible for “Electronic Bill Presentment.”

0:07:00.504,0:07:05.468
What it really means by this, I think, is just “email,” and so it should say that.

0:07:05.468,0:07:12.006
And I don’t think of myself as being “enrolled” in an “email correspondence service.”

0:07:12.006,0:07:16.423
It would be nicer if it just said “We’re sending you email.”

0:07:16.423,0:07:22.498
And there’s some fine print about why I’m not eligible for “Electronic Bill Presentment.”

0:07:22.498,0:07:27.796
It would be much clearer if, for starters, it actually identified the reason:

0:07:27.796,0:07:33.170
in my particular case this has passed a log-in wall, and so it knows the reason.

0:07:33.170,0:07:37.695
And it would be nicer if it was able to use more common terms,

0:07:37.695,0:07:46.637
like “We’re unable to send you bills and email because,” maybe, “we don’t have an address on file.”

0:07:46.637,0:07:49.630
And it’s important to use familiar categories.

0:07:49.630,0:07:55.402
Here’s an example from a Visa website that asks users to select a state.

0:07:55.402,0:08:00.874
And, I got a kick out of it because there are more than 50 states here —

0:08:00.874,0:08:06.173
in fact, there’s a separate listing for Northern California and Southern California.

0:08:06.173,0:08:09.547
And many people in San Francisco might wish

0:08:09.547,0:08:12.922
that Northern California and Southern California were different states;

0:08:12.922,0:08:18.671
and for many people, which of those they live in or believe they live in is clear.

0:08:18.671,0:08:25.165
But for some users, this may be ambiguous, and it would probably be simpler if you just selected California

0:08:25.165,0:08:29.696
and then the system decided whether it use its Southern California routing

0:08:29.696,0:08:34.228
or Northern California routing, based on the address that you provide later.

0:08:34.228,0:08:40.354
And it’s important that the choices that you offer to people are things that they’re likely to be familiar with.

0:08:40.354,0:08:46.367
Here is a dialog box that says that “You have a document encoding mismatch.

0:08:46.367,0:08:52.553
You’ve got a document which describes itself as being UTF-8, no BOM.

0:08:52.553,0:08:57.021
But, the encoding has been set to Western, ISO Latin-1.

0:08:57.021,0:09:00.892
Now this is a developer tool,

0:09:00.892,0:09:05.716
and so it’s reasonable to expect some fluency with things that are under the hood —

0:09:05.716,0:09:12.904
like, users may in general be familiar with the idea that there are different character sets for documents —

0:09:12.904,0:09:21.805
but users may be not familiar with what exactly the difference is between UTF-8 no BOM and ISO Latin-1,

0:09:21.805,0:09:29.044
or which of them they should select, or how exactly they should go about fixing this problem.

0:09:29.044,0:09:36.052
One way that this interface could be improved is beaconing what the most common solution is likely to be.

0:09:36.052,0:09:41.480
Our third heuristic is user control and freedom, and this is going to encompass a number of things —

0:09:41.480,0:09:48.723
like exits for mistaken choices, the ability to undo and redo, not forcing people down fixed paths.

0:09:48.723,0:09:52.272
I think of this heuristic as being about making sure

0:09:52.272,0:09:58.068
that the amount of control and freedom is appropriate for the users and appropriate for the tasks.

0:09:58.068,0:10:03.129
So for example, if you have an interface that somebody’s only going to use once,

0:10:03.129,0:10:06.837
a relatively constrained wizard may actually be a good solution.

0:10:06.837,0:10:09.966
However, you may also want a way for users

0:10:09.966,0:10:15.464
to break out of that constrained wizard if they know what they’re doing and are more expert,

0:10:15.464,0:10:21.017
or have an uncommon or unique activity that they need to accomplish.

0:10:21.017,0:10:24.876
Here’s an example from a conference registration site,

0:10:24.876,0:10:30.182
and what you can see is that there’s a Continue button, but no Back button.

0:10:30.182,0:10:37.040
Here’s an interface that provides more control and freedom in the context of browsing for airline tickets.

0:10:37.040,0:10:41.376
What you see here is that there are a number of different ways

0:10:41.376,0:10:46.113
in which the user can browse through the space of possible information.

0:10:46.113,0:10:49.654
In particular you can see this calendar widget in the top left

0:10:49.654,0:10:53.534
which shows you the fares for every day of that month.

0:10:53.534,0:10:59.871
And this ability to preview what’s likely to be down a particular path is really valuable

0:10:59.871,0:11:06.208
in helping people make decisions and know what options are available to them.

0:11:06.208,0:11:09.304
Our fourth heuristic is consistency and standards.

0:11:09.304,0:11:12.210
And this includes things like consistent layout.

0:11:12.210,0:11:19.926
Here’s a screenshot of a very old set of dialog box options from Microsoft’s Visual Basic.

0:11:19.926,0:11:22.933
This is many years old at this point.

0:11:22.933,0:11:28.833
It’s pedagogically useful, because there are four different options for where the same set of buttons could be.

0:11:28.833,0:11:32.920
And probably, applications will be easiest to learn

0:11:32.920,0:11:38.977
if users can come to expect that the same buttons will always be in the same locations.

0:11:38.977,0:11:41.764
We talked already about familiar language.

0:11:41.764,0:11:44.813
It’s also important to be consistent in your use of language.

0:11:44.813,0:11:49.631
And one thing that I’ve seen on the forums is, in teaching this class,

0:11:49.631,0:11:54.803
whenever we’ve used terms interchangeably, that’s often been a source of confusion.

0:11:54.803,0:11:57.596
And you can see that in this web site.

0:11:57.596,0:12:03.749
I arrived at this screen because I wanted to get help with a USB cellular modem that I had,

0:12:03.749,0:12:09.901
and I couldn’t figure out which of these categories was most likely to be the right one.

0:12:09.901,0:12:16.138
My guess is that these categories were generated based on organizational chart for the business

0:12:16.138,0:12:20.683
rather than based on the user’s conceptual model of what they cared about.

0:12:20.683,0:12:24.873
So, for example, national access and broadband access

0:12:24.873,0:12:30.171
may be different parts of a business and have different management structures;

0:12:30.171,0:12:33.874
but from a user’s perspective, they may not know

0:12:33.874,0:12:39.115
whether the mobile device they have is in one category or the other.

0:12:39.115,0:12:41.676
So how do you solve this naming problem?

0:12:41.676,0:12:47.169
Because I think that, once you get familiar with your own products and designs,

0:12:47.169,0:12:50.754
it’s easy to refer to them using the terms that you’re familiar with.

0:12:50.754,0:12:56.013
And, to some extent, eventually training people up on these terms will be useful for everyone.

0:12:56.013,0:13:00.676
However, you’ll often want to elicit what terminology users use naturally

0:13:00.676,0:13:03.463
and ensure sure that you use that consistency.

0:13:03.463,0:13:06.436
This is actually a case where field work, or focus groups,

0:13:06.436,0:13:09.410
or other kinds of direct user engagement can be really valuable,

0:13:09.410,0:13:15.357
and you can ask people how they would describe certain things that they might want to get help with.

0:13:15.357,0:13:20.286
Another thing that you can do is if you prefer a more web-based strategy,

0:13:20.286,0:13:25.960
you can have a category initially that you call Other, and let people type in whatever they want.

0:13:25.960,0:13:29.963
And then you can look at the set of responses that come in for Other,

0:13:29.963,0:13:36.488
and use that to generate umbrellas terms that may be more user centered in terms of the language they use.

0:13:36.488,0:13:41.145
Here is a screenshot of a license repair utility, and it has a warning about the fact

0:13:41.145,0:13:47.381
that you’ll need to close all other Adobe applications before proceeding with the license repair utility.

0:13:47.381,0:13:54.940
It’s a reasonable constraint, and it says, “Do you wish to…” blank — I have blocked it out.

0:13:54.940,0:13:58.637
“Yes” or “No?”

0:13:58.641,0:14:03.579
My guess is that a good fraction of you — maybe even most of you —

0:14:03.579,0:14:09.594
would guess that [for] “Do you wish to…” the next thing would be “continue.”

0:14:09.594,0:14:12.930
And so you might press Yes.

0:14:12.930,0:14:16.321
However, what we actually have here is “Do you wish to cancel.”

0:14:16.321,0:14:20.144
And so, if you pressed Yes to continue.

0:14:20.144,0:14:23.157
It’s going to drop you out of the application and you’ll wonder what happened.

0:14:23.157,0:14:26.035
Or if you pressed No, with the intent to cancel,

0:14:26.035,0:14:30.010
you’ll actually continue, and you may run into problems.

0:14:30.010,0:14:35.697
In this particular case, one way that you can solve this problem about what Yes or No or OK or Cancel mean

0:14:35.697,0:14:40.922
is to replace Yes, No, OK and Cancel with more specific options.

0:14:40.922,0:14:44.341
So here we see a dialog box where the options are very clear:

0:14:44.341,0:14:50.998
One button says “Keep .do” as the extension name; the other one says “Use .pdf”.

0:14:50.998,0:14:55.495
And this is much clearer then OK and Cancel, or Yes and No.

0:14:55.495,0:15:00.927
Our fifth heuristic is about preventing errors, and there are lots of errors that are easy to make,

0:15:00.927,0:15:05.005
and there are lots of ways that your interface can help people prevent them.

0:15:05.005,0:15:09.101
The first kind of error to prevent people from making is data loss.

0:15:09.101,0:15:13.974
Here we have a dialog box that says “This file already exists,”

0:15:13.974,0:15:19.632
and it follows our message of having concrete button names — That’s good.

0:15:19.643,0:15:23.225
However, I don’t know what that file looks like.

0:15:23.225,0:15:29.669
If it offered me a preview, it’s much less likely that I would mistake what that file is.

0:15:29.669,0:15:34.442
In addition to preventing data loss, you can also prevent cluttering duplicates.

0:15:34.442,0:15:37.022
Here’s a screenshot that helpfully notifies you that

0:15:37.022,0:15:41.234
this may be a duplicate paper that you’re trying to import into a library.

0:15:41.234,0:15:44.598
So it says, “Hey, you’ve already got this on your computer.”

0:15:44.598,0:15:50.694
And so far as it goes, that’s great; but what I want to know is:

0:15:50.694,0:15:55.421
Is what it thinks is a duplicate actually a duplicate?

0:15:55.421,0:16:00.927
And so one button that ought to be available here and that isn’t, and that would help me prevent errors,

0:16:00.927,0:16:04.872
is by having of way of previewing what it believes the duplicate file to be,

0:16:04.872,0:16:08.818
and allows me to compare the two files, side by side.

0:16:08.818,0:16:12.579
Here’s a dialog box that says “You have unsaved data.

0:16:12.579,0:16:18.300
Click OK to go back and save, or click Cancel to continue.”

0:16:18.300,0:16:22.737
There’s a couple of problems here: For starters, we’ve got the “click Cancel to continue,”

0:16:22.737,0:16:28.467
which I think may confuse many people, and they’ll consequently lose their unsaved data.

0:16:28.467,0:16:34.938
Also, why isn’t Save one of the options on the dialog box? That would make a lot more sense.

0:16:34.938,0:16:37.777
There are many ways we could redesign this dialog box.

0:16:37.777,0:16:43.082
You could think about automatically saving things, or many other more drastic solutions.

0:16:43.082,0:16:51.096
A simple solution that we can make here is to relabel this first button to be — call this…

0:16:51.096,0:16:55.898
“Save,” and the other button we might call…

0:16:55.898,0:17:03.727
“Don’t Save, Just continue.”

0:17:03.727,0:17:08.439
And we will probably want the “Save” button to be the default action.

0:17:08.439,0:17:11.844
One of the great advantages of a graphical user interface

0:17:11.844,0:17:17.632
is that it can leverage its visual structure to enforce that users provide well-formed input

0:17:17.632,0:17:20.911
and to remind them about what parameters are necessary.

0:17:20.911,0:17:24.953
So this, for example, is the Find dialog box in Apple’s Keynote,

0:17:24.953,0:17:29.733
and you can contrast that with the Find command in the terminal.

0:17:29.733,0:17:38.428
In the graphical case, anything you can type into the dialog box will be a reasonable query to search for;

0:17:38.428,0:17:42.037
it’s impossible to have incorrect syntax.

0:17:42.037,0:17:46.794
However, in the terminal case, you have to remember every time what exactly the syntax is.

0:17:46.794,0:17:50.925
Now the terminal has lots of power and is great in lots of ways.

0:17:50.925,0:17:57.061
But the ability to make errors in terms of your syntax is one of its drawbacks.

0:17:57.061,0:18:01.187
But that doesn’t mean that just because you have a graphical interface,

0:18:01.187,0:18:04.514
it automatically will have this property of preventing errors.

0:18:04.514,0:18:08.553
This is an example of a scheduling system, and the task that we’re midstream on

0:18:08.553,0:18:12.941
is trying to schedule a weekly meeting into a conference room.

0:18:12.941,0:18:19.401
And there are some things that you need to fill out that it has explicit dropdowns for, like time and room.

0:18:19.401,0:18:25.005
However, the day field is required; it won’t let you schedule for every day..

0:18:25.005,0:18:28.997
But it doesn’t provide much in the way of widgets to do that;

0:18:28.997,0:18:32.703
and so if the user is in a hurry, they might forget to enter a day

0:18:32.703,0:18:37.240
and it’ll give an error like this that says “No day is specified.”

0:18:37.240,0:18:44.409
And what’s shocking is when you get to this point, it doesn’t give you a chance to specify the day.

0:18:44.409,0:18:48.840
So, there are several ways that we might simply revise this interface.

0:18:48.840,0:18:53.952
One is that we might make the day selection widget clearer and more salient.

0:18:53.952,0:18:59.798
And the other thing is, if somehow somebody forgets to specify a day,

0:18:59.798,0:19:05.278
the next thing that we show them would be an option to select which of the days that we want,

0:19:05.278,0:19:08.283
as opposed to just saying, “No, I’m sorry you did it wrong.”

0:19:08.283,0:19:12.841
And it’s not clear at this point how you would go back or start over to modify.

0:19:12.841,0:19:17.320
Here’s an example of a search system that provides unnecessary constraints.

0:19:17.320,0:19:22.603
I was searching for my colleague Dan Olson’s book, so I typed Olson into the search field, and Enter.

0:19:22.603,0:19:27.356
And I was hoping that it would give me a list of books, and I could select from among them.

0:19:27.356,0:19:33.247
However, it says, “No, I’m sorry, you must select a catalog to begin your search in.”

0:19:33.247,0:19:38.927
There are a number of implementation reasons why it might be preferable to select a catalog.

0:19:38.927,0:19:44.325
And in fact, once we get going, I may even want to narrow by catalog to improve the quality of my options.

0:19:44.325,0:19:48.856
But it doesn’t seem like you should need to select a catalog to get started —

0:19:48.856,0:19:51.757
at least give me some results based on any input.

0:19:51.757,0:19:57.940
That’s one thing that I think search systems, when implemented well, do a fantastic job of.

0:19:57.940,0:20:02.001
We’ll continue our tour of the heuristics in the next video.