1
00:00:02,511 --> 00:00:06,321
We’ve all heard the saying that a picture is worth ten thousand words.

2
00:00:06,321 --> 00:00:11,745
This idea of worth is interesting because it implies some kind of interchangeability,

3
00:00:11,745 --> 00:00:18,474
that there are some rate at which you can convert one representation into another representation.

4
00:00:18,474 --> 00:00:22,164
How might we establish that interchangeability?

5
00:00:24,241 --> 00:00:27,837
One type of interchangeability is informational equivalence.

6
00:00:27,837 --> 00:00:30,341
Two representations are informationally equivalent

7
00:00:30,341 --> 00:00:35,117
if all the information [that] is present in one can also be inferred from the other.

8
00:00:36,471 --> 00:00:40,407
But just because the same information is theoretically inferable

9
00:00:40,407 --> 00:00:43,689
doesn’t mean it will take the same required effort to extract it.

10
00:00:46,181 --> 00:00:50,118
Some representations require more steps to compute and inference.

11
00:00:50,118 --> 00:00:52,986
And the difference in the perceiver’s computational effort

12
00:00:52,986 --> 00:00:56,919
presents both challenges and opportunities for you as a designer.

13
00:00:56,919 --> 00:00:59,889
Let’s look at an example.

14
00:00:59,889 --> 00:01:05,237
Let’s take the sentence “A pair of parallel lines is cut by a transversal.”

15
00:01:05,237 --> 00:01:08,900
This cut generates eight angles.

16
00:01:08,915 --> 00:01:14,790
From the sentence, it’s difficult to reason about which pairs form the alternate interior angles.


17
00:01:14,790 --> 00: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.


18
00:01:24,105 --> 00:01:26,561
With a diagram like this, however,

19
00:01:26,561 --> 00:01:32,918
the sentence and the diagram are informationally equivalent but computationally different for the perceiver.

20
00:01:33,487 --> 00:01:37,426
One major benefit of the graphical user interface over the command line

21
00:01:37,426 --> 00:01:45,275
is that the graphical user interface enables many common actions to be perception tasks requiring little inference.


22
00:01:46,228 --> 00:01:52,086
So far we’ve seen a number of examples of how distributed cognition can help individual work.

23
00:01:52,086 --> 00:01:55,523
Distributed cognition can also have powerful benefits for group work.

24
00:01:55,523 --> 00:01:59,344
And just to give you a quick sense of what this might be like,

25
00:01:59,344 --> 00:02:04,780
I’ll give you an example from Ed Hutchin’s research on airplane cockpits.

26
00:02:04,780 --> 00:02:08,728
One of the things that Ed observed is that the artifacts in the cockpit

27
00:02:08,728 --> 00:02:13,875
help coordinate action between the multiple people that work there — the pilots.

28
00:02:13,875 --> 00:02:21,969
And so, for example, one instance of this is the speed dial where, on landing and takeoff,

29
00:02:21,969 --> 00:02:26,522
it’s incredibly important to have the speed be accurate

30
00:02:26,522 --> 00:02:31,587
because you are at the most critical part of the airplane — You’re close to the ground;


31
00:02:31,587 --> 00:02:37,110
The wings aren’t designed for… they are designed primarily for going long-haul, very high,

32
00:02:37,110 --> 00:02:39,528
and the shape of the wings has to be changed

33
00:02:39,528 --> 00:02:43,329
to accommodate the low speeds that are required for landing and takeoff.

34
00:02:43,329 --> 00:02:51,248
And so the multiple pilots on a large airplane need to coordinate their efforts in several important ways.

35
00:02:51,248 --> 00:02:56,888
There are several plastic indicators called “bugs” around the perimeter of the speedometer.

36
00:02:56,888 --> 00:03:03,201
And the pilots can manually set those bugs to do things like mark where a speed,

37
00:03:03,201 --> 00:03:10,115
what events should cause a change in the wing settings, and other things like that.

38
00:03:10,115 --> 00:03:15,970
And what’s nice about these bugs is that they are visible not just to the pilot that set them

