0:00:01.002,0:00:04.440
Let’s continue our journey of these design heuristics.

0:00:04.440,0:00:07.757
Before we do, I’d like to remind you that many of the interfaces

0:00:07.757,0:00:11.192
that we’re going to look at could fit into multiple different heuristics,

0:00:11.192,0:00:14.939
and the most important thing is to identify the problem:

0:00:14.939,0:00:20.170
If you identify and fix the problem, the label is of secondary importance.

0:00:21.355,0:00:24.540
Our next heuristic is “recognition over recall.”

0:00:24.540,0:00:33.707
Create interfaces that make objects, actions, options, and directions visible or easily retrievable.

0:00:33.707,0:00:38.627
And one of my favorite examples of this is [that] any time you see a Post-It note,

0:00:38.627,0:00:45.212
that probably means that the relevant information isn’t as ready at hand as it ought to be.

0:00:45.212,0:00:48.146
Here’s a photograph I took of one of our lunch meetings.

0:00:48.146,0:00:51.632
And here you can see we have shwarma and falafel.

0:00:51.632,0:00:54.020
They each have a number on them.

0:00:54.020,0:01:00.544
And we have a code that’s used to distinguish which number means which kind of sandwich.

0:01:00.544,0:01:05.343
And of course, the reason for this is that someone spent all their time making these delicious,

0:01:05.343,0:01:08.436
and didn’t take the time to write out the whole label on it.

0:01:08.436,0:01:10.935
So it’s understandable and fixable.

0:01:10.935,0:01:15.174
But, from an interface design perspective, it would be faster to find the chicken shwarma

0:01:15.174,0:01:21.423
if it was written directly on there, as opposed to in code.

0:01:24.360,0:01:28.836
Here’s a screen shot of a ticket-buying website, and what you can see

0:01:28.836,0:01:33.502
is that it gives you a couple of options like buy tickets for today or for a future day.

0:01:33.502,0:01:37.814
There’s a couple of problems from a heuristics perspective with this screen.

0:01:37.814,0:01:43.666
For starters — and we’ll get to this in a little bit — the layout is kind of all over the place.

0:01:43.666,0:01:48.632
But also the thing that we’re going to look at here is the fact that we have this intermediate screen

0:01:48.632,0:01:52.000
which I think could be done away with with clever design.

0:01:52.000,0:01:55.394
It, for example, brings you to a page

0:01:55.394,0:02:00.519
that offers up show times for today and offers you a dialog box to switch the day.

0:02:00.519,0:02:05.358
And so, by setting up reasonable defaults, you can avoid extra hurdles .

0:02:05.358,0:02:10.526
In addition to leading with reasonable defaults, it can be valuable to provide previews.

0:02:10.526,0:02:16.028
This is a screen shot of a web design tool where there are many templates available.

0:02:16.028,0:02:22.245
However, all of the templates are shown in textural listing, which is not well suited for the task.

0:02:22.245,0:02:28.669
You have to think through whether that’s what you want, and that’s a difficult thing to do reliably.

0:02:28.669,0:02:35.335
By contrast this is a different web design tool that offers previews of all of the templates available,

0:02:35.335,0:02:39.521
and it’s much easier to see if that’s the design that you’d like.

0:02:40.275,0:02:44.040
Next up, flexibility and efficiency.

0:02:44.040,0:02:47.120
An simple and straight forward example of this

0:02:47.120,0:02:52.051
is to provide keyboard accelerator shortcuts and similar things like that for experts.

0:02:52.051,0:02:55.816
This is the View menu of the Firefox web browser.

0:02:55.816,0:03:01.444
And this is a great example of offering flexibility and support for experts in two ways.

0:03:01.444,0:03:05.371
First, we can see that there’s keyboard shortcuts available.

0:03:05.371,0:03:12.138
And second, the View Source menu will let you retrieve the page source of any page that you’re looking at,

0:03:12.138,0:03:18.078
so you can look under the hood — not something that most people want to do; valuable for experts.

0:03:18.078,0:03:20.968
This is the Expedia hotel search,

0:03:20.968,0:03:26.185
and it does a really nice job of making the common cases quite easy to get to.

