0:00:02.511,0:00:06.321
We’ve all heard the saying that a picture is worth ten thousand words.

0:00:06.321,0:00:11.745
This idea of worth is interesting because it implies some kind of interchangeability,

0:00:11.745,0:00:18.474
that there are some rate at which you can convert one representation into another representation.

0:00:18.474,0:00:22.164
How might we establish that interchangeability?

0:00:24.241,0:00:27.837
One type of interchangeability is informational equivalence.

0:00:27.837,0:00:30.341
Two representations are informationally equivalent

0:00:30.341,0:00:35.117
if all the information [that] is present in one can also be inferred from the other.

0:00:36.471,0:00:40.407
But just because the same information is theoretically inferable

0:00:40.407,0:00:43.689
doesn’t mean it will take the same required effort to extract it.

0:00:46.181,0:00:50.118
Some representations require more steps to compute and inference.

0:00:50.118,0:00:52.986
And the difference in the perceiver’s computational effort

0:00:52.986,0:00:56.919
presents both challenges and opportunities for you as a designer.

0:00:56.919,0:00:59.889
Let’s look at an example.

0:00:59.889,0:01:05.237
Let’s take the sentence “A pair of parallel lines is cut by a transversal.”

0:01:05.237,0:01:08.900
This cut generates eight angles.

0:01:08.915,0:01:14.790
From the sentence, it’s difficult to reason about which pairs form the alternate interior angles.[br]

0:01:14.790,0:01:23.075
And in fact if you to try, you’ll find yourself creating a mental image of two parallel lines cut by a transversal.[br]

0:01:24.105,0:01:26.561
With a diagram like this, however,

0:01:26.561,0:01:32.918
the sentence and the diagram are informationally equivalent but computationally different for the perceiver.

0:01:33.487,0:01:37.426
One major benefit of the graphical user interface over the command line

0:01:37.426,0:01:45.275
is that the graphical user interface enables many common actions to be perception tasks requiring little inference.[br]

0:01:46.228,0:01:52.086
So far we’ve seen a number of examples of how distributed cognition can help individual work.

0:01:52.086,0:01:55.523
Distributed cognition can also have powerful benefits for group work.

0:01:55.523,0:01:59.344
And just to give you a quick sense of what this might be like,

0:01:59.344,0:02:04.780
I’ll give you an example from Ed Hutchin’s research on airplane cockpits.

0:02:04.780,0:02:08.728
One of the things that Ed observed is that the artifacts in the cockpit

0:02:08.728,0:02:13.875
help coordinate action between the multiple people that work there — the pilots.

0:02:13.875,0:02:21.969
And so, for example, one instance of this is the speed dial where, on landing and takeoff,

0:02:21.969,0:02:26.522
it’s incredibly important to have the speed be accurate

0:02:26.522,0:02:31.587
because you are at the most critical part of the airplane — You’re close to the ground;[br]

0:02:31.587,0:02:37.110
The wings aren’t designed for… they are designed primarily for going long-haul, very high,

0:02:37.110,0:02:39.528
and the shape of the wings has to be changed

0:02:39.528,0:02:43.329
to accommodate the low speeds that are required for landing and takeoff.

0:02:43.329,0:02:51.248
And so the multiple pilots on a large airplane need to coordinate their efforts in several important ways.

0:02:51.248,0:02:56.888
There are several plastic indicators called “bugs” around the perimeter of the speedometer.

0:02:56.888,0:03:03.201
And the pilots can manually set those bugs to do things like mark where a speed,

0:03:03.201,0:03:10.115
what events should cause a change in the wing settings, and other things like that.

0:03:10.115,0:03:15.970
And what’s nice about these bugs is that they are visible not just to the pilot that set them

0:03:15.970,0:03:18.548
but to everybody else in the cockpit also.

0:03:18.548,0:03:27.398
And so, by making [the] triggers for what will cause changes in action manifest to everybody,

0:03:27.398,0:03:34.883
these artifacts can help coordinate collaboration and increase safety in cockpit situations.

0:03:40.452,0:03:45.265
So, what we’ve seen here is that when interfaces help people distribute cognition,

0:03:45.265,0:03:48.368
it can encourage experimentation like we saw in Tetris;

0:03:48.368,0:03:52.099
it can scaffold learning and reduce errors, like we saw with the Montessori blocks;

0:03:52.099,0:03:56.563
it can show only the differences that matter, like in the London Underground map;

0:03:56.563,0:04:01.499
it can convert slow calculation in the fast perception, like we saw with the map coloring;

0:04:01.499,0:04:07.907
it can support chunking, especially by experts, as we saw with chess, and with gestural interfaces;

0:04:07.907,0:04:12.175
it can increase efficiency as we saw with diagrammatic representations;

0:04:12.175,0:04:15.936
and it can facilitate collaboration like we saw in the cockpit.

0:04:17.567,0:04:20.507
Given all of these benefits of good representations,

0:04:20.507,0:04:24.348
it’s kind of surprising that a whole lot of actual interfaces that are out there

0:04:24.348,0:04:29.699
offer a really crummy job at being able to help people distribute their cognitive efforts.

