0:00:01.336,0:00:08.723
The key innovation of the graphic user interface is that input is performed directly on top of output.

0:00:08.723,0:00:14.435
Today, we’re going to explore what makes an interface easy, hard, or “natural,”

0:00:14.435,0:00:21.186
and we’re going to do it by starting with something really simple: a measuring cup.

0:00:21.186,0:00:25.035
It has a user interface: it’s got label readout here.

0:00:25.035,0:00:28.918
There’s a task: Fill up a liquid to a desired amount.

0:00:28.918,0:00:33.586
So, how might you be able to improve this standard measuring cup design here?

0:00:33.586,0:00:35.868
What kind of things can you think of?

0:00:35.868,0:00:39.362
OXO is a company that sells kitchen utencils.

0:00:39.362,0:00:45.871
At the Gel Conference in 2008, OXO’s Alex Lee talked about their measuring cup:

0:00:45.871,0:00:48.859
The first prototype came unsolicited in the mail;

0:00:48.859,0:00:54.610
it inspired them to go out into the field and ask people about problems with their measuring cups

0:00:54.610,0:00:56.814
and suggestions for improvements.

0:00:56.814,0:01:02.917
They got things like: “It’s sometimes slippery” or “The handle gets hot”.

0:01:02.917,0:01:05.860
Nobody complained about the measuring part;

0:01:05.860,0:01:11.355
but, when they watched people measure things, they would do this:

0:01:11.355,0:01:13.784
Grab some liquid;

0:01:13.784,0:01:18.462
Pour it in;

0:01:18.462,0:01:23.334
Hold it up;

0:01:23.334,0:01:26.200
Pour some more in;

0:01:26.200,0:01:29.045
Hold it up;

0:01:29.045,0:01:31.200
Pour a little more;

0:01:31.200,0:01:34.963
There we go!

0:01:37.455,0:01:39.950
This stuttered-step measurement seems kind of inelegant,

0:01:39.950,0:01:48.966
so, to address this, OXO released a design with a clever insight: The numbers are visible from above.

0:01:48.966,0:01:53.681
This provides continuous interactive feedback on your actions.

0:01:57.604,0:02:02.566
Pour once; and when you get to the right level, you can see it directly and stop.

0:02:03.920,0:02:08.159
It’s a great design in lots of ways, but there’s still some room for further improvement.

0:02:08.159,0:02:14.304
For starters, the numbers that are written are sideways from the reader’s perspective.

0:02:14.304,0: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.

0:02:19.607,0:02:24.428
And also — some of you may like this, but I’ve always found this ridge here to be a little inelegant:

0:02:24.428,0:02:30.249
This feels like a medical device more than something that belongs in the kitchen.

0:02:30.249,0:02:37.221
And, when I went to the grocery store today, I actually found this measuring cup by Pyrex:

0:02:37.221,0:02:44.469
It takes the insight from the OXO measuring cup — that you can measure from above —

0:02:44.469,0:02:46.354
and improves upon it in two ways:

0:02:46.354,0:02:52.524
The first is that the numbers right here are readable from the reader’s perspective.

0:02:52.524,0:02:58.031
Hold it in the right hand if you want ounces, or in your left hand if you want millilitres.

0:02:58.031,0:03:03.722
The second is that, for me at least, this design is a whole lot cleaner and nicer-looking.

0:03:06.845,0:03:10.133
So, in this humble story of a better measuring cup,

0:03:10.133,0:03:16.084
Alex Lee at OXO has provided us with four important lessons about human-centred design.

0:03:16.945,0:03:19.779
There’s a common story that the carmaker Henry Ford once said,

0:03:19.779,0:03:26.396
“If I asked people what they wanted, they would have said ‘a faster horse.’”

0:03:26.396,0:03:33.163
[It] turns out that they probably didn’t say that — it’s probably made up — but it makes a good point.

0:03:33.163,0:03:36.464
Our first lesson is that in both transit and in cookware,

0:03:36.464,0:03:41.865
simply asking people what they want can often miss important opportunities.

0:03:41.865,0:03:46.218
The second is that you can find these problems and opportunities — like poor ergonomics —

0:03:46.218,0:03:50.581
by going out into the field and discovering what people actually do.

