Alan Kay at SD&M conference on Graphical User Interface (2001)

[Applause] so whenever you get invited to a

conference that has pioneers in its name I think it's a celebration that we're

just still alive of course all the rest

of these guys are much older than I am

so I thought instead of just talking

about some of our work doing a brief period of be interesting to give you a

sense of what user interface design was

like in the 60s and 70s I'll include

some of the stuff that we did it Xerox PARC but as Newton said he got as far as

he did by standing on the shoulders of giants and we certainly did and I think

you make revolutionary process if you can stand on the shoulders of giants and

try and jump in a in a different direction and we certainly tried to do

that as well so the first thing I'd like

to just show is that the we're set up by

Nature to think normally which means

like McLuhan's fish here who doesn't know that it's swimming in pink water

and he meant that we are the fish and the context and our beliefs are this

colored water that we can't see and a an

interesting model of thinking very

simple model was done by Arthur Kessler some years ago and he took the pink

water from the the goldfish bowl and

spread it out and made a plane and likened normal human thought to an ant

crawling about on this plane and pointed out that the the ant can have the

illusion of progress and that the ant can choose directions

can see goals that can get around obstacles but no matter what it does

everything it does is pink has no sense of other dimensions of a thought but in

every action there's a little outlaw vertical thing a blue action so we might

have a little hint of a blue idea but we've all gone to school we all have

parents we go to church we grow up in a

particular place and so there's this kind of kersplat that comes down and

beats us back into Orthodox ways of thinking but every once in a while in an

unguarded moment taking a shower waking

up in the morning out jogging you suddenly get an outlaw idea an idea that

is can't stand to be confined in the pink plane now how many people in this

room have had one of these epiphanies so

it seems like it comes from heaven and back in the old days people would start

religions because these ideas seem to be

so true now it turns out that all ideas

whether they come this way or come regularly almost all ideas are mediocre

down to bed so the main thing you want to do when you have an idea is take a

nap in Western society we act way too

much we don't think nearly enough but we also have now have the methods of

science for dealing with these inspirations and they allow us a pretty

strong way of testing out whether this idea that seems to come from heaven

actually has any substance to it Kessler pointed out that we have one of three

emotional reactions or some combination so if somebody is telling you a joke

just one of the simplest forms of these a joke is leading somebody down the

bloop down the pink plane and suddenly revealing it's about something very

different you start laughing and if it's science you have this AHA

reaction and sometimes you start laughing because the the thing that's

funny about science is just because we had a new idea the universe didn't

change to accommodate the universe was like that all along and these insights

were just hiding from us and if it's art

then we have this long drawn-out sigh

you know and one of the purposes of our particularly great art is to remind us

that there are these other contexts and

then the difficult thing about having a

new idea is it takes almost as much creative effort on the part of everybody

else to understand this new idea this is why we had to set up schools a few

hundred years ago because these invented ideas were starting to appear and

they're very difficult to learn because they require a kind of a rotation in

normal human common-sense thinking now

in the early 60s I was I worked my way

through school as a systems programmer but I wasn't that interested in computing I was just using it as a job I

was in molecular biology and pure mathematics math I was interested in was

math of algebra so abstract algebra and

molecular biology was just starting to happen then in 1965 there was this great

book here and this book a lot of it was

about this bacterium that we have millions of in our stomach called ecoli

and by doing some calculations which are not in this book I discovered that one

of these little bacteria had about a megabyte of DNA now it was a lot of

computer back back in the nineteen sixty-five and it had three thousand

types of large protein molecules about

five million in total they were running very very quickly

and they reproduced every 20 minutes so is this enormous amount of activity

going on all powered by the kinetic motion of he and I also knew that these

bacteria we're about 1 mm the size of

the cells in our body cells in our body are about 2,000 times larger so this is

about the relative scale of these things and we have about a billion of our cells

just in the first joint of our thumb give you an idea and if a cell where the

size of a grain of rice then our thumb would be about the size of a living room

in your house that would have a billion of these cells and each one of these

cells has about 60 billion components

that interact information alee and Tom

Watson here has and we have about 100

trillion cells so this is a kind of a different way of looking at life that

appeared in the 50s and 60s and it was

just in my mind when I suddenly decided to go to graduate school in computing

and especially the computer pioneers

will remember just how large machines were physically back then and how small

they were logically I think there was a

fantastic somebody you'll remember Tony

there was a fantastic algal compiler compiler by a guy by the name of Brian

Whitman Goodman that had something like

200 passes it was on a on a machine that had I think only drum memory and it had

a very small amount of it so it had to constantly move the tape back and forth

and back and forth doing a little bit of the compilation each time and and the

thought of programming was mostly in terms of algorithms and data structures

not in terms of systems back in the

early 60s but things were starting to happen I was in an ARPA graduate I was

