0:00:01.541,0:00:04.626
How did the field of human-computer interaction get started?

0:00:04.626,0:00:10.460
One good place to begin our story is in July of 1945, when Vannevar Bush wrote

0:00:10.460,0:00:16.506
an article for the Atlantic Monthly, later reprinted in Life, called “As We May Think”.

0:00:16.506,0:00:22.010
Today, technology has mostly augmented people’s physical abilities;

0:00:22.010,0:00:29.194
Bush outlined a vision for information technologies that augmented people’s intellectual abilities.

0:00:29.194,0:00:33.024
Who is this guy? What’s his deal? And what led to his pressing vision?

0:00:33.024,0:00:36.993
Bush was vice-president and dean of engineering at MIT in the 1930’s,

0:00:36.993,0:00:39.724
where, incidentally, he was Fred Terman’s advisor.

0:00:39.724,0:00:42.658
Terman went on to become dean of engineering at Stanford

0:00:42.658,0:00:45.725
and in the eyes of many the father of Silicon Valley.

0:00:45.725,0:00:48.863
In 1939, Vannevar Bush moved to Washington.

0:00:48.863,0:00:51.722
He’s a leading scientific policy maker

0:00:51.722,0:00:53.824
He directs a lot of the government funding,

0:00:53.824,0:00:58.747
and indeed creates and is instrumental in setting up large-scale university research.

0:00:58.747,0:01:03.530
This administrative effort eventually leads to the creation of the National Science Foundation and ARPA,

0:01:03.530,0:01:07.096
institutionalizing government-funded scientific research.

0:01:07.096,0:01:10.788
The goal of this article, written in the final months of World War II, is to ask

0:01:10.788,0:01:15.916
“What can government-funded scientists do to create a better world in peace time?”

0:01:15.916,0:01:19.077
and his vision was a strongly human-centred one.

0:01:19.077,0:01:23.458
Bush wrote of a future interactive desk; he calls the system “memex.”

0:01:23.458,0:01:28.512
The idea is that all of the world’s information would be available on the knowledge worker’s desktop.

0:01:28.512,0:01:34.941
Key to the memex idea was effective user interfaces for information storage and retrieval.

0:01:34.941,0:01:39.415
Remember, this is 1945, so there aren’t yet practical digital computers —

0:01:39.415,0:01:42.594
the first room-scale digital computers were just being built —

0:01:42.594,0:01:47.892
and the idea was to use microfiche — high density film — to store everything!

0:01:47.892,0:01:51.972
Even more impressive, Bush’s memex vision invents hypertext:

0:01:51.972,0:01:56.684
he has this idea that people could author trails through this information store,

0:01:56.684,0:02:00.142
save them for later use, and share them with others.

0:02:00.142,0:02:04.287
But you’re not always at your desk, right? You want technology to come with you.

0:02:04.287,0:02:07.989
And knowledge workers need to produce content as well as consume it.

0:02:07.989,0:02:11.418
And the world isn’t just textual; it’s also visual.

0:02:11.418,0:02:14.410
So Bush imagined that, in the future, you’d wear a camera,

0:02:14.410,0:02:19.253
right in the centre of your head, like a third eye, and use it to capture stuff.

0:02:19.253,0:02:23.049
And he worked out a design that made it as easy as possible to take pictures,

0:02:23.049,0:02:26.092
so there’re no dials or settings to fiddle with.

0:02:26.092,0:02:32.413
As with the memex desk, the details turned out differently; but the core vision was right on target.

0:02:32.413,0:02:36.540
Today, for example, there are more than a billion camera phones that people carry with them.

0:02:36.540,0:02:41.924
The programmable digital computers that soon follow, like the ENIACS on here,

0:02:41.924,0:02:44.345
were a huge technological lead-forward.

0:02:44.345,0:02:48.585
But, as you can see from the wires, the user interface left a lot to be desired.

0:02:48.585,0:02:53.577
The idea of providing a more effective interface to computers has a long and storied history,

