0:00:01.936,0:00:05.600
In this video, we are going to talk about mental models,

0:00:05.600,0:00:09.017
and the questions that we are going to tackle here are:

0:00:09.017,0:00:15.186
“What makes an interface learnable?“ and “What leads to errors that people make in user interfaces?”

0:00:15.186,0:00:19.997
And to do that, I’d again like to start with an example from the physical world.

0:00:19.997,0:00:23.582
Here we are outside the Computer Science building at Stanford.

0:00:23.582,0:00:28.010
And what I’d like to show you is an example of a user interface error.

0:00:28.010,0:00:34.131
It’s really simple one: Our department and its front door has two doors.

0:00:37.085,0:00:44.965
It both have exactly the same handle on them. However, the door on the right never actually opens.

0:00:44.965,0: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!

0:00:53.890,0:00:58.633
So why does it have the same handle as the other that does open?

0:00:58.633,0:01:03.573
And you can see right here that a whole lot of people have tried using this handle.

0:01:03.573,0:01:06.353
In fact, faculty who have been around for years

0:01:06.353,0:01:11.425
still often make the mistake of grabbing the wrong door.

0:01:11.425,0:01:14.998
This would be a whole lot better if this door had no handle here.

0:01:14.998,0:01:17.913
You could still exit — you can see this part right here —

0:01:17.913,0:01:23.255
but if want to enter, you would know where to grab and which door to use.

0:01:24.578,0:01:26.454
Let’s say you’ve got a refrigerator,

0:01:26.454,0:01:31.312
and the problem is that he freezer is too cold, but the fridge is all just right.

0:01:31.312,0:01:35.586
This refrigerator has two dials: One of them is labelled A through E,

0:01:35.586,0:01:39.082
the other is labelled with numbers, 3 through 7.

0:01:39.082,0:01:41.009
and there’s an instruction manual

0:01:41.009,0:01:45.620
that lists combinations of letters and numbers for different settings of food.

0:01:45.620,0:01:52.802
So what do we do to have the refrigerator stay the same, but the freezer to be less cold?

0:01:54.833,0:01:59.543
Well, the action is going to depend on the mental model that you have of the system:

0:01:59.543,0:02:03.222
One reasonable model that you could have is that there are two cooling units,

0:02:03.222,0:02:06.082
and there’s one dial that controls each of the units.

0:02:06.082,0:02:08.417
And, in that case, what you would want to do

0:02:08.417,0:02:13.469
is [to] figure out which of those is connected to the freezer and tweak that dial.

0:02:13.469,0:02:18.480
[It] turns out that’s not actually how it works: That there’s only one cooling unit in this refrigerator,

0:02:18.480,0:02:22.323
and then it has a splitter which controls the proportion of cold air

0:02:22.323,0:02:26.308
that goes into either the refrigerator or the freezer.

0:02:26.308,0:02:29.348
And so, if you’d like to be abe to change only one of the two chambers —

0:02:29.348,0:02:32.090
in this case: make our freezer less cold —

0:02:32.090,0:02:34.828
what you have to do is [to] move both of the dials —

0:02:34.828,0:02:38.228
dial back the total amount of coldness going into the refrigerator,

0:02:38.228,0:02:40.647
and then change the fraction

0:02:40.647,0:02:45.763
so that the fridge still gets the cold air that it needs but the freezer is getting less.

0:02:45.763,0:02:50.878
If a lot of users misunderstand the functions of these two dials and get them wrong,

0:02:50.878,0:02:55.251
then I think it’s fair to say that this is a poor user interface.

0:02:56.512,0:02:59.283
There’s a lot of ways that you could fix this.

0:02:59.283,0:03:08.733
Pause the video and think of a few of how you might make this refrigerator interface better.

0:03:08.733,0:03:11.157
Here’s a couple that I came up with:

0:03:11.157,0:03:17.315
One is if the user believes that one dial controls the fridge and the other dial controls the freezer,

0:03:17.315,0:03:20.163
you could have the functionality of the system work that way —

0:03:20.163,0:03:24.111
that you’d have two blowers, one for each.

0:03:24.111,0:03:29.122
You could also <i>simulate</i> two blowers, by having computation in the middle

0:03:29.122,0:03:33.704
and still have the dials connected one for each of the two.

0:03:33.704,0:03:36.619
Alternatively, if you <i>really</i> felt like it was essential

0:03:36.619,0:03:43.142
to have the “total cold plus changing the fraction” model,

0:03:43.142,0:03:48.102
which is probably not as good a user interface but might be needed for cost reasons,

0:03:48.102,0:03:50.828
in that way you could think of a way to have

