1
00:00:01,936 --> 00:00:05,600
In this video, we are going to talk about mental models,

2
00:00:05,600 --> 00:00:09,017
and the questions that we are going to tackle here are:

3
00:00:09,017 --> 00:00:15,186
“What makes an interface learnable?“ and “What leads to errors that people make in user interfaces?”

4
00:00:15,186 --> 00:00:19,997
And to do that, I’d again like to start with an example from the physical world.

5
00:00:19,997 --> 00:00:23,582
Here we are outside the Computer Science building at Stanford.

6
00:00:23,582 --> 00:00:28,010
And what I’d like to show you is an example of a user interface error.

7
00:00:28,010 --> 00:00:34,131
It’s really simple one: Our department and its front door has two doors.

8
00:00:37,085 --> 00:00:44,965
It both have exactly the same handle on them. However, the door on the right never actually opens.

9
00:00:44,965 --> 00:00:53,890
So, if I go to use this door right here, 24-hours-a-day 7-days-a-week it never works — it’s locked!

10
00:00:53,890 --> 00:00:58,633
So why does it have the same handle as the other that does open?

11
00:00:58,633 --> 00:01:03,573
And you can see right here that a whole lot of people have tried using this handle.

12
00:01:03,573 --> 00:01:06,353
In fact, faculty who have been around for years

13
00:01:06,353 --> 00:01:11,425
still often make the mistake of grabbing the wrong door.

14
00:01:11,425 --> 00:01:14,998
This would be a whole lot better if this door had no handle here.

15
00:01:14,998 --> 00:01:17,913
You could still exit — you can see this part right here —

16
00:01:17,913 --> 00:01:23,255
but if want to enter, you would know where to grab and which door to use.

17
00:01:24,578 --> 00:01:26,454
Let’s say you’ve got a refrigerator,

18
00:01:26,454 --> 00:01:31,312
and the problem is that he freezer is too cold, but the fridge is all just right.

19
00:01:31,312 --> 00:01:35,586
This refrigerator has two dials: One of them is labelled A through E,

20
00:01:35,586 --> 00:01:39,082
the other is labelled with numbers, 3 through 7.

21
00:01:39,082 --> 00:01:41,009
and there’s an instruction manual

22
00:01:41,009 --> 00:01:45,620
that lists combinations of letters and numbers for different settings of food.

23
00:01:45,620 --> 00:01:52,802
So what do we do to have the refrigerator stay the same, but the freezer to be less cold?

24
00:01:54,833 --> 00:01:59,543
Well, the action is going to depend on the mental model that you have of the system:

25
00:01:59,543 --> 00:02:03,222
One reasonable model that you could have is that there are two cooling units,

26
00:02:03,222 --> 00:02:06,082
and there’s one dial that controls each of the units.

27
00:02:06,082 --> 00:02:08,417
And, in that case, what you would want to do

28
00:02:08,417 --> 00:02:13,469
is [to] figure out which of those is connected to the freezer and tweak that dial.

29
00:02:13,469 --> 00:02:18,480
[It] turns out that’s not actually how it works: That there’s only one cooling unit in this refrigerator,

30
00:02:18,480 --> 00:02:22,323
and then it has a splitter which controls the proportion of cold air

31
00:02:22,323 --> 00:02:26,308
that goes into either the refrigerator or the freezer.

32
00:02:26,308 --> 00:02:29,348
And so, if you’d like to be abe to change only one of the two chambers —

33
00:02:29,348 --> 00:02:32,090
in this case: make our freezer less cold —

34
00:02:32,090 --> 00:02:34,828
what you have to do is [to] move both of the dials —

35
00:02:34,828 --> 00:02:38,228
dial back the total amount of coldness going into the refrigerator,

36
00:02:38,228 --> 00:02:40,647
and then change the fraction

37
00:02:40,647 --> 00:02:45,763
so that the fridge still gets the cold air that it needs but the freezer is getting less.

38
00:02:45,763 --> 00:02:50,878
If a lot of users misunderstand the functions of these two dials and get them wrong,

39
00:02:50,878 --> 00:02:55,251
then I think it’s fair to say that this is a poor user interface.

40
00:02:56,512 --> 00:02:59,283
There’s a lot of ways that you could fix this.

41
00:02:59,283 --> 00:03:08,733
Pause the video and think of a few of how you might make this refrigerator interface better.

