1
00:00:01,336 --> 00:00:08,723
The key innovation of the graphic user interface is that input is performed directly on top of output.

2
00:00:08,723 --> 00:00:14,435
Today, we’re going to explore what makes an interface easy, hard, or “natural,”

3
00:00:14,435 --> 00:00:21,186
and we’re going to do it by starting with something really simple: a measuring cup.

4
00:00:21,186 --> 00:00:25,035
It has a user interface: it’s got label readout here.

5
00:00:25,035 --> 00:00:28,918
There’s a task: Fill up a liquid to a desired amount.

6
00:00:28,918 --> 00:00:33,586
So, how might you be able to improve this standard measuring cup design here?

7
00:00:33,586 --> 00:00:35,868
What kind of things can you think of?

8
00:00:35,868 --> 00:00:39,362
OXO is a company that sells kitchen utencils.

9
00:00:39,362 --> 00:00:45,871
At the Gel Conference in 2008, OXO’s Alex Lee talked about their measuring cup:

10
00:00:45,871 --> 00:00:48,859
The first prototype came unsolicited in the mail;

11
00:00:48,859 --> 00:00:54,610
it inspired them to go out into the field and ask people about problems with their measuring cups

12
00:00:54,610 --> 00:00:56,814
and suggestions for improvements.

13
00:00:56,814 --> 00:01:02,917
They got things like: “It’s sometimes slippery” or “The handle gets hot”.

14
00:01:02,917 --> 00:01:05,860
Nobody complained about the measuring part;

15
00:01:05,860 --> 00:01:11,355
but, when they watched people measure things, they would do this:

16
00:01:11,355 --> 00:01:13,784
Grab some liquid;

17
00:01:13,784 --> 00:01:18,462
Pour it in;

18
00:01:18,462 --> 00:01:23,334
Hold it up;

19
00:01:23,334 --> 00:01:26,200
Pour some more in;

20
00:01:26,200 --> 00:01:29,045
Hold it up;

21
00:01:29,045 --> 00:01:31,200
Pour a little more;

22
00:01:31,200 --> 00:01:34,963
There we go!

23
00:01:37,455 --> 00:01:39,950
This stuttered-step measurement seems kind of inelegant,

24
00:01:39,950 --> 00:01:48,966
so, to address this, OXO released a design with a clever insight: The numbers are visible from above.

25
00:01:48,966 --> 00:01:53,681
This provides continuous interactive feedback on your actions.

26
00:01:57,604 --> 00:02:02,566
Pour once; and when you get to the right level, you can see it directly and stop.

27
00:02:03,920 --> 00:02:08,159
It’s a great design in lots of ways, but there’s still some room for further improvement.

28
00:02:08,159 --> 00:02:14,304
For starters, the numbers that are written are sideways from the reader’s perspective.

29
00:02:14,304 --> 00:02:19,607
Not a huge deal, but still, it’s kind of like when you have to tip your head to look at a table.

30
00:02:19,607 --> 00:02:24,428
And also — some of you may like this, but I’ve always found this ridge here to be a little inelegant:

31
00:02:24,428 --> 00:02:30,249
This feels like a medical device more than something that belongs in the kitchen.

32
00:02:30,249 --> 00:02:37,221
And, when I went to the grocery store today, I actually found this measuring cup by Pyrex:

33
00:02:37,221 --> 00:02:44,469
It takes the insight from the OXO measuring cup — that you can measure from above —

34
00:02:44,469 --> 00:02:46,354
and improves upon it in two ways:

35
00:02:46,354 --> 00:02:52,524
The first is that the numbers right here are readable from the reader’s perspective.

36
00:02:52,524 --> 00:02:58,031
Hold it in the right hand if you want ounces, or in your left hand if you want millilitres.

37
00:02:58,031 --> 00:03:03,722
The second is that, for me at least, this design is a whole lot cleaner and nicer-looking.

38
00:03:06,845 --> 00:03:10,133
So, in this humble story of a better measuring cup,

39
00:03:10,133 --> 00:03:16,084
Alex Lee at OXO has provided us with four important lessons about human-centred design.

40
00:03:16,945 --> 00:03:19,779
There’s a common story that the carmaker Henry Ford once said,

41
00:03:19,779 --> 00:03:26,396
“If I asked people what they wanted, they would have said ‘a faster horse.’”

42
00:03:26,396 --> 00:03:33,163
[It] turns out that they probably didn’t say that — it’s probably made up — but it makes a good point.

43
00:03:33,163 --> 00:03:36,464
Our first lesson is that in both transit and in cookware,

44
00:03:36,464 --> 00:03:41,865
simply asking people what they want can often miss important opportunities.

45
00:03:41,865 --> 00:03:46,218
The second is that you can find these problems and opportunities — like poor ergonomics —