0:03:50.828,0:03:58.465
a diagram or other kind of cue that would explain better what was going on rather than cryptic text.

0:03:58.465,0:04:04.390
In all of those cases, the goal is for the user interface to beacon to the user

0:04:04.390,0:04:10.171
what the mental model that they should think about the system with is.

0:04:10.171,0:04:15.978
And, of course, as you interact with the system more, your model becomes more sophisticated.

0:04:15.978,0:04:19.294
But there’s a big pitfall and a danger of being a designer:

0:04:19.294,0:04:24.074
You’ve spent so much time with the system that you know it works under the hood

0:04:24.074,0:04:26.987
and you how you imagine other people will think about it.

0:04:26.987,0:04:32.559
But your expertise can be crippling: The mental model that you expect users to have —

0:04:32.559,0:04:36.867
you expect it to be the same as yours — just often doesn’t pan out in practice.

0:04:36.867,0:04:41.313
And that’s one of the reasons why it’s really important to get real people who are not the designers

0:04:41.313,0:04:43.973
in front of interfaces as soon as possible —

0:04:43.973,0:04:49.372
to help you discover those differences between your mental model and theirs.

0:04:49.372,0:04:53.856
And the benefits of aligning the user and designer mental models are obvious:

0:04:53.856,0:04:57.746
Because when you have this mismatch, that can often lead to slow performance,

0:04:57.746,0:05:02.086
or errors, and frustration on the part of the user.

0:05:02.086,0:05:06.091
Where do these mental models come from? Well, that’s a fascinating question,

0:05:06.091,0:05:11.063
and one that deserves a longer answer than I can offer in this short video.

0:05:11.063,0:05:14.352
But I can say a few things to get you started:

0:05:14.352,0:05:17.821
The first is that people reason about new interfaces

0:05:17.821,0:05:21.644
by analogy to old interfaces that they’re more familiar with.

0:05:21.644,0:05:26.209
And when can leverage that — when you can figure out what people are familiar with —

0:05:26.209,0:05:29.967
and use those metaphors intentionally in the construction of new interfaces,

0:05:29.967,0:05:32.199
you’ll often be really successful.

0:05:32.199,0:05:36.826
So, for example, if you can say that a word processor is like a typewriter,

0:05:36.826,0:05:43.650
then people will transfer their believes and skills with the typewriter over to the new word processor.

0:05:43.650,0:05:49.013
The models that we build that guide our action: We have about our behaviour, of other people’s,

0:05:49.013,0:05:54.171
of objects, of software — really anything and anybody that we interact with.

0:05:54.171,0:05:57.511
But that’s not to say that everything is tidy and organized upstairs:

0:05:57.511,0:06:02.542
Our mental models are incomplete; they’re inconsistent; they change over time;

0:06:02.542,0:06:05.605
and they’re often rife with superstition.

0:06:05.605,0:06:07.861
The second thing that I’d like to talk about today

0:06:07.861,0:06:13.173
is two important different kinds of errors that are based on the user’s mental model.

0:06:13.958,0:06:19.159
The second thing that I’d like to do today is to distinguish two important categories of errors

0:06:19.159,0:06:25.899
that are based on differences in what the user’s mental model is about what they believe.

0:06:25.899,0:06:28.491
The first category is a slip.

0:06:28.491,0:06:37.431
With a slip, you have the right model of how a system works, but you just accidentally do the wrong thing.

0:06:37.431,0: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..

0:06:47.445,0:06:52.819
On the other hand, a mistake is when I do what I intend to do,

0:06:52.819,0:06:57.290
but I have the wrong model of what I ought to do.

0:06:57.290,0: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,

0:07:02.894,0:07:09.177
and I take it exactly as I intend to, but I was wrong in my belief, that would be a mistake.

0:07:09.177,0:07:16.109
And, as a designer, you’ll correct these two kinds of errors — or prevent them — in your design differently.

0:07:16.109,0:07:20.982
Slips you’ll most often try to prevent by improving the ergonomics

0:07:20.982,0:07:23.673
or visual design of the user interface —

0:07:23.673,0:07:26.819
spread things out so it’s less likely that you’ll hit the wrong thing;

0:07:26.819,0:07:29.020
make targets bigger.

0:07:29.020,0:07:33.503
With mistakes, on the other hand, what you’ll need to do is [to] provide better feedback,

0:07:33.503,0:07:36.039
or make clear what the options are.

0:07:36.039,0:07:38.440
So, limit the number of mistakes that you [could] make.

0:07:38.440,0:07:43.853
You’ll want to improve the user’s ability to perceive the affordances of your software:

0:07:43.853,0:07:47.819
Make it clear to them what is possible to do.