42
00:03:08,733 --> 00:03:11,157
Here’s a couple that I came up with:

43
00:03:11,157 --> 00:03:17,315
One is if the user believes that one dial controls the fridge and the other dial controls the freezer,

44
00:03:17,315 --> 00:03:20,163
you could have the functionality of the system work that way —

45
00:03:20,163 --> 00:03:24,111
that you’d have two blowers, one for each.

46
00:03:24,111 --> 00:03:29,122
You could also <i>simulate</i> two blowers, by having computation in the middle

47
00:03:29,122 --> 00:03:33,704
and still have the dials connected one for each of the two.

48
00:03:33,704 --> 00:03:36,619
Alternatively, if you <i>really</i> felt like it was essential

49
00:03:36,619 --> 00:03:43,142
to have the “total cold plus changing the fraction” model,

50
00:03:43,142 --> 00:03:48,102
which is probably not as good a user interface but might be needed for cost reasons,

51
00:03:48,102 --> 00:03:50,828
in that way you could think of a way to have

52
00:03:50,828 --> 00:03:58,465
a diagram or other kind of cue that would explain better what was going on rather than cryptic text.

53
00:03:58,465 --> 00:04:04,390
In all of those cases, the goal is for the user interface to beacon to the user

54
00:04:04,390 --> 00:04:10,171
what the mental model that they should think about the system with is.

55
00:04:10,171 --> 00:04:15,978
And, of course, as you interact with the system more, your model becomes more sophisticated.

56
00:04:15,978 --> 00:04:19,294
But there’s a big pitfall and a danger of being a designer:

57
00:04:19,294 --> 00:04:24,074
You’ve spent so much time with the system that you know it works under the hood

58
00:04:24,074 --> 00:04:26,987
and you how you imagine other people will think about it.

59
00:04:26,987 --> 00:04:32,559
But your expertise can be crippling: The mental model that you expect users to have —

60
00:04:32,559 --> 00:04:36,867
you expect it to be the same as yours — just often doesn’t pan out in practice.

61
00:04:36,867 --> 00:04:41,313
And that’s one of the reasons why it’s really important to get real people who are not the designers

62
00:04:41,313 --> 00:04:43,973
in front of interfaces as soon as possible —

63
00:04:43,973 --> 00:04:49,372
to help you discover those differences between your mental model and theirs.

64
00:04:49,372 --> 00:04:53,856
And the benefits of aligning the user and designer mental models are obvious:

65
00:04:53,856 --> 00:04:57,746
Because when you have this mismatch, that can often lead to slow performance,

66
00:04:57,746 --> 00:05:02,086
or errors, and frustration on the part of the user.

67
00:05:02,086 --> 00:05:06,091
Where do these mental models come from? Well, that’s a fascinating question,

68
00:05:06,091 --> 00:05:11,063
and one that deserves a longer answer than I can offer in this short video.

69
00:05:11,063 --> 00:05:14,352
But I can say a few things to get you started:

70
00:05:14,352 --> 00:05:17,821
The first is that people reason about new interfaces

71
00:05:17,821 --> 00:05:21,644
by analogy to old interfaces that they’re more familiar with.

72
00:05:21,644 --> 00:05:26,209
And when can leverage that — when you can figure out what people are familiar with —

73
00:05:26,209 --> 00:05:29,967
and use those metaphors intentionally in the construction of new interfaces,

74
00:05:29,967 --> 00:05:32,199
you’ll often be really successful.

75
00:05:32,199 --> 00:05:36,826
So, for example, if you can say that a word processor is like a typewriter,

76
00:05:36,826 --> 00:05:43,650
then people will transfer their believes and skills with the typewriter over to the new word processor.

77
00:05:43,650 --> 00:05:49,013
The models that we build that guide our action: We have about our behaviour, of other people’s,

78
00:05:49,013 --> 00:05:54,171
of objects, of software — really anything and anybody that we interact with.

79
00:05:54,171 --> 00:05:57,511
But that’s not to say that everything is tidy and organized upstairs:

80
00:05:57,511 --> 00:06:02,542
Our mental models are incomplete; they’re inconsistent; they change over time;

81
00:06:02,542 --> 00:06:05,605
and they’re often rife with superstition.

