1
00:00:01,002 --> 00:00:04,440
Let’s continue our journey of these design heuristics.

2
00:00:04,440 --> 00:00:07,757
Before we do, I’d like to remind you that many of the interfaces

3
00:00:07,757 --> 00:00:11,192
that we’re going to look at could fit into multiple different heuristics,

4
00:00:11,192 --> 00:00:14,939
and the most important thing is to identify the problem:

5
00:00:14,939 --> 00:00:20,170
If you identify and fix the problem, the label is of secondary importance.

6
00:00:21,355 --> 00:00:24,540
Our next heuristic is “recognition over recall.”

7
00:00:24,540 --> 00:00:33,707
Create interfaces that make objects, actions, options, and directions visible or easily retrievable.

8
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,

9
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.

10
00:00:45,212 --> 00:00:48,146
Here’s a photograph I took of one of our lunch meetings.

11
00:00:48,146 --> 00:00:51,632
And here you can see we have shwarma and falafel.

12
00:00:51,632 --> 00:00:54,020
They each have a number on them.

13
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.

14
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,

15
00:01:05,343 --> 00:01:08,436
and didn’t take the time to write out the whole label on it.

16
00:01:08,436 --> 00:01:10,935
So it’s understandable and fixable.

17
00:01:10,935 --> 00:01:15,174
But, from an interface design perspective, it would be faster to find the chicken shwarma

18
00:01:15,174 --> 00:01:21,423
if it was written directly on there, as opposed to in code.

19
00:01:24,360 --> 00:01:28,836
Here’s a screen shot of a ticket-buying website, and what you can see

20
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.

21
00:01:33,502 --> 00:01:37,814
There’s a couple of problems from a heuristics perspective with this screen.

22
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.

23
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

24
00:01:48,632 --> 00:01:52,000
which I think could be done away with with clever design.

25
00:01:52,000 --> 00:01:55,394
It, for example, brings you to a page

26
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.

27
00:02:00,519 --> 00:02:05,358
And so, by setting up reasonable defaults, you can avoid extra hurdles .

28
00:02:05,358 --> 00:02:10,526
In addition to leading with reasonable defaults, it can be valuable to provide previews.

29
00:02:10,526 --> 00:02:16,028
This is a screen shot of a web design tool where there are many templates available.

30
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.

31
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.

32
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,

33
00:02:35,335 --> 00:02:39,521
and it’s much easier to see if that’s the design that you’d like.

34
00:02:40,275 --> 00:02:44,040
Next up, flexibility and efficiency.

35
00:02:44,040 --> 00:02:47,120
An simple and straight forward example of this

36
00:02:47,120 --> 00:02:52,051
is to provide keyboard accelerator shortcuts and similar things like that for experts.

37
00:02:52,051 --> 00:02:55,816
This is the View menu of the Firefox web browser.

38
00:02:55,816 --> 00:03:01,444
And this is a great example of offering flexibility and support for experts in two ways.

39
00:03:01,444 --> 00:03:05,371
First, we can see that there’s keyboard shortcuts available.

40
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,

41
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.

42
00:03:18,078 --> 00:03:20,968
This is the Expedia hotel search,

43
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.

44
00:03:26,185 --> 00:03:29,002
Popular cities are shown with a radio button.

45
00:03:29,002 --> 00:03:33,140
But also, if you’d like to go to a less popular city,

46
00:03:33,140 --> 00:03:36,390
there’s a free entry field that you can type in anything that you want.

47
00:03:36,390 --> 00:03:39,565
And so this is a nice example of defaults with options.

48
00:03:39,565 --> 00:03:44,764
Flexible interfaces can also foreground and push relevant ambient information.

49
00:03:44,764 --> 00:03:47,092
This is a screen shot of BusyCal,

50
00:03:47,092 --> 00:03:52,369
which will allow you to view the weather forecast on your weekly view of your calendar.

51
00:03:52,369 --> 00:03:57,363
Here’s another example of productivity in the user interface: This is Google’s Gmail,

52
00:03:57,363 --> 00:04:03,067
which, if you click Spam on a recipient that it knows how to unsubscribe you from,

53
00:04:03,067 --> 00:04:08,912
it will offer the opportunity to directly unsubscribe you from that email as well.

54
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,

55
00:04:13,933 --> 00:04:19,267
you need to do it well and offer a clear, immediate, task-relevant benefit.