0:03:50.581,0:03:56.453
And, third, you can get extra power out of this observation by bringing prototypes along with you.

0:03:56.453,0:03:59.993
Fourth, the world is full of people tinkering in their garage,

0:03:59.993,0:04:05.660
and everyone wins when the stars align to bring those things into the world.

0:04:05.660,0:04:10.999
With measuring cups, like user interfaces, you can think of there as being two steps:

0:04:10.999,0:04:18.605
The first is having some action.

0:04:18.605,0:04:22.013
And the second is evaluating the outcome.

0:04:22.013,0:04:27.655
At each of these steps, you, as a designer, has an opportunity for success or for failure.

0:04:27.655,0:04:33.970
In our first step, what you have to cross is the gulf of execution:

0:04:33.970,0:04:37.378
How does the user know what to do?

0:04:38.332,0:04:43.418
And the gulf that you have to help the user cross is the gulf of evaluation:

0:04:43.418,0:04:46.338
How does the user know what happened?

0:04:46.723,0:04:50.848
My sketch here is based on a diagram that my colleague Bill Verplank often uses.

0:04:51.556,0:04:59.227
As a designer, here are six powerful questions that you can ask to ascertain what challenges may arise:

0:04:59.227,0:05:04.401
How usually can someone determine the function of a device, or what actions are possible?

0:05:05.355,0:05:10.541
And then, how can I determine the mapping from their goals to their physical movements —

0:05:10.541,0:05:13.675
what they actually do with the user interface?

0:05:15.459,0:05:20.283
Once they have the plan, how usually can they execute that action?

0:05:21.375,0:05:27.430
And, after they’ve executed that action, how usually can they tell what state the system is in

0:05:27.430,0:05:30.407
or whether it’s in a desired state?

0:05:30.807,0:05:34.762
And, more generally, can they figure out the mapping between the system state

0:05:34.762,0:05:37.415
and what they should interpret that to mean?

0:05:38.215,0:05:42.834
And, as a designer, here’s several things that you can do to actually make these easier:

0:05:42.849,0:05:48.254
The first and simplest is, if there’s functionality that a system can do,

0:05:48.254,0:05:52.273
the best way to communicate that to the user is to put that on the screen —

0:05:52.273,0:05:54.998
make it visible in one way or another.

0:05:54.998,0:05:59.864
And, if it’s in the physical world, give it a handle, or knob, or button.

0:05:59.864,0:06:03.844
These cues to action are called “affordances”.

0:06:03.844,0:06:09.057
Second, provide users with clear, continuous feedback, so they know exactly what’s happening.

0:06:09.057,0:06:15.604
Third, all things equal, be consistent with existing standards, platform conventions, and other idioms.

0:06:15.604,0:06:21.776
Fourth, whenever you can, make it possible for people to back up, through Undo or some other mechanism:

0:06:22.622,0:06:25.644
Very few things should be permanent and irreversible.

0:06:25.644,0:06:28.898
A benefit of having all operations being non-destructive

0:06:28.898,0:06:32.481
is that it also enables users to explore and try out things;

0:06:32.481,0:06:34.973
and especially in creative applications,

0:06:34.973,0:06:39.851
you see that people will try down branches and use Undo to come back.

0:06:40.281,0:06:47.144
Fifth, provide a systematic way for people to discover all of the functionality available in an application.

0:06:47.144,0:06:50.129
If you watched somebody use a new website, for example,

0:06:50.129,0:06:53.959
one thing that you might see them do when they’re trying to figure out how to navigate it,

0:06:53.959,0:07:00.023
is [to] roll over all the menu bars, to see what every option that’s out there is.

0:07:00.499,0:07:04.690
And, finally, reliable software <i>is</i> a usability issue:

0:07:04.690,0:07:09.973
The thing that’s supposed to happen should [happen]; and random stuff that isn’t, shouldn’t.

0:07:09.973,0:07:13.927
I know that reliability is easier said than done, but it’s still really important;

0:07:13.927,0:07:18.666
and a lot of the interfaces that people really like have this property of reliability.

0:07:18.666,0:07:23.583
So, now that we have these new conceptual tools of a gulf of execution and evaluation —