82
00:06:05,605 --> 00:06:07,861
The second thing that I’d like to talk about today

83
00:06:07,861 --> 00:06:13,173
is two important different kinds of errors that are based on the user’s mental model.

84
00:06:13,958 --> 00:06:19,159
The second thing that I’d like to do today is to distinguish two important categories of errors

85
00:06:19,159 --> 00:06:25,899
that are based on differences in what the user’s mental model is about what they believe.

86
00:06:25,899 --> 00:06:28,491
The first category is a slip.

87
00:06:28,491 --> 00:06:37,431
With a slip, you have the right model of how a system works, but you just accidentally do the wrong thing.

88
00:06:37,431 --> 00:06:47,445
So, if I go to reach for one button and press another — just by a motor error — that would be a slip..

89
00:06:47,445 --> 00:06:52,819
On the other hand, a mistake is when I do what I intend to do,

90
00:06:52,819 --> 00:06:57,290
but I have the wrong model of what I ought to do.

91
00:06:57,290 --> 00:07:02,894
So, if I’m driving, and I think that I ought to take this highway exit to get [to] where I need to go,

92
00:07:02,894 --> 00:07:09,177
and I take it exactly as I intend to, but I was wrong in my belief, that would be a mistake.

93
00:07:09,177 --> 00:07:16,109
And, as a designer, you’ll correct these two kinds of errors — or prevent them — in your design differently.

94
00:07:16,109 --> 00:07:20,982
Slips you’ll most often try to prevent by improving the ergonomics

95
00:07:20,982 --> 00:07:23,673
or visual design of the user interface —

96
00:07:23,673 --> 00:07:26,819
spread things out so it’s less likely that you’ll hit the wrong thing;

97
00:07:26,819 --> 00:07:29,020
make targets bigger.

98
00:07:29,020 --> 00:07:33,503
With mistakes, on the other hand, what you’ll need to do is [to] provide better feedback,

99
00:07:33,503 --> 00:07:36,039
or make clear what the options are.

100
00:07:36,039 --> 00:07:38,440
So, limit the number of mistakes that you [could] make.

101
00:07:38,440 --> 00:07:43,853
You’ll want to improve the user’s ability to perceive the affordances of your software:

102
00:07:43,853 --> 00:07:47,819
Make it clear to them what is possible to do.

103
00:07:47,819 --> 00:07:51,143
Here we have an interface that led to a lot of user errors.

104
00:07:51,143 --> 00:07:57,321
This is a ballot from Palm Beach County, Florida during the 2000 presidential election in the US.

105
00:07:57,321 --> 00:07:59,728
There were two major party candidates —

106
00:07:59,728 --> 00:08:04,729
the Republican candidate George Bush and the Democratic candidate Al Gore.

107
00:08:04,729 --> 00:08:08,460
Across the nation they were, overall, running neck-in-neck.

108
00:08:08,460 --> 00:08:14,224
There were also eight other candidates, to each gathered a smaller fraction of the vote.

109
00:08:14,224 --> 00:08:20,925
A user’s vote was recorded by a hole being punched out along the centreline of the ballot.

110
00:08:20,925 --> 00:08:23,805
It appears that, due to bad user interface design,

111
00:08:23,805 --> 00:08:27,340
people who intended to vote for one of the candidates, Al Gore,

112
00:08:27,340 --> 00:08:36,353
instead, accidentally pressed the hole corresponding to a different candidate, Pat Buchanan.

113
00:08:36,353 --> 00:08:41,519
While we’ll never know for sure, the data suggested that this is probably the case.

114
00:08:41,519 --> 00:08:47,067
So, the people who vvoted in Palm Beach County using this ballot style,

115
00:08:47,067 --> 00:08:52,522
about 0.85% of the votes were for Pat Buchanan.

116
00:08:52,522 --> 00:08:56,806
However, people who voted absentee, using a different style of ballot,

117
00:08:56,806 --> 00:09:00,287
had a much lower rate of votes for Pat Buchanan,

118
00:09:00,287 --> 00:09:07,502
and the reason appears to be that this hole in the middle right here was ambiguous —

119
00:09:07,502 --> 00:09:13,131
Yes, there’s an arrow pointing to it from the right, but it kind of lines up to the spot on the left.

120
00:09:13,131 --> 00:09:15,667
So, it appears that for about 0.6% of voters,

