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

From Viewpoints Intelligent Archive
Revision as of 22:59, 5 December 2017 by Ohshima (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search
[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
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
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
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
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
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
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