What makes an interface intuitive? How can I tell whether one design works better than another? This course will teach you fundamental principles of design and how to effectively evaluate your work with users. You'll learn fundamental principles of visual design so that you can effectively organize and present information with your interfaces. You'll learn principles of perception and cognition that inform effective interaction design. And you'll learn how to perform and analyze controlled experiments online. In many cases, we'll use Web design as the anchoring domain. A lot of the examples will come from the Web, and we'll talk just a bit about Web technologies in particular. When we do so, it will be to support the main goal of this course, which is helping you build human-centered design skills, so that you have the principles and methods to create excellent interfaces with any technology.
Mental Models
Loading...
Del curso dictado por University of California San Diego
Design Principles: an Introduction
1023 calificaciones
University of California San Diego
1023 calificaciones
Curso 2 de 8 en SpecializationInteraction Design
De la lección
Direct Manipulation and Representations
Our lecture videos this module begin with the major innovation of the graphical interface: enabling people to perform input directly on top of output. This directness makes interfaces easier to learn because it enables people to recognize familiar elements. And continuous feedback makes interfaces easier to use, encourages exploration, and prevents errors. To illustrate the benefits of direct manipulation in real interfaces, the videos provide several examples of both particular designs and interface styles. I find that's a lot more useful than just stating abstract principles. Now is a good time to remind everyone that I am not endorsing (or rejecting) any particular product, organization, or person. What I am doing: real people in the real world make real design decisions -- you can learn from this -- and in this course I'll discuss these concrete examples so you can gain real knowledge. The rest of the videos will cover topics related to the importance of representations, such as understanding a user's mental model and helping people to distribute cognition. I will show some examples of how representational differences can impact performance. As you watch these videos, think about how you have arranged or lamented representations in your everyday life. Maybe you put your keys by the door, sunglasses on your hat, or a post-it on your laptop? You'll get a chance to delve into these examples in the assignment.
Conoce a los instructores
Scott KlemmerProfessor
Cognitive Science & Computer Science
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.
Explora nuestro catálogo
Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.
Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.
© 2019 Coursera Inc. Todos los derechos reservados.