39
00:03:15,970 --> 00:03:18,548
but to everybody else in the cockpit also.

40
00:03:18,548 --> 00:03:27,398
And so, by making [the] triggers for what will cause changes in action manifest to everybody,

41
00:03:27,398 --> 00:03:34,883
these artifacts can help coordinate collaboration and increase safety in cockpit situations.

42
00:03:40,452 --> 00:03:45,265
So, what we’ve seen here is that when interfaces help people distribute cognition,

43
00:03:45,265 --> 00:03:48,368
it can encourage experimentation like we saw in Tetris;

44
00:03:48,368 --> 00:03:52,099
it can scaffold learning and reduce errors, like we saw with the Montessori blocks;

45
00:03:52,099 --> 00:03:56,563
it can show only the differences that matter, like in the London Underground map;

46
00:03:56,563 --> 00:04:01,499
it can convert slow calculation in the fast perception, like we saw with the map coloring;

47
00:04:01,499 --> 00:04:07,907
it can support chunking, especially by experts, as we saw with chess, and with gestural interfaces;

48
00:04:07,907 --> 00:04:12,175
it can increase efficiency as we saw with diagrammatic representations;

49
00:04:12,175 --> 00:04:15,936
and it can facilitate collaboration like we saw in the cockpit.

50
00:04:17,567 --> 00:04:20,507
Given all of these benefits of good representations,

51
00:04:20,507 --> 00:04:24,348
it’s kind of surprising that a whole lot of actual interfaces that are out there

52
00:04:24,348 --> 00:04:29,699
offer a really crummy job at being able to help people distribute their cognitive efforts.

53
00:04:29,699 --> 00:04:32,969
So I call these poor representations “common but deadly.”

54
00:04:32,969 --> 00:04:36,386
Let’s take a look at a couple of them. Here’s one:

55
00:04:36,386 --> 00:04:38,950
I was at a symposium at IBM a couple of years ago.

56
00:04:38,950 --> 00:04:42,996
To get on their Wi-Fi network, I needed to enter a password.

57
00:04:42,996 --> 00:04:46,948
And, I typed in a password that I thought would be just fine.

58
00:04:46,948 --> 00:04:51,777
And the Wi-Fi system told me “The password you typed is not valid; please change it.”


59
00:04:51,777 --> 00:04:54,989
What do I need to change it to though?

60
00:04:54,989 --> 00:04:59,640
All passwords often have different requirements, like mixtures of upper- and lowercase letters,


61
00:04:59,640 --> 00:05:05,151
the presence or absence of numbers or special modifier keys,

62
00:05:05,151 --> 00: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.

63
00:05:13,138 --> 00:05:19,415
This representation would obviously be a heck of a lot better if, when I entered the password, it said,


64
00:05:19,415 --> 00:05:21,704
“You need a password that’s at least ten characters long,

65
00:05:21,704 --> 00:05:27,761
or that contains a mixture of upper- and lowercase characters, or that has at least one number.”


66
00:05:27,761 --> 00:05:31,625
And that could be validated the first time that I typed in the new password,

67
00:05:31,625 --> 00:05:35,807
as supposed to I have to wait till I type in both, hit Go, and it says, “Uh-oh.”


68
00:05:37,038 --> 00: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


69
00:05:42,765 --> 00:05:51,405
and the registration for this event was… here — this is the web form from it — and I thought I registered.


70
00:05:51,405 --> 00:05:57,474
I clicked Go and after hitting Next, it said “You must fill out all registered fields” —

71
00:05:57,474 --> 00:06:00,777
You can see that at the top of the screen right here.

72
00:06:00,792 --> 00:06:07,366
And, totally frustrating if you tried to register because you’re like “Well… Which one did I miss?”


73
00:06:07,366 --> 00: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,


74
00:06:15,931 --> 00:06:22,057
or it could create a smaller form that has only the parts that you missed the last time around

75
00:06:22,057 --> 00:06:25,923
and says “Here is the one thing you needed to fill that out before continuing.”

