In this video, we are going to talk about mental models,

and the questions that we are going to tackle here are:

“What makes an interface learnable?“ and “What leads to errors that people make in user interfaces?”

And to do that, I’d again like to start with an example from the physical world.

Here we are outside the Computer Science building at Stanford.

And what I’d like to show you is an example of a user interface error.

It’s really simple one: Our department and its front door has two doors.

It both have exactly the same handle on them. However, the door on the right never actually opens.

So, if I go to use this door right here, 24-hours-a-day 7-days-a-week it never works — it’s locked!

So why does it have the same handle as the other that does open?

And you can see right here that a whole lot of people have tried using this handle.

In fact, faculty who have been around for years

still often make the mistake of grabbing the wrong door.

This would be a whole lot better if this door had no handle here.

You could still exit — you can see this part right here —

but if want to enter, you would know where to grab and which door to use.

Let’s say you’ve got a refrigerator,

and the problem is that he freezer is too cold, but the fridge is all just right.

This refrigerator has two dials: One of them is labelled A through E,

the other is labelled with numbers, 3 through 7.

and there’s an instruction manual

that lists combinations of letters and numbers for different settings of food.

So what do we do to have the refrigerator stay the same, but the freezer to be less cold?

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

One reasonable model that you could have is that there are two cooling units,

and there’s one dial that controls each of the units.

And, in that case, what you would want to do

is [to] figure out which of those is connected to the freezer and tweak that dial.

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

and then it has a splitter which controls the proportion of cold air

that goes into either the refrigerator or the freezer.

And so, if you’d like to be abe to change only one of the two chambers —

in this case: make our freezer less cold —

what you have to do is [to] move both of the dials —

dial back the total amount of coldness going into the refrigerator,

and then change the fraction

so that the fridge still gets the cold air that it needs but the freezer is getting less.

If a lot of users misunderstand the functions of these two dials and get them wrong,

then I think it’s fair to say that this is a poor user interface.

There’s a lot of ways that you could fix this.

Pause the video and think of a few of how you might make this refrigerator interface better.

Here’s a couple that I came up with:

One is if the user believes that one dial controls the fridge and the other dial controls the freezer,

you could have the functionality of the system work that way —

that you’d have two blowers, one for each.

You could also <i>simulate</i> two blowers, by having computation in the middle

and still have the dials connected one for each of the two.

Alternatively, if you <i>really</i> felt like it was essential

to have the “total cold plus changing the fraction” model,

which is probably not as good a user interface but might be needed for cost reasons,

in that way you could think of a way to have

a diagram or other kind of cue that would explain better what was going on rather than cryptic text.

In all of those cases, the goal is for the user interface to beacon to the user

what the mental model that they should think about the system with is.

And, of course, as you interact with the system more, your model becomes more sophisticated.

But there’s a big pitfall and a danger of being a designer:

You’ve spent so much time with the system that you know it works under the hood

and you how you imagine other people will think about it.

But your expertise can be crippling: The mental model that you expect users to have —

you expect it to be the same as yours — just often doesn’t pan out in practice.

And that’s one of the reasons why it’s really important to get real people who are not the designers

in front of interfaces as soon as possible —

to help you discover those differences between your mental model and theirs.

And the benefits of aligning the user and designer mental models are obvious:

Because when you have this mismatch, that can often lead to slow performance,

or errors, and frustration on the part of the user.

Where do these mental models come from? Well, that’s a fascinating question,

and one that deserves a longer answer than I can offer in this short video.

But I can say a few things to get you started:

The first is that people reason about new interfaces

by analogy to old interfaces that they’re more familiar with.

And when can leverage that — when you can figure out what people are familiar with —

and use those metaphors intentionally in the construction of new interfaces,

you’ll often be really successful.

So, for example, if you can say that a word processor is like a typewriter,

then people will transfer their believes and skills with the typewriter over to the new word processor.

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

of objects, of software — really anything and anybody that we interact with.

But that’s not to say that everything is tidy and organized upstairs:

Our mental models are incomplete; they’re inconsistent; they change over time;

and they’re often rife with superstition.

The second thing that I’d like to talk about today

is two important different kinds of errors that are based on the user’s mental model.

The second thing that I’d like to do today is to distinguish two important categories of errors

that are based on differences in what the user’s mental model is about what they believe.

The first category is a slip.

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

So, if I go to reach for one button and press another — just by a motor error — that would be a slip..

On the other hand, a mistake is when I do what I intend to do,

but I have the wrong model of what I ought to do.

So, if I’m driving, and I think that I ought to take this highway exit to get [to] where I need to go,

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

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

Slips you’ll most often try to prevent by improving the ergonomics

or visual design of the user interface —

spread things out so it’s less likely that you’ll hit the wrong thing;

make targets bigger.

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

or make clear what the options are.

So, limit the number of mistakes that you [could] make.

You’ll want to improve the user’s ability to perceive the affordances of your software:

Make it clear to them what is possible to do.

Here we have an interface that led to a lot of user errors.

This is a ballot from Palm Beach County, Florida during the 2000 presidential election in the US.

