WEBVTT
00:00:01.336 --> 00:00:08.723
The key innovation of the graphic user interface is that input is performed directly on top of output.
00:00:08.723 --> 00:00:14.435
Today, we’re going to explore what makes an interface easy, hard, or “natural,”
00:00:14.435 --> 00:00:21.186
and we’re going to do it by starting with something really simple: a measuring cup.
00:00:21.186 --> 00:00:25.035
It has a user interface: it’s got label readout here.
00:00:25.035 --> 00:00:28.918
There’s a task: Fill up a liquid to a desired amount.
00:00:28.918 --> 00:00:33.586
So, how might you be able to improve this standard measuring cup design here?
00:00:33.586 --> 00:00:35.868
What kind of things can you think of?
00:00:35.868 --> 00:00:39.362
OXO is a company that sells kitchen utencils.
00:00:39.362 --> 00:00:45.871
At the Gel Conference in 2008, OXO’s Alex Lee talked about their measuring cup:
00:00:45.871 --> 00:00:48.859
The first prototype came unsolicited in the mail;
00:00:48.859 --> 00:00:54.610
it inspired them to go out into the field and ask people about problems with their measuring cups
00:00:54.610 --> 00:00:56.814
and suggestions for improvements.
00:00:56.814 --> 00:01:02.917
They got things like: “It’s sometimes slippery” or “The handle gets hot”.
00:01:02.917 --> 00:01:05.860
Nobody complained about the measuring part;
00:01:05.860 --> 00:01:11.355
but, when they watched people measure things, they would do this:
00:01:11.355 --> 00:01:13.784
Grab some liquid;
00:01:13.784 --> 00:01:18.462
Pour it in;
00:01:18.462 --> 00:01:23.334
Hold it up;
00:01:23.334 --> 00:01:26.200
Pour some more in;
00:01:26.200 --> 00:01:29.045
Hold it up;
00:01:29.045 --> 00:01:31.200
Pour a little more;
00:01:31.200 --> 00:01:34.963
There we go!
00:01:37.455 --> 00:01:39.950
This stuttered-step measurement seems kind of inelegant,
00:01:39.950 --> 00:01:48.966
so, to address this, OXO released a design with a clever insight: The numbers are visible from above.
00:01:48.966 --> 00:01:53.681
This provides continuous interactive feedback on your actions.
00:01:57.604 --> 00:02:02.566
Pour once; and when you get to the right level, you can see it directly and stop.
00:02:03.920 --> 00:02:08.159
It’s a great design in lots of ways, but there’s still some room for further improvement.
00:02:08.159 --> 00:02:14.304
For starters, the numbers that are written are sideways from the reader’s perspective.
00:02:14.304 --> 00:02:19.607
Not a huge deal, but still, it’s kind of like when you have to tip your head to look at a table.
00:02:19.607 --> 00:02:24.428
And also — some of you may like this, but I’ve always found this ridge here to be a little inelegant:
00:02:24.428 --> 00:02:30.249
This feels like a medical device more than something that belongs in the kitchen.
00:02:30.249 --> 00:02:37.221
And, when I went to the grocery store today, I actually found this measuring cup by Pyrex:
00:02:37.221 --> 00:02:44.469
It takes the insight from the OXO measuring cup — that you can measure from above —
00:02:44.469 --> 00:02:46.354
and improves upon it in two ways:
00:02:46.354 --> 00:02:52.524
The first is that the numbers right here are readable from the reader’s perspective.
00:02:52.524 --> 00:02:58.031
Hold it in the right hand if you want ounces, or in your left hand if you want millilitres.
00:02:58.031 --> 00:03:03.722
The second is that, for me at least, this design is a whole lot cleaner and nicer-looking.
00:03:06.845 --> 00:03:10.133
So, in this humble story of a better measuring cup,
00:03:10.133 --> 00:03:16.084
Alex Lee at OXO has provided us with four important lessons about human-centred design.
00:03:16.945 --> 00:03:19.779
There’s a common story that the carmaker Henry Ford once said,
00:03:19.779 --> 00:03:26.396
“If I asked people what they wanted, they would have said ‘a faster horse.’”
00:03:26.396 --> 00:03:33.163
[It] turns out that they probably didn’t say that — it’s probably made up — but it makes a good point.
00:03:33.163 --> 00:03:36.464
Our first lesson is that in both transit and in cookware,
00:03:36.464 --> 00:03:41.865
simply asking people what they want can often miss important opportunities.
00:03:41.865 --> 00:03:46.218
The second is that you can find these problems and opportunities — like poor ergonomics —
00:03:46.218 --> 00:03:50.581
by going out into the field and discovering what people actually do.
00:03:50.581 --> 00:03:56.453
And, third, you can get extra power out of this observation by bringing prototypes along with you.
00:03:56.453 --> 00:03:59.993
Fourth, the world is full of people tinkering in their garage,
00:03:59.993 --> 00:04:05.660
and everyone wins when the stars align to bring those things into the world.
00:04:05.660 --> 00:04:10.999
With measuring cups, like user interfaces, you can think of there as being two steps:
00:04:10.999 --> 00:04:18.605
The first is having some action.
00:04:18.605 --> 00:04:22.013
And the second is evaluating the outcome.
00:04:22.013 --> 00:04:27.655
At each of these steps, you, as a designer, has an opportunity for success or for failure.
00:04:27.655 --> 00:04:33.970
In our first step, what you have to cross is the gulf of execution:
00:04:33.970 --> 00:04:37.378
How does the user know what to do?
00:04:38.332 --> 00:04:43.418
And the gulf that you have to help the user cross is the gulf of evaluation:
00:04:43.418 --> 00:04:46.338
How does the user know what happened?
00:04:46.723 --> 00:04:50.848
My sketch here is based on a diagram that my colleague Bill Verplank often uses.
00:04:51.556 --> 00:04:59.227
As a designer, here are six powerful questions that you can ask to ascertain what challenges may arise:
00:04:59.227 --> 00:05:04.401
How usually can someone determine the function of a device, or what actions are possible?
00:05:05.355 --> 00:05:10.541
And then, how can I determine the mapping from their goals to their physical movements —
00:05:10.541 --> 00:05:13.675
what they actually do with the user interface?
00:05:15.459 --> 00:05:20.283
Once they have the plan, how usually can they execute that action?
00:05:21.375 --> 00:05:27.430
And, after they’ve executed that action, how usually can they tell what state the system is in
00:05:27.430 --> 00:05:30.407
or whether it’s in a desired state?
00:05:30.807 --> 00:05:34.762
And, more generally, can they figure out the mapping between the system state
00:05:34.762 --> 00:05:37.415
and what they should interpret that to mean?
00:05:38.215 --> 00:05:42.834
And, as a designer, here’s several things that you can do to actually make these easier:
00:05:42.849 --> 00:05:48.254
The first and simplest is, if there’s functionality that a system can do,
00:05:48.254 --> 00:05:52.273
the best way to communicate that to the user is to put that on the screen —
00:05:52.273 --> 00:05:54.998
make it visible in one way or another.
00:05:54.998 --> 00:05:59.864
And, if it’s in the physical world, give it a handle, or knob, or button.
00:05:59.864 --> 00:06:03.844
These cues to action are called “affordances”.
00:06:03.844 --> 00:06:09.057
Second, provide users with clear, continuous feedback, so they know exactly what’s happening.
00:06:09.057 --> 00:06:15.604
Third, all things equal, be consistent with existing standards, platform conventions, and other idioms.
00:06:15.604 --> 00:06:21.776
Fourth, whenever you can, make it possible for people to back up, through Undo or some other mechanism:
00:06:22.622 --> 00:06:25.644
Very few things should be permanent and irreversible.
00:06:25.644 --> 00:06:28.898
A benefit of having all operations being non-destructive
00:06:28.898 --> 00:06:32.481
is that it also enables users to explore and try out things;
00:06:32.481 --> 00:06:34.973
and especially in creative applications,
00:06:34.973 --> 00:06:39.851
you see that people will try down branches and use Undo to come back.
00:06:40.281 --> 00:06:47.144
Fifth, provide a systematic way for people to discover all of the functionality available in an application.
00:06:47.144 --> 00:06:50.129
If you watched somebody use a new website, for example,
00:06:50.129 --> 00:06:53.959
one thing that you might see them do when they’re trying to figure out how to navigate it,
00:06:53.959 --> 00:07:00.023
is [to] roll over all the menu bars, to see what every option that’s out there is.
00:07:00.499 --> 00:07:04.690
And, finally, reliable software is a usability issue:
00:07:04.690 --> 00:07:09.973
The thing that’s supposed to happen should [happen]; and random stuff that isn’t, shouldn’t.
00:07:09.973 --> 00:07:13.927
I know that reliability is easier said than done, but it’s still really important;
00:07:13.927 --> 00:07:18.666
and a lot of the interfaces that people really like have this property of reliability.
00:07:18.666 --> 00:07:23.583
So, now that we have these new conceptual tools of a gulf of execution and evaluation —
00:07:23.583 --> 00:07:29.562
of knowing what you can do and whether what you’ve wanted is what happened —
00:07:29.562 --> 00:07:33.977
let’s take a look at a video that Bill Moggridge and colleagues at IDEO put together
00:07:33.977 --> 00:07:38.744
about someone trying to buy a soda from a vending machine in Japan
00:07:38.744 --> 00:07:41.615
using their mobile phone.
00:07:41.615 --> 00:07:45.672
While you’re watching this video, think about what’s causing the breakdowns,
00:07:45.672 --> 00:07:53.403
and how you might fix them by using the bullet points that we’ve outlined in this lecture today.
00:10:26.584 --> 00:10:29.115
We started out today looking at physical products,
00:10:29.115 --> 00:10:32.875
and we moved on to explore smart products and mobile phones.
00:10:32.875 --> 00:10:38.827
Now let’s think about what direct manipulation and the gulfs of execution and evalution mean
00:10:38.827 --> 00:10:41.238
for building software.
00:10:41.238 --> 00:10:46.032
What’s better? A command line or a graphical user interface?
00:10:46.032 --> 00:10:49.443
Well, I think the answer is going to have to be “it depends.”
00:10:49.443 --> 00:10:53.570
Nearly every design is good for something and bad for something else.
00:10:53.570 --> 00:10:59.412
But let’s try to figure out what makes them different: think about moving a file between two folders.
00:10:59.412 --> 00:11:04.742
On a graphical user interface, you simply pick it up in one location, and drop it in another:
00:11:04.742 --> 00:11:09.770
You have continuous feedback about what’s happening.
00:11:09.770 --> 00:11:13.839
All of the objects that are of interest to you are available onscreen,
00:11:13.839 --> 00:11:18.521
and you can simply point at what you want — “input on output”.
00:11:18.521 --> 00:11:24.300
With a command line, you have to know, a priori, what the name of the command that is that you’d like to use.
00:11:24.300 --> 00:11:29.109
You also have to remember the syntax for using that move command
00:11:29.109 --> 00:11:32.377
there’s minimal feedback about whether the operators that you’re dealing with —
00:11:32.377 --> 00:11:36.465
like files or folders — are actually available,
00:11:36.465 --> 00:11:41.220
and there’s not much in confirmation that you’ve moved it ultimately to the right place —
00:11:41.220 --> 00:11:44.867
it can be easy to make errors.
00:11:44.867 --> 00:11:49.100
What we see with the graphical interface is the power of direct manipulation —
00:11:49.100 --> 00:11:54.155
immediate feedback on all actions, continuous representations of the objects,
00:11:54.155 --> 00:11:58.208
and they leverage metaphors that we have from the physical world.
00:11:58.208 --> 00:12:01.362
These metaphors are especially important when you’re learning a new interface,
00:12:01.362 --> 00:12:04.211
and so when the graphical interface was first released,
00:12:04.211 --> 00:12:09.691
being able to rely on what people knew about desks, folders, and files was really helpful;
00:12:09.691 --> 00:12:14.719
those become less valuable once you’ve become accustomed to the computer world.
00:12:14.719 --> 00:12:17.897
So, give some thought to which of these principles hold
00:12:17.897 --> 00:12:21.776
for both the command-line interface and the graphical interface.
00:12:22.946 --> 00:12:23.891
From my perspective,
00:12:23.891 --> 00:12:30.860
the graphical interface does a much better job in terms of visibility, feedback, and consistency.
00:12:34.291 --> 00:12:37.122
In either interface style, Undo is possible,
00:12:37.122 --> 00:12:42.301
although the GUI generally does a better job of exposing when Undo is available
00:12:42.301 --> 00:12:46.281
and what undoing will actually do.
00:12:48.496 --> 00:12:53.204
One place that a graphical interface really shines is in terms of discoverability —
00:12:53.204 --> 00:12:58.872
you can leaf through every single menu in a system, and see all of the operations that are there;
00:12:58.872 --> 00:13:00.541
with a command-line interface,
00:13:00.541 --> 00:13:07.284
there’s really no way to know what’s the full set of operations that you could possible type into a terminal.
00:13:07.284 --> 00:13:11.759
There’s no mater list.
00:13:11.759 --> 00:13:17.384
In terms of reliability, either interface style can be made to be reliable.
00:13:19.676 --> 00:13:22.503
“But how can this be?” some of you may be saying,
00:13:22.503 --> 00:13:27.040
“The command-line interface can be so much better sometimes!”
00:13:27.040 --> 00:13:29.968
And it is!
00:13:29.968 --> 00:13:31.196
When is that?
00:13:31.196 --> 00:13:33.484
The command-line interface works better
00:13:33.484 --> 00:13:39.741
when the indirection that it offers is a benefit rather than a drawback.
00:13:39.741 --> 00:13:43.284
And in fact that indirection that it offers is a kind of abstraction,
00:13:43.284 --> 00:13:45.699
and that’s what gives programming its power,
00:13:45.699 --> 00:13:51.183
and so the command-line interface, like programming — because in some way it kind of is programming —
00:13:51.183 --> 00:13:59.553
gets its power when you can express stuff more abstractly and thereby do work more efficiently.
00:13:59.553 --> 00:14:06.554
So, for example, moving all of the files that match a certain set of criteria from one place to another,
00:14:06.554 --> 00:14:11.307
that can sometimes be more efficiently accomplished with a command line.
00:14:11.307 --> 00:14:16.354
And even that wonderful discoverability of the graphical user interface has a dark side:
00:14:16.861 --> 00:14:19.769
This is a picture from my colleague Takeo Igarashi.
00:14:19.769 --> 00:14:25.877
Takeo made this picture by turning on all of the menu bars in a certain version of Microsoft [PowerPoint].
00:14:25.877 --> 00:14:32.134
And you can see that, on his laptop screen, all of those menu bars crowded things out so much
00:14:32.134 --> 00:14:35.942
that there was almost no screen left over for the slides.
00:14:35.942 --> 00:14:41.320
So, is this interface discoverable? Absolutely! All of the functionality is right there.
00:14:41.320 --> 00:14:45.862
But you pay a cost in terms of screen real estate.
00:14:45.862 --> 00:14:50.092
In this introductory course, we won’t have a chance to talk much about gestural interfaces.
00:14:50.092 --> 00:14:54.065
But, given their recent popularity, and tablet interfaces, game controllers,
00:14:54.065 --> 00:15:00.422
and movies like « the Minority Report », I want to conclude today’s lecture with an eye to the future:
00:15:00.422 --> 00:15:04.457
Gestural interfaces offer a wonderful solution to menu creep,
00:15:04.457 --> 00:15:08.442
in that they don’t take up any permanent screen real estate.
00:15:08.442 --> 00:15:13.638
The downside, of course, is that they are non–self-disclosing —
00:15:13.638 --> 00:15:17.869
you don’t know what functionality might be available.
00:15:17.869 --> 00:15:24.903
And, at their best, gestural interfaces can be even more direct than their graphical user interface counterpart.
00:15:24.903 --> 00:15:31.164
In recent years, I’ve watched in amazement at people of all ages and from all backgrounds
00:15:31.164 --> 00:15:35.681
have figured out how to use tablet computers really effectively.
00:15:35.681 --> 00:15:39.092
And the directness, I think, is one big reason for that.
00:15:39.092 --> 00:15:42.153
Learning to use a mouse is actually kind of a big deal:
00:15:42.153 --> 00:15:44.440
Once you’ve got the hang of it you forget that,
00:15:44.440 --> 00:15:46.900
but there is this indirectness that you’ll have to learn
00:15:46.900 --> 00:15:51.004
that what you’re doing over here matters over here.
00:15:51.004 --> 00:15:56.252
With a tablet, the thing that you touch is the thing that you’re interacting with.
00:15:56.252 --> 00:16:02.629
And the best gestures in these interfaces, like pinching to zoom, just feels so natural —
00:16:02.629 --> 00:16:09.421
the metaphor is very clear, the feedback is immediate, the outcome is predictable.
00:16:09.421 --> 00:16:14.153
In other cases, when the mapping is more arbitrary or harder to guess,
00:16:14.153 --> 00:16:16.674
I think these interfaces are less effective.
00:16:16.674 --> 00:16:23.901
For example, if I swipe with four fingers, that will bring up a menu bar on an iPad.
00:16:23.901 --> 00:16:27.549
How on earth would I ever figure that out?
00:16:27.549 --> 00:16:32.542
So, in gestural interfaces, like in all others, things work best when the feedback is clear,
00:16:32.542 --> 00:16:37.745
and the interface provides cues through metaphors or visual signals
00:16:37.745 --> 00:16:41.784
that help you know what you can do within the user interface.
00:16:41.784 --> 00:16:45.897
To learn more about direct manipulation interfaces and the psychology of design,
00:16:45.897 --> 00:16:50.292
I strongly recommend Don Norman’s book « The Design of Everyday Things ».
00:16:50.292 --> 00:16:53.171
We’ll see you next time.