0:07:23.583,0:07:29.562
of knowing what you can do and whether what you’ve wanted is what happened —

0:07:29.562,0:07:33.977
let’s take a look at a video that Bill Moggridge and colleagues at IDEO put together

0:07:33.977,0:07:38.744
about someone trying to buy a soda from a vending machine in Japan

0:07:38.744,0:07:41.615
using their mobile phone.

0:07:41.615,0:07:45.672
While you’re watching this video, think about what’s causing the breakdowns,

0:07:45.672,0:07:53.403
and how you might fix them by using the bullet points that we’ve outlined in this lecture today.

0:10:26.584,0:10:29.115
We started out today looking at physical products,

0:10:29.115,0:10:32.875
and we moved on to explore smart products and mobile phones.

0:10:32.875,0:10:38.827
Now let’s think about what direct manipulation and the gulfs of execution and evalution mean

0:10:38.827,0:10:41.238
for building software.

0:10:41.238,0:10:46.032
What’s better? A command line or a graphical user interface?

0:10:46.032,0:10:49.443
Well, I think the answer is going to have to be “it depends.”

0:10:49.443,0:10:53.570
Nearly every design is good for something and bad for something else.

0:10:53.570,0:10:59.412
But let’s try to figure out what makes them different: think about moving a file between two folders.

0:10:59.412,0:11:04.742
On a graphical user interface, you simply pick it up in one location, and drop it in another:

0:11:04.742,0:11:09.770
You have continuous feedback about what’s happening.

0:11:09.770,0:11:13.839
All of the objects that are of interest to you are available onscreen,

0:11:13.839,0:11:18.521
and you can simply point at what you want — “input on output”.

0:11:18.521,0: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.

0:11:24.300,0:11:29.109
You also have to remember the syntax for using that move command

0:11:29.109,0:11:32.377
there’s minimal feedback about whether the operators that you’re dealing with —

0:11:32.377,0:11:36.465
like files or folders — are actually available,

0:11:36.465,0:11:41.220
and there’s not much in confirmation that you’ve moved it ultimately to the right place —

0:11:41.220,0:11:44.867
it can be easy to make errors.

0:11:44.867,0:11:49.100
What we see with the graphical interface is the power of direct manipulation —

0:11:49.100,0:11:54.155
immediate feedback on all actions, continuous representations of the objects,

0:11:54.155,0:11:58.208
and they leverage metaphors that we have from the physical world.

0:11:58.208,0:12:01.362
These metaphors are especially important when you’re learning a new interface,

0:12:01.362,0:12:04.211
and so when the graphical interface was first released,

0:12:04.211,0:12:09.691
being able to rely on what people knew about desks, folders, and files was really helpful;

0:12:09.691,0:12:14.719
those become less valuable once you’ve become accustomed to the computer world.

0:12:14.719,0:12:17.897
So, give some thought to which of these principles hold

0:12:17.897,0:12:21.776
for both the command-line interface and the graphical interface.

0:12:22.946,0:12:23.891
From my perspective,

0:12:23.891,0:12:30.860
the graphical interface does a much better job in terms of visibility, feedback, and consistency.

0:12:34.291,0:12:37.122
In either interface style, Undo is possible,

0:12:37.122,0:12:42.301
although the GUI generally does a better job of exposing when Undo is available

0:12:42.301,0:12:46.281
and what undoing will actually do.

0:12:48.496,0:12:53.204
One place that a graphical interface really shines is in terms of discoverability —

0:12:53.204,0:12:58.872
you can leaf through every single menu in a system, and see all of the operations that are there;

0:12:58.872,0:13:00.541
with a command-line interface,

0:13:00.541,0: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.

0:13:07.284,0:13:11.759
There’s no mater list.

0:13:11.759,0:13:17.384
In terms of reliability, either interface style can be made to be reliable.

0:13:19.676,0:13:22.503
“But how can this be?” some of you may be saying,

0:13:22.503,0:13:27.040
“The command-line interface can be so much better sometimes!”

0:13:27.040,0:13:29.968
And it is!

0:13:29.968,0:13:31.196
When is that?

0:13:31.196,0:13:33.484
The command-line interface works better