76
00:06:27,323 --> 00:06:33,961
Here’s another example: This is from BBEdit and it when I tried to save it says,


77
00:06:33,961 --> 00:06:40,554
“Document encoding mismatch. The document contains data which describes its encoding as UTF-8.

78
00:06:40,554 --> 00:06:44,523
But the encoding has been set to Western (ISO Latin-1).”

79
00:06:44,523 --> 00:06:52,392
And I have two options here. One of them is Cancel, and another one is Save Anyway.

80
00:06:52,392 --> 00:07:00,574
But the actions that I’d like to be able to do are probably something like “Make everything UTF-8”,

81
00:07:00,574 --> 00:07:10,050
or “Make everything Latin-1”, or “Hey computer, tell me which of these probably makes more sense;

82
00:07:10,050 --> 00:07:15,291
help me choose between these”, or “It doesn’t matter.”

83
00:07:15,291 --> 00:07:21,120
But the information that I need to be able to make a decision simply isn’t present in the user interface.

84
00:07:21,120 --> 00:07:28,724
Dialog boxes should be action-oriented; they should help guide users towards what their next step is likely to be


85
00:07:28,724 --> 00:07:33,714
and it should provide them with the information that they need in order to be able to accomplish that next step.

86
00:07:34,852 --> 00:07:39,127
Here’s an interface that I think is intentionally designed to be sub-optimal:

87
00:07:39,127 --> 00:07:47,277
Here we have the eBay funding confirmation page, and if you look at this page,


88
00:07:47,277 --> 00:07:51,819
what you’ll see is if I switched to a credit card and it says,

89
00:07:51,819 --> 00: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


90
00:07:58,102 --> 00:08:06,885
and eBay and PayPal do this, of course, because they make more money if you see a bank account

91
00:08:06,885 --> 00:08:09,960
as opposed to have to pay the credit card transaction fee.

92
00:08:09,960 --> 00:08:16,039
And so, down at the bottom here, it offers you two buttons.

93
00:08:16,039 --> 00:08:20,941
One of them is “Pay with bank account” and the other one is “Pay with credit card.”

94
00:08:22,095 --> 00:08:26,683
Good action-oriented titles — I really like that part of this user interface.

95
00:08:26,683 --> 00:08:34,837
And what you see is that the account that they want you to pick is made nice and bright

96
00:08:34,837 --> 00:08:39,923
and the account that you probably want is dimmed out as if it’s inactive.

97
00:08:39,923 --> 00:08:42,690
Is this is a good user interface or a bad user interface?

98
00:08:42,690 --> 00:08:50,405
Well, user experience’s probably somewhat degraded; Paypal’s profit significant increases.

99
00:08:50,405 --> 00:08:54,922
And in a lot of real-world situations, you may need to make this trade-off.

100
00:08:54,922 --> 00:08:58,986
I think that more globally there are other ways that you could address this

101
00:08:58,986 --> 00:09:02,684
but I thought this was an interesting example of an interaction design

102
00:09:02,684 --> 00:09:09,837
that sacrificed some user experience in order to achieve higher profits.

103
00:09:09,837 --> 00:09:11,914
Hard to say whether it’s worth it.

104
00:09:11,914 --> 00:09:14,728
Here’s a dialog box for exporting a picture.

105
00:09:14,728 --> 00:09:21,694
We want to save that to JPEG, and the dialog box is notifying us that this JPEG already exists.

106
00:09:21,694 --> 00:09:23,325
And you got a couple of options.

107
00:09:23,325 --> 00:09:27,210
So one thing that I that I like about this future interface

108
00:09:27,210 --> 00:09:31,621
is that you get buttons that are really action-oriented here — that’s great.


109
00:09:31,621 --> 00:09:35,572
A challenge is: how do I know whether I want this file or not?

110
00:09:35,572 --> 00:09:40,265
I mean, what is “l1010235.jpg”?

111
00:09:40,265 --> 00: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”,

112
00:09:46,985 --> 00:09:50,598
and that way I could have a better sense of whether I wanted to override it,