0:03:26.185,0:03:29.002
Popular cities are shown with a radio button.

0:03:29.002,0:03:33.140
But also, if you’d like to go to a less popular city,

0:03:33.140,0:03:36.390
there’s a free entry field that you can type in anything that you want.

0:03:36.390,0:03:39.565
And so this is a nice example of defaults with options.

0:03:39.565,0:03:44.764
Flexible interfaces can also foreground and push relevant ambient information.

0:03:44.764,0:03:47.092
This is a screen shot of BusyCal,

0:03:47.092,0:03:52.369
which will allow you to view the weather forecast on your weekly view of your calendar.

0:03:52.369,0:03:57.363
Here’s another example of productivity in the user interface: This is Google’s Gmail,

0:03:57.363,0:04:03.067
which, if you click Spam on a recipient that it knows how to unsubscribe you from,

0:04:03.067,0:04:08.912
it will offer the opportunity to directly unsubscribe you from that email as well.

0:04:08.912,0:04:13.933
And I think this is an example of how, if you’re going to be proactive in an interface,

0:04:13.933,0:04:19.267
you need to do it well and offer a clear, immediate, task-relevant benefit.

0:04:19.267,0:04:27.063
People generally don’t like proactive interfaces that distract, interrupt, break flow, or provide irrelevant information.

0:04:27.063,0:04:33.730
Another nice example of support for richer use is to offer recommendations on a particular page.

0:04:33.730,0:04:39.442
And so here you can see if you like this one beverage here, [there are] other beverages you might like.

0:04:44.365,0:04:49.928
And again, if you’re going to offer recommendations, or other kinds of proactivity, keep it relevant.

0:04:49.928,0:04:53.941
This is an example from Amazon, of discussion fora for products

0:04:53.941,0:04:58.085
that are almost entirely unrelated to the product that is being shown.

0:04:58.085,0:05:01.662
And it just distracts from the user’s main goal — Mostly they’re wondering

0:05:01.662,0:05:06.905
“Why on earth did these things end up at the bottom of some completely unrelated webpage?”

0:05:06.905,0:05:12.988
And finally, [while] flexibility can be incredibly valuable, it is possible to go overboard.

0:05:12.988,0:05:17.949
This is a photograph from Bill Moggridge who shows an interview with a user

0:05:17.949,0:05:24.609
who had hacked their remote control to limit it to just the relevant functionality that they needed.

0:05:24.609,0:05:31.213
And so, flexibility can sometimes be at tension with minimalism.

0:05:31.213,0:05:36.775
Our eighth heuristic is “aesthetic and minimalist design.”

0:05:36.775,0:05:42.196
When people view your webpage, for example, they’re viewing it on a screen,

0:05:42.196,0:05:47.495
and so they see not the entire page, but one screen’s worth at a given time.

0:05:47.495,0:05:51.909
What they see is what’s called “above the fold” — it comes from newspapers.

0:05:51.919,0:05:55.482
Here’s an example of a screen where the relevant information —

0:05:55.482,0:06:00.055
what the weather forecast is — is not even visible anywhere above the fold.

0:06:00.055,0:06:03.913
Everything above the fold is all of the chrome and extra stuff,

0:06:03.913,0:06:07.034
but the core information you have to scroll down for.

0:06:07.034,0:06:10.950
And to the extent that you’re trying to optimize for user experience,

0:06:10.950,0:06:18.122
it would be better to have the core information above the fold.

0:06:18.122,0:06:24.212
As we’ll talk about in visual design, if you’re going to use color and other cues,

0:06:24.212,0:06:27.622
have them mean something, and do so judiciously.

0:06:27.622,0:06:32.154
Here’s an example of a check out page that’s using lots of different colors,

0:06:32.154,0:06:40.020
and has a real cacophony in terms of its hierarchical organization on screen, for no apparent purpose.

0:06:40.020,0:06:43.804
And here’s a screen shot from Google’s help system.

0:06:43.804,0:06:48.932
Google is often thought of as an example of minimalist design and they often do this quite well.

0:06:48.932,0:06:54.042
I wanted to show one example where, I think, some more information could be stripped out,