an our graduate student and one of the things that I found about

about shortly after I went to graduate school was was Ivan Sutherlands

sketchpad and sketchpad was kind of the dawn of computer graphics was done in

1962 and so it had this notion of

graphical objects it actually had a clipping window

it had icons and here's kind of what it

looked like

so things were done with a light pen you'll see his hand go up and dip into

the ink there and he's manipulating

buttons on the side so he's gonna draw a flange he doesn't draw it very carefully

because he can draw this thing and then he can point to the parts of the flange

and then he can tell sketch pad to make them all mutually perpendicular sketch

pad is doing that right now and it just figured out how to solve that problem so

you notice the clipping window the actual canvas that he's writing on is

about a third of a mile square there's

plenty of room for drawings again he's saying make these guys parallel and they

are already attached to the sides of the flange so figured out that problem so in

each one of these cases here now the constraint is collinearity for making

these little dashed lines by the way this is not a line drawing display so

every little dot is being plotted individually by this tx2 computer just

about the size of this room dice tells

those lines to be invisible now he's got a hole through the flange zooms back out

now he wants to make a rivet same idea

notice he flicks that pin when he wants

to break the line drawing he chooses

that as the Center for the radius of this arc and now he points to these

lines and says make all of these mutually perpendicular and notice what

it had what it does it pulls the lines together centers the arc and makes a

nice little rivet and he could also constrain the proportions of these guys

if he wants here he's just showing you that they're in this under constrained

thing that he's made there are a number of different solutions for making a

symmetric thing he wants something that looks more like a regular rivet here

now what's cool about this is that this is not just a rivet this is what he

called a master for the rivet what we'd call the class today so now he's going

to make some instances of this rivet can move them around he can make them turn

them make them any size

see this program brought demands for better displays now he's going to prove

to us that you can have multiple instances of this rivet and then he

remembers oh I don't like the cross guys I'm going to make those invisible here

on the master drawing and guess what happens to the instances they all

reflect that change automatically

now he's just made a master of that construction that he made so he's taking

those two classes and composed them together and now we can make instances

of these flanges with a rivet in it and

again each one of them has its own parameters

okay so that's sketchpad so in many ways

the all of the stuff I've done except

maybe aiming it at kids in the last 35 years has been kind of putting a

footnote to these insights and sketchpad and once they asked Ivan Sutherland how

could you possibly have sort of invented

computer graphics done one of the first object-oriented software systems and

done a automatic problem solving system all in one year by yourself he said well

I didn't know it was hard what's

interesting about this we would be very pleased many of us to have a graphic

system we'd like the display to look a little bit better but we'd be very pleased to have a graphic system that

was this flexible that had this look and

feel to it so here's a way you defined

operators and sketchpad was composing constraints so here's a parallel here's

an equal constraint and a parallel constraint and you could pick this as a

graphical object as well he could pick this up and drop it into here copy it

and then you just merged the constraints with the lines that you want to deal

with and the parallel and equal constraints would make this thing into a

rectangle then the interior of sketchpad

you can imagine what it was like to try and read this thesis back in 1966 still

just three years after it had been done and eventually dawned on me that here

this is an instance what he called a

generic block and at some point it dawned on me that each instance opposite

one two three four five the sixth word

down here had a subroutine in it that knew how to display the particular type

of thing so if it was a line knew how to display the line and if it was a point a

knew how to display the point and this is the first time I ever saw what we

call morphism today here and this idea by the

way he didn't completely think of it was actually also in a very very early paper

by Doug Ross who was doing some design

graphic stuff at MIT at the at the same time and there was even kind of a class

hierarchy in it where he had a bunch of different kinds of things he call

variables things that held things had a

whole set of things that recall constraints so these are kind of super

classes each one of these guys was a class and then you couldn't get instance instances of those things so this is an

extremely sophisticated gem of a system

maybe my vote for the greatest single thing ever done in computer science by

one person it's almost astounding even to go

through and read the thesis today and one of the wonderful things about it was

that in his thesis every other page he

apologizes that the system didn't do more because we started this out he just

wanted to do the whole everything you could do in computer graphics with with

this thesis by the way all of these

pictures here were drawn in sketchpad for his thesis and plotted out one of

the few graphics thesis ever in which the computer graphics done by the

graduate student was actually used to produce the images in the thesis well

next thing I encountered in my first two weeks of graduate school were a pile of

tapes and listings from none other than

Kristin and Ola Johan they didn't know

it but we had a univac 1108 at Utah and

I was the latest graduate student and the tradition there is the latest graduate student got the latest dirty

tasks to do and so there's a note on it

that basically said this is the algal for the UNIVAC 1108 it doesn't work

make it work and in pouring into it I

discovered it wasn't exactly alcohol at all it was a Case Western Reserve algal