There were two major party candidates —

the Republican candidate George Bush and the Democratic candidate Al Gore.

Across the nation they were, overall, running neck-in-neck.

There were also eight other candidates, to each gathered a smaller fraction of the vote.

A user’s vote was recorded by a hole being punched out along the centreline of the ballot.

It appears that, due to bad user interface design,

people who intended to vote for one of the candidates, Al Gore,

instead, accidentally pressed the hole corresponding to a different candidate, Pat Buchanan.

While we’ll never know for sure, the data suggested that this is probably the case.

So, the people who vvoted in Palm Beach County using this ballot style,

about 0.85% of the votes were for Pat Buchanan.

However, people who voted absentee, using a different style of ballot,

had a much lower rate of votes for Pat Buchanan,

and the reason appears to be that this hole in the middle right here was ambiguous —

Yes, there’s an arrow pointing to it from the right, but it kind of lines up to the spot on the left.

So, it appears that for about 0.6% of voters,

they thought that that second hole corresponded to Al Gore rather than Pat Buchanan.

And the question for you is: Is this a slip? or is this a mistake?

These erroneous votes are the result of a mistake,

because voters performed the manual operation that they intended to perform —

punching that second hole —

however, they had the wrong mental model about what punching that second hole meant.

WIth better user interface design, it could have been clear

which of these was the hole that corresponded to a Democratic candidate versus the Reform candidate.

Another important lesson to learn from the butterfly ballot problem is that of consistency:

Whenever we reuse designs that are already successful, we are less likely to make accidental mistakes.

By contrast, as happens with a lot of voting systems,

when every county makes their own voting system

— or at least there’s broad diversity in the voting systems used —

it’s much more likely that usability bugs will crop up.

And so one way that we could fix this would be to have a nationwide standard voting system

where everybody votes using the same user interface.

One appealing option for a nationwide voting system would be to use electronic voting.

If we were to build a better user interface for voting, what would it be?

Well, given that we’re in a computer science class,

one natural suggestion to offer up would be electronic voting.

And electronic voting certainly has some very clear appeals:

For example, it is much easier to internationalize to many different languages;

You can have pictures of candidates to make things clear;

You can have a touch screen so that you have direct manipulation.

All of these are important and good advantages to electronic voting.

However, as David Dill in the Verified Voting Foundation point[s] out,

there’s one major problem with electronic voting:

How do you know that the machine recorded the vote that you intended?

And their proposed solution to this user interface problem is really clever:

What they proposed is that the machine print out a paper receipt of the vote that you cast;

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

Instead, that receipt falls behind a glass or plastic clear pane,

and so you can see it being printed out, and you can see it go into a bin,

and it’s stored there for the purposes of recount.

That way, you can always manually verify the computer-generated tally.

The butterfly ballot costs problems because the representation was really confusing —

What lined up with what was hard to figure out.

Here’s an example that’s much better:

This is a seat user interface for an automobile that employs a “world in miniature” strategy.

It offers controls for manipulating parts of the seat,

and the interface for doing that is a miniature seat itself.

So, if you’d like to move the headrest back, you can move the miniature headrest back.

By having this clear mapping, users are much less likely to make errors.

So far, we’ve seen how direct manipulation enables users to behave with much more expertise

by leveraging familiar real-world metaphors.

This “directness in real-world” metaphor — like “to move a slider you move a slider” —

helps give users a good idea of how each object works and how to control it.

And also, the interface’s physical form discloses what functionality it provides.

So this is all great, right? Well, here’s the challenge:

The reason that we have technology and software as opposed to the real world that we used to have

is that we want to be able to do something new!

So, the reason that have a digital slider as opposed to a physical slider

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

And so, as Jonathan Grudin points out,

if technology is providing an advantage — if there is this new functionality —

at some point, the correspondance to the real world has to break down.

So this gap between the new technology and the current practice is necessarily going to be there.

But your goal, as a designer, is to minimize this distance as much as possible.

One of my favourite examples of a user interface

that has this property of offering new functionality but minimizing the distance to current practice

is the system for DJ’s called “Final Scratch.”

This is a photograph that [inaudible] Hartman took,

and what you see here is that the DJ is operating two turntables,

much as one would do with normal vinyl.

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

and that code is being used to control a Linux system that you see on the laptop off on the left.

And so, as opposed to the record playing music that’s piped out to the speakers,

the record plays a code to the computer, and the computer plays the music to the speakers.

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

One, it means you can play anything, not just something that’s been produced into vinyl.

Another one is that you only have to carry two record[s], not 200.

And, more generally, it gives you all of the benefits of digital music

like, you can produce it in the morning and play it that evening —

you don’t have to wait several months for production to happen.

When used well, physical interfaces

that leverage people’s dexterity, manual abilities, and intuitions about the physical world

can be incredibly powerful.

These physical interfaces can also yield an experience that’s more fun to watch,

which, if you’re a DJ, is really important.

And, finally, here’s some resources

if you’d like to learn about mental models, errors, and butterfly ballots.