46
00:03:46,218 --> 00:03:50,581
by going out into the field and discovering what people actually do.

47
00:03:50,581 --> 00:03:56,453
And, third, you can get extra power out of this observation by bringing prototypes along with you.

48
00:03:56,453 --> 00:03:59,993
Fourth, the world is full of people tinkering in their garage,

49
00:03:59,993 --> 00:04:05,660
and everyone wins when the stars align to bring those things into the world.

50
00:04:05,660 --> 00:04:10,999
With measuring cups, like user interfaces, you can think of there as being two steps:

51
00:04:10,999 --> 00:04:18,605
The first is having some action.

52
00:04:18,605 --> 00:04:22,013
And the second is evaluating the outcome.

53
00:04:22,013 --> 00:04:27,655
At each of these steps, you, as a designer, has an opportunity for success or for failure.

54
00:04:27,655 --> 00:04:33,970
In our first step, what you have to cross is the gulf of execution:

55
00:04:33,970 --> 00:04:37,378
How does the user know what to do?

56
00:04:38,332 --> 00:04:43,418
And the gulf that you have to help the user cross is the gulf of evaluation:

57
00:04:43,418 --> 00:04:46,338
How does the user know what happened?

58
00:04:46,723 --> 00:04:50,848
My sketch here is based on a diagram that my colleague Bill Verplank often uses.

59
00:04:51,556 --> 00:04:59,227
As a designer, here are six powerful questions that you can ask to ascertain what challenges may arise:

60
00:04:59,227 --> 00:05:04,401
How usually can someone determine the function of a device, or what actions are possible?

61
00:05:05,355 --> 00:05:10,541
And then, how can I determine the mapping from their goals to their physical movements —

62
00:05:10,541 --> 00:05:13,675
what they actually do with the user interface?

63
00:05:15,459 --> 00:05:20,283
Once they have the plan, how usually can they execute that action?

64
00:05:21,375 --> 00:05:27,430
And, after they’ve executed that action, how usually can they tell what state the system is in

65
00:05:27,430 --> 00:05:30,407
or whether it’s in a desired state?

66
00:05:30,807 --> 00:05:34,762
And, more generally, can they figure out the mapping between the system state

67
00:05:34,762 --> 00:05:37,415
and what they should interpret that to mean?

68
00:05:38,215 --> 00:05:42,834
And, as a designer, here’s several things that you can do to actually make these easier:

69
00:05:42,849 --> 00:05:48,254
The first and simplest is, if there’s functionality that a system can do,

70
00:05:48,254 --> 00:05:52,273
the best way to communicate that to the user is to put that on the screen —

71
00:05:52,273 --> 00:05:54,998
make it visible in one way or another.

72
00:05:54,998 --> 00:05:59,864
And, if it’s in the physical world, give it a handle, or knob, or button.

73
00:05:59,864 --> 00:06:03,844
These cues to action are called “affordances”.

74
00:06:03,844 --> 00:06:09,057
Second, provide users with clear, continuous feedback, so they know exactly what’s happening.

75
00:06:09,057 --> 00:06:15,604
Third, all things equal, be consistent with existing standards, platform conventions, and other idioms.

76
00:06:15,604 --> 00:06:21,776
Fourth, whenever you can, make it possible for people to back up, through Undo or some other mechanism:

77
00:06:22,622 --> 00:06:25,644
Very few things should be permanent and irreversible.

78
00:06:25,644 --> 00:06:28,898
A benefit of having all operations being non-destructive

79
00:06:28,898 --> 00:06:32,481
is that it also enables users to explore and try out things;

80
00:06:32,481 --> 00:06:34,973
and especially in creative applications,

81
00:06:34,973 --> 00:06:39,851
you see that people will try down branches and use Undo to come back.

82
00:06:40,281 --> 00:06:47,144
Fifth, provide a systematic way for people to discover all of the functionality available in an application.

83
00:06:47,144 --> 00:06:50,129
If you watched somebody use a new website, for example,

84
00:06:50,129 --> 00:06:53,959
one thing that you might see them do when they’re trying to figure out how to navigate it,

85
00:06:53,959 --> 00:07:00,023
is [to] roll over all the menu bars, to see what every option that’s out there is.

86
00:07:00,499 --> 00:07:04,690
And, finally, reliable software <i>is</i> a usability issue:

87
00:07:04,690 --> 00:07:09,973
The thing that’s supposed to happen should [happen]; and random stuff that isn’t, shouldn’t.

88
00:07:09,973 --> 00:07:13,927
I know that reliability is easier said than done, but it’s still really important;

89
00:07:13,927 --> 00:07:18,666
and a lot of the interfaces that people really like have this property of reliability.

90
00:07:18,666 --> 00:07:23,583
So, now that we have these new conceptual tools of a gulf of execution and evaluation —

