WEBVTT 00:00:02.511 --> 00:00:06.321 We’ve all heard the saying that a picture is worth ten thousand words. 00:00:06.321 --> 00:00:11.745 This idea of worth is interesting because it implies some kind of interchangeability, 00:00:11.745 --> 00:00:18.474 that there are some rate at which you can convert one representation into another representation. 00:00:18.474 --> 00:00:22.164 How might we establish that interchangeability? 00:00:24.241 --> 00:00:27.837 One type of interchangeability is informational equivalence. 00:00:27.837 --> 00:00:30.341 Two representations are informationally equivalent 00:00:30.341 --> 00:00:35.117 if all the information [that] is present in one can also be inferred from the other. 00:00:36.471 --> 00:00:40.407 But just because the same information is theoretically inferable 00:00:40.407 --> 00:00:43.689 doesn’t mean it will take the same required effort to extract it. 00:00:46.181 --> 00:00:50.118 Some representations require more steps to compute and inference. 00:00:50.118 --> 00:00:52.986 And the difference in the perceiver’s computational effort 00:00:52.986 --> 00:00:56.919 presents both challenges and opportunities for you as a designer. 00:00:56.919 --> 00:00:59.889 Let’s look at an example. 00:00:59.889 --> 00:01:05.237 Let’s take the sentence “A pair of parallel lines is cut by a transversal.” 00:01:05.237 --> 00:01:08.900 This cut generates eight angles. 00:01:08.915 --> 00:01:14.790 From the sentence, it’s difficult to reason about which pairs form the alternate interior angles. 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. 00:01:24.105 --> 00:01:26.561 With a diagram like this, however, 00:01:26.561 --> 00:01:32.918 the sentence and the diagram are informationally equivalent but computationally different for the perceiver. 00:01:33.487 --> 00:01:37.426 One major benefit of the graphical user interface over the command line 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. 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. 00:01:52.086 --> 00:01:55.523 Distributed cognition can also have powerful benefits for group work. 00:01:55.523 --> 00:01:59.344 And just to give you a quick sense of what this might be like, 00:01:59.344 --> 00:02:04.780 I’ll give you an example from Ed Hutchin’s research on airplane cockpits. 00:02:04.780 --> 00:02:08.728 One of the things that Ed observed is that the artifacts in the cockpit 00:02:08.728 --> 00:02:13.875 help coordinate action between the multiple people that work there — the pilots. 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, 00:02:21.969 --> 00:02:26.522 it’s incredibly important to have the speed be accurate 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; 00:02:31.587 --> 00:02:37.110 The wings aren’t designed for… they are designed primarily for going long-haul, very high, 00:02:37.110 --> 00:02:39.528 and the shape of the wings has to be changed 00:02:39.528 --> 00:02:43.329 to accommodate the low speeds that are required for landing and takeoff. 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. 00:02:51.248 --> 00:02:56.888 There are several plastic indicators called “bugs” around the perimeter of the speedometer. 00:02:56.888 --> 00:03:03.201 And the pilots can manually set those bugs to do things like mark where a speed, 00:03:03.201 --> 00:03:10.115 what events should cause a change in the wing settings, and other things like that. 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 00:03:15.970 --> 00:03:18.548 but to everybody else in the cockpit also. 00:03:18.548 --> 00:03:27.398 And so, by making [the] triggers for what will cause changes in action manifest to everybody, 00:03:27.398 --> 00:03:34.883 these artifacts can help coordinate collaboration and increase safety in cockpit situations. 00:03:40.452 --> 00:03:45.265 So, what we’ve seen here is that when interfaces help people distribute cognition, 00:03:45.265 --> 00:03:48.368 it can encourage experimentation like we saw in Tetris; 00:03:48.368 --> 00:03:52.099 it can scaffold learning and reduce errors, like we saw with the Montessori blocks; 00:03:52.099 --> 00:03:56.563 it can show only the differences that matter, like in the London Underground map; 00:03:56.563 --> 00:04:01.499 it can convert slow calculation in the fast perception, like we saw with the map coloring; 00:04:01.499 --> 00:04:07.907 it can support chunking, especially by experts, as we saw with chess, and with gestural interfaces; 00:04:07.907 --> 00:04:12.175 it can increase efficiency as we saw with diagrammatic representations; 00:04:12.175 --> 00:04:15.936 and it can facilitate collaboration like we saw in the cockpit. 00:04:17.567 --> 00:04:20.507 Given all of these benefits of good representations, 00:04:20.507 --> 00:04:24.348 it’s kind of surprising that a whole lot of actual interfaces that are out there 00:04:24.348 --> 00:04:29.699 offer a really crummy job at being able to help people distribute their cognitive efforts. 00:04:29.699 --> 00:04:32.969 So I call these poor representations “common but deadly.” 00:04:32.969 --> 00:04:36.386 Let’s take a look at a couple of them. Here’s one: 00:04:36.386 --> 00:04:38.950 I was at a symposium at IBM a couple of years ago. 00:04:38.950 --> 00:04:42.996 To get on their Wi-Fi network, I needed to enter a password. 00:04:42.996 --> 00:04:46.948 And, I typed in a password that I thought would be just fine. 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.” 00:04:51.777 --> 00:04:54.989 What do I need to change it to though? 00:04:54.989 --> 00:04:59.640 All passwords often have different requirements, like mixtures of upper- and lowercase letters, 00:04:59.640 --> 00:05:05.151 the presence or absence of numbers or special modifier keys, 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. 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, 00:05:19.415 --> 00:05:21.704 “You need a password that’s at least ten characters long, 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.” 00:05:27.761 --> 00:05:31.625 And that could be validated the first time that I typed in the new password, 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.” 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 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. 00:05:51.405 --> 00:05:57.474 I clicked Go and after hitting Next, it said “You must fill out all registered fields” — 00:05:57.474 --> 00:06:00.777 You can see that at the top of the screen right here. 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?” 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, 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 00:06:22.057 --> 00:06:25.923 and says “Here is the one thing you needed to fill that out before continuing.” 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, 00:06:33.961 --> 00:06:40.554 “Document encoding mismatch. The document contains data which describes its encoding as UTF-8. 00:06:40.554 --> 00:06:44.523 But the encoding has been set to Western (ISO Latin-1).” 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. 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”, 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; 00:07:10.050 --> 00:07:15.291 help me choose between these”, or “It doesn’t matter.” 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. 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 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. 00:07:34.852 --> 00:07:39.127 Here’s an interface that I think is intentionally designed to be sub-optimal: 00:07:39.127 --> 00:07:47.277 Here we have the eBay funding confirmation page, and if you look at this page, 00:07:47.277 --> 00:07:51.819 what you’ll see is if I switched to a credit card and it says, 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 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 00:08:06.885 --> 00:08:09.960 as opposed to have to pay the credit card transaction fee. 00:08:09.960 --> 00:08:16.039 And so, down at the bottom here, it offers you two buttons. 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.” 00:08:22.095 --> 00:08:26.683 Good action-oriented titles — I really like that part of this user interface. 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 00:08:34.837 --> 00:08:39.923 and the account that you probably want is dimmed out as if it’s inactive. 00:08:39.923 --> 00:08:42.690 Is this is a good user interface or a bad user interface? 00:08:42.690 --> 00:08:50.405 Well, user experience’s probably somewhat degraded; Paypal’s profit significant increases. 00:08:50.405 --> 00:08:54.922 And in a lot of real-world situations, you may need to make this trade-off. 00:08:54.922 --> 00:08:58.986 I think that more globally there are other ways that you could address this 00:08:58.986 --> 00:09:02.684 but I thought this was an interesting example of an interaction design 00:09:02.684 --> 00:09:09.837 that sacrificed some user experience in order to achieve higher profits. 00:09:09.837 --> 00:09:11.914 Hard to say whether it’s worth it. 00:09:11.914 --> 00:09:14.728 Here’s a dialog box for exporting a picture. 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. 00:09:21.694 --> 00:09:23.325 And you got a couple of options. 00:09:23.325 --> 00:09:27.210 So one thing that I that I like about this future interface 00:09:27.210 --> 00:09:31.621 is that you get buttons that are really action-oriented here — that’s great. 00:09:31.621 --> 00:09:35.572 A challenge is: how do I know whether I want this file or not? 00:09:35.572 --> 00:09:40.265 I mean, what is “l1010235.jpg”? 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”, 00:09:46.985 --> 00:09:50.598 and that way I could have a better sense of whether I wanted to override it, 00:09:50.598 --> 00:09:53.827 or skip this operation, or give it a brand new unique name. 00:09:54.766 --> 00:09:57.723 Here’s an example from Microsoft Outlook. 00:09:57.723 --> 00:10:02.864 This is a Duplicate Contact Detected dialog box. 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. 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?” 00:10:15.435 --> 00:10:19.487 The difficulty, of course, is I don’t know what’s in that contact right now 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. 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. 00:10:33.960 --> 00:10:37.237 Microsoft improved this in a subsequent version of Outlook. 00:10:37.807 --> 00:10:42.330 Its dialog box is probably still more complicated that it really needs to be: 00:10:42.330 --> 00:10:45.114 I think it could be streamline significantly; 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: 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 — 00:10:56.020 --> 00:11:00.115 so, “After we’ve merged these things, here’s what you’ll get.” 00:11:00.115 --> 00:11:02.765 And the other thing it’s going to show me 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.” 00:11:07.347 --> 00:11:11.765 One way that I think this dialog box could be streamlined is that, 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, 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. 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, 00:11:34.262 --> 00:11:36.105 well then, just don’t include this. 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, 00:11:42.896 --> 00:11:45.711 in that case it probably would make it a lot more sense to show it 00:11:45.711 --> 00:11:50.045 in a manner that’s parallel with these other two boxes. 00:11:50.660 --> 00:11:55.881 What we’ve covered in these past two lectures is an understanding of the theoretical foundations 00:11:55.881 --> 00:11:58.386 of how the representation of information 00:11:58.386 --> 00:12:03.323 can have tremendous consequences in terms of the user experience of a system. 00:12:03.323 --> 00:12:07.095 I think this is one of the most interesting topics in all of HCI. 00:12:07.095 --> 00:12:10.109 And if you found this area as interesting as I did, 00:12:10.109 --> 00:12:12.804 there’s a couple of books that I can recommend to go further here. 00:12:12.804 --> 00:12:17.022 One of them is Herb Simon’s « The Sciences of the Artificial ». 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 00:12:25.743 --> 00:12:29.576 and about the nature of mental representations — a really interesting book. 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. 00:12:37.576 --> 00:12:44.713 and describes Ed’s work in airplanes and on naval ships. 00:12:44.713 --> 00:12:51.439 And the last we have here is Don Norman’s book, « Things That Makes Us Smart », 00:12:51.439 --> 00:12:59.371 which is a great book about a lot of the cognitive science research and distributive cognition 00:12:59.371 --> 00:13:02.578 and the role of representations in cognition. 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. 00:13:08.249 --> 99:59:59.999 I’ll see you next time.