that had been doctored to make a language called Simula simulated had

documentation that looked exactly as though we're Norwegian transliterated

literally word-for-word into English which in fact it was so we couldn't

understand it but the debugging technique back then and these big

engineering buildings was you could take a listing

remember those fan-fold listings nice piece of computer graphics because you

could take these things and well unwind them down the entire hall of the

building and you could put graduate students on different parts of this listing so about three of us crawled

over this listing on our hands and these caught saying this looks like it might

be the storage alligator and here's where they do this and finally we realized from the storage alligator that

it was actually allocating storage the way sketchpad did and we suddenly

realized that this funny name they had funny names as was mentioned this

morning so they had the word process which didn't quite mean what it meant to

us which we would use the word instance

for today and they used the word activity for what we would use the word

class I haven't liked the word activity but we had no idea what this meant until

we saw the analogy and then I had one of

these epiphanies because I've been

thinking about molecular biology until recently and Simula was kind of question

is is it a better old thing or almost a really new thing and this is the

dichotomy you always get when you run into something new and all of a sudden I

had this idea that wow what if you

basically what if you threw away alcohol and

stayed with what the powerful idea here was that Simula was actually making

things that were like little software computers and would make as many of them

as you wanted and that's what Ivan Sutherland was doing with computer

graphics and a computer obviously by by

the Turing argument could do anything and so you could get rid of data structures which I hated because they

were so fragile and all of a sudden I realized if you could just find a way of

making everything out of little computers you would have a much simpler abstraction than the paraphernalia that

was in use on computing at the time turned out to be difficult to do

pragmatically it's not easy to make the

number-3 a little computer and have it run fast and have it be small in those

days but that was the insight that was one of those holy cows and another thing

that was around at that very same time was Doug Engelbart's online system also

funded by ARPA and this thing was

incredible so the mouse was invented by

Doug and Bill English in 1964 so the mouse is a couple of years old when I

first saw it one of the things that they used with this hypertext system was they

used it for dealing with their structured programming so they had done

their own compiler compiler and they made it so that you could actually get

abstractions of different levels of detail in their code which I thought was

pretty interesting and they use this thing for conferencing so here's what

NLS looked like should be some sound

here but in a minute

so this picture could have been taken yesterday but it was actually taken in 1967 there's the angle Bart with his

mouse and he has a five finger keyboard on the other hand so I can say I'd like to go to produce but I'd like to go to

produce they get big I like to say one branch only and when you look just that

low yeah yeah I'll say a word or two

here so this is actually in many ways a better user interface theory than we use

today three button Mouse five finger

keyboard Engelbart's idea was that you

shouldn't be moving your hands back and forth a lot so I wanted to be able to do

all the navigation you're ever going to do from having your hands out spread and

he also wanted to be able to do simple typing so correcting so you could type

every character out here and you could do all of the manipulation and command

giving in the system the command giving was subroutine style

so a typical command was move character that was the name of the subroutine and

then you'd pick the character you're going to move you'd pick the destination

those are the two parameters and then you'd hit command accept which is this

button all the way over to the right on the mouse so it's interesting how the underlying programming affected the user

interface style and we'll see that happen over and over again I can say I'd

like to see one line only that's you

filters news and I can do this route I said I have here

[Music] so here I'm afraid I'll need a different

pictures of you so here's what I do with a picture drawing capability here's a

slight lamp if I start from work here's the route I seem to have to go to to

pick up all the materials and that's my plan for getting home tonight but if I

want to I can say the library what am I supposed to kick up there I can just

point to that you know I see overdue books and all while there was

sustainment there with that name go back what a fight what's my supposed to pick

up the drugstore hmm I see you everything alright market can

do things if I want to just say I'd like to interchange the car do some camp

materials they're changing them very

quickly cans are gonna get interchanged with Prados they do it an Augustine

number so I'm hoping everybody here

notice that the response time on this system was just a little faster than you

used to this is on 192k time shared

computer with 20 users a half mil

machine but they got sub-second response on everything why two reasons one is

they wanted to

[Applause] the other reason is that they could

really program

this is how you can tell you know you you can't tell whether you have a

Research Center in a company just because there's something called research it's you can tell when the

company gets in trouble and the chief executives do not raid that thing called

research then you know you have a research center otherwise it's just a

toy the same thing with user interface it's not a user interface just to make a

control panel you have a user interface for the people doing the user interface

really care that there's a person at the other end of this thing and really cares

about what the person needs so one of

the distressing things about this system this movie I'm showing you was part of a

demonstration a live demonstration to about 3,000 people in San Francisco in

1968 so this movie is about 33 years old now and if Tim berners-lee

and the other people who did the world wide web bit have the slightest curiosity as they should I'm sure did in

physics to find out what people before them had done they would certainly have