0:07:47.819,0:07:51.143
Here we have an interface that led to a lot of user errors.

0:07:51.143,0:07:57.321
This is a ballot from Palm Beach County, Florida during the 2000 presidential election in the US.

0:07:57.321,0:07:59.728
There were two major party candidates —

0:07:59.728,0:08:04.729
the Republican candidate George Bush and the Democratic candidate Al Gore.

0:08:04.729,0:08:08.460
Across the nation they were, overall, running neck-in-neck.

0:08:08.460,0:08:14.224
There were also eight other candidates, to each gathered a smaller fraction of the vote.

0:08:14.224,0:08:20.925
A user’s vote was recorded by a hole being punched out along the centreline of the ballot.

0:08:20.925,0:08:23.805
It appears that, due to bad user interface design,

0:08:23.805,0:08:27.340
people who intended to vote for one of the candidates, Al Gore,

0:08:27.340,0:08:36.353
instead, accidentally pressed the hole corresponding to a different candidate, Pat Buchanan.

0:08:36.353,0:08:41.519
While we’ll never know for sure, the data suggested that this is probably the case.

0:08:41.519,0:08:47.067
So, the people who vvoted in Palm Beach County using this ballot style,

0:08:47.067,0:08:52.522
about 0.85% of the votes were for Pat Buchanan.

0:08:52.522,0:08:56.806
However, people who voted absentee, using a different style of ballot,

0:08:56.806,0:09:00.287
had a much lower rate of votes for Pat Buchanan,

0:09:00.287,0:09:07.502
and the reason appears to be that this hole in the middle right here was ambiguous —

0:09:07.502,0: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.

0:09:13.131,0:09:15.667
So, it appears that for about 0.6% of voters,

0:09:15.667,0:09:21.845
they thought that that second hole corresponded to Al Gore rather than Pat Buchanan.

0:09:21.845,0:09:27.089
And the question for you is: Is this a slip? or is this a mistake?

0:09:27.089,0:09:30.201
These erroneous votes are the result of a mistake,

0:09:30.201,0:09:34.966
because voters performed the manual operation that they intended to perform —

0:09:34.966,0:09:37.479
punching that second hole —

0:09:37.479,0:09:43.474
however, they had the wrong mental model about what punching that second hole meant.

0:09:43.474,0:09:47.208
WIth better user interface design, it could have been clear

0:09:47.208,0:09:54.340
which of these was the hole that corresponded to a Democratic candidate versus the Reform candidate.

0:09:54.340,0:09:59.857
Another important lesson to learn from the butterfly ballot problem is that of consistency:

0:09:59.857,0:10:07.310
Whenever we reuse designs that are already successful, we are less likely to make accidental mistakes.

0:10:07.310,0:10:11.119
By contrast, as happens with a lot of voting systems,

0:10:11.119,0:10:14.020
when every county makes their own voting system

0:10:14.020,0:10:18.027
— or at least there’s broad diversity in the voting systems used —

0:10:18.027,0:10:22.390
it’s much more likely that usability bugs will crop up.

0:10:22.390,0:10:27.881
And so one way that we could fix this would be to have a nationwide standard voting system

0:10:27.881,0:10:31.355
where everybody votes using the same user interface.

0:10:31.355,0:10:38.234
One appealing option for a nationwide voting system would be to use electronic voting.

0:10:38.234,0:10:43.021
If we were to build a better user interface for voting, what would it be?

0:10:43.021,0:10:45.967
Well, given that we’re in a computer science class,

0:10:45.967,0:10:51.360
one natural suggestion to offer up would be electronic voting.

0:10:51.360,0:10:55.168
And electronic voting certainly has some very clear appeals:

0:10:55.171,0:11:00.344
For example, it is much easier to internationalize to many different languages;

0:11:00.344,0:11:03.578
You can have pictures of candidates to make things clear;

0:11:03.578,0:11:07.051
You can have a touch screen so that you have direct manipulation.

0:11:07.051,0:11:11.878
All of these are important and good advantages to electronic voting.

0:11:11.878,0:11:15.771
However, as David Dill in the Verified Voting Foundation point[s] out,

0:11:15.771,0:11:18.554
there’s one major problem with electronic voting:

0:11:18.554,0:11:23.526
How do you know that the machine recorded the vote that you intended?

0:11:23.526,0:11:28.316
And their proposed solution to this user interface problem is really clever:

0:11:28.316,0:11:36.591
What they proposed is that the machine print out a paper receipt of the vote that you cast;

0:11:36.591,0:11:41.925
however, you don’t get to take the receipt with you, because that would run the risk of vote-buying.

