We’ve all heard the saying that a picture is worth ten thousand words.
This idea of worth is interesting because it implies some kind of interchangeability,
that there are some rate at which you can convert one representation into another representation.
How might we establish that interchangeability?
One type of interchangeability is informational equivalence.
Two representations are informationally equivalent
if all the information [that] is present in one can also be inferred from the other.
But just because the same information is theoretically inferable
doesn’t mean it will take the same required effort to extract it.
Some representations require more steps to compute and inference.
And the difference in the perceiver’s computational effort
presents both challenges and opportunities for you as a designer.
Let’s look at an example.
Let’s take the sentence “A pair of parallel lines is cut by a transversal.”
This cut generates eight angles.
From the sentence, it’s difficult to reason about which pairs form the alternate interior angles.
And in fact if you to try, you’ll find yourself creating a mental image of two parallel lines cut by a transversal.
With a diagram like this, however,
the sentence and the diagram are informationally equivalent but computationally different for the perceiver.
One major benefit of the graphical user interface over the command line
is that the graphical user interface enables many common actions to be perception tasks requiring little inference.
So far we’ve seen a number of examples of how distributed cognition can help individual work.
Distributed cognition can also have powerful benefits for group work.
And just to give you a quick sense of what this might be like,
I’ll give you an example from Ed Hutchin’s research on airplane cockpits.
One of the things that Ed observed is that the artifacts in the cockpit
help coordinate action between the multiple people that work there — the pilots.
And so, for example, one instance of this is the speed dial where, on landing and takeoff,
it’s incredibly important to have the speed be accurate
because you are at the most critical part of the airplane — You’re close to the ground;
The wings aren’t designed for… they are designed primarily for going long-haul, very high,
and the shape of the wings has to be changed
to accommodate the low speeds that are required for landing and takeoff.
And so the multiple pilots on a large airplane need to coordinate their efforts in several important ways.
There are several plastic indicators called “bugs” around the perimeter of the speedometer.
And the pilots can manually set those bugs to do things like mark where a speed,
what events should cause a change in the wing settings, and other things like that.
And what’s nice about these bugs is that they are visible not just to the pilot that set them
but to everybody else in the cockpit also.
And so, by making [the] triggers for what will cause changes in action manifest to everybody,
these artifacts can help coordinate collaboration and increase safety in cockpit situations.
So, what we’ve seen here is that when interfaces help people distribute cognition,
it can encourage experimentation like we saw in Tetris;
it can scaffold learning and reduce errors, like we saw with the Montessori blocks;
it can show only the differences that matter, like in the London Underground map;
it can convert slow calculation in the fast perception, like we saw with the map coloring;
it can support chunking, especially by experts, as we saw with chess, and with gestural interfaces;
it can increase efficiency as we saw with diagrammatic representations;
and it can facilitate collaboration like we saw in the cockpit.
Given all of these benefits of good representations,
it’s kind of surprising that a whole lot of actual interfaces that are out there
offer a really crummy job at being able to help people distribute their cognitive efforts.
So I call these poor representations “common but deadly.”
Let’s take a look at a couple of them. Here’s one:
I was at a symposium at IBM a couple of years ago.
To get on their Wi-Fi network, I needed to enter a password.
And, I typed in a password that I thought would be just fine.
And the Wi-Fi system told me “The password you typed is not valid; please change it.”
What do I need to change it to though?
All passwords often have different requirements, like mixtures of upper- and lowercase letters,
the presence or absence of numbers or special modifier keys,
and there’s no way for me to know from the screen what the problem with the password that I entered was.
This representation would obviously be a heck of a lot better if, when I entered the password, it said,
“You need a password that’s at least ten characters long,
or that contains a mixture of upper- and lowercase characters, or that has at least one number.”
And that could be validated the first time that I typed in the new password,
as supposed to I have to wait till I type in both, hit Go, and it says, “Uh-oh.”
Here’s another example: NASA invited me to give a talk in an event they had in San Francisco a year or so ago
and the registration for this event was… here — this is the web form from it — and I thought I registered.
I clicked Go and after hitting Next, it said “You must fill out all registered fields” —
You can see that at the top of the screen right here.
And, totally frustrating if you tried to register because you’re like “Well… Which one did I miss?”
It would be a lot more effective if, for example, you could highlight the things that it thinks you need to fill out,
or it could create a smaller form that has only the parts that you missed the last time around
and says “Here is the one thing you needed to fill that out before continuing.”
Here’s another example: This is from BBEdit and it when I tried to save it says,
“Document encoding mismatch. The document contains data which describes its encoding as UTF-8.
But the encoding has been set to Western (ISO Latin-1).”
And I have two options here. One of them is Cancel, and another one is Save Anyway.
But the actions that I’d like to be able to do are probably something like “Make everything UTF-8”,
or “Make everything Latin-1”, or “Hey computer, tell me which of these probably makes more sense;
help me choose between these”, or “It doesn’t matter.”
But the information that I need to be able to make a decision simply isn’t present in the user interface.
Dialog boxes should be action-oriented; they should help guide users towards what their next step is likely to be
and it should provide them with the information that they need in order to be able to accomplish that next step.
Here’s an interface that I think is intentionally designed to be sub-optimal:
Here we have the eBay funding confirmation page, and if you look at this page,
what you’ll see is if I switched to a credit card and it says,
before you’ll go to a credit card, we’re going to give you this prompt that asks you to verify that
and eBay and PayPal do this, of course, because they make more money if you see a bank account
as opposed to have to pay the credit card transaction fee.
And so, down at the bottom here, it offers you two buttons.
One of them is “Pay with bank account” and the other one is “Pay with credit card.”
Good action-oriented titles — I really like that part of this user interface.
And what you see is that the account that they want you to pick is made nice and bright
and the account that you probably want is dimmed out as if it’s inactive.
Is this is a good user interface or a bad user interface?
Well, user experience’s probably somewhat degraded; Paypal’s profit significant increases.
And in a lot of real-world situations, you may need to make this trade-off.
I think that more globally there are other ways that you could address this
but I thought this was an interesting example of an interaction design
that sacrificed some user experience in order to achieve higher profits.
Hard to say whether it’s worth it.
Here’s a dialog box for exporting a picture.
We want to save that to JPEG, and the dialog box is notifying us that this JPEG already exists.
And you got a couple of options.
So one thing that I that I like about this future interface
is that you get buttons that are really action-oriented here — that’s great.
A challenge is: how do I know whether I want this file or not?
I mean, what is “l1010235.jpg”?
It would make a lot more sense if this dialog box showed me an icon of “here’s what this picture is”,
and that way I could have a better sense of whether I wanted to override it,
or skip this operation, or give it a brand new unique name.
Here’s an example from Microsoft Outlook.
This is a Duplicate Contact Detected dialog box.
And it says that “Hey, you know, there’s some information here that already exists in your contacts.
Do you want to update it or do you want to add this as a new contact?”
The difficulty, of course, is I don’t know what’s in that contact right now
and so this is not a decision that I can make from looking at this dialog box on its own.
I can of course click Open Existing Contact; it’ll show me that information, but that’s one extra step down the line.
Microsoft improved this in a subsequent version of Outlook.
Its dialog box is probably still more complicated that it really needs to be:
I think it could be streamline significantly;
but what it does do is it shows me the two things that I really need to know:
The first of these is what the final outcome of the process is going to look like —
so, “After we’ve merged these things, here’s what you’ll get.”
And the other thing it’s going to show me
is “Here’s the piece of information that we’re going to change in order to make that happen.”
One way that I think this dialog box could be streamlined is that,
while it shows that the final information this way and it gives us the “so I can change this or happening” here,
the old contact information is shown in a completely different format and so it’s difficult to compare.
If you believed that you don’t need to see that information because the relevant bits aren’t in here,
well then, just don’t include this.
If, on the other hand, you decide that we do need to show the old version because you may want to keep it,
in that case it probably would make it a lot more sense to show it
in a manner that’s parallel with these other two boxes.
What we’ve covered in these past two lectures is an understanding of the theoretical foundations
of how the representation of information
can have tremendous consequences in terms of the user experience of a system.
I think this is one of the most interesting topics in all of HCI.
And if you found this area as interesting as I did,
there’s a couple of books that I can recommend to go further here.
One of them is Herb Simon’s « The Sciences of the Artificial ».
It is a great monograph, written several decades ago now, about the role of design in science
and about the nature of mental representations — a really interesting book.
Another one here is Ed Hutchins’ book « Cognition in the Wild » which lays out a foundation for distributed cognition.
and describes Ed’s work in airplanes and on naval ships.
And the last we have here is Don Norman’s book, « Things That Makes Us Smart »,
which is a great book about a lot of the cognitive science research and distributive cognition
and the role of representations in cognition.
And this is one of the sources of several of these examples in this lecture, like, as are these other books, too.
I’ll see you next time.