found out what angle Bart did and the world wide web would be much better today but instead it was done really

terribly done as a consume only medium

by 25 years of progress and being able to author on a personal computing and

all of a sudden the web comes along and we're consumers again think about that

all this the hyperlinking and hypertext stuff and conferencing and all of this

stuff have been done in a full-fledged

well-funded project back in the in the late 60s and it got completely missed by

the current wave of very active but very

ignorant people doing computing today

now the other thing that happened in 1964 was the tablet was invented at Rand

so this was a honey of a technology but

unfortunately even in 1967 or 68

it cost about eighteen thousand which is like $100,000 today to get one tablet so

many wonderful things were done on this but usually each research center only

had one of these and it was one of the reasons why the mouse made it and the

tablet didn't it was just too difficult to make tablets for a long long time

now another thing that happened it ran the little even a little earlier was

there's this old old machine called the johniac which is one of the original

Princeton machines done in the early 50s and they were about to take it out of

commission in the late 50s and cliff Shaw said no give it to me he's the Shah

of nool Shan Simon give it to me and

I'll do something with it so what he did was a truly wonderful

interactive the first really great interactive programming language for end

users which was called jaws so jaws liqu looked like this

here's cliff Shaw actually says more words on this video than I ever heard

him say in his entire life we call the

system jaws standing for johniac open-shop system it is an online time

shared use of the computer johniac is a

venerable machine but small and slow by today's standards coupled to it is a

special-purpose buffer for messages to and from remote consoles

each console consists of an electric typewriter and a few buttons and lights

at eight such stations in various locations in the rand building are

connected by telephone lines to the buffer an executive routine in johniac

serves up to eight users at a time by interpreting and carrying out commands

given in a simple language I think you can't really see that what

was beautiful so what was beautiful about this system was about everything

at the end of the paper that cliff Shaw wrote about jaws in published in 1964 he

said the important thing about user interface design is the little things

the hundreds and hundreds of little things so for instance in this system

instead of using teletypes they refitted

a bunch of IBM executive typewriters so

you could have really good-looking typefaces they printed on drilled paper

that would fit into notebooks done by these end users when you typed on the

machine it typed in green and when it typed back at you had typed in black and

every little detail was handled beautifully on the system so there's one

of the few systems in the world when in the morning you realized oh in the

afternoon I'm going to get a chance to use jaws you get this little tingle of

anticipation you knew how many times have you felt that about a computer

system mean just knew this was going to be a beautiful experience because

everything was thought through and he didn't try to do anything that he

couldn't do in this perfect way so this set of standards for many many years in

every respect including documentation

there's Joss then the another thing that

had appeared on the scene in the early 60s was my vote for the first personal

computer which is called the link and

the this is done by Wes Clark here and the one of the design criteria for this

machine was that you had to be able to see over it when you were using it so as

I his idea was you didn't want it that

towered over you when you were using it you would be towering over over it and

it had most of the paraphernalia on it that we associate associate with

personal computers today so it's my vote for the first personal computer and also

in 1965 we had the first statement of

Moore's law then a few years later the second statement of it and the what

happened is kind of in the middle here between doubling every year and doubling

every two years has been doubling about every 18 months so this gave us a

30-year roadmap to be able to understand what kind of computing systems that we

could do then the other thing sorry the

other thing was that ARPA had decided to

finally do the ARPANET work and so suddenly we were thinking about how

could we run a system that might have potentially millions of machines on it

so all of those were context for the ways of thinking about complexity that

led to this machine that Edie Cheadle and I did what's called a flex machine and so I decided to imitate how similar

got implemented where they had some deep insights about objects and they took a

alcohol as a kind of a structure and they made the simular one system that I

was familiar with and I wanted something like jaws and that very same year and

I'm sure Klaus remembers it better than I do because he had to write the paper but

the same year that the Simula paper was published in the ACM which was 66

September 66 in January in February

Klaus feared and Weber had published a

fantastic in-depth treatment of a

language that they designed and implemented called Euler and Euler was

an extreme generalization of alcohol so I was taking alcohol towards lisp in a

sense basically it was based on some earlier ideas by Van vine garden and an

earlier paper that Klaus had written which was called the generalization of alcohol published the year 60 65 or

something so this is beautiful stuff because basically it got down to the

essence and if you looked at Euler you would see something that had the clean

simplicity of Jaws except it was powerful it was really powerful and I

thought boy if we could make oil or object oriented the way Samuel I had

made Alvin Algol object-oriented we would have something that was both very

powerful and also very small because euler had this very nice way of

compiling and it happened that the third computer i'd ever learned was the

borrows be 5,000 and the way they had decided to implement euler was to and

since windows were already around we put them in they weren't overlapping because

the displays back then couldn't they were calligraphic displays