121
00:09:15,667 --> 00:09:21,845
they thought that that second hole corresponded to Al Gore rather than Pat Buchanan.

122
00:09:21,845 --> 00:09:27,089
And the question for you is: Is this a slip? or is this a mistake?

123
00:09:27,089 --> 00:09:30,201
These erroneous votes are the result of a mistake,

124
00:09:30,201 --> 00:09:34,966
because voters performed the manual operation that they intended to perform —

125
00:09:34,966 --> 00:09:37,479
punching that second hole —

126
00:09:37,479 --> 00:09:43,474
however, they had the wrong mental model about what punching that second hole meant.

127
00:09:43,474 --> 00:09:47,208
WIth better user interface design, it could have been clear

128
00:09:47,208 --> 00:09:54,340
which of these was the hole that corresponded to a Democratic candidate versus the Reform candidate.

129
00:09:54,340 --> 00:09:59,857
Another important lesson to learn from the butterfly ballot problem is that of consistency:

130
00:09:59,857 --> 00:10:07,310
Whenever we reuse designs that are already successful, we are less likely to make accidental mistakes.

131
00:10:07,310 --> 00:10:11,119
By contrast, as happens with a lot of voting systems,

132
00:10:11,119 --> 00:10:14,020
when every county makes their own voting system

133
00:10:14,020 --> 00:10:18,027
— or at least there’s broad diversity in the voting systems used —

134
00:10:18,027 --> 00:10:22,390
it’s much more likely that usability bugs will crop up.

135
00:10:22,390 --> 00:10:27,881
And so one way that we could fix this would be to have a nationwide standard voting system

136
00:10:27,881 --> 00:10:31,355
where everybody votes using the same user interface.

137
00:10:31,355 --> 00:10:38,234
One appealing option for a nationwide voting system would be to use electronic voting.

138
00:10:38,234 --> 00:10:43,021
If we were to build a better user interface for voting, what would it be?

139
00:10:43,021 --> 00:10:45,967
Well, given that we’re in a computer science class,

140
00:10:45,967 --> 00:10:51,360
one natural suggestion to offer up would be electronic voting.

141
00:10:51,360 --> 00:10:55,168
And electronic voting certainly has some very clear appeals:

142
00:10:55,171 --> 00:11:00,344
For example, it is much easier to internationalize to many different languages;

143
00:11:00,344 --> 00:11:03,578
You can have pictures of candidates to make things clear;

144
00:11:03,578 --> 00:11:07,051
You can have a touch screen so that you have direct manipulation.

145
00:11:07,051 --> 00:11:11,878
All of these are important and good advantages to electronic voting.

146
00:11:11,878 --> 00:11:15,771
However, as David Dill in the Verified Voting Foundation point[s] out,

147
00:11:15,771 --> 00:11:18,554
there’s one major problem with electronic voting:

148
00:11:18,554 --> 00:11:23,526
How do you know that the machine recorded the vote that you intended?

149
00:11:23,526 --> 00:11:28,316
And their proposed solution to this user interface problem is really clever:

150
00:11:28,316 --> 00:11:36,591
What they proposed is that the machine print out a paper receipt of the vote that you cast;

151
00:11:36,591 --> 00:11:41,925
however, you don’t get to take the receipt with you, because that would run the risk of vote-buying.

152
00:11:41,925 --> 00:11:47,309
Instead, that receipt falls behind a glass or plastic clear pane,

153
00:11:47,309 --> 00:11:52,641
and so you can see it being printed out, and you can see it go into a bin,

154
00:11:52,641 --> 00:11:55,936
and it’s stored there for the purposes of recount.

155
00:11:55,936 --> 00:12:00,986
That way, you can always manually verify the computer-generated tally.

156
00:12:00,986 --> 00:12:06,502
The butterfly ballot costs problems because the representation was really confusing —

157
00:12:06,502 --> 00:12:10,601
What lined up with what was hard to figure out.

158
00:12:10,601 --> 00:12:13,490
Here’s an example that’s much better:

159
00:12:13,490 --> 00:12:18,671
This is a seat user interface for an automobile that employs a “world in miniature” strategy.

160
00:12:18,671 --> 00:12:22,271
It offers controls for manipulating parts of the seat,

161
00:12:22,271 --> 00:12:26,125
and the interface for doing that is a miniature seat itself.