56
00:04:19,267 --> 00:04:27,063
People generally don’t like proactive interfaces that distract, interrupt, break flow, or provide irrelevant information.

57
00:04:27,063 --> 00:04:33,730
Another nice example of support for richer use is to offer recommendations on a particular page.

58
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.

59
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.

60
00:04:49,928 --> 00:04:53,941
This is an example from Amazon, of discussion fora for products

61
00:04:53,941 --> 00:04:58,085
that are almost entirely unrelated to the product that is being shown.

62
00:04:58,085 --> 00:05:01,662
And it just distracts from the user’s main goal — Mostly they’re wondering

63
00:05:01,662 --> 00:05:06,905
“Why on earth did these things end up at the bottom of some completely unrelated webpage?”

64
00:05:06,905 --> 00:05:12,988
And finally, [while] flexibility can be incredibly valuable, it is possible to go overboard.

65
00:05:12,988 --> 00:05:17,949
This is a photograph from Bill Moggridge who shows an interview with a user

66
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.

67
00:05:24,609 --> 00:05:31,213
And so, flexibility can sometimes be at tension with minimalism.

68
00:05:31,213 --> 00:05:36,775
Our eighth heuristic is “aesthetic and minimalist design.”

69
00:05:36,775 --> 00:05:42,196
When people view your webpage, for example, they’re viewing it on a screen,

70
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.

71
00:05:47,495 --> 00:05:51,909
What they see is what’s called “above the fold” — it comes from newspapers.

72
00:05:51,919 --> 00:05:55,482
Here’s an example of a screen where the relevant information —

73
00:05:55,482 --> 00:06:00,055
what the weather forecast is — is not even visible anywhere above the fold.

74
00:06:00,055 --> 00:06:03,913
Everything above the fold is all of the chrome and extra stuff,

75
00:06:03,913 --> 00:06:07,034
but the core information you have to scroll down for.

76
00:06:07,034 --> 00:06:10,950
And to the extent that you’re trying to optimize for user experience,

77
00:06:10,950 --> 00:06:18,122
it would be better to have the core information above the fold.

78
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,

79
00:06:24,212 --> 00:06:27,622
have them mean something, and do so judiciously.

80
00:06:27,622 --> 00:06:32,154
Here’s an example of a check out page that’s using lots of different colors,

81
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.

82
00:06:40,020 --> 00:06:43,804
And here’s a screen shot from Google’s help system.

83
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.

84
00:06:48,932 --> 00:06:54,042
I wanted to show one example where, I think, some more information could be stripped out,

85
00:06:54,042 --> 00:06:56,885
or rather some more noise could be stripped out.

86
00:06:56,885 --> 00:07:00,584
And what I’m looking at in particular is this stuff here,

87
00:07:00,584 --> 00:07:06,278
where all of the table borders and other stuff are what you most see,

88
00:07:06,278 --> 00:07:11,147
whereas what you actually most care about is the data in the survey,

89
00:07:11,147 --> 00:07:15,641
and so, if you get rid of all of the extra lines and chart junk,

90
00:07:15,641 --> 00:07:20,031
it can be clearer to see the parts that you cared the most about.

91
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

92
00:07:26,605 --> 00:07:30,433
because it’s right up top here, and then you get to say

93
00:07:30,433 --> 00:07:34,206
whether or not you’re a returning customer or a new customer.

94
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,

95
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.

96
00:07:46,595 --> 00:07:50,404
By contrast, this flight search website has the exact same information —

97
00:07:50,404 --> 00:07:53,675
number of stops — in two separate places.

98
00:07:53,675 --> 00:07:56,630
And it’s possible that this increased clarity.

99
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,

100
00:08:02,665 --> 00:08:07,193
where by listing the same thing twice, you’re pushing other stuff down.

101
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,

102
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.

103
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

104
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.

105
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.

106
00:08:37,385 --> 00:08:39,880
But that’s not necessarily what people want.

107
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.

108
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]

109
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.

110
00:08:56,332 --> 00:09:02,701
Next let’s talk about helping users recognize, diagnose, and recover from errors.

111
00:09:02,701 --> 00:09:06,405
One of the first steps of doing this is making the problem clear.

112
00:09:06,405 --> 00:09:14,396
Here’s a hotel reservation site where all it says is: “Mistake. month. back.”

113
00:09:14,396 --> 00:09:18,355
It’s hard to know what to do.

