[Script Info] Title: [Events] Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text Dialogue: 0,0:00:01.54,0:00:04.63,Default,,0000,0000,0000,,How did the field of human-computer interaction get started? Dialogue: 0,0:00:04.63,0:00:10.46,Default,,0000,0000,0000,,One good place to begin our story is in July of 1945, when Vannevar Bush wrote Dialogue: 0,0:00:10.46,0:00:16.51,Default,,0000,0000,0000,,an article for the Atlantic Monthly, later reprinted in Life, called “As We May Think”. Dialogue: 0,0:00:16.51,0:00:22.01,Default,,0000,0000,0000,,Today, technology has mostly augmented people’s physical abilities; Dialogue: 0,0:00:22.01,0:00:29.19,Default,,0000,0000,0000,,Bush outlined a vision for information technologies that augmented people’s intellectual abilities. Dialogue: 0,0:00:29.19,0:00:33.02,Default,,0000,0000,0000,,Who is this guy? What’s his deal? And what led to his pressing vision? Dialogue: 0,0:00:33.02,0:00:36.99,Default,,0000,0000,0000,,Bush was vice-president and dean of engineering at MIT in the 1930’s, Dialogue: 0,0:00:36.99,0:00:39.72,Default,,0000,0000,0000,,where, incidentally, he was Fred Terman’s advisor. Dialogue: 0,0:00:39.72,0:00:42.66,Default,,0000,0000,0000,,Terman went on to become dean of engineering at Stanford Dialogue: 0,0:00:42.66,0:00:45.72,Default,,0000,0000,0000,,and in the eyes of many the father of Silicon Valley. Dialogue: 0,0:00:45.72,0:00:48.86,Default,,0000,0000,0000,,In 1939, Vannevar Bush moved to Washington. Dialogue: 0,0:00:48.86,0:00:51.72,Default,,0000,0000,0000,,He’s a leading scientific policy maker Dialogue: 0,0:00:51.72,0:00:53.82,Default,,0000,0000,0000,,He directs a lot of the government funding, Dialogue: 0,0:00:53.82,0:00:58.75,Default,,0000,0000,0000,,and indeed creates and is instrumental in setting up large-scale university research. Dialogue: 0,0:00:58.75,0:01:03.53,Default,,0000,0000,0000,,This administrative effort eventually leads to the creation of the National Science Foundation and ARPA, Dialogue: 0,0:01:03.53,0:01:07.10,Default,,0000,0000,0000,,institutionalizing government-funded scientific research. Dialogue: 0,0:01:07.10,0:01:10.79,Default,,0000,0000,0000,,The goal of this article, written in the final months of World War II, is to ask Dialogue: 0,0:01:10.79,0:01:15.92,Default,,0000,0000,0000,,“What can government-funded scientists do to create a better world in peace time?” Dialogue: 0,0:01:15.92,0:01:19.08,Default,,0000,0000,0000,,and his vision was a strongly human-centred one. Dialogue: 0,0:01:19.08,0:01:23.46,Default,,0000,0000,0000,,Bush wrote of a future interactive desk; he calls the system “memex.” Dialogue: 0,0:01:23.46,0:01:28.51,Default,,0000,0000,0000,,The idea is that all of the world’s information would be available on the knowledge worker’s desktop. Dialogue: 0,0:01:28.51,0:01:34.94,Default,,0000,0000,0000,,Key to the memex idea was effective user interfaces for information storage and retrieval. Dialogue: 0,0:01:34.94,0:01:39.42,Default,,0000,0000,0000,,Remember, this is 1945, so there aren’t yet practical digital computers — Dialogue: 0,0:01:39.42,0:01:42.59,Default,,0000,0000,0000,,the first room-scale digital computers were just being built — Dialogue: 0,0:01:42.59,0:01:47.89,Default,,0000,0000,0000,,and the idea was to use microfiche — high density film — to store everything! Dialogue: 0,0:01:47.89,0:01:51.97,Default,,0000,0000,0000,,Even more impressive, Bush’s memex vision invents hypertext: Dialogue: 0,0:01:51.97,0:01:56.68,Default,,0000,0000,0000,,he has this idea that people could author trails through this information store, Dialogue: 0,0:01:56.68,0:02:00.14,Default,,0000,0000,0000,,save them for later use, and share them with others. Dialogue: 0,0:02:00.14,0:02:04.29,Default,,0000,0000,0000,,But you’re not always at your desk, right? You want technology to come with you. Dialogue: 0,0:02:04.29,0:02:07.99,Default,,0000,0000,0000,,And knowledge workers need to produce content as well as consume it. Dialogue: 0,0:02:07.99,0:02:11.42,Default,,0000,0000,0000,,And the world isn’t just textual; it’s also visual. Dialogue: 0,0:02:11.42,0:02:14.41,Default,,0000,0000,0000,,So Bush imagined that, in the future, you’d wear a camera, Dialogue: 0,0:02:14.41,0:02:19.25,Default,,0000,0000,0000,,right in the centre of your head, like a third eye, and use it to capture stuff. Dialogue: 0,0:02:19.25,0:02:23.05,Default,,0000,0000,0000,,And he worked out a design that made it as easy as possible to take pictures, Dialogue: 0,0:02:23.05,0:02:26.09,Default,,0000,0000,0000,,so there’re no dials or settings to fiddle with. Dialogue: 0,0:02:26.09,0:02:32.41,Default,,0000,0000,0000,,As with the memex desk, the details turned out differently; but the core vision was right on target. Dialogue: 0,0:02:32.41,0:02:36.54,Default,,0000,0000,0000,,Today, for example, there are more than a billion camera phones that people carry with them. Dialogue: 0,0:02:36.54,0:02:41.92,Default,,0000,0000,0000,,The programmable digital computers that soon follow, like the ENIACS on here, Dialogue: 0,0:02:41.92,0:02:44.34,Default,,0000,0000,0000,,were a huge technological lead-forward. Dialogue: 0,0:02:44.34,0:02:48.58,Default,,0000,0000,0000,,But, as you can see from the wires, the user interface left a lot to be desired. Dialogue: 0,0:02:48.58,0:02:53.58,Default,,0000,0000,0000,,The idea of providing a more effective interface to computers has a long and storied history, Dialogue: 0,0:02:53.58,0:02:58.62,Default,,0000,0000,0000,,beginning with Grace Hopper’s invention in the early 1950’s of the first compiler. Dialogue: 0,0:02:58.62,0:03:01.72,Default,,0000,0000,0000,,What’s inspirational for me is that she conceptualized Dialogue: 0,0:03:01.72,0:03:06.72,Default,,0000,0000,0000,,how improved tools could provide a much wider audience with access to computation. Dialogue: 0,0:03:06.72,0:03:10.26,Default,,0000,0000,0000,,In the intervening years, good programming environments for the desktop and Web Dialogue: 0,0:03:10.26,0:03:14.99,Default,,0000,0000,0000,,enabled legions of developers to create the content that helped put a PC on every desk. Dialogue: 0,0:03:14.99,0:03:20.53,Default,,0000,0000,0000,,It’s a long path from Grace Hopper’s visionary work on the compiler to the graphical user interface. Dialogue: 0,0:03:20.53,0:03:23.99,Default,,0000,0000,0000,,There are three key highlights I’d like to share with you along the way. Dialogue: 0,0:03:23.99,0:03:29.94,Default,,0000,0000,0000,,The seeds of direct manipulation were sown at MIT at Lincoln Labs by Ivan Sutherland. Dialogue: 0,0:03:29.94,0:03:33.58,Default,,0000,0000,0000,,The key innovation of the graphical user interface is that the user’s input Dialogue: 0,0:03:33.58,0:03:36.64,Default,,0000,0000,0000,,is performed directly on top of the system’s output. Dialogue: 0,0:03:36.64,0:03:43.33,Default,,0000,0000,0000,,This input-on-output directness makes the interface much easier to understand and much more intuitive. Dialogue: 0,0:03:43.33,0:03:49.38,Default,,0000,0000,0000,,This input-on-output directness makes the system much easier to understand and feel more intuitive. Dialogue: 0,0:03:49.38,0:03:55.42,Default,,0000,0000,0000,,In the case of Sutherland’s Sketchpad, the input was a light pen and the output was an oscilloscope. Dialogue: 0,0:03:55.42,0:03:58.85,Default,,0000,0000,0000,,Here’s a short clip of the system in action: Dialogue: 0,0:03:58.85,0:04:01.98,Default,,0000,0000,0000,,(You can see, we have several unusal pieces of input-output equipment here. Dialogue: 0,0:04:01.98,0:04:06.42,Default,,0000,0000,0000,,We have a scope, and these are unusual at the time. Dialogue: 0,0:04:06.42,0:04:10.21,Default,,0000,0000,0000,,And pushbuttons. Toggle switches. Dialogue: 0,0:04:10.21,0:04:12.12,Default,,0000,0000,0000,,We have several other related devices. Dialogue: 0,0:04:12.12,0:04:17.40,Default,,0000,0000,0000,,This made the TX-2 a fine candidate for the Sketchpad devlepments back in 1961. Dialogue: 0,0:04:17.40,0:04:23.52,Default,,0000,0000,0000,,As I draw my art of say… on the scope, it reinforces what I have in mind. Dialogue: 0,0:04:23.52,0:04:26.52,Default,,0000,0000,0000,,This is in general part of the design process.) Dialogue: 0,0:04:26.52,0:04:30.52,Default,,0000,0000,0000,,The next major stop on our journey is the creation of the mouse and hypertext; Dialogue: 0,0:04:30.52,0:04:32.79,Default,,0000,0000,0000,,these are key foundations for the Web. Dialogue: 0,0:04:32.79,0:04:36.48,Default,,0000,0000,0000,,In 1945, Doug Engelbart was a navy radar technician. Dialogue: 0,0:04:36.48,0:04:39.26,Default,,0000,0000,0000,,Engelbart spent his monotonous years in the Philippines. Dialogue: 0,0:04:39.26,0:04:45.72,Default,,0000,0000,0000,,In the library, he found a copy of the magazine Life; It reprinted Bush’s Atlantic Monthly article. Dialogue: 0,0:04:45.72,0:04:51.29,Default,,0000,0000,0000,,As John Markov writes, the idea of a device that could extend the power of the human mind Dialogue: 0,0:04:51.29,0:04:54.26,Default,,0000,0000,0000,,left Engelbart awestruck. Dialogue: 0,0:04:54.26,0:04:58.88,Default,,0000,0000,0000,,He had a vision. It took a long time, but eventually he got some funding and set to work. Dialogue: 0,0:04:58.88,0:05:04.25,Default,,0000,0000,0000,,And what Doug Engelbart came up with, he showed to the world in his famous 1968 demo. Dialogue: 0,0:05:04.25,0:05:11.05,Default,,0000,0000,0000,,(The research program that I’m going to describe to you is quickly characterizable by saying, Dialogue: 0,0:05:11.05,0:05:18.02,Default,,0000,0000,0000,,if, in your office, you, as an intellectual worker, were supplied with a computer display, Dialogue: 0,0:05:18.02,0:05:22.51,Default,,0000,0000,0000,,backed up by a computer that was alive for you all day, Dialogue: 0,0:05:22.51,0:05:25.56,Default,,0000,0000,0000,,and was infinitely responsive to the reaction you have, Dialogue: 0,0:05:25.56,0:05:27.72,Default,,0000,0000,0000,,how much value will you derive from that? Dialogue: 0,0:05:27.72,0:05:30.83,Default,,0000,0000,0000,,And in a second you’ll see the screen and it’s working. Dialogue: 0,0:05:30.83,0:05:36.29,Default,,0000,0000,0000,,And the way the tracking spot moves in conjunction with movements of that mouse.) Dialogue: 0,0:05:36.29,0:05:40.62,Default,,0000,0000,0000,,Engelbart’s mouse worked with two orthogonal wheels. Dialogue: 0,0:05:40.62,0:05:47.38,Default,,0000,0000,0000,,Each was a potentiometer, a variable resistor, like stereos commonly have for a volume knob. Dialogue: 0,0:05:47.38,0:05:50.56,Default,,0000,0000,0000,,So you get about 300° of a turn and that’s it. Dialogue: 0,0:05:50.56,0:05:55.12,Default,,0000,0000,0000,,Its usable parameter provided about 5 inches of motion in each direction. Dialogue: 0,0:05:55.12,0:05:58.38,Default,,0000,0000,0000,,After the 1968 demo, Doug takes a show on the road. Dialogue: 0,0:05:58.38,0:06:02.58,Default,,0000,0000,0000,,He travels the country with a 16-millimetre Bell & Howell projector. Dialogue: 0,0:06:02.58,0:06:06.71,Default,,0000,0000,0000,,Ivan Sutherland had recently joined the faculty at the University of Utah. Dialogue: 0,0:06:06.71,0:06:14.15,Default,,0000,0000,0000,,Doug comes to visit and shows the demo, and in the audience is Ivan’s PhD student Alan Kay. Dialogue: 0,0:06:14.15,0:06:16.17,Default,,0000,0000,0000,,Alan has been dreaming of a personal computer. Dialogue: 0,0:06:16.17,0:06:21.06,Default,,0000,0000,0000,,He sees Engelbart’s video and his eyes bugged out — they have the same dream. Dialogue: 0,0:06:21.06,0:06:24.10,Default,,0000,0000,0000,,After his PhD, Alan moved to the Stanford AI Lab, Dialogue: 0,0:06:24.10,0:06:27.34,Default,,0000,0000,0000,,where John McCarthy’s group has an early time-sharing system, Dialogue: 0,0:06:27.34,0:06:31.61,Default,,0000,0000,0000,,maybe the place in the world where every person had their own terminal. Dialogue: 0,0:06:31.61,0:06:35.99,Default,,0000,0000,0000,,From there, he moves to Xerox PARC, where he fleshes out his vision of a Dynabook. Dialogue: 0,0:06:35.99,0:06:40.78,Default,,0000,0000,0000,,Here is a picture of the prototype that Alan made in the early 1970’s. Dialogue: 0,0:06:40.78,0:06:42.77,Default,,0000,0000,0000,,This isn’t a functioning computer at all; Dialogue: 0,0:06:42.77,0:06:46.80,Default,,0000,0000,0000,,it’s made out of carboard; it’s a prototype designed to communicate a vision. Dialogue: 0,0:06:46.80,0:06:50.88,Default,,0000,0000,0000,,With this vision in hand, Alan Kay and his colleagues at Xerox PARC start building Dialogue: 0,0:06:50.88,0:06:54.41,Default,,0000,0000,0000,,the foundation of the first real graphical user interface. Dialogue: 0,0:06:54.41,0:06:57.97,Default,,0000,0000,0000,,It took them a decade to get it all together, to get it ready to ship. Dialogue: 0,0:06:57.97,0:07:01.52,Default,,0000,0000,0000,,Xerox released the STAR computing system in 1981. Dialogue: 0,0:07:01.52,0:07:07.01,Default,,0000,0000,0000,,The STAR featured a bitmapped display, a window-based graphical user interface, icons, folders, Dialogue: 0,0:07:07.01,0:07:12.36,Default,,0000,0000,0000,,mice, ethernet network, file servers, print servers, and email. Dialogue: 0,0:07:12.36,0:07:14.82,Default,,0000,0000,0000,,This next clip shows the fruit of their labour: Dialogue: 0,0:07:14.82,0:07:20.18,Default,,0000,0000,0000,,(The display screen shows your working environment; we call this the desktop. Dialogue: 0,0:07:20.18,0:07:24.96,Default,,0000,0000,0000,,Using the Move key, you can arrange your desktop in any way you like. Dialogue: 0,0:07:24.96,0:07:29.96,Default,,0000,0000,0000,,Making a copy of one of these blank documents is like turning a sheet off a pad of paper. Dialogue: 0,0:07:29.96,0:07:33.26,Default,,0000,0000,0000,,The [inaudible] of users to make their own form pads Dialogue: 0,0:07:33.26,0:07:36.67,Default,,0000,0000,0000,,is one example of the usatibility [sic] built into the system. Dialogue: 0,0:07:36.67,0:07:39.85,Default,,0000,0000,0000,,The screen closely approximates the appearance of a printed page. Dialogue: 0,0:07:39.85,0:07:46.55,Default,,0000,0000,0000,,And I’m going to copy it into this upper document, and the new paragraph will appear here. Dialogue: 0,0:07:46.55,0:07:52.32,Default,,0000,0000,0000,,This is a little window that lets me set the various parameters of the paragraph.) Dialogue: 0,0:07:52.32,0:07:57.74,Default,,0000,0000,0000,,When the STAR shipped, this was almost four decades after Vannevar Bush’s vision, Dialogue: 0,0:07:57.74,0:08:03.51,Default,,0000,0000,0000,,three decades after Grace Hopper’s compiler, two decades after Doug Engelbart’s first functioning system, Dialogue: 0,0:08:03.51,0:08:09.81,Default,,0000,0000,0000,,and a decade after Alan Kay set off to work building this computer, inspired by the Dynabook ideas. Dialogue: 0,0:08:09.81,0:08:14.62,Default,,0000,0000,0000,,This is an example of what Bill Buxton calls “the ‘Long Nose’ of Innovation”, Dialogue: 0,0:08:14.62,0:08:17.07,Default,,0000,0000,0000,,that the early ideas behind a new technology paradigm Dialogue: 0,0:08:17.07,0:08:22.88,Default,,0000,0000,0000,,are often seeded decades before the major commercial adoption. Dialogue: 0,0:08:22.88,0:08:26.29,Default,,0000,0000,0000,,I’m sharing this history as we begin this course for a couple of reasons: Dialogue: 0,0:08:26.29,0:08:31.54,Default,,0000,0000,0000,,First, seeing seminal work reminds me that good ideas are often klunkier early on. Dialogue: 0,0:08:31.54,0:08:36.02,Default,,0000,0000,0000,,Second, as Johnny Lee and Bill Buxton point out, if you are looking for a good future product, Dialogue: 0,0:08:36.02,0:08:42.52,Default,,0000,0000,0000,,the seeds you need may already be out there in rough form, waiting for you to polish it into a diamond. Dialogue: 0,0:08:42.52,9:59:59.99,Default,,0000,0000,0000,,Third, I just think these early systems are totally awesome and it’s really inspiring.