Return to Video

Lecture 4.2: Mental Models (15:28)

  • 0:02 - 0:06
    In this video, we are going to talk about mental models,
  • 0:06 - 0:09
    and the questions that we are going to tackle here are:
  • 0:09 - 0:15
    “What makes an interface learnable?“ and “What leads to errors that people make in user interfaces?”
  • 0:15 - 0:20
    And to do that, I’d again like to start with an example from the physical world.
  • 0:20 - 0:24
    Here we are outside the Computer Science building at Stanford.
  • 0:24 - 0:28
    And what I’d like to show you is an example of a user interface error.
  • 0:28 - 0:34
    It’s really simple one: Our department and its front door has two doors.
  • 0:37 - 0:45
    It both have exactly the same handle on them. However, the door on the right never actually opens.
  • 0:45 - 0:54
    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:54 - 0:59
    So why does it have the same handle as the other that does open?
  • 0:59 - 1:04
    And you can see right here that a whole lot of people have tried using this handle.
  • 1:04 - 1:06
    In fact, faculty who have been around for years
  • 1:06 - 1:11
    still often make the mistake of grabbing the wrong door.
  • 1:11 - 1:15
    This would be a whole lot better if this door had no handle here.
  • 1:15 - 1:18
    You could still exit — you can see this part right here —
  • 1:18 - 1:23
    but if want to enter, you would know where to grab and which door to use.
  • 1:25 - 1:26
    Let’s say you’ve got a refrigerator,
  • 1:26 - 1:31
    and the problem is that he freezer is too cold, but the fridge is all just right.
  • 1:31 - 1:36
    This refrigerator has two dials: One of them is labelled A through E,
  • 1:36 - 1:39
    the other is labelled with numbers, 3 through 7.
  • 1:39 - 1:41
    and there’s an instruction manual
  • 1:41 - 1:46
    that lists combinations of letters and numbers for different settings of food.
  • 1:46 - 1:53
    So what do we do to have the refrigerator stay the same, but the freezer to be less cold?
  • 1:55 - 2:00
    Well, the action is going to depend on the mental model that you have of the system:
  • 2:00 - 2:03
    One reasonable model that you could have is that there are two cooling units,
  • 2:03 - 2:06
    and there’s one dial that controls each of the units.
  • 2:06 - 2:08
    And, in that case, what you would want to do
  • 2:08 - 2:13
    is [to] figure out which of those is connected to the freezer and tweak that dial.
  • 2:13 - 2:18
    [It] turns out that’s not actually how it works: That there’s only one cooling unit in this refrigerator,
  • 2:18 - 2:22
    and then it has a splitter which controls the proportion of cold air
  • 2:22 - 2:26
    that goes into either the refrigerator or the freezer.
  • 2:26 - 2:29
    And so, if you’d like to be abe to change only one of the two chambers —
  • 2:29 - 2:32
    in this case: make our freezer less cold —
  • 2:32 - 2:35
    what you have to do is [to] move both of the dials —
  • 2:35 - 2:38
    dial back the total amount of coldness going into the refrigerator,
  • 2:38 - 2:41
    and then change the fraction
  • 2:41 - 2:46
    so that the fridge still gets the cold air that it needs but the freezer is getting less.
  • 2:46 - 2:51
    If a lot of users misunderstand the functions of these two dials and get them wrong,
  • 2:51 - 2:55
    then I think it’s fair to say that this is a poor user interface.
  • 2:57 - 2:59
    There’s a lot of ways that you could fix this.
  • 2:59 - 3:09
    Pause the video and think of a few of how you might make this refrigerator interface better.
  • 3:09 - 3:11
    Here’s a couple that I came up with:
  • 3:11 - 3:17
    One is if the user believes that one dial controls the fridge and the other dial controls the freezer,
  • 3:17 - 3:20
    you could have the functionality of the system work that way —
  • 3:20 - 3:24
    that you’d have two blowers, one for each.
  • 3:24 - 3:29
    You could also simulate two blowers, by having computation in the middle
  • 3:29 - 3:34
    and still have the dials connected one for each of the two.
  • 3:34 - 3:37
    Alternatively, if you really felt like it was essential
  • 3:37 - 3:43
    to have the “total cold plus changing the fraction” model,
  • 3:43 - 3:48
    which is probably not as good a user interface but might be needed for cost reasons,
  • 3:48 - 3:51
    in that way you could think of a way to have
  • 3:51 - 3:58
    a diagram or other kind of cue that would explain better what was going on rather than cryptic text.
  • 3:58 - 4:04
    In all of those cases, the goal is for the user interface to beacon to the user
  • 4:04 - 4:10
    what the mental model that they should think about the system with is.
  • 4:10 - 4:16
    And, of course, as you interact with the system more, your model becomes more sophisticated.
  • 4:16 - 4:19
    But there’s a big pitfall and a danger of being a designer:
  • 4:19 - 4:24
    You’ve spent so much time with the system that you know it works under the hood
  • 4:24 - 4:27
    and you how you imagine other people will think about it.
  • 4:27 - 4:33
    But your expertise can be crippling: The mental model that you expect users to have —
  • 4:33 - 4:37
    you expect it to be the same as yours — just often doesn’t pan out in practice.
  • 4:37 - 4:41
    And that’s one of the reasons why it’s really important to get real people who are not the designers
  • 4:41 - 4:44
    in front of interfaces as soon as possible —
  • 4:44 - 4:49
    to help you discover those differences between your mental model and theirs.
  • 4:49 - 4:54
    And the benefits of aligning the user and designer mental models are obvious:
  • 4:54 - 4:58
    Because when you have this mismatch, that can often lead to slow performance,
  • 4:58 - 5:02
    or errors, and frustration on the part of the user.
  • 5:02 - 5:06
    Where do these mental models come from? Well, that’s a fascinating question,
  • 5:06 - 5:11
    and one that deserves a longer answer than I can offer in this short video.
  • 5:11 - 5:14
    But I can say a few things to get you started:
  • 5:14 - 5:18
    The first is that people reason about new interfaces
  • 5:18 - 5:22
    by analogy to old interfaces that they’re more familiar with.
  • 5:22 - 5:26
    And when can leverage that — when you can figure out what people are familiar with —
  • 5:26 - 5:30
    and use those metaphors intentionally in the construction of new interfaces,
  • 5:30 - 5:32
    you’ll often be really successful.
  • 5:32 - 5:37
    So, for example, if you can say that a word processor is like a typewriter,
  • 5:37 - 5:44
    then people will transfer their believes and skills with the typewriter over to the new word processor.
  • 5:44 - 5:49
    The models that we build that guide our action: We have about our behaviour, of other people’s,
  • 5:49 - 5:54
    of objects, of software — really anything and anybody that we interact with.
  • 5:54 - 5:58
    But that’s not to say that everything is tidy and organized upstairs:
  • 5:58 - 6:03
    Our mental models are incomplete; they’re inconsistent; they change over time;
  • 6:03 - 6:06
    and they’re often rife with superstition.
  • 6:06 - 6:08
    The second thing that I’d like to talk about today
  • 6:08 - 6:13
    is two important different kinds of errors that are based on the user’s mental model.
  • 6:14 - 6:19
    The second thing that I’d like to do today is to distinguish two important categories of errors
  • 6:19 - 6:26
    that are based on differences in what the user’s mental model is about what they believe.
  • 6:26 - 6:28
    The first category is a slip.
  • 6:28 - 6:37
    With a slip, you have the right model of how a system works, but you just accidentally do the wrong thing.
  • 6:37 - 6:47
    So, if I go to reach for one button and press another — just by a motor error — that would be a slip..
  • 6:47 - 6:53
    On the other hand, a mistake is when I do what I intend to do,
  • 6:53 - 6:57
    but I have the wrong model of what I ought to do.
  • 6:57 - 7:03
    So, if I’m driving, and I think that I ought to take this highway exit to get [to] where I need to go,
  • 7:03 - 7:09
    and I take it exactly as I intend to, but I was wrong in my belief, that would be a mistake.
  • 7:09 - 7:16
    And, as a designer, you’ll correct these two kinds of errors — or prevent them — in your design differently.
  • 7:16 - 7:21
    Slips you’ll most often try to prevent by improving the ergonomics
  • 7:21 - 7:24
    or visual design of the user interface —
  • 7:24 - 7:27
    spread things out so it’s less likely that you’ll hit the wrong thing;
  • 7:27 - 7:29
    make targets bigger.
  • 7:29 - 7:34
    With mistakes, on the other hand, what you’ll need to do is [to] provide better feedback,
  • 7:34 - 7:36
    or make clear what the options are.
  • 7:36 - 7:38
    So, limit the number of mistakes that you [could] make.
  • 7:38 - 7:44
    You’ll want to improve the user’s ability to perceive the affordances of your software:
  • 7:44 - 7:48
    Make it clear to them what is possible to do.
  • 7:48 - 7:51
    Here we have an interface that led to a lot of user errors.
  • 7:51 - 7:57
    This is a ballot from Palm Beach County, Florida during the 2000 presidential election in the US.
  • 7:57 - 8:00
    There were two major party candidates —
  • 8:00 - 8:05
    the Republican candidate George Bush and the Democratic candidate Al Gore.
  • 8:05 - 8:08
    Across the nation they were, overall, running neck-in-neck.
  • 8:08 - 8:14
    There were also eight other candidates, to each gathered a smaller fraction of the vote.
  • 8:14 - 8:21
    A user’s vote was recorded by a hole being punched out along the centreline of the ballot.
  • 8:21 - 8:24
    It appears that, due to bad user interface design,
  • 8:24 - 8:27
    people who intended to vote for one of the candidates, Al Gore,
  • 8:27 - 8:36
    instead, accidentally pressed the hole corresponding to a different candidate, Pat Buchanan.
  • 8:36 - 8:42
    While we’ll never know for sure, the data suggested that this is probably the case.
  • 8:42 - 8:47
    So, the people who vvoted in Palm Beach County using this ballot style,
  • 8:47 - 8:53
    about 0.85% of the votes were for Pat Buchanan.
  • 8:53 - 8:57
    However, people who voted absentee, using a different style of ballot,
  • 8:57 - 9:00
    had a much lower rate of votes for Pat Buchanan,
  • 9:00 - 9:08
    and the reason appears to be that this hole in the middle right here was ambiguous —
  • 9:08 - 9:13
    Yes, there’s an arrow pointing to it from the right, but it kind of lines up to the spot on the left.
  • 9:13 - 9:16
    So, it appears that for about 0.6% of voters,
  • 9:16 - 9:22
    they thought that that second hole corresponded to Al Gore rather than Pat Buchanan.
  • 9:22 - 9:27
    And the question for you is: Is this a slip? or is this a mistake?
  • 9:27 - 9:30
    These erroneous votes are the result of a mistake,
  • 9:30 - 9:35
    because voters performed the manual operation that they intended to perform —
  • 9:35 - 9:37
    punching that second hole —
  • 9:37 - 9:43
    however, they had the wrong mental model about what punching that second hole meant.
  • 9:43 - 9:47
    WIth better user interface design, it could have been clear
  • 9:47 - 9:54
    which of these was the hole that corresponded to a Democratic candidate versus the Reform candidate.
  • 9:54 - 10:00
    Another important lesson to learn from the butterfly ballot problem is that of consistency:
  • 10:00 - 10:07
    Whenever we reuse designs that are already successful, we are less likely to make accidental mistakes.
  • 10:07 - 10:11
    By contrast, as happens with a lot of voting systems,
  • 10:11 - 10:14
    when every county makes their own voting system
  • 10:14 - 10:18
    — or at least there’s broad diversity in the voting systems used —
  • 10:18 - 10:22
    it’s much more likely that usability bugs will crop up.
  • 10:22 - 10:28
    And so one way that we could fix this would be to have a nationwide standard voting system
  • 10:28 - 10:31
    where everybody votes using the same user interface.
  • 10:31 - 10:38
    One appealing option for a nationwide voting system would be to use electronic voting.
  • 10:38 - 10:43
    If we were to build a better user interface for voting, what would it be?
  • 10:43 - 10:46
    Well, given that we’re in a computer science class,
  • 10:46 - 10:51
    one natural suggestion to offer up would be electronic voting.
  • 10:51 - 10:55
    And electronic voting certainly has some very clear appeals:
  • 10:55 - 11:00
    For example, it is much easier to internationalize to many different languages;
  • 11:00 - 11:04
    You can have pictures of candidates to make things clear;
  • 11:04 - 11:07
    You can have a touch screen so that you have direct manipulation.
  • 11:07 - 11:12
    All of these are important and good advantages to electronic voting.
  • 11:12 - 11:16
    However, as David Dill in the Verified Voting Foundation point[s] out,
  • 11:16 - 11:19
    there’s one major problem with electronic voting:
  • 11:19 - 11:24
    How do you know that the machine recorded the vote that you intended?
  • 11:24 - 11:28
    And their proposed solution to this user interface problem is really clever:
  • 11:28 - 11:37
    What they proposed is that the machine print out a paper receipt of the vote that you cast;
  • 11:37 - 11:42
    however, you don’t get to take the receipt with you, because that would run the risk of vote-buying.
  • 11:42 - 11:47
    Instead, that receipt falls behind a glass or plastic clear pane,
  • 11:47 - 11:53
    and so you can see it being printed out, and you can see it go into a bin,
  • 11:53 - 11:56
    and it’s stored there for the purposes of recount.
  • 11:56 - 12:01
    That way, you can always manually verify the computer-generated tally.
  • 12:01 - 12:07
    The butterfly ballot costs problems because the representation was really confusing —
  • 12:07 - 12:11
    What lined up with what was hard to figure out.
  • 12:11 - 12:13
    Here’s an example that’s much better:
  • 12:13 - 12:19
    This is a seat user interface for an automobile that employs a “world in miniature” strategy.
  • 12:19 - 12:22
    It offers controls for manipulating parts of the seat,
  • 12:22 - 12:26
    and the interface for doing that is a miniature seat itself.
  • 12:26 - 12:33
    So, if you’d like to move the headrest back, you can move the miniature headrest back.
  • 12:33 - 12:39
    By having this clear mapping, users are much less likely to make errors.
  • 12:39 - 12:44
    So far, we’ve seen how direct manipulation enables users to behave with much more expertise
  • 12:44 - 12:48
    by leveraging familiar real-world metaphors.
  • 12:48 - 12:53
    This “directness in real-world” metaphor — like “to move a slider you move a slider” —
  • 12:53 - 12:59
    helps give users a good idea of how each object works and how to control it.
  • 12:59 - 13:05
    And also, the interface’s physical form discloses what functionality it provides.
  • 13:05 - 13:09
    So this is all great, right? Well, here’s the challenge:
  • 13:09 - 13:15
    The reason that we have technology and software as opposed to the real world that we used to have
  • 13:15 - 13:18
    is that we want to be able to do something new!
  • 13:18 - 13:22
    So, the reason that have a digital slider as opposed to a physical slider
  • 13:22 - 13:27
    is that, at least somewhere in the system, there’s some kind of new functionality being offered.
  • 13:27 - 13:30
    And so, as Jonathan Grudin points out,
  • 13:30 - 13:34
    if technology is providing an advantage — if there is this new functionality —
  • 13:34 - 13:39
    at some point, the correspondance to the real world has to break down.
  • 13:39 - 13:46
    So this gap between the new technology and the current practice is necessarily going to be there.
  • 13:46 - 13:52
    But your goal, as a designer, is to minimize this distance as much as possible.
  • 13:52 - 13:54
    One of my favourite examples of a user interface
  • 13:54 - 14:01
    that has this property of offering new functionality but minimizing the distance to current practice
  • 14:01 - 14:04
    is the system for DJ’s called “Final Scratch.”
  • 14:04 - 14:07
    This is a photograph that [inaudible] Hartman took,
  • 14:07 - 14:12
    and what you see here is that the DJ is operating two turntables,
  • 14:12 - 14:15
    much as one would do with normal vinyl.
  • 14:15 - 14:21
    The difference is that this is special vinyl: It has a code on the record,
  • 14:21 - 14:28
    and that code is being used to control a Linux system that you see on the laptop off on the left.
  • 14:28 - 14:33
    And so, as opposed to the record playing music that’s piped out to the speakers,
  • 14:33 - 14:39
    the record plays a code to the computer, and the computer plays the music to the speakers.
  • 14:40 - 14:43
    So why is this a good idea? Well, there’s a couple of reasons:
  • 14:43 - 14:48
    One, it means you can play anything, not just something that’s been produced into vinyl.
  • 14:48 - 14:52
    Another one is that you only have to carry two record[s], not 200.
  • 14:52 - 14:55
    And, more generally, it gives you all of the benefits of digital music
  • 14:55 - 14:59
    like, you can produce it in the morning and play it that evening —
  • 14:59 - 15:02
    you don’t have to wait several months for production to happen.
  • 15:02 - 15:05
    When used well, physical interfaces
  • 15:05 - 15:10
    that leverage people’s dexterity, manual abilities, and intuitions about the physical world
  • 15:10 - 15:13
    can be incredibly powerful.
  • 15:13 - 15:17
    These physical interfaces can also yield an experience that’s more fun to watch,
  • 15:17 - 15:20
    which, if you’re a DJ, is really important.
  • 15:20 - 15:22
    And, finally, here’s some resources
  • 15:22 - 15:29
    if you’d like to learn about mental models, errors, and butterfly ballots.
Title:
Lecture 4.2: Mental Models (15:28)
Video Language:
English

English subtitles

Revisions Compare revisions