0:13:33.484,0:13:39.741
when the indirection that it offers is a benefit rather than a drawback.

0:13:39.741,0:13:43.284
And in fact that indirection that it offers is a kind of abstraction,

0:13:43.284,0:13:45.699
and that’s what gives programming its power,

0:13:45.699,0:13:51.183
and so the command-line interface, like programming — because in some way it kind of is programming —

0:13:51.183,0:13:59.553
gets its power when you can express stuff more abstractly and thereby do work more efficiently.

0:13:59.553,0:14:06.554
So, for example, moving all of the files that match a certain set of criteria from one place to another,

0:14:06.554,0:14:11.307
that can sometimes be more efficiently accomplished with a command line.

0:14:11.307,0:14:16.354
And even that wonderful discoverability of the graphical user interface has a dark side:

0:14:16.861,0:14:19.769
This is a picture from my colleague Takeo Igarashi.

0:14:19.769,0:14:25.877
Takeo made this picture by turning on all of the menu bars in a certain version of Microsoft [PowerPoint].

0:14:25.877,0:14:32.134
And you can see that, on his laptop screen, all of those menu bars crowded things out so much

0:14:32.134,0:14:35.942
that there was almost no screen left over for the slides.

0:14:35.942,0:14:41.320
So, is this interface discoverable? Absolutely! All of the functionality is right there.

0:14:41.320,0:14:45.862
But you pay a cost in terms of screen real estate.

0:14:45.862,0:14:50.092
In this introductory course, we won’t have a chance to talk much about gestural interfaces.

0:14:50.092,0:14:54.065
But, given their recent popularity, and tablet interfaces, game controllers,

0:14:54.065,0:15:00.422
and movies like « the Minority Report », I want to conclude today’s lecture with an eye to the future:

0:15:00.422,0:15:04.457
Gestural interfaces offer a wonderful solution to menu creep,

0:15:04.457,0:15:08.442
in that they don’t take up any permanent screen real estate.

0:15:08.442,0:15:13.638
The downside, of course, is that they are non–self-disclosing —

0:15:13.638,0:15:17.869
you don’t know what functionality might be available.

0:15:17.869,0:15:24.903
And, at their best, gestural interfaces can be even more direct than their graphical user interface counterpart.

0:15:24.903,0:15:31.164
In recent years, I’ve watched in amazement at people of all ages and from all backgrounds

0:15:31.164,0:15:35.681
have figured out how to use tablet computers really effectively.

0:15:35.681,0:15:39.092
And the directness, I think, is one big reason for that.

0:15:39.092,0:15:42.153
Learning to use a mouse is actually kind of a big deal:

0:15:42.153,0:15:44.440
Once you’ve got the hang of it you forget that,

0:15:44.440,0:15:46.900
but there <i>is</i> this indirectness that you’ll have to learn

0:15:46.900,0:15:51.004
that what you’re doing over here matters over here.

0:15:51.004,0:15:56.252
With a tablet, the thing that you touch is the thing that you’re interacting with.

0:15:56.252,0:16:02.629
And the best gestures in these interfaces, like pinching to zoom, just feels so natural —

0:16:02.629,0:16:09.421
the metaphor is very clear, the feedback is immediate, the outcome is predictable.

0:16:09.421,0:16:14.153
In other cases, when the mapping is more arbitrary or harder to guess,

0:16:14.153,0:16:16.674
I think these interfaces are less effective.

0:16:16.674,0:16:23.901
For example, if I swipe with four fingers, that will bring up a menu bar on an iPad.

0:16:23.901,0:16:27.549
How on earth would I ever figure that out?

0:16:27.549,0:16:32.542
So, in gestural interfaces, like in all others, things work best when the feedback is clear,

0:16:32.542,0:16:37.745
and the interface provides cues through metaphors or visual signals

0:16:37.745,0:16:41.784
that help you know what you can do within the user interface.

0:16:41.784,0:16:45.897
To learn more about direct manipulation interfaces and the psychology of design,

0:16:45.897,0:16:50.292
I strongly recommend Don Norman’s book « The Design of Everyday Things ».

0:16:50.292,0:16:53.171
We’ll see you next time.