113
00:09:50,598 --> 00:09:53,827
or skip this operation, or give it a brand new unique name.

114
00:09:54,766 --> 00:09:57,723
Here’s an example from Microsoft Outlook.

115
00:09:57,723 --> 00:10:02,864
This is a Duplicate Contact Detected dialog box.

116
00:10:02,864 --> 00:10:10,040
And it says that “Hey, you know, there’s some information here that already exists in your contacts.

117
00:10:10,040 --> 00:10:15,435
Do you want to update it or do you want to add this as a new contact?”

118
00:10:15,435 --> 00:10:19,487
The difficulty, of course, is I don’t know what’s in that contact right now

119
00:10:19,487 --> 00:10:25,751
and so this is not a decision that I can make from looking at this dialog box on its own.

120
00:10:25,751 --> 00: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.


121
00:10:33,960 --> 00:10:37,237
Microsoft improved this in a subsequent version of Outlook.

122
00:10:37,807 --> 00:10:42,330
Its dialog box is probably still more complicated that it really needs to be:

123
00:10:42,330 --> 00:10:45,114
I think it could be streamline significantly;

124
00:10:45,114 --> 00:10:49,724
but what it does do is it shows me the two things that I really need to know:


125
00:10:49,724 --> 00:10:56,020
The first of these is what the final outcome of the process is going to look like —

126
00:10:56,020 --> 00:11:00,115
so, “After we’ve merged these things, here’s what you’ll get.”

127
00:11:00,115 --> 00:11:02,765
And the other thing it’s going to show me

128
00:11:02,765 --> 00:11:06,440
is “Here’s the piece of information that we’re going to change in order to make that happen.”


129
00:11:07,347 --> 00:11:11,765
One way that I think this dialog box could be streamlined is that,

130
00:11:11,765 --> 00: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,


131
00:11:22,680 --> 00:11:29,111
the old contact information is shown in a completely different format and so it’s difficult to compare.


132
00:11:29,111 --> 00:11:34,262
If you believed that you don’t need to see that information because the relevant bits aren’t in here,

133
00:11:34,262 --> 00:11:36,105
well then, just don’t include this.

134
00:11:36,105 --> 00: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,


135
00:11:42,896 --> 00:11:45,711
in that case it probably would make it a lot more sense to show it

136
00:11:45,711 --> 00:11:50,045
in a manner that’s parallel with these other two boxes.


137
00:11:50,660 --> 00:11:55,881
What we’ve covered in these past two lectures is an understanding of the theoretical foundations


138
00:11:55,881 --> 00:11:58,386
of how the representation of information

139
00:11:58,386 --> 00:12:03,323
can have tremendous consequences in terms of the user experience of a system.


140
00:12:03,323 --> 00:12:07,095
I think this is one of the most interesting topics in all of HCI.

141
00:12:07,095 --> 00:12:10,109
And if you found this area as interesting as I did,

142
00:12:10,109 --> 00:12:12,804
there’s a couple of books that I can recommend to go further here.


143
00:12:12,804 --> 00:12:17,022
One of them is Herb Simon’s « The Sciences of the Artificial ».

144
00:12:17,022 --> 00:12:25,743
It is a great monograph, written several decades ago now, about the role of design in science


145
00:12:25,743 --> 00:12:29,576
and about the nature of mental representations — a really interesting book.


146
00:12:29,576 --> 00:12:37,576
Another one here is Ed Hutchins’ book « Cognition in the Wild » which lays out a foundation for distributed cognition.


147
00:12:37,576 --> 00:12:44,713
and describes Ed’s work in airplanes and on naval ships.

148
00:12:44,713 --> 00:12:51,439
And the last we have here is Don Norman’s book, « Things That Makes Us Smart »,

149
00:12:51,439 --> 00:12:59,371
which is a great book about a lot of the cognitive science research and distributive cognition


150
00:12:59,371 --> 00:13:02,578
and the role of representations in cognition.

151
00:13:02,578 --> 00: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.


152
00:13:08,249 --> 99:59:59,999
I’ll see you next time.