0:11:41.925,0:11:47.309
Instead, that receipt falls behind a glass or plastic clear pane,

0:11:47.309,0:11:52.641
and so you can see it being printed out, and you can see it go into a bin,

0:11:52.641,0:11:55.936
and it’s stored there for the purposes of recount.

0:11:55.936,0:12:00.986
That way, you can always manually verify the computer-generated tally.

0:12:00.986,0:12:06.502
The butterfly ballot costs problems because the representation was really confusing —

0:12:06.502,0:12:10.601
What lined up with what was hard to figure out.

0:12:10.601,0:12:13.490
Here’s an example that’s much better:

0:12:13.490,0:12:18.671
This is a seat user interface for an automobile that employs a “world in miniature” strategy.

0:12:18.671,0:12:22.271
It offers controls for manipulating parts of the seat,

0:12:22.271,0:12:26.125
and the interface for doing that is a miniature seat itself.

0:12:26.125,0:12:33.229
So, if you’d like to move the headrest back, you can move the miniature headrest back.

0:12:33.229,0:12:38.927
By having this clear mapping, users are much less likely to make errors.

0:12:38.927,0:12:44.049
So far, we’ve seen how direct manipulation enables users to behave with much more expertise

0:12:44.049,0:12:47.681
by leveraging familiar real-world metaphors.

0:12:47.681,0:12:53.293
This “directness in real-world” metaphor — like “to move a slider you move a slider” —

0:12:53.293,0:12:59.458
helps give users a good idea of how each object works and how to control it.

0:12:59.458,0:13:05.391
And also, the interface’s physical form discloses what functionality it provides.

0:13:05.391,0:13:08.939
So this is all great, right? Well, here’s the challenge:

0:13:08.939,0:13:14.932
The reason that we have technology and software as opposed to the real world that we used to have

0:13:14.932,0:13:17.728
is that we want to be able to do something new!

0:13:17.728,0:13:21.754
So, the reason that have a digital slider as opposed to a physical slider

0:13:21.754,0:13:27.413
is that, at least somewhere in the system, there’s some kind of new functionality being offered.

0:13:27.428,0:13:29.592
And so, as Jonathan Grudin points out,

0:13:29.592,0:13:33.733
if technology is providing an advantage — if there is this new functionality —

0:13:33.733,0:13:38.509
at some point, the correspondance to the real world has to break down.

0:13:39.094,0:13:46.222
So this gap between the new technology and the current practice is necessarily going to be there.

0:13:46.222,0:13:51.521
But your goal, as a designer, is to minimize this distance as much as possible.

0:13:51.844,0:13:54.333
One of my favourite examples of a user interface

0:13:54.333,0:14:00.888
that has this property of offering new functionality but minimizing the distance to current practice

0:14:00.888,0:14:04.101
is the system for DJ’s called “Final Scratch.”

0:14:04.101,0:14:06.675
This is a photograph that [inaudible] Hartman took,

0:14:06.675,0:14:11.860
and what you see here is that the DJ is operating two turntables,

0:14:11.860,0:14:15.222
much as one would do with normal vinyl.

0:14:15.222,0:14:21.066
The difference is that this is special vinyl: It has a code on the record,

0:14:21.066,0:14:28.472
and that code is being used to control a Linux system that you see on the laptop off on the left.

0:14:28.472,0:14:33.071
And so, as opposed to the record playing music that’s piped out to the speakers,

0:14:33.071,0:14:38.553
the record plays a code to the computer, and the computer plays the music to the speakers.

0:14:39.553,0:14:43.499
So why is this a good idea? Well, there’s a couple of reasons:

0:14:43.499,0:14:48.479
One, it means you can play anything, not just something that’s been produced into vinyl.

0:14:48.479,0:14:52.408
Another one is that you only have to carry two record[s], not 200.

0:14:52.408,0:14:55.490
And, more generally, it gives you all of the benefits of digital music

0:14:55.490,0:14:58.852
like, you can produce it in the morning and play it that evening —

0:14:58.852,0:15:02.444
you don’t have to wait several months for production to happen.

0:15:02.444,0:15:04.778
When used well, physical interfaces

0:15:04.778,0:15:10.275
that leverage people’s dexterity, manual abilities, and intuitions about the physical world

0:15:10.275,0:15:12.955
can be incredibly powerful.

0:15:12.955,0:15:16.550
These physical interfaces can also yield an experience that’s more fun to watch,

0:15:16.550,0:15:19.972
which, if you’re a DJ, is really important.

0:15:19.972,0:15:22.001
And, finally, here’s some resources

0:15:22.001,0:15:29.372
if you’d like to learn about mental models, errors, and butterfly ballots.