it was very very difficult to make an overlapping window and I never thought of the idea at that point but the using

objects at the lowest level in the system and combining the language with

this idea of co-routines so I realized that if you add co-routines and persistence you didn't

need files because you basically just paused every structure that you wanted

to stay around and just let it stay active as a way of getting away from

data structures so a lot of interesting ideas in this thing and on each

iteration of these languages we did we

implemented the hospital simulation from the Simula one paper because that was

where we finally understood similar one was following those patients around the

hospital will see it not too long from now so I got to skip

over some of these insights we had about objects and maybe if there's time at the

end I'll talk about them I'll just say one word that the more you can think

biology when you're trying to understand objects the better off you are

the more you think C or E or indeed any

programming language with objects graphed and on the further away you are from these things because you're

basically trying to understand systems that are robust and even somewhat

redundant now the summer of 68 we had a

version of this flex machine going and I gave a report on it at the ARPA graduate

students conferences that summer and right before that summer I saw this

first flat panel display it's all of a sudden flat panel display wonder how

long it would be before you could put the Flex machine on the back of this

display then the other thing I had seen right before going to this graduate

conference was what the ran people had done with their tablet this is a system

called Grail

so in 66 so they built a tablet in 64 and 66 they implemented this really

tremendous character recognition algorithm better than graffiti and of

course infinitely earlier than graffiti and then they decided to do a graphical

programming version of Jaws for their analysts that ran and here's what it

like

first we erase a flow arrow then move the connector out of the way so that we

may draw a box in its place so recognizes he wants a box and just makes one now it's recognizing his

handwriting the printing in the box is being used as commentary only in this

case might notice how efficient box is slightly too large so we may change its

size that's where modern-day window control came from literally then draw

flow from the connector to the box

attached to decisions automatic box enjoy flow from it to scan we then

erased the floor arrows attached to the process post new area and move the box

to a new position this allows us to draw

a new box this is an incredible system

and there's a wonderful 15 minute movie

that I'm in the process of digitizing

and putting giving to the computer museum but look at this system all of a sudden you browse my god these guys got

an enormous amount of what user interface design has to be like and

again it was because of their trying to make this system is nice for an end user

as Joss was but now on the displays they just thought of every little thing and

this is smooth and it just really did work as fast as you saw there and any

one of us would like to have this system today but in fact most of the systems

that are pin based today are quite a bit inferior to what these guys did then in

the fall I saw a seymour papert's work with logo and logo wasn't an adaptation

of jaws to lisp for kids so a typical logo program to draw a

circle use differential geometry go a little turn a little over and over again

if you tell that to a turtle which is actually a vector you're adding little

incremental vectors to it and turning it a little you're going to get a

Circle because a circle is that thing that has constant curvature so I when I

saw this I was seeing somebody using computers to make Montessori like toys

for children and it captured my imagination more strongly than anything

else has and on the plane coming home

from that visit I started thinking about what would a computer for children actually be like and I decided it had to

be something they could carry around so we made this cardboard model out of and

and filled it up with lead pellets until people didn't want to carry it around

anymore and so the weight the maximum

weight was one kilogram so anybody here

have a 1 kilogram computer yet so

analogy to musical instruments the idea

of children learning math and science by doing their own simulation games using

real science all of those things were part of this and then this realization

that we might all be dead before the real revolution happens because back in

the manuscript days when the printing press appeared it was 50 years to go

from a big Gutenberg Bible to the oldest book that you could put in your pocket

but the real revolutions from the printing press didn't happen till more

than a hundred years later and so we had this image that here's the mainframe

which is kind of the old manuscript thing here's a desktop computer and

here's a computer you can carry around like the Aldous book there is this image

that gee the real computer revolution might not happen until the middle of

this century and we'd all be gone by that so there's a real urgency to try

and do something about it and we got

that chance at at Xerox PARC so one of

the best things that ever happened right

around in that period was the here's the cardboard model the Dynabook

and here's the real HP 35 calculator and

the a two interesting things happen with

the HP 35 calculator one is I just happened to have it when I had a talk

with my insurance agent and without thinking of it I pulled out the HP 35

and put it on the table between us and all of a sudden he was talking to me

very differently about insurance because I could just sit there and calculate

anything that he said and I realized

that all of a sudden that the balance of power had shifted then the second great

thing that happened is about three weeks after I got this early HP 35 it was

stolen and I realized at last somebody

has made a computer that's stealable

[Applause] we're making progress so let's see now a

few things had changed in the way I was looking at languages remember I said

that Euler had gone quite a ways towards Lisp and I didn't really understand Lisp

at that time and a few years later I had

occasion to go in and try and understand the Lisp interpreter written in itself

and I finally did understand it and then I had this huge Thunderbolt that what

you really needed was late binding and everything not just because you need it

