[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:02.51,0:00:06.32,Default,,0000,0000,0000,,We’ve all heard the saying that a picture is worth ten thousand words.
Dialogue: 0,0:00:06.32,0:00:11.74,Default,,0000,0000,0000,,This idea of worth is interesting because it implies some kind of interchangeability,
Dialogue: 0,0:00:11.74,0:00:18.47,Default,,0000,0000,0000,,that there are some rate at which you can convert one representation into another representation.
Dialogue: 0,0:00:18.47,0:00:22.16,Default,,0000,0000,0000,,How might we establish that interchangeability?
Dialogue: 0,0:00:24.24,0:00:27.84,Default,,0000,0000,0000,,One type of interchangeability is informational equivalence.
Dialogue: 0,0:00:27.84,0:00:30.34,Default,,0000,0000,0000,,Two representations are informationally equivalent
Dialogue: 0,0:00:30.34,0:00:35.12,Default,,0000,0000,0000,,if all the information [that] is present in one can also be inferred from the other.
Dialogue: 0,0:00:36.47,0:00:40.41,Default,,0000,0000,0000,,But just because the same information is theoretically inferable
Dialogue: 0,0:00:40.41,0:00:43.69,Default,,0000,0000,0000,,doesn’t mean it will take the same required effort to extract it.
Dialogue: 0,0:00:46.18,0:00:50.12,Default,,0000,0000,0000,,Some representations require more steps to compute and inference.
Dialogue: 0,0:00:50.12,0:00:52.99,Default,,0000,0000,0000,,And the difference in the perceiver’s computational effort
Dialogue: 0,0:00:52.99,0:00:56.92,Default,,0000,0000,0000,,presents both challenges and opportunities for you as a designer.
Dialogue: 0,0:00:56.92,0:00:59.89,Default,,0000,0000,0000,,Let’s look at an example.
Dialogue: 0,0:00:59.89,0:01:05.24,Default,,0000,0000,0000,,Let’s take the sentence “A pair of parallel lines is cut by a transversal.”
Dialogue: 0,0:01:05.24,0:01:08.90,Default,,0000,0000,0000,,This cut generates eight angles.
Dialogue: 0,0:01:08.92,0:01:14.79,Default,,0000,0000,0000,,From the sentence, it’s difficult to reason about which pairs form the alternate interior angles.\N
Dialogue: 0,0:01:14.79,0:01:23.08,Default,,0000,0000,0000,,And in fact if you to try, you’ll find yourself creating a mental image of two parallel lines cut by a transversal.\N
Dialogue: 0,0:01:24.10,0:01:26.56,Default,,0000,0000,0000,,With a diagram like this, however,
Dialogue: 0,0:01:26.56,0:01:32.92,Default,,0000,0000,0000,,the sentence and the diagram are informationally equivalent but computationally different for the perceiver.
Dialogue: 0,0:01:33.49,0:01:37.43,Default,,0000,0000,0000,,One major benefit of the graphical user interface over the command line
Dialogue: 0,0:01:37.43,0:01:45.28,Default,,0000,0000,0000,,is that the graphical user interface enables many common actions to be perception tasks requiring little inference.\N
Dialogue: 0,0:01:46.23,0:01:52.09,Default,,0000,0000,0000,,So far we’ve seen a number of examples of how distributed cognition can help individual work.
Dialogue: 0,0:01:52.09,0:01:55.52,Default,,0000,0000,0000,,Distributed cognition can also have powerful benefits for group work.
Dialogue: 0,0:01:55.52,0:01:59.34,Default,,0000,0000,0000,,And just to give you a quick sense of what this might be like,
Dialogue: 0,0:01:59.34,0:02:04.78,Default,,0000,0000,0000,,I’ll give you an example from Ed Hutchin’s research on airplane cockpits.
Dialogue: 0,0:02:04.78,0:02:08.73,Default,,0000,0000,0000,,One of the things that Ed observed is that the artifacts in the cockpit
Dialogue: 0,0:02:08.73,0:02:13.88,Default,,0000,0000,0000,,help coordinate action between the multiple people that work there — the pilots.
Dialogue: 0,0:02:13.88,0:02:21.97,Default,,0000,0000,0000,,And so, for example, one instance of this is the speed dial where, on landing and takeoff,
Dialogue: 0,0:02:21.97,0:02:26.52,Default,,0000,0000,0000,,it’s incredibly important to have the speed be accurate
Dialogue: 0,0:02:26.52,0:02:31.59,Default,,0000,0000,0000,,because you are at the most critical part of the airplane — You’re close to the ground;\N
Dialogue: 0,0:02:31.59,0:02:37.11,Default,,0000,0000,0000,,The wings aren’t designed for… they are designed primarily for going long-haul, very high,
Dialogue: 0,0:02:37.11,0:02:39.53,Default,,0000,0000,0000,,and the shape of the wings has to be changed
Dialogue: 0,0:02:39.53,0:02:43.33,Default,,0000,0000,0000,,to accommodate the low speeds that are required for landing and takeoff.
Dialogue: 0,0:02:43.33,0:02:51.25,Default,,0000,0000,0000,,And so the multiple pilots on a large airplane need to coordinate their efforts in several important ways.
Dialogue: 0,0:02:51.25,0:02:56.89,Default,,0000,0000,0000,,There are several plastic indicators called “bugs” around the perimeter of the speedometer.
Dialogue: 0,0:02:56.89,0:03:03.20,Default,,0000,0000,0000,,And the pilots can manually set those bugs to do things like mark where a speed,
Dialogue: 0,0:03:03.20,0:03:10.12,Default,,0000,0000,0000,,what events should cause a change in the wing settings, and other things like that.
Dialogue: 0,0:03:10.12,0:03:15.97,Default,,0000,0000,0000,,And what’s nice about these bugs is that they are visible not just to the pilot that set them
Dialogue: 0,0:03:15.97,0:03:18.55,Default,,0000,0000,0000,,but to everybody else in the cockpit also.
Dialogue: 0,0:03:18.55,0:03:27.40,Default,,0000,0000,0000,,And so, by making [the] triggers for what will cause changes in action manifest to everybody,
Dialogue: 0,0:03:27.40,0:03:34.88,Default,,0000,0000,0000,,these artifacts can help coordinate collaboration and increase safety in cockpit situations.
Dialogue: 0,0:03:40.45,0:03:45.26,Default,,0000,0000,0000,,So, what we’ve seen here is that when interfaces help people distribute cognition,
Dialogue: 0,0:03:45.26,0:03:48.37,Default,,0000,0000,0000,,it can encourage experimentation like we saw in Tetris;
Dialogue: 0,0:03:48.37,0:03:52.10,Default,,0000,0000,0000,,it can scaffold learning and reduce errors, like we saw with the Montessori blocks;
Dialogue: 0,0:03:52.10,0:03:56.56,Default,,0000,0000,0000,,it can show only the differences that matter, like in the London Underground map;
Dialogue: 0,0:03:56.56,0:04:01.50,Default,,0000,0000,0000,,it can convert slow calculation in the fast perception, like we saw with the map coloring;
Dialogue: 0,0:04:01.50,0:04:07.91,Default,,0000,0000,0000,,it can support chunking, especially by experts, as we saw with chess, and with gestural interfaces;
Dialogue: 0,0:04:07.91,0:04:12.18,Default,,0000,0000,0000,,it can increase efficiency as we saw with diagrammatic representations;
Dialogue: 0,0:04:12.18,0:04:15.94,Default,,0000,0000,0000,,and it can facilitate collaboration like we saw in the cockpit.
Dialogue: 0,0:04:17.57,0:04:20.51,Default,,0000,0000,0000,,Given all of these benefits of good representations,
Dialogue: 0,0:04:20.51,0:04:24.35,Default,,0000,0000,0000,,it’s kind of surprising that a whole lot of actual interfaces that are out there
Dialogue: 0,0:04:24.35,0:04:29.70,Default,,0000,0000,0000,,offer a really crummy job at being able to help people distribute their cognitive efforts.
Dialogue: 0,0:04:29.70,0:04:32.97,Default,,0000,0000,0000,,So I call these poor representations “common but deadly.”
Dialogue: 0,0:04:32.97,0:04:36.39,Default,,0000,0000,0000,,Let’s take a look at a couple of them. Here’s one:
Dialogue: 0,0:04:36.39,0:04:38.95,Default,,0000,0000,0000,,I was at a symposium at IBM a couple of years ago.
Dialogue: 0,0:04:38.95,0:04:42.100,Default,,0000,0000,0000,,To get on their Wi-Fi network, I needed to enter a password.
Dialogue: 0,0:04:42.100,0:04:46.95,Default,,0000,0000,0000,,And, I typed in a password that I thought would be just fine.
Dialogue: 0,0:04:46.95,0:04:51.78,Default,,0000,0000,0000,,And the Wi-Fi system told me “The password you typed is not valid; please change it.”\N
Dialogue: 0,0:04:51.78,0:04:54.99,Default,,0000,0000,0000,,What do I need to change it to though?
Dialogue: 0,0:04:54.99,0:04:59.64,Default,,0000,0000,0000,,All passwords often have different requirements, like mixtures of upper- and lowercase letters,\N
Dialogue: 0,0:04:59.64,0:05:05.15,Default,,0000,0000,0000,,the presence or absence of numbers or special modifier keys,
Dialogue: 0,0:05:05.15,0:05:12.49,Default,,0000,0000,0000,,and there’s no way for me to know from the screen what the problem with the password that I entered was.
Dialogue: 0,0:05:13.14,0:05:19.42,Default,,0000,0000,0000,,This representation would obviously be a heck of a lot better if, when I entered the password, it said,\N
Dialogue: 0,0:05:19.42,0:05:21.70,Default,,0000,0000,0000,,“You need a password that’s at least ten characters long,
Dialogue: 0,0:05:21.70,0:05:27.76,Default,,0000,0000,0000,,or that contains a mixture of upper- and lowercase characters, or that has at least one number.”\N
Dialogue: 0,0:05:27.76,0:05:31.62,Default,,0000,0000,0000,,And that could be validated the first time that I typed in the new password,
Dialogue: 0,0:05:31.62,0:05:35.81,Default,,0000,0000,0000,,as supposed to I have to wait till I type in both, hit Go, and it says, “Uh-oh.”\N
Dialogue: 0,0:05:37.04,0:05:42.76,Default,,0000,0000,0000,,Here’s another example: NASA invited me to give a talk in an event they had in San Francisco a year or so ago\N
Dialogue: 0,0:05:42.76,0:05:51.40,Default,,0000,0000,0000,,and the registration for this event was… here — this is the web form from it — and I thought I registered.\N
Dialogue: 0,0:05:51.40,0:05:57.47,Default,,0000,0000,0000,,I clicked Go and after hitting Next, it said “You must fill out all registered fields” —
Dialogue: 0,0:05:57.47,0:06:00.78,Default,,0000,0000,0000,,You can see that at the top of the screen right here.
Dialogue: 0,0:06:00.79,0:06:07.37,Default,,0000,0000,0000,,And, totally frustrating if you tried to register because you’re like “Well… Which one did I miss?”\N
Dialogue: 0,0:06:07.37,0:06:15.93,Default,,0000,0000,0000,,It would be a lot more effective if, for example, you could highlight the things that it thinks you need to fill out,\N
Dialogue: 0,0:06:15.93,0:06:22.06,Default,,0000,0000,0000,,or it could create a smaller form that has only the parts that you missed the last time around
Dialogue: 0,0:06:22.06,0:06:25.92,Default,,0000,0000,0000,,and says “Here is the one thing you needed to fill that out before continuing.”
Dialogue: 0,0:06:27.32,0:06:33.96,Default,,0000,0000,0000,,Here’s another example: This is from BBEdit and it when I tried to save it says,\N
Dialogue: 0,0:06:33.96,0:06:40.55,Default,,0000,0000,0000,,“Document encoding mismatch. The document contains data which describes its encoding as UTF-8.
Dialogue: 0,0:06:40.55,0:06:44.52,Default,,0000,0000,0000,,But the encoding has been set to Western (ISO Latin-1).”
Dialogue: 0,0:06:44.52,0:06:52.39,Default,,0000,0000,0000,,And I have two options here. One of them is Cancel, and another one is Save Anyway.
Dialogue: 0,0:06:52.39,0:07:00.57,Default,,0000,0000,0000,,But the actions that I’d like to be able to do are probably something like “Make everything UTF-8”,
Dialogue: 0,0:07:00.57,0:07:10.05,Default,,0000,0000,0000,,or “Make everything Latin-1”, or “Hey computer, tell me which of these probably makes more sense;
Dialogue: 0,0:07:10.05,0:07:15.29,Default,,0000,0000,0000,,help me choose between these”, or “It doesn’t matter.”
Dialogue: 0,0:07:15.29,0:07:21.12,Default,,0000,0000,0000,,But the information that I need to be able to make a decision simply isn’t present in the user interface.
Dialogue: 0,0:07:21.12,0:07:28.72,Default,,0000,0000,0000,,Dialog boxes should be action-oriented; they should help guide users towards what their next step is likely to be\N
Dialogue: 0,0:07:28.72,0:07:33.71,Default,,0000,0000,0000,,and it should provide them with the information that they need in order to be able to accomplish that next step.
Dialogue: 0,0:07:34.85,0:07:39.13,Default,,0000,0000,0000,,Here’s an interface that I think is intentionally designed to be sub-optimal:
Dialogue: 0,0:07:39.13,0:07:47.28,Default,,0000,0000,0000,,Here we have the eBay funding confirmation page, and if you look at this page,\N
Dialogue: 0,0:07:47.28,0:07:51.82,Default,,0000,0000,0000,,what you’ll see is if I switched to a credit card and it says,
Dialogue: 0,0:07:51.82,0:07:58.10,Default,,0000,0000,0000,,before you’ll go to a credit card, we’re going to give you this prompt that asks you to verify that\N
Dialogue: 0,0:07:58.10,0:08:06.88,Default,,0000,0000,0000,,and eBay and PayPal do this, of course, because they make more money if you see a bank account
Dialogue: 0,0:08:06.88,0:08:09.96,Default,,0000,0000,0000,,as opposed to have to pay the credit card transaction fee.
Dialogue: 0,0:08:09.96,0:08:16.04,Default,,0000,0000,0000,,And so, down at the bottom here, it offers you two buttons.
Dialogue: 0,0:08:16.04,0:08:20.94,Default,,0000,0000,0000,,One of them is “Pay with bank account” and the other one is “Pay with credit card.”
Dialogue: 0,0:08:22.10,0:08:26.68,Default,,0000,0000,0000,,Good action-oriented titles — I really like that part of this user interface.
Dialogue: 0,0:08:26.68,0:08:34.84,Default,,0000,0000,0000,,And what you see is that the account that they want you to pick is made nice and bright
Dialogue: 0,0:08:34.84,0:08:39.92,Default,,0000,0000,0000,,and the account that you probably want is dimmed out as if it’s inactive.
Dialogue: 0,0:08:39.92,0:08:42.69,Default,,0000,0000,0000,,Is this is a good user interface or a bad user interface?
Dialogue: 0,0:08:42.69,0:08:50.40,Default,,0000,0000,0000,,Well, user experience’s probably somewhat degraded; Paypal’s profit significant increases.
Dialogue: 0,0:08:50.40,0:08:54.92,Default,,0000,0000,0000,,And in a lot of real-world situations, you may need to make this trade-off.
Dialogue: 0,0:08:54.92,0:08:58.99,Default,,0000,0000,0000,,I think that more globally there are other ways that you could address this
Dialogue: 0,0:08:58.99,0:09:02.68,Default,,0000,0000,0000,,but I thought this was an interesting example of an interaction design
Dialogue: 0,0:09:02.68,0:09:09.84,Default,,0000,0000,0000,,that sacrificed some user experience in order to achieve higher profits.
Dialogue: 0,0:09:09.84,0:09:11.91,Default,,0000,0000,0000,,Hard to say whether it’s worth it.
Dialogue: 0,0:09:11.91,0:09:14.73,Default,,0000,0000,0000,,Here’s a dialog box for exporting a picture.
Dialogue: 0,0:09:14.73,0:09:21.69,Default,,0000,0000,0000,,We want to save that to JPEG, and the dialog box is notifying us that this JPEG already exists.
Dialogue: 0,0:09:21.69,0:09:23.32,Default,,0000,0000,0000,,And you got a couple of options.
Dialogue: 0,0:09:23.32,0:09:27.21,Default,,0000,0000,0000,,So one thing that I that I like about this future interface
Dialogue: 0,0:09:27.21,0:09:31.62,Default,,0000,0000,0000,,is that you get buttons that are really action-oriented here — that’s great.\N
Dialogue: 0,0:09:31.62,0:09:35.57,Default,,0000,0000,0000,,A challenge is: how do I know whether I want this file or not?
Dialogue: 0,0:09:35.57,0:09:40.26,Default,,0000,0000,0000,,I mean, what is “l1010235.jpg”?
Dialogue: 0,0:09:40.26,0:09:46.98,Default,,0000,0000,0000,,It would make a lot more sense if this dialog box showed me an icon of “here’s what this picture is”,
Dialogue: 0,0:09:46.98,0:09:50.60,Default,,0000,0000,0000,,and that way I could have a better sense of whether I wanted to override it,
Dialogue: 0,0:09:50.60,0:09:53.83,Default,,0000,0000,0000,,or skip this operation, or give it a brand new unique name.
Dialogue: 0,0:09:54.77,0:09:57.72,Default,,0000,0000,0000,,Here’s an example from Microsoft Outlook.
Dialogue: 0,0:09:57.72,0:10:02.86,Default,,0000,0000,0000,,This is a Duplicate Contact Detected dialog box.
Dialogue: 0,0:10:02.86,0:10:10.04,Default,,0000,0000,0000,,And it says that “Hey, you know, there’s some information here that already exists in your contacts.
Dialogue: 0,0:10:10.04,0:10:15.44,Default,,0000,0000,0000,,Do you want to update it or do you want to add this as a new contact?”
Dialogue: 0,0:10:15.44,0:10:19.49,Default,,0000,0000,0000,,The difficulty, of course, is I don’t know what’s in that contact right now
Dialogue: 0,0:10:19.49,0:10:25.75,Default,,0000,0000,0000,,and so this is not a decision that I can make from looking at this dialog box on its own.
Dialogue: 0,0:10:25.75,0:10:32.87,Default,,0000,0000,0000,,I can of course click Open Existing Contact; it’ll show me that information, but that’s one extra step down the line.\N
Dialogue: 0,0:10:33.96,0:10:37.24,Default,,0000,0000,0000,,Microsoft improved this in a subsequent version of Outlook.
Dialogue: 0,0:10:37.81,0:10:42.33,Default,,0000,0000,0000,,Its dialog box is probably still more complicated that it really needs to be:
Dialogue: 0,0:10:42.33,0:10:45.11,Default,,0000,0000,0000,,I think it could be streamline significantly;
Dialogue: 0,0:10:45.11,0:10:49.72,Default,,0000,0000,0000,,but what it does do is it shows me the two things that I really need to know:\N
Dialogue: 0,0:10:49.72,0:10:56.02,Default,,0000,0000,0000,,The first of these is what the final outcome of the process is going to look like —
Dialogue: 0,0:10:56.02,0:11:00.12,Default,,0000,0000,0000,,so, “After we’ve merged these things, here’s what you’ll get.”
Dialogue: 0,0:11:00.12,0:11:02.76,Default,,0000,0000,0000,,And the other thing it’s going to show me
Dialogue: 0,0:11:02.76,0:11:06.44,Default,,0000,0000,0000,,is “Here’s the piece of information that we’re going to change in order to make that happen.”\N
Dialogue: 0,0:11:07.35,0:11:11.76,Default,,0000,0000,0000,,One way that I think this dialog box could be streamlined is that,
Dialogue: 0,0:11:11.76,0:11:22.68,Default,,0000,0000,0000,,while it shows that the final information this way and it gives us the “so I can change this or happening” here,\N
Dialogue: 0,0:11:22.68,0:11:29.11,Default,,0000,0000,0000,,the old contact information is shown in a completely different format and so it’s difficult to compare.\N
Dialogue: 0,0:11:29.11,0:11:34.26,Default,,0000,0000,0000,,If you believed that you don’t need to see that information because the relevant bits aren’t in here,
Dialogue: 0,0:11:34.26,0:11:36.10,Default,,0000,0000,0000,,well then, just don’t include this.
Dialogue: 0,0:11:36.10,0:11:42.88,Default,,0000,0000,0000,,If, on the other hand, you decide that we do need to show the old version because you may want to keep it,\N
Dialogue: 0,0:11:42.90,0:11:45.71,Default,,0000,0000,0000,,in that case it probably would make it a lot more sense to show it
Dialogue: 0,0:11:45.71,0:11:50.04,Default,,0000,0000,0000,,in a manner that’s parallel with these other two boxes.\N
Dialogue: 0,0:11:50.66,0:11:55.88,Default,,0000,0000,0000,,What we’ve covered in these past two lectures is an understanding of the theoretical foundations\N
Dialogue: 0,0:11:55.88,0:11:58.39,Default,,0000,0000,0000,,of how the representation of information
Dialogue: 0,0:11:58.39,0:12:03.32,Default,,0000,0000,0000,,can have tremendous consequences in terms of the user experience of a system.\N
Dialogue: 0,0:12:03.32,0:12:07.10,Default,,0000,0000,0000,,I think this is one of the most interesting topics in all of HCI.
Dialogue: 0,0:12:07.10,0:12:10.11,Default,,0000,0000,0000,,And if you found this area as interesting as I did,
Dialogue: 0,0:12:10.11,0:12:12.80,Default,,0000,0000,0000,,there’s a couple of books that I can recommend to go further here.\N
Dialogue: 0,0:12:12.80,0:12:17.02,Default,,0000,0000,0000,,One of them is Herb Simon’s « The Sciences of the Artificial ».
Dialogue: 0,0:12:17.02,0:12:25.74,Default,,0000,0000,0000,,It is a great monograph, written several decades ago now, about the role of design in science\N
Dialogue: 0,0:12:25.74,0:12:29.58,Default,,0000,0000,0000,,and about the nature of mental representations — a really interesting book.\N
Dialogue: 0,0:12:29.58,0:12:37.58,Default,,0000,0000,0000,,Another one here is Ed Hutchins’ book « Cognition in the Wild » which lays out a foundation for distributed cognition.\N
Dialogue: 0,0:12:37.58,0:12:44.71,Default,,0000,0000,0000,,and describes Ed’s work in airplanes and on naval ships.
Dialogue: 0,0:12:44.71,0:12:51.44,Default,,0000,0000,0000,,And the last we have here is Don Norman’s book, « Things That Makes Us Smart »,
Dialogue: 0,0:12:51.44,0:12:59.37,Default,,0000,0000,0000,,which is a great book about a lot of the cognitive science research and distributive cognition\N
Dialogue: 0,0:12:59.37,0:13:02.58,Default,,0000,0000,0000,,and the role of representations in cognition.
Dialogue: 0,0:13:02.58,0:13:08.25,Default,,0000,0000,0000,,And this is one of the sources of several of these examples in this lecture, like, as are these other books, too.\N
Dialogue: 0,0:13:08.25,9:59:59.99,Default,,0000,0000,0000,,I’ll see you next time.