0:06:54.042,0:06:56.885
or rather some more noise could be stripped out.

0:06:56.885,0:07:00.584
And what I’m looking at in particular is this stuff here,

0:07:00.584,0:07:06.278
where all of the table borders and other stuff are what you most see,

0:07:06.278,0:07:11.147
whereas what you actually most care about is the data in the survey,

0:07:11.147,0:07:15.641
and so, if you get rid of all of the extra lines and chart junk,

0:07:15.641,0:07:20.031
it can be clearer to see the parts that you cared the most about.

0:07:21.800,0: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

0:07:26.605,0:07:30.433
because it’s right up top here, and then you get to say

0:07:30.433,0:07:34.206
whether or not you’re a returning customer or a new customer.

0:07:34.206,0:07:38.315
If you’re a returning customer you enter your password; or if you’re a new customer,

0:07:38.315,0:07:46.595
like the screen shows here, you create a new password and then type it in and go on from there.

0:07:46.595,0:07:50.404
By contrast, this flight search website has the exact same information —

0:07:50.404,0:07:53.675
number of stops — in two separate places.

0:07:53.675,0:07:56.630
And it’s possible that this increased clarity.

0:07:56.630,0:08:02.665
However, there is a cost of complexity, and there’s also a cost of vertical screen real estate,

0:08:02.665,0:08:07.193
where by listing the same thing twice, you’re pushing other stuff down.

0:08:07.193,0:08:12.645
Often by being dynamic about what you show or figuring out how to show things just once,

0:08:12.645,0:08:20.287
you can have all of the relevant information fit more clearly and in a less cluttered way on the screen.

0:08:20.287,0: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

0:08:27.762,0:08:33.262
and will want to spend as much time using the site as you’ve spent building the site.

0:08:33.262,0:08:37.385
And so it can be easy to have feature creep and lots of bells and whistles and doodads.

0:08:37.385,0:08:39.880
But that’s not necessarily what people want.

0:08:39.880,0:08:45.561
Here’s an example of a student loan website that offers you the ability to add widgets to your home screen.

0:08:45.561,0:08:50.878
Now this is the kind of site that you log in to probably a couple times a year? [laugh]

0:08:50.878,0:08:56.332
It’s not likely to be a site that you’re going to want to festoon with all sorts of gadgets.

0:08:56.332,0:09:02.701
Next let’s talk about helping users recognize, diagnose, and recover from errors.

0:09:02.701,0:09:06.405
One of the first steps of doing this is making the problem clear.

0:09:06.405,0:09:14.396
Here’s a hotel reservation site where all it says is: “Mistake. month. back.”

0:09:14.396,0:09:18.355
It’s hard to know what to do.

0:09:18.355,0:09:22.716
Here’s one that’s a little bit better: It’s a registration site for an event.

0:09:22.716,0:09:27.105
And what we see here is that it says you must fill out all the required fields.

0:09:27.105,0:09:31.508
Okay, that’s a little better. But which fields didn’t I fill out?

0:09:31.508,0:09:37.194
This page is screens and screens long; there’s lots and lots of things that need to be checked.

0:09:37.194,0:09:41.416
Which of the myriad things on this page did I forget to check?

0:09:41.416,0:09:46.127
Maybe you could show me just a page that has the one or two things forgotten

0:09:46.127,0:09:51.477
rather than the whole pile of stuff and force me to scroll through it again.

0:09:51.477,0:09:57.412
Here’s a dialog box that shows the error and explains it clearly,

0:09:57.412,0:10:00.455
but it doesn’t offer you much in terms of solving the problem.

0:10:00.455,0:10:04.029
It says that there’s not enough space on your iPod. Too bad.

0:10:04.029,0:10:09.666
A more effective solution would be to offer some view into what’s taking up all the space,

0:10:09.666,0:10:14.734
or to offer reasonable ways of limiting the amount of media

0:10:14.734,0:10:17.489
that you’re trying to put on the device so that it can all fit.

0:10:17.489,0:10:23.620
And in this particular case, more recent versions of this application handle this problem better.

0:10:23.620,0:10:31.972
A common mistake in writing error messages is to offer one dialog box for all of the possibilities.