91
00:07:23,583 --> 00:07:29,562
of knowing what you can do and whether what you’ve wanted is what happened —

92
00:07:29,562 --> 00:07:33,977
let’s take a look at a video that Bill Moggridge and colleagues at IDEO put together

93
00:07:33,977 --> 00:07:38,744
about someone trying to buy a soda from a vending machine in Japan

94
00:07:38,744 --> 00:07:41,615
using their mobile phone.

95
00:07:41,615 --> 00:07:45,672
While you’re watching this video, think about what’s causing the breakdowns,

96
00:07:45,672 --> 00:07:53,403
and how you might fix them by using the bullet points that we’ve outlined in this lecture today.

97
00:10:26,584 --> 00:10:29,115
We started out today looking at physical products,

98
00:10:29,115 --> 00:10:32,875
and we moved on to explore smart products and mobile phones.

99
00:10:32,875 --> 00:10:38,827
Now let’s think about what direct manipulation and the gulfs of execution and evalution mean

100
00:10:38,827 --> 00:10:41,238
for building software.

101
00:10:41,238 --> 00:10:46,032
What’s better? A command line or a graphical user interface?

102
00:10:46,032 --> 00:10:49,443
Well, I think the answer is going to have to be “it depends.”

103
00:10:49,443 --> 00:10:53,570
Nearly every design is good for something and bad for something else.

104
00:10:53,570 --> 00:10:59,412
But let’s try to figure out what makes them different: think about moving a file between two folders.

105
00:10:59,412 --> 00:11:04,742
On a graphical user interface, you simply pick it up in one location, and drop it in another:

106
00:11:04,742 --> 00:11:09,770
You have continuous feedback about what’s happening.

107
00:11:09,770 --> 00:11:13,839
All of the objects that are of interest to you are available onscreen,

108
00:11:13,839 --> 00:11:18,521
and you can simply point at what you want — “input on output”.

109
00:11:18,521 --> 00:11:24,300
With a command line, you have to know, a priori, what the name of the command that is that you’d like to use.

110
00:11:24,300 --> 00:11:29,109
You also have to remember the syntax for using that move command

111
00:11:29,109 --> 00:11:32,377
there’s minimal feedback about whether the operators that you’re dealing with —

112
00:11:32,377 --> 00:11:36,465
like files or folders — are actually available,

113
00:11:36,465 --> 00:11:41,220
and there’s not much in confirmation that you’ve moved it ultimately to the right place —

114
00:11:41,220 --> 00:11:44,867
it can be easy to make errors.

115
00:11:44,867 --> 00:11:49,100
What we see with the graphical interface is the power of direct manipulation —

116
00:11:49,100 --> 00:11:54,155
immediate feedback on all actions, continuous representations of the objects,

117
00:11:54,155 --> 00:11:58,208
and they leverage metaphors that we have from the physical world.

118
00:11:58,208 --> 00:12:01,362
These metaphors are especially important when you’re learning a new interface,

119
00:12:01,362 --> 00:12:04,211
and so when the graphical interface was first released,

120
00:12:04,211 --> 00:12:09,691
being able to rely on what people knew about desks, folders, and files was really helpful;

121
00:12:09,691 --> 00:12:14,719
those become less valuable once you’ve become accustomed to the computer world.

122
00:12:14,719 --> 00:12:17,897
So, give some thought to which of these principles hold

123
00:12:17,897 --> 00:12:21,776
for both the command-line interface and the graphical interface.

124
00:12:22,946 --> 00:12:23,891
From my perspective,

125
00:12:23,891 --> 00:12:30,860
the graphical interface does a much better job in terms of visibility, feedback, and consistency.

126
00:12:34,291 --> 00:12:37,122
In either interface style, Undo is possible,

127
00:12:37,122 --> 00:12:42,301
although the GUI generally does a better job of exposing when Undo is available

128
00:12:42,301 --> 00:12:46,281
and what undoing will actually do.

129
00:12:48,496 --> 00:12:53,204
One place that a graphical interface really shines is in terms of discoverability —

130
00:12:53,204 --> 00:12:58,872
you can leaf through every single menu in a system, and see all of the operations that are there;

131
00:12:58,872 --> 00:13:00,541
with a command-line interface,

132
00:13:00,541 --> 00:13:07,284
there’s really no way to know what’s the full set of operations that you could possible type into a terminal.

133
00:13:07,284 --> 00:13:11,759
There’s no mater list.

134
00:13:11,759 --> 00:13:17,384
In terms of reliability, either interface style can be made to be reliable.

135
00:13:19,676 --> 00:13:22,503
“But how can this be?” some of you may be saying,

136
00:13:22,503 --> 00:13:27,040
“The command-line interface can be so much better sometimes!”

137
00:13:27,040 --> 00:13:29,968
And it is!