for end users but because it was one of those things where I suddenly realized

hey we don't know anything every time we do something it's a huge learning curve

and when we do it in an early bound form

when we get to this place where we suddenly learn the thing that we needed

to know at the beginning of the project the early boundedness of what we've done

discourages us from going back and redoing things it's just too much work

so you say oh I'll do this in the next system but I realized that the early

boundedness of Lisp coupled with the right kind of programming tools and you

could actually take an inspiration 3/4

of the way through a project and reformulate your code much much more

easily and that was quite possible to do because we were building our own

computers so we build the the Flex machine it had a micro code processor in

there so we could we were actually the

firmware was actually giving us something like a custom piece of

hardware and we were planning on doing that at Xerox PARC and so the idea was

let's do a kiddy computer that we can actually build in the early 70s so the

first one was built around a Sony Trinitron 9

in China Tron and then the realistic

design I did here look like Vic Vic Vic Vic this in 1971 but had the trying to

try and in there I'd had some room for either this mythical 3m tape drive which

finally only did materialize and so forth but the idea was to make a

computer that we could actually put into schools and we have to understand about

display so here's this wonderful old machine we used to call the old

character generator and it was just the highest bandwidth video that money could

make we built it ourselves and the first

thing we did was to try and do really high quality fonts and the second thing

we realized is that we could by turning it upside down in a way we can make one

of the first bitmap memories ever done and do painting so here's what here's

what it looked like to design a character back then

this beating is because this was done on a 16 millimeter bollocks movie camera

back then so just you just designed the

thing in and showed you the thing in different sizes and then then rendered

to render the thing so we did many

experiments with that understood a lot about for example one of the things that

we found was that the worst display pitch you could have for a human being

was 50 to the inch at normal viewing distance that was the one where you

could see the square edge on a dot on a

pixel of course you don't want to see pixels when you look at a display you want to see pictures and so 50 and it

happened that 50 to the inch was the exact pitch that IBM had chosen for all

of its displays so they were the worst looking displays that money could buy

but there was a non-linearity so we discovered that if you made the pitch a

hundred to the inch you'd be having four times as many pixels which was expensive

but the inability to see the square

corner went down by a got better by a

factor of ten so four times as many pixels gave you a factor of 10 better

response and so we realized that just by choosing these very very carefully we

would get some very important let's see

what this is

so here's using it as you also see the

character recognizer that we build in here so L for drawing lines D for

sketching so here's the first painting system so this is done the summer of 72

choose brushes and choose different paints

okay and then we build a bunch of these machines called the Altos and here's

what they look like and this is the this

is the alto doing real-time musical synthesis

[Music]

so this is where we did stuff with really young kids kids of age three and

four this is a button box that has icons

I kind of control on it the Altos were

kind of a joint the hard work was done

by Chuck Thacker it was kind of the hardware genius at Parc and one of the

two or three people that part could not have functioned if he wasn't there and

the design for the thing was sort of the

clash of three friends who also had strong wills myself Butler Lampson and

Chuck Thacker we all kind of got what we wanted the main thing about the Altos

was that they're cheap and pretty fast compared to time sharing and they had

500,000 pixels on the screen so this

allowed us to do many many interesting things without having to optimize for

several years I believe that the one of

the principles for getting ahead in this business is avoid optimize optimizing

while you're trying to design because you're optimizing hat once you put it on

you're a different person you're just not the saint you're in the pink plane

when you're optimizing because you're trying to deal with known facts and make

those known facts happen and so Park was

able to make a lot of progress just by having a bunch of these machines around

and having them be fast enough for a few years so that new ideas could be done very very easily so I'll show you a

couple of example like here's the this

is the first test of overlapping windows

the inspiration I had in the shower the

year before and this is before we put window boundaries on so this is like

after the Alto is about a week old when we did this so these are two pieces of

text and I'm gonna pick up one by its

corner of the way Grail did showing the clipping there

and then I'm gonna drop move this over the other piece of text it's not too

convincing at this point so now I'm

going to bring the other guy up on top

just to prove and then and bring the other guy up on top so the original plan

was to have the windows show full graphics and be dragged and we had to

abandon that because we couldn't quite pull off the animation in real time on this machine so here's some of the

earlier tests for Windows of boundaries these you can see the user interface on

these that the Grail style make it bigger and smaller by the lower corner

they're moving around by that corner get another one by that corner gives you

another little window

and here's a first class of kids

so this is a 12 year olds taught by a 13 year old so she had taken the class the

year before there she is

dynamic Marilyn and this is the what she had done when she was a 12 year old so

this is the first graphics system done by a child so in other words she did it

this application so it has different shape brushes up here and as different

forms so she grabbed the square guy and now she's drawing a picture with it

so a lot of our interest was in end years as being able to make their own