0:10:31.972,0:10:37.064
Here’s a screen shot of trying to open a file where it doesn’t know the file type.

0:10:37.064,0:10:41.662
And it says, “The application that you chose (‘(null)’), could not found.

0:10:41.662,0:10:45.695
Check the file name or choose another application.”

0:10:45.695,0:10:50.307
Well this would be a whole lot better if we were speaking the user’s language:

0:10:50.307,0:10:52.210
“Null” may not be the best choice.

0:10:52.210,0:10:58.260
And also if we offered up a reasonable application for that file type.

0:10:58.260,0:11:02.100
A lot of common tasks on the web are search-based tasks.

0:11:02.100,0:11:05.045
So here’s a screenshot from searching for a flight,

0:11:05.045,0:11:08.772
where the constraint specified yielded no possible solution.

0:11:08.772,0:11:13.812
For complex search tasks. if a user specifies an unreasonable set of constraints,

0:11:13.812,0:11:16.992
one of the most powerful things that you can do as a designer

0:11:16.992,0:11:22.619
is to offer a relaxation of those constraints that makes this more workable.

0:11:22.619,0:11:27.408
Many years ago, I worked with Chuck Rich at Mitsubishi Research in Boston.

0:11:27.408,0:11:30.558
And he was working on a research system called Collagen

0:11:30.558,0:11:34.042
that would find ways to intelligently relax these constraints —

0:11:34.042,0:11:37.577
among other things — to help users get their work done better.

0:11:37.577,0:11:42.343
And this kind of smart relaxation can be a really powerful technique.

0:11:42.343,0:11:45.738
I wanted to end talking about errors on a good note.

0:11:45.738,0:11:50.486
Here’s a web browser dialog box that lets you know

0:11:50.486,0:11:54.393
if you go to a URL that it believes to be suspect,

0:11:54.393,0:11:57.591
it will let you know that you probably don’t want to be here,

0:11:57.591,0:12:03.031
and it offers to get you out of here and explain more about why this webpage was blocked.

0:12:03.031,0:12:08.075
There’s probably future further innovations that can happen in this kind of error work.

0:12:08.075,0: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.

0:12:13.568,0:12:19.326
And that brings us to our last heuristic, which is better help and documentation.

0:12:19.326,0:12:25.607
It can be easy to think about help as somebody else’s problem and not part of the real app.

0:12:25.607,0:12:31.002
Fortunately, I think on the web, help and documents have become more integrated.

0:12:31.002,0:12:37.302
One of my favorite examples for this is learning programming systems where websites like PHP, .NET

0:12:37.302,0:12:41.786
can help you learn programming systems by providing examples.

0:12:41.786,0:12:45.397
Here’s another example-driven strategy from UPS’s website.

0:12:45.397,0:12:50.580
It offers you the opportunity to subscribe to a number of mailing lists.

0:12:50.580,0:12:53.851
And if you wonder what each of these mailing lists might give you,

0:12:53.851,0:12:56.211
on another screen I’ve batched them together here.

0:12:56.211,0:13:01.564
It will show you examples from each of those mailing lists of the content you are likely to receive.

0:13:01.564,0:13:04.066
That’s a really powerful kind of preview strategy.

0:13:04.066,0:13:08.827
And here is an example of a print dialog box to tell you what the problem is,

0:13:08.827,0:13:11.670
but doesn’t help you find the solution.

0:13:11.670,0:13:17.853
For starters, I think somebody wants to know, is the stuff that’s outside the margins relevant?

0:13:17.853,0:13:22.815
Is it just formally outside the margins, but nothing’s actually getting cut off?

0:13:22.815,0:13:27.192
or is there important document parts that I care about that are being cut off from the page?

0:13:27.192,0:13:31.088
And, what do you think the most reasonable path is to solving this problem?

0:13:31.088,0:13:39.145
Should I change the page size, or orientation, or move the header and footer? Help me solve it!

0:13:39.145,0:13:43.736
Here’s a dialog box for the photo merge feature of Adobe’s Photoshop Elements,

0:13:43.736,0:13:46.311
which is a very cool feature if you set it up right.