138
00:13:29,968 --> 00:13:31,196
When is that?

139
00:13:31,196 --> 00:13:33,484
The command-line interface works better

140
00:13:33,484 --> 00:13:39,741
when the indirection that it offers is a benefit rather than a drawback.

141
00:13:39,741 --> 00:13:43,284
And in fact that indirection that it offers is a kind of abstraction,

142
00:13:43,284 --> 00:13:45,699
and that’s what gives programming its power,

143
00:13:45,699 --> 00:13:51,183
and so the command-line interface, like programming — because in some way it kind of is programming —

144
00:13:51,183 --> 00:13:59,553
gets its power when you can express stuff more abstractly and thereby do work more efficiently.

145
00:13:59,553 --> 00:14:06,554
So, for example, moving all of the files that match a certain set of criteria from one place to another,

146
00:14:06,554 --> 00:14:11,307
that can sometimes be more efficiently accomplished with a command line.

147
00:14:11,307 --> 00:14:16,354
And even that wonderful discoverability of the graphical user interface has a dark side:

148
00:14:16,861 --> 00:14:19,769
This is a picture from my colleague Takeo Igarashi.

149
00:14:19,769 --> 00:14:25,877
Takeo made this picture by turning on all of the menu bars in a certain version of Microsoft [PowerPoint].

150
00:14:25,877 --> 00:14:32,134
And you can see that, on his laptop screen, all of those menu bars crowded things out so much

151
00:14:32,134 --> 00:14:35,942
that there was almost no screen left over for the slides.

152
00:14:35,942 --> 00:14:41,320
So, is this interface discoverable? Absolutely! All of the functionality is right there.

153
00:14:41,320 --> 00:14:45,862
But you pay a cost in terms of screen real estate.

154
00:14:45,862 --> 00:14:50,092
In this introductory course, we won’t have a chance to talk much about gestural interfaces.

155
00:14:50,092 --> 00:14:54,065
But, given their recent popularity, and tablet interfaces, game controllers,

156
00:14:54,065 --> 00:15:00,422
and movies like « the Minority Report », I want to conclude today’s lecture with an eye to the future:

157
00:15:00,422 --> 00:15:04,457
Gestural interfaces offer a wonderful solution to menu creep,

158
00:15:04,457 --> 00:15:08,442
in that they don’t take up any permanent screen real estate.

159
00:15:08,442 --> 00:15:13,638
The downside, of course, is that they are non–self-disclosing —

160
00:15:13,638 --> 00:15:17,869
you don’t know what functionality might be available.

161
00:15:17,869 --> 00:15:24,903
And, at their best, gestural interfaces can be even more direct than their graphical user interface counterpart.

162
00:15:24,903 --> 00:15:31,164
In recent years, I’ve watched in amazement at people of all ages and from all backgrounds

163
00:15:31,164 --> 00:15:35,681
have figured out how to use tablet computers really effectively.

164
00:15:35,681 --> 00:15:39,092
And the directness, I think, is one big reason for that.

165
00:15:39,092 --> 00:15:42,153
Learning to use a mouse is actually kind of a big deal:

166
00:15:42,153 --> 00:15:44,440
Once you’ve got the hang of it you forget that,

167
00:15:44,440 --> 00:15:46,900
but there <i>is</i> this indirectness that you’ll have to learn

168
00:15:46,900 --> 00:15:51,004
that what you’re doing over here matters over here.

169
00:15:51,004 --> 00:15:56,252
With a tablet, the thing that you touch is the thing that you’re interacting with.

170
00:15:56,252 --> 00:16:02,629
And the best gestures in these interfaces, like pinching to zoom, just feels so natural —

171
00:16:02,629 --> 00:16:09,421
the metaphor is very clear, the feedback is immediate, the outcome is predictable.

172
00:16:09,421 --> 00:16:14,153
In other cases, when the mapping is more arbitrary or harder to guess,

173
00:16:14,153 --> 00:16:16,674
I think these interfaces are less effective.

174
00:16:16,674 --> 00:16:23,901
For example, if I swipe with four fingers, that will bring up a menu bar on an iPad.

175
00:16:23,901 --> 00:16:27,549
How on earth would I ever figure that out?

176
00:16:27,549 --> 00:16:32,542
So, in gestural interfaces, like in all others, things work best when the feedback is clear,

177
00:16:32,542 --> 00:16:37,745
and the interface provides cues through metaphors or visual signals

178
00:16:37,745 --> 00:16:41,784
that help you know what you can do within the user interface.

179
00:16:41,784 --> 00:16:45,897
To learn more about direct manipulation interfaces and the psychology of design,

180
00:16:45,897 --> 00:16:50,292
I strongly recommend Don Norman’s book « The Design of Everyday Things ».

181
00:16:50,292 --> 00:16:53,171
We’ll see you next time.