0:02:53.577,0:02:58.622
beginning with Grace Hopper’s invention in the early 1950’s of the first compiler.

0:02:58.622,0:03:01.723
What’s inspirational for me is that she conceptualized

0:03:01.723,0:03:06.715
how improved tools could provide a much wider audience with access to computation.

0:03:06.715,0:03:10.265
In the intervening years, good programming environments for the desktop and Web

0:03:10.265,0:03:14.988
enabled legions of developers to create the content that helped put a PC on every desk.

0:03:14.988,0:03:20.533
It’s a long path from Grace Hopper’s visionary work on the compiler to the graphical user interface.

0:03:20.533,0:03:23.993
There are three key highlights I’d like to share with you along the way.

0:03:23.993,0:03:29.944
The seeds of direct manipulation were sown at MIT at Lincoln Labs by Ivan Sutherland.

0:03:29.944,0:03:33.583
The key innovation of the graphical user interface is that the user’s input

0:03:33.583,0:03:36.643
is performed directly on top of the system’s output.

0:03:36.643,0:03:43.328
This input-on-output directness makes the interface much easier to understand and much more intuitive.

0:03:43.328,0:03:49.382
This input-on-output directness makes the system much easier to understand and feel more intuitive.

0:03:49.382,0:03:55.423
In the case of Sutherland’s Sketchpad, the input was a light pen and the output was an oscilloscope.

0:03:55.423,0:03:58.850
Here’s a short clip of the system in action:

0:03:58.850,0:04:01.979
(You can see, we have several unusal pieces of input-output equipment here.

0:04:01.979,0:04:06.423
We have a scope, and these are unusual at the time.

0:04:06.423,0:04:10.211
And pushbuttons. Toggle switches.

0:04:10.211,0:04:12.124
We have several other related devices.

0:04:12.124,0:04:17.395
This made the TX-2 a fine candidate for the Sketchpad devlepments back in 1961.

0:04:17.395,0:04:23.516
As I draw my art of say… on the scope, it reinforces what I have in mind.

0:04:23.516,0:04:26.518
This is in general part of the design process.)

0:04:26.518,0:04:30.519
The next major stop on our journey is the creation of the mouse and hypertext;

0:04:30.519,0:04:32.789
these are key foundations for the Web.

0:04:32.789,0:04:36.484
In 1945, Doug Engelbart was a navy radar technician.

0:04:36.484,0:04:39.257
Engelbart spent his monotonous years in the Philippines.

0:04:39.257,0:04:45.716
In the library, he found a copy of the magazine Life; It reprinted Bush’s Atlantic Monthly article.

0:04:45.716,0:04:51.287
As John Markov writes, the idea of a device that could extend the power of the human mind

0:04:51.287,0:04:54.256
left Engelbart awestruck.

0:04:54.256,0:04:58.882
He had a vision. It took a long time, but eventually he got some funding and set to work.

0:04:58.882,0:05:04.250
And what Doug Engelbart came up with, he showed to the world in his famous 1968 demo.

0:05:04.250,0:05:11.052
(The research program that I’m going to describe to you is quickly characterizable by saying,

0:05:11.052,0:05:18.017
if, in your office, you, as an intellectual worker, were supplied with a computer display,

0:05:18.017,0:05:22.509
backed up by a computer that was alive for you all day,

0:05:22.509,0:05:25.557
and was infinitely responsive to the reaction you have,

0:05:25.557,0:05:27.720
how much value will you derive from that?

0:05:27.720,0:05:30.827
And in a second you’ll see the screen and it’s working.

0:05:30.827,0:05:36.286
And the way the tracking spot moves in conjunction with movements of that mouse.)

0:05:36.286,0:05:40.617
Engelbart’s mouse worked with two orthogonal wheels.

0:05:40.617,0:05:47.375
Each was a potentiometer, a variable resistor, like stereos commonly have for a volume knob.

0:05:47.375,0:05:50.559
So you get about 300° of a turn and that’s it.

0:05:50.559,0:05:55.119
Its usable parameter provided about 5 inches of motion in each direction.