0:04:29.699,0:04:32.969
So I call these poor representations “common but deadly.”

0:04:32.969,0:04:36.386
Let’s take a look at a couple of them. Here’s one:

0:04:36.386,0:04:38.950
I was at a symposium at IBM a couple of years ago.

0:04:38.950,0:04:42.996
To get on their Wi-Fi network, I needed to enter a password.

0:04:42.996,0:04:46.948
And, I typed in a password that I thought would be just fine.

0:04:46.948,0:04:51.777
And the Wi-Fi system told me “The password you typed is not valid; please change it.”[br]

0:04:51.777,0:04:54.989
What do I need to change it to though?

0:04:54.989,0:04:59.640
All passwords often have different requirements, like mixtures of upper- and lowercase letters,[br]

0:04:59.640,0:05:05.151
the presence or absence of numbers or special modifier keys,

0:05:05.151,0:05:12.492
and there’s no way for me to know from the screen what the problem with the password that I entered was.

0:05:13.138,0:05:19.415
This representation would obviously be a heck of a lot better if, when I entered the password, it said,[br]

0:05:19.415,0:05:21.704
“You need a password that’s at least ten characters long,

0:05:21.704,0:05:27.761
or that contains a mixture of upper- and lowercase characters, or that has at least one number.”[br]

0:05:27.761,0:05:31.625
And that could be validated the first time that I typed in the new password,

0:05:31.625,0:05:35.807
as supposed to I have to wait till I type in both, hit Go, and it says, “Uh-oh.”[br]

0:05:37.038,0:05:42.765
Here’s another example: NASA invited me to give a talk in an event they had in San Francisco a year or so ago[br]

0:05:42.765,0:05:51.405
and the registration for this event was… here — this is the web form from it — and I thought I registered.[br]

0:05:51.405,0:05:57.474
I clicked Go and after hitting Next, it said “You must fill out all registered fields” —

0:05:57.474,0:06:00.777
You can see that at the top of the screen right here.

0:06:00.792,0:06:07.366
And, totally frustrating if you tried to register because you’re like “Well… Which one did I miss?”[br]

0:06:07.366,0:06:15.931
It would be a lot more effective if, for example, you could highlight the things that it thinks you need to fill out,[br]

0:06:15.931,0:06:22.057
or it could create a smaller form that has only the parts that you missed the last time around

0:06:22.057,0:06:25.923
and says “Here is the one thing you needed to fill that out before continuing.”

0:06:27.323,0:06:33.961
Here’s another example: This is from BBEdit and it when I tried to save it says,[br]

0:06:33.961,0:06:40.554
“Document encoding mismatch. The document contains data which describes its encoding as UTF-8.

0:06:40.554,0:06:44.523
But the encoding has been set to Western (ISO Latin-1).”

0:06:44.523,0:06:52.392
And I have two options here. One of them is Cancel, and another one is Save Anyway.

0:06:52.392,0:07:00.574
But the actions that I’d like to be able to do are probably something like “Make everything UTF-8”,

0:07:00.574,0:07:10.050
or “Make everything Latin-1”, or “Hey computer, tell me which of these probably makes more sense;

0:07:10.050,0:07:15.291
help me choose between these”, or “It doesn’t matter.”

0:07:15.291,0:07:21.120
But the information that I need to be able to make a decision simply isn’t present in the user interface.

0:07:21.120,0:07:28.724
Dialog boxes should be action-oriented; they should help guide users towards what their next step is likely to be[br]

0:07:28.724,0:07:33.714
and it should provide them with the information that they need in order to be able to accomplish that next step.

0:07:34.852,0:07:39.127
Here’s an interface that I think is intentionally designed to be sub-optimal:

0:07:39.127,0:07:47.277
Here we have the eBay funding confirmation page, and if you look at this page,[br]

0:07:47.277,0:07:51.819
what you’ll see is if I switched to a credit card and it says,

0:07:51.819,0:07:58.102
before you’ll go to a credit card, we’re going to give you this prompt that asks you to verify that[br]

0:07:58.102,0:08:06.885
and eBay and PayPal do this, of course, because they make more money if you see a bank account

0:08:06.885,0:08:09.960
as opposed to have to pay the credit card transaction fee.

0:08:09.960,0:08:16.039
And so, down at the bottom here, it offers you two buttons.

0:08:16.039,0:08:20.941
One of them is “Pay with bank account” and the other one is “Pay with credit card.”

0:08:22.095,0:08:26.683
Good action-oriented titles — I really like that part of this user interface.

0:08:26.683,0:08:34.837
And what you see is that the account that they want you to pick is made nice and bright

0:08:34.837,0:08:39.923
and the account that you probably want is dimmed out as if it’s inactive.

0:08:39.923,0:08:42.690
Is this is a good user interface or a bad user interface?

0:08:42.690,0:08:50.405
Well, user experience’s probably somewhat degraded; Paypal’s profit significant increases.

0:08:50.405,0:08:54.922
And in a lot of real-world situations, you may need to make this trade-off.

0:08:54.922,0:08:58.986
I think that more globally there are other ways that you could address this