0:13:46.311,0:13:50.241
However, you need to specify multiple photos as input from the project bin.

0:13:50.241,0:13:54.702
And this is something that the dialog box actually could do a better job of leading you through.

0:13:54.702,0: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.

0:14:00.587,0:14:04.043
Here are two screenshots from eBay.

0:14:04.043,0:14:08.877
On the left we have an interesting approach, where eBay has built its own internal messaging system.

0:14:08.877,0:14:13.229
And if, for the sake of argument, we decided that’s the right thing to do,

0:14:13.229,0:14:17.879
and that the internal messaging is better than directly responding to email —

0:14:17.879,0:14:21.050
I’m not sure about that, but we’ll go with it for now —

0:14:21.050,0:14:25.647
they’ve done a clever thing, which is, when you reply, the reply mail address says,

0:14:25.647,0:14:31.764
“Hey, use the yellow button,” and in the middle of replying it, you can see, “Oops, I made a mistake.

0:14:31.764,0:14:35.024
That’s right… I need to use the internal messaging system.”

0:14:35.024,0:14:37.336
It’s an interesting hack.

0:14:37.351,0:14:41.120
And here’s another screenshot from eBay, on the right hand side,

0:14:41.120,0:14:44.405
where when new functionality is introduced —

0:14:44.405,0:14:48.068
for example the ability to compare multiple options in your card —

0:14:48.068,0:14:51.177
it can call that out inside the user interface.

0:14:51.177,0:14:55.759
And I think the ability to combine help directly into the user interface

0:14:55.759,0:14:58.794
is one of the most exciting advances in this area.

0:14:58.794,0:15:03.204
And it’s something that was less common in previous desktop applications.

0:15:03.204,0:15:06.843
And here’s an example that I think is interesting.

0:15:06.843,0:15:12.488
This is the unsubscription dialog box for a mailing list,

0:15:12.488,0:15:16.017
and if you click “I receive too many emails,”

0:15:16.017,0:15:19.352
it says “Wait, you can change the frequency,”

0:15:19.352,0:15:23.795
and you have the opportunity to receive mailing list mails at a less frequent interval.

0:15:23.795,0:15:26.746
I think that this is an actually a really nice solution,

0:15:26.746,0:15:29.717
because sometimes you want to receive some mail, but not too much.

0:15:29.717,0:15:32.840
In other cases, maybe you’ll view this as harassing

0:15:32.840,0:15:35.706
and you’ll wish that you could just be done with this task quickly,

0:15:35.706,0:15:40.429
but in either case, I thought it was an interesting and creative solution.

0:15:40.429,0:15:43.734
I think it’s really important that help be sincere,

0:15:43.734,0:15:47.947
and there’s one class of help and additional information

0:15:47.947,0:15:54.452
that I think is, at least in effect, not providing users with the information that they need,

0:15:54.452,0:15:57.741
and that’s EULA’s, or end-user licensing agreements.

0:15:57.741,0:16:05.566
Here’re two examples of EULA screens where it’s very easy to click through without ever read the EULA.

0:16:05.566,0:16:13.025
And my hunch is that nearly all users do click through without reading the EULA.

0:16:13.025,0:16:17.576
If nobody needs to know the terms of the licensing agreement, that’s very reasonable,

0:16:17.576,0:16:20.717
but my hunch is that the reason these things exist is

0:16:20.717,0:16:25.504
because they have consequence of some sort the user should probably be informed about.

0:16:25.504,0:16:28.708
And so if you’re designing a site that has terms for users,

0:16:28.708,0:16:34.964
think about “Is there a way that you can at least summarize what the key things somebody’s agreeing to are”

0:16:34.964,0:16:42.426
without having them click through it or having never even seen or read a lick of the agreement at all.

0:16:42.426,0:16:45.486
And to close on a positive note, one nice thing

0:16:45.486,0:16:49.124
that you can do with help on a website is to help people have fun.

0:16:49.124,0:16:51.185
Filling out forms can often be really boring,

0:16:51.185,0:16:55.577
and here’s an example from a hotel website where one of the options has a little joke on the inside,

0:16:55.577,0:17:00.039
and so that bit of levity can help increase the user experience.