tools here she got the the hexagon brush as drawing tree trunks with the hexagon

now she's getting a little dot drawing

the trunks this is basically a paint

program done by a 12 year old and then in her class

so here's something that's like a drawing an illustration system done by

another twelve-year-old girl so she's got little selection handles and see she

has a little menu down here of different commands so she just changed the color

now she's gonna change the size of the thing make it smaller you can see a

color bar menu up on the top now she's moving the thing so again this thing was

completely designed by a 12 year old and built as an application but it also

shows you the user interface approach here which we used to call doing with

images make symbols you basically stay

in the domain that the users want to operate in and they learn the symbolic

stuff as a way of getting more power over it

now here's a more sophisticated thing done by a fifteen-year-old so this is a

circuit this kid was interested in ham radio so this is a circuit drawing

program that he did so he has a menu of circuit symbols down here but you'll

notice in a second he also uses a pop-up

menu and here you can see his hand doing things you can see that you can get this

pop-up from the middle button on the mouse so he gets a closed dot there from

it we're pretty excited to have a 15

year old do this they just grabbed a

resistor over here and made an instance of it so it's bridging this gap so this

is trying to do as many things as as you

could along the lines of sketchpad but allowing the end users to do their own

tools

okay now the alto was micro coded so you could actually and it had multiple

display buffers had actually display list architecture that allowed you to do

a real double buffered animation so you got the following animation response on

it so I could do about a hundred and twenty square inches of graph graphics

and two and a half D at about twelve frames a second which is what you're

looking at here so how do you make these

animations so this was done by very

talented guy by the name of Ron Becker there's a menu up at the top you can't

quite see here but he's drawing a ball I'm putting a little specular reflection

on it coming over here and he's clicking

on the pop-up translucent mem menu there

to get this show me a path icon now he

says okay now run it so now it's taking

this ball through the path now he wants to get the step icon here the single

step this guy

now he's going to zap this guy and replace it with an empty frame and now

he's going to get another translucent frame and lay it over this one start the

animation you see that frame is missing

but as he starts painting over here it will that painting will be laid in and

he's using this guy underneath as a guide for where the center of the thing

is so you see as he paints the painting as this painting is being put into the

animation the trick of animation is to

put enough similarities in the different frames so that your eye will seem to

make one frame to store it into another it's sort of cognitive morphing and you

notice that even though it's only one frame here you seem to see the ball deforming it's called squash and stretch

another twelve year old girl galloping I

can write a program that has the horse

galloping across the street the screen

here's the horse again and now I have a

jockey here's a feature she added which

is to combine two animated things that's what the jockey on the horse drops them

in to make a race horse now they're one logical entity now I can have the jockey

and the horse run across the stream screen by making another program

okay and one more media thing here so

again because we had micro code we could do real-time music and we invented a

form of FM that could be played in real

time we had any voices of this real-time and what right now we're we're gonna

make a kind of a cello again you get to

see the user interface here we leave the old guys up because we want to see where

we've coming from that gives a gradual

kind of gradually getting louder bowing thing and now we want more harmonics

this is kind of a minute this one he's drawing here is a measure of harmonic

we're on more harmonics in the beginning and then less harmonics so you get the

bow fighting now we want to try various

modulation families this is pitch swoop

up to the pitch so that the string comes up to speed gradually put a little

vibrato in this repeating section between the two lines

[Music]

now let's go look for some ratios that

sound string like here's one that's kind of clarinet like there's one two three

one is a kind of a nice string sound

[Music]

if you just plug this now we play the

few from the past Akali and few can see minor with a different time where in

each voice [Music]

wonders of personal computing so here a

couple of these Altos in the schools and from our standpoint we'd actually gone

to quite a bit of trouble just to get a couple of computers in a classroom in

Palo Alto right basically you have to invent both all the hardware and all the

software and build all the stuff and you eventually get a couple of computers in

the classroom to start actually working with the children so a couple of things

here these kind of slides are the most boring slides because they just have

text on them but the notion of objects

here is very simple and it actually required microcode to make work so

they're the ideas there's nothing that isn't an object everything there's no

thing in the in the operating system part of it that isn't an object the

number three is an object the number the boolean value true is an object and

objects can send and receive messages and objects can remember that makes each

object kind of like a computer that can communicate and then we actually call

these guys classes to change that change

this to class here this below the line

stuff it's definitely we fooled around every version of small talk and

subsequent systems we've done ones up above we've never changed these seems to be three good things

about objects and the class this and what a class should be and exactly what

it is classes are objects in small talk and

the meta system and everything else we've changed numerous times over the

years and I think everybody who's fooled around with this stuff finds that this

it's difficult to come up with exactly abstractions that you really want but

this language stuff actually improve the user interface as you noticed the in

an object-oriented system and you say the object first it's actually the subject we should have called them