162
00:12:26,125 --> 00:12:33,229
So, if you’d like to move the headrest back, you can move the miniature headrest back.

163
00:12:33,229 --> 00:12:38,927
By having this clear mapping, users are much less likely to make errors.

164
00:12:38,927 --> 00:12:44,049
So far, we’ve seen how direct manipulation enables users to behave with much more expertise

165
00:12:44,049 --> 00:12:47,681
by leveraging familiar real-world metaphors.

166
00:12:47,681 --> 00:12:53,293
This “directness in real-world” metaphor — like “to move a slider you move a slider” —

167
00:12:53,293 --> 00:12:59,458
helps give users a good idea of how each object works and how to control it.

168
00:12:59,458 --> 00:13:05,391
And also, the interface’s physical form discloses what functionality it provides.

169
00:13:05,391 --> 00:13:08,939
So this is all great, right? Well, here’s the challenge:

170
00:13:08,939 --> 00:13:14,932
The reason that we have technology and software as opposed to the real world that we used to have

171
00:13:14,932 --> 00:13:17,728
is that we want to be able to do something new!

172
00:13:17,728 --> 00:13:21,754
So, the reason that have a digital slider as opposed to a physical slider

173
00:13:21,754 --> 00:13:27,413
is that, at least somewhere in the system, there’s some kind of new functionality being offered.

174
00:13:27,428 --> 00:13:29,592
And so, as Jonathan Grudin points out,

175
00:13:29,592 --> 00:13:33,733
if technology is providing an advantage — if there is this new functionality —

176
00:13:33,733 --> 00:13:38,509
at some point, the correspondance to the real world has to break down.

177
00:13:39,094 --> 00:13:46,222
So this gap between the new technology and the current practice is necessarily going to be there.

178
00:13:46,222 --> 00:13:51,521
But your goal, as a designer, is to minimize this distance as much as possible.

179
00:13:51,844 --> 00:13:54,333
One of my favourite examples of a user interface

180
00:13:54,333 --> 00:14:00,888
that has this property of offering new functionality but minimizing the distance to current practice

181
00:14:00,888 --> 00:14:04,101
is the system for DJ’s called “Final Scratch.”

182
00:14:04,101 --> 00:14:06,675
This is a photograph that [inaudible] Hartman took,

183
00:14:06,675 --> 00:14:11,860
and what you see here is that the DJ is operating two turntables,

184
00:14:11,860 --> 00:14:15,222
much as one would do with normal vinyl.

185
00:14:15,222 --> 00:14:21,066
The difference is that this is special vinyl: It has a code on the record,

186
00:14:21,066 --> 00:14:28,472
and that code is being used to control a Linux system that you see on the laptop off on the left.

187
00:14:28,472 --> 00:14:33,071
And so, as opposed to the record playing music that’s piped out to the speakers,

188
00:14:33,071 --> 00:14:38,553
the record plays a code to the computer, and the computer plays the music to the speakers.

189
00:14:39,553 --> 00:14:43,499
So why is this a good idea? Well, there’s a couple of reasons:

190
00:14:43,499 --> 00:14:48,479
One, it means you can play anything, not just something that’s been produced into vinyl.

191
00:14:48,479 --> 00:14:52,408
Another one is that you only have to carry two record[s], not 200.

192
00:14:52,408 --> 00:14:55,490
And, more generally, it gives you all of the benefits of digital music

193
00:14:55,490 --> 00:14:58,852
like, you can produce it in the morning and play it that evening —

194
00:14:58,852 --> 00:15:02,444
you don’t have to wait several months for production to happen.

195
00:15:02,444 --> 00:15:04,778
When used well, physical interfaces

196
00:15:04,778 --> 00:15:10,275
that leverage people’s dexterity, manual abilities, and intuitions about the physical world

197
00:15:10,275 --> 00:15:12,955
can be incredibly powerful.

198
00:15:12,955 --> 00:15:16,550
These physical interfaces can also yield an experience that’s more fun to watch,

199
00:15:16,550 --> 00:15:19,972
which, if you’re a DJ, is really important.

200
00:15:19,972 --> 00:15:22,001
And, finally, here’s some resources

201
00:15:22,001 --> 00:15:29,372
if you’d like to learn about mental models, errors, and butterfly ballots.