0:05:55.119,0:05:58.381
After the 1968 demo, Doug takes a show on the road.

0:05:58.381,0:06:02.585
He travels the country with a 16-millimetre Bell & Howell projector.

0:06:02.585,0:06:06.711
Ivan Sutherland had recently joined the faculty at the University of Utah.

0:06:06.711,0:06:14.149
Doug comes to visit and shows the demo, and in the audience is Ivan’s PhD student Alan Kay.

0:06:14.149,0:06:16.174
Alan has been dreaming of a personal computer.

0:06:16.174,0:06:21.056
He sees Engelbart’s video and his eyes bugged out — they have the same dream.

0:06:21.056,0:06:24.102
After his PhD, Alan moved to the Stanford AI Lab,

0:06:24.102,0:06:27.342
where John McCarthy’s group has an early time-sharing system,

0:06:27.342,0:06:31.613
maybe the place in the world where every person had their own terminal.

0:06:31.613,0:06:35.988
From there, he moves to Xerox PARC, where he fleshes out his vision of a Dynabook.

0:06:35.988,0:06:40.779
Here is a picture of the prototype that Alan made in the early 1970’s.

0:06:40.779,0:06:42.769
This isn’t a functioning computer at all;

0:06:42.769,0:06:46.797
it’s made out of carboard; it’s a prototype designed to communicate a vision.

0:06:46.797,0:06:50.884
With this vision in hand, Alan Kay and his colleagues at Xerox PARC start building

0:06:50.884,0:06:54.408
the foundation of the first real graphical user interface.

0:06:54.408,0:06:57.970
It took them a decade to get it all together, to get it ready to ship.

0:06:57.970,0:07:01.522
Xerox released the STAR computing system in 1981.

0:07:01.522,0:07:07.009
The STAR featured a bitmapped display, a window-based graphical user interface, icons, folders,

0:07:07.009,0:07:12.357
mice, ethernet network, file servers, print servers, and email.

0:07:12.357,0:07:14.823
This next clip shows the fruit of their labour:

0:07:14.823,0:07:20.182
(The display screen shows your working environment; we call this the desktop.

0:07:20.182,0:07:24.963
Using the Move key, you can arrange your desktop in any way you like.

0:07:24.963,0:07:29.958
Making a copy of one of these blank documents is like turning a sheet off a pad of paper.

0:07:29.958,0:07:33.257
The [inaudible] of users to make their own form pads

0:07:33.257,0:07:36.667
is one example of the usatibility [sic] built into the system.

0:07:36.667,0:07:39.850
The screen closely approximates the appearance of a printed page.

0:07:39.850,0:07:46.546
And I’m going to copy it into this upper document, and the new paragraph will appear here.

0:07:46.546,0:07:52.318
This is a little window that lets me set the various parameters of the paragraph.)

0:07:52.318,0:07:57.743
When the STAR shipped, this was almost four decades after Vannevar Bush’s vision,

0:07:57.743,0:08:03.513
three decades after Grace Hopper’s compiler, two decades after Doug Engelbart’s first functioning system,

0:08:03.513,0:08:09.806
and a decade after Alan Kay set off to work building this computer, inspired by the Dynabook ideas.

0:08:09.806,0:08:14.624
This is an example of what Bill Buxton calls “the ‘Long Nose’ of Innovation”,

0:08:14.624,0:08:17.071
that the early ideas behind a new technology paradigm

0:08:17.071,0:08:22.879
are often seeded decades before the major commercial adoption.

0:08:22.879,0:08:26.288
I’m sharing this history as we begin this course for a couple of reasons:

0:08:26.288,0:08:31.542
First, seeing seminal work reminds me that good ideas are often klunkier early on.

0:08:31.542,0:08:36.019
Second, as Johnny Lee and Bill Buxton point out, if you are looking for a good future product,

0:08:36.019,0:08:42.523
the seeds you need may already be out there in rough form, waiting for you to polish it into a diamond.

0:08:42.523,9:59:59.000
Third, I just think these early systems are totally awesome and it’s really inspiring.