0:08:58.986,0:09:02.684
but I thought this was an interesting example of an interaction design

0:09:02.684,0:09:09.837
that sacrificed some user experience in order to achieve higher profits.

0:09:09.837,0:09:11.914
Hard to say whether it’s worth it.

0:09:11.914,0:09:14.728
Here’s a dialog box for exporting a picture.

0:09:14.728,0:09:21.694
We want to save that to JPEG, and the dialog box is notifying us that this JPEG already exists.

0:09:21.694,0:09:23.325
And you got a couple of options.

0:09:23.325,0:09:27.210
So one thing that I that I like about this future interface

0:09:27.210,0:09:31.621
is that you get buttons that are really action-oriented here — that’s great.[br]

0:09:31.621,0:09:35.572
A challenge is: how do I know whether I want this file or not?

0:09:35.572,0:09:40.265
I mean, what is “l1010235.jpg”?

0:09:40.265,0:09:46.985
It would make a lot more sense if this dialog box showed me an icon of “here’s what this picture is”,

0:09:46.985,0:09:50.598
and that way I could have a better sense of whether I wanted to override it,

0:09:50.598,0:09:53.827
or skip this operation, or give it a brand new unique name.

0:09:54.766,0:09:57.723
Here’s an example from Microsoft Outlook.

0:09:57.723,0:10:02.864
This is a Duplicate Contact Detected dialog box.

0:10:02.864,0:10:10.040
And it says that “Hey, you know, there’s some information here that already exists in your contacts.

0:10:10.040,0:10:15.435
Do you want to update it or do you want to add this as a new contact?”

0:10:15.435,0:10:19.487
The difficulty, of course, is I don’t know what’s in that contact right now

0:10:19.487,0:10:25.751
and so this is not a decision that I can make from looking at this dialog box on its own.

0:10:25.751,0:10:32.868
I can of course click Open Existing Contact; it’ll show me that information, but that’s one extra step down the line.[br]

0:10:33.960,0:10:37.237
Microsoft improved this in a subsequent version of Outlook.

0:10:37.807,0:10:42.330
Its dialog box is probably still more complicated that it really needs to be:

0:10:42.330,0:10:45.114
I think it could be streamline significantly;

0:10:45.114,0:10:49.724
but what it does do is it shows me the two things that I really need to know:[br]

0:10:49.724,0:10:56.020
The first of these is what the final outcome of the process is going to look like —

0:10:56.020,0:11:00.115
so, “After we’ve merged these things, here’s what you’ll get.”

0:11:00.115,0:11:02.765
And the other thing it’s going to show me

0:11:02.765,0:11:06.440
is “Here’s the piece of information that we’re going to change in order to make that happen.”[br]

0:11:07.347,0:11:11.765
One way that I think this dialog box could be streamlined is that,

0:11:11.765,0:11:22.680
while it shows that the final information this way and it gives us the “so I can change this or happening” here,[br]

0:11:22.680,0:11:29.111
the old contact information is shown in a completely different format and so it’s difficult to compare.[br]

0:11:29.111,0:11:34.262
If you believed that you don’t need to see that information because the relevant bits aren’t in here,

0:11:34.262,0:11:36.105
well then, just don’t include this.

0:11:36.105,0:11:42.881
If, on the other hand, you decide that we do need to show the old version because you may want to keep it,[br]

0:11:42.896,0:11:45.711
in that case it probably would make it a lot more sense to show it

0:11:45.711,0:11:50.045
in a manner that’s parallel with these other two boxes.[br]

0:11:50.660,0:11:55.881
What we’ve covered in these past two lectures is an understanding of the theoretical foundations[br]

0:11:55.881,0:11:58.386
of how the representation of information

0:11:58.386,0:12:03.323
can have tremendous consequences in terms of the user experience of a system.[br]

0:12:03.323,0:12:07.095
I think this is one of the most interesting topics in all of HCI.

0:12:07.095,0:12:10.109
And if you found this area as interesting as I did,

0:12:10.109,0:12:12.804
there’s a couple of books that I can recommend to go further here.[br]

0:12:12.804,0:12:17.022
One of them is Herb Simon’s « The Sciences of the Artificial ».

0:12:17.022,0:12:25.743
It is a great monograph, written several decades ago now, about the role of design in science[br]

0:12:25.743,0:12:29.576
and about the nature of mental representations — a really interesting book.[br]

0:12:29.576,0:12:37.576
Another one here is Ed Hutchins’ book « Cognition in the Wild » which lays out a foundation for distributed cognition.[br]

0:12:37.576,0:12:44.713
and describes Ed’s work in airplanes and on naval ships.

0:12:44.713,0:12:51.439
And the last we have here is Don Norman’s book, « Things That Makes Us Smart »,

0:12:51.439,0:12:59.371
which is a great book about a lot of the cognitive science research and distributive cognition[br]

0:12:59.371,0:13:02.578
and the role of representations in cognition.

0:13:02.578,0:13:08.249
And this is one of the sources of several of these examples in this lecture, like, as are these other books, too.[br]

0:13:08.249,9:59:59.000
I’ll see you next time.