-
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.