subjects it's actually the subject of the sentence then you say what what

you're supposed to do and in the GUI you select the thing that you're going to

talk to you first unlike the way Engelbart did it and you send the

message with a mouse click and the object is the thing that contains its

menus so you get an idiosyncratic menu etc etc and gooeys are successful in an

object-oriented systems if you use polymorphism as much as you possibly can

and I don't have time for this but

basically this is first starting off with the piaget stages and then

realizing that Bruner's multiple mentality model so the book here is

called towards the theory of instruction by Jerome Bruner still in print and it's

a really great book best book I know of about education has nothing to do with

computers in it but he shows the a bunch

of the experiments that show that unlike Piaget stages where you start off doing

and then you move to an image stage and you go to a symbolic Bruner showed that

all of the these mentalities are actually active and what's really

happening is a change of dominance between the mentalities so if you do

your user interface design right you can use all three of these very strong ways

that humans have to have to think about things and this is just to remind

everybody that icons came were around a lot longer before part sketchpad had

them and this was a wonderful system called the Lincoln wand that had a 3d

tablet stylus so this things sensed

where your hand was in the air and it had a whole iconic menu interface over

here that you would just point at and new so that these ideas were around for

quite a long time and the park GUI had

these characteristics we called it modeless not because there weren't modes

but because you didn't have to do something to get out of the mode for example this this guy is on top of this

guy so I can select text in here but you know if I want to do something for this

guy I just go directly at this guy I

don't have to do anything to get out of here I just go for the first command

that I want to do here in the system does it what you see is what you get as

much as possible here's one that hasn't been done very well today if you can see

it you can change it those are the idea that always have authoring be symmetric

every view should be overlapping so don't worry about whether they're

Windows or not the whole deal is layout and compositing iconic reference for

things this is a referent to the place I just was and multiple projects was a key

part of the interface at Xerox PARC not done unfortunately I'm the Mac or on on

Windows the reason I have them here is I'm using a system that is not using any of the Mac code so this is a actually an

iconic reference to this project I was in and if I press on it well maybe

nothing will happen oh because I can't see it

okay now I'll press on it

so I got taken back to where I was down

here I have a thing that says go back to the previous one takes me back there so

forth so here a couple of this is the first desktop publishing system and

here's a technique that we used everywhere which is to have the iconic

menus come up around the object that you're using so if you're in the text

you get a different menu then you were here the idea that everything is

basically layout it's all part of that user interface the idea of retrieving

from templates that look like the thing you're trying to retrieve parallel times

is about 1974-75 parallel time a guy by the name of sleuth at IBM was doing the

same kind of same kind of thing

simulation was the name of the game here

here's this is a fun one this was the

part of the hospital that was actually done by children recapitulating this

hospital simulation from Simula one and here's a more complicated version of

this thing that we had done so I think

just about I mean skip through a few

more things here I want to give you a

little hint of the parallel work that was going on at MIT at the same time

Nicholas Negroponte was on our advisory

board for our project at Xerox PARC and I was on his advisory board for his

project and he had a big color buffer

back in the early 70s and using this color buffer they did a system called

spatial data management system and I'll try and show you a few of the highlights in my last four minutes here so here's

the map over here are the controls he's got touch pads on the things this

is about 1977 or so he's got a huge full

wall screen here that shows him where

he's navigating around on the map

they'll get a sense of this so this is a zooming interface first really good one

ever done so the idea is everything that

you're interested in is in this thing they call data land and as you navigate

over something you can zoom in on

anything and it will just retrieve things of higher resolution as you go so

that the zoomed out things are their own icons

so now he's ooming back out it goes to a lower resolution version of this thing

here's a map of MIT so you can see where he's navigating here he's going to go up

to his ARPA correspondence on his desktop here here's a letter from I

think Steve Lukasik or whoever was there at that time so again you zoom in on it

Crispin's up this is also the first anti

aliased text and again because nicolas really cared the anti aliased everything

so many ways this is the most beautiful single interface design that was done in

the in the 70s you can see it's perfectly modern would be great to have

it right now

so they dove into their report for ARPA

which in this new ARPA of the late seventies was the size of a book and he

has his controls for the book here so he can point at topics for the book and it

will flip the pages here's what it looks

like on the on the main screen you zip

forward a few so a touchpad is what you

use for flipping pages speech

recognition

take me to the museum that goes the

museum telephone interface brings up the

interface here so they had eight bits or

pick so let me zoom up to a so they use it for doing anti-aliasing and for doing

modern graphics so this is the first thing where they actually had graphics

designers looking at the interfaces so they're nice and clean and simple very

understandable calculator zooming in on

a map here's a television set

just hooks you up automatically to TV LAPD one blow good maybe that's a good

place to stop thank you

I do

[Applause]