114
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.

115
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.

116
00:09:27,105 --> 00:09:31,508
Okay, that’s a little better. But which fields didn’t I fill out?

117
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.

118
00:09:37,194 --> 00:09:41,416
Which of the myriad things on this page did I forget to check?

119
00:09:41,416 --> 00:09:46,127
Maybe you could show me just a page that has the one or two things forgotten

120
00:09:46,127 --> 00:09:51,477
rather than the whole pile of stuff and force me to scroll through it again.

121
00:09:51,477 --> 00:09:57,412
Here’s a dialog box that shows the error and explains it clearly,

122
00:09:57,412 --> 00:10:00,455
but it doesn’t offer you much in terms of solving the problem.

123
00:10:00,455 --> 00:10:04,029
It says that there’s not enough space on your iPod. Too bad.

124
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,

125
00:10:09,666 --> 00:10:14,734
or to offer reasonable ways of limiting the amount of media

126
00:10:14,734 --> 00:10:17,489
that you’re trying to put on the device so that it can all fit.

127
00:10:17,489 --> 00:10:23,620
And in this particular case, more recent versions of this application handle this problem better.

128
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.

129
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.

130
00:10:37,064 --> 00:10:41,662
And it says, “The application that you chose (‘(null)’), could not found.

131
00:10:41,662 --> 00:10:45,695
Check the file name or choose another application.”

132
00:10:45,695 --> 00:10:50,307
Well this would be a whole lot better if we were speaking the user’s language:

133
00:10:50,307 --> 00:10:52,210
“Null” may not be the best choice.

134
00:10:52,210 --> 00:10:58,260
And also if we offered up a reasonable application for that file type.

135
00:10:58,260 --> 00:11:02,100
A lot of common tasks on the web are search-based tasks.

136
00:11:02,100 --> 00:11:05,045
So here’s a screenshot from searching for a flight,

137
00:11:05,045 --> 00:11:08,772
where the constraint specified yielded no possible solution.

138
00:11:08,772 --> 00:11:13,812
For complex search tasks. if a user specifies an unreasonable set of constraints,

139
00:11:13,812 --> 00:11:16,992
one of the most powerful things that you can do as a designer

140
00:11:16,992 --> 00:11:22,619
is to offer a relaxation of those constraints that makes this more workable.

141
00:11:22,619 --> 00:11:27,408
Many years ago, I worked with Chuck Rich at Mitsubishi Research in Boston.

142
00:11:27,408 --> 00:11:30,558
And he was working on a research system called Collagen

143
00:11:30,558 --> 00:11:34,042
that would find ways to intelligently relax these constraints —

144
00:11:34,042 --> 00:11:37,577
among other things — to help users get their work done better.

145
00:11:37,577 --> 00:11:42,343
And this kind of smart relaxation can be a really powerful technique.

146
00:11:42,343 --> 00:11:45,738
I wanted to end talking about errors on a good note.

147
00:11:45,738 --> 00:11:50,486
Here’s a web browser dialog box that lets you know

148
00:11:50,486 --> 00:11:54,393
if you go to a URL that it believes to be suspect,

149
00:11:54,393 --> 00:11:57,591
it will let you know that you probably don’t want to be here,

150
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.

151
00:12:03,031 --> 00:12:08,075
There’s probably future further innovations that can happen in this kind of error work.

152
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.

153
00:12:13,568 --> 00:12:19,326
And that brings us to our last heuristic, which is better help and documentation.

154
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.

155
00:12:25,607 --> 00:12:31,002
Fortunately, I think on the web, help and documents have become more integrated.

156
00:12:31,002 --> 00:12:37,302
One of my favorite examples for this is learning programming systems where websites like PHP, .NET

157
00:12:37,302 --> 00:12:41,786
can help you learn programming systems by providing examples.

158
00:12:41,786 --> 00:12:45,397
Here’s another example-driven strategy from UPS’s website.

159
00:12:45,397 --> 00:12:50,580
It offers you the opportunity to subscribe to a number of mailing lists.

160
00:12:50,580 --> 00:12:53,851
And if you wonder what each of these mailing lists might give you,

161
00:12:53,851 --> 00:12:56,211
on another screen I’ve batched them together here.

162
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.

163
00:13:01,564 --> 00:13:04,066
That’s a really powerful kind of preview strategy.

164
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,

165
00:13:08,827 --> 00:13:11,670
but doesn’t help you find the solution.

166
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?

167
00:13:17,853 --> 00:13:22,815
Is it just formally outside the margins, but nothing’s actually getting cut off?

168
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?

169
00:13:27,192 --> 00:13:31,088
And, what do you think the most reasonable path is to solving this problem?

170
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!

171
00:13:39,145 --> 00:13:43,736
Here’s a dialog box for the photo merge feature of Adobe’s Photoshop Elements,

172
00:13:43,736 --> 00:13:46,311
which is a very cool feature if you set it up right.

173
00:13:46,311 --> 00:13:50,241
However, you need to specify multiple photos as input from the project bin.

174
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.

175
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.

176
00:14:00,587 --> 00:14:04,043
Here are two screenshots from eBay.

177
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.

178
00:14:08,877 --> 00:14:13,229
And if, for the sake of argument, we decided that’s the right thing to do,

179
00:14:13,229 --> 00:14:17,879
and that the internal messaging is better than directly responding to email —

180
00:14:17,879 --> 00:14:21,050
I’m not sure about that, but we’ll go with it for now —

181
00:14:21,050 --> 00:14:25,647
they’ve done a clever thing, which is, when you reply, the reply mail address says,

182
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.

183
00:14:31,764 --> 00:14:35,024
That’s right… I need to use the internal messaging system.”

184
00:14:35,024 --> 00:14:37,336
It’s an interesting hack.

185
00:14:37,351 --> 00:14:41,120
And here’s another screenshot from eBay, on the right hand side,

186
00:14:41,120 --> 00:14:44,405
where when new functionality is introduced —

187
00:14:44,405 --> 00:14:48,068
for example the ability to compare multiple options in your card —

188
00:14:48,068 --> 00:14:51,177
it can call that out inside the user interface.

189
00:14:51,177 --> 00:14:55,759
And I think the ability to combine help directly into the user interface

190
00:14:55,759 --> 00:14:58,794
is one of the most exciting advances in this area.

191
00:14:58,794 --> 00:15:03,204
And it’s something that was less common in previous desktop applications.

192
00:15:03,204 --> 00:15:06,843
And here’s an example that I think is interesting.

193
00:15:06,843 --> 00:15:12,488
This is the unsubscription dialog box for a mailing list,

194
00:15:12,488 --> 00:15:16,017
and if you click “I receive too many emails,”

195
00:15:16,017 --> 00:15:19,352
it says “Wait, you can change the frequency,”

196
00:15:19,352 --> 00:15:23,795
and you have the opportunity to receive mailing list mails at a less frequent interval.

197
00:15:23,795 --> 00:15:26,746
I think that this is an actually a really nice solution,

198
00:15:26,746 --> 00:15:29,717
because sometimes you want to receive some mail, but not too much.

199
00:15:29,717 --> 00:15:32,840
In other cases, maybe you’ll view this as harassing

200
00:15:32,840 --> 00:15:35,706
and you’ll wish that you could just be done with this task quickly,

201
00:15:35,706 --> 00:15:40,429
but in either case, I thought it was an interesting and creative solution.

202
00:15:40,429 --> 00:15:43,734
I think it’s really important that help be sincere,

203
00:15:43,734 --> 00:15:47,947
and there’s one class of help and additional information

204
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,

205
00:15:54,452 --> 00:15:57,741
and that’s EULA’s, or end-user licensing agreements.

206
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.

207
00:16:05,566 --> 00:16:13,025
And my hunch is that nearly all users do click through without reading the EULA.

208
00:16:13,025 --> 00:16:17,576
If nobody needs to know the terms of the licensing agreement, that’s very reasonable,

209
00:16:17,576 --> 00:16:20,717
but my hunch is that the reason these things exist is

210
00:16:20,717 --> 00:16:25,504
because they have consequence of some sort the user should probably be informed about.

211
00:16:25,504 --> 00:16:28,708
And so if you’re designing a site that has terms for users,

212
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”

213
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.

214
00:16:42,426 --> 00:16:45,486
And to close on a positive note, one nice thing

215
00:16:45,486 --> 00:16:49,124
that you can do with help on a website is to help people have fun.

216
00:16:49,124 --> 00:16:51,185
Filling out forms can often be really boring,

217
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,

218
00:16:55,577 --> 00:17:00,039
and so that bit of levity can help increase the user experience.