Transcription
This is a binder of Polaroid photographs that I took, um, while we were developing the Lisa user interface at my home. I had a Lisa prototype, and this consisted of an Apple II with a graphics card that put up a display that was the Lisa bitmap display. And I would, um, write code, uh, that would display on it. And not highly optimized code, just stuff that would get it on. We could look at a possible, uh, user interface feature, and I would, uh, take a picture of it with my Polaroid camera and get on my motorcycle. At that time, I was riding a motorcycle. Get on my motorcycle and drive it into Apple and meet with other people, show it to Larry Tesler and a group of people, and and discuss user interface possibilities.
Um, this, uh, this one shows the first characters on Lisa. These are, uh, hand-built, uh, proportional fonts. So, remember, on the Apple II, every character was the same width. And here was our first example of an 'I' being narrower than a 'W', uh, that we take for granted today, but we didn't take for granted back then. Here's, uh, uh, some text written with that. Here's our first, first, uh, user interface for the Lisa. Notice it has a black background, like our computers did back then. And what it had was, um, 25 lines by 80 characters, uh, plus soft keys. Uh, we were using our 720 pixels of black and white. And these soft keys are labels along the bottom for, uh, it looks like there's 10 soft keys that would correspond to 10 keys, unlabeled keys on a keyboard. And you would read this label and press that, uh, key on the keyboard. Uh, we still had, at this point, we had in this hardware, we had scan line pointers that would allow us to smooth scroll the middle of this as long as was the whole width.
Oh, I wanted to ask a question about this. So, um, my colleague Al Alosta, who I think you know, um, has mentioned that the, the reason for the soft keys was, um, a lot of the people on the Lisa team had come from HP, and they worked on the HP 300, and that had used soft keys. Yeah, I think, uh, Roy Mueller, uh, was, uh, uh, hardware manager or software manager, I'm not sure which, but, um, he had worked at HP, and we had seen these terminals that had unlabeled keys, and then labels showed up on the screen. Took so while to get rid of those. Um, we only had one pixel, one, one bit per pixel. So this is yes or no, it's black or white. And so I came up with, uh, patterns, little 8x8 repeating textures that gave us a some semblance of of grayscale, not color, but at least some kind of differentiable areas.
Here's our first one that shows some windows. Now, remember, this isn't in the software we're writing, this is just a prototype. I'm drawing stuff on a screen and showing it to the team. Um, and here is, um, windows plus soft keys and also a little popup menu. Now, the popup menus only gave a few items. This is, and which one would pop up would depend on where the mouse was. It wasn't, it wasn't flexible enough to do a real application like a word processor, not enough, uh, breadth, uh, and depth of of commands. Um, so the popup menus, there are not contextual. Well, they would have been if this was real, right? Remember, this is string and bailing wires prototype. This is not real code that the, that the team is using. Okay, they're still working on specifications for these Lisa 7 apps. Okay.
Um, we had a confusion about folders and documents. So here is a folder with a menu at the bottom. Well, a folder, we think of a folder now as a container that other things go inside of. And a document is something you actually write on. You, you write on a word processing document. But we were confused about that at the time. And so we actually, you know, we thought of this as a folder, but it was had text in it instead of having other things in it. Um, and here, uh, at this point, we have a menu at the bottom. It says "Edit" and then "Copy" and etc. the items. And if you were wanted to change which menu, you have to press on the first thing and then choose a different menu. Yeah, it didn't, it didn't work so well.
Um, here is, uh, text selection here. And, uh, our first cursor was an arrow cursor. And one of the things, uh, we found is that when people want to, uh, type some text, they need to know where the new characters are going to go. And to insert text, if you select a character, well, you don't know, is it going to go before or after it? So we ended up going to an I-beam shaped cursor. This is the first example of an I-beam cursor. Uh, we committed at this point to a one-button mouse. We had seen mice with up to three buttons on them. And and we had this sort of little contest, okay? For each application, what would you label the three buttons? The first one was always select, but the other, the other ones, every application had a different meaning for them. And, um, when we went to one button, people stopped looking at the mouse and started looking at the screen more. So, um, here, and these are, we'd bring in ideas as I'd bring in ideas and we discuss them, and Larry would go over them too. And here's some of our first, this isn't an icon on the desktop, this is a folder tab. And you could touch on the tab and it would become big. You touch on there and it become small. So you could have kind of expanding and and shrinking tabs, uh, that, uh, allowed us to have some things out on the desktop here.
Um, here we moved the pull-down. We made pull-down menus at the top of the window. Mhm. So again, now you got a range of titles of menus at the top with their items, uh, flopping down. Um, well, that was an improvement over having just the items at the bottom, but it, uh, it still had problems because, uh, if you were, if the window wasn't very wide, you couldn't get all the titles. And if the window was not very tall, you couldn't get all the items. Uh, at this point, we had the grow icon to make, how do you change the size of a window? Well, you would press in this little grow icon here and drag it out. One of the problems was if people just dragged it a little bit, the window would go down to that size because, you know, drag out and let go. But if they were a little and just kind of stabbed at it, the window would go like that, and they'd think they'd broken the computer, like, like when you take the power off a television and it goes like that, the image kind of goes down. So that didn't work so well. We debugged the user interface one error at a time.
Uh, here we had, uh, tabs. The, the, the folder tabs were actually shaped like folder tabs with a little curve to them. We're still confused about folders versus documents. Um, here we had tabs arranged along the bottom. And think of it like a combination of a file folder with all these, uh, you know, a filing drawer where all these folder tabs up. And when you shrunk one down, it'd go back into the drawer. So that was that, what that was. Here, rounded folder tabs. The active folder is highlighted by bold. That wasn't strong enough. People didn't even notice that, that this, this little bold highlighting. Double-click on a tab to open or close it.
Um, in this one, this is the first one where we moved the menus to the top of the whole screen. And this assured that we had the full width, assured that we had the full height. And but it meant you might have to reach further to get to that. So we introduced, uh, mouse scaling, that a quick jerk would get you up to the top quickly. Uh, we put the grow icon down on the bottom right so that, uh, you could, if you only moved a little bit, it would only change the window a little bit. It wouldn't suddenly jerk down to nothing.
Um, um, here's some of in QuickDraw, some of the different sort of styles of normal text and bold and an outline, inverse, italic, shadow, shadow against gray.
Getting more miles out of a, I see you have this application called Sketchpad. Was that the proto? Sketchpad was just a test bed for QuickDraw. It was never an application that shipped. Okay. Uh, and it later evolved into MacPaint. Was that named after Ivan Sutherland? It was, it was a, it was a tip of the hat to Ivan Sutherland. His first, uh, graphics editing program was called Sketchpad, and I was a fan of his, his work.
Um, here's some of the different things we could draw with QuickDraw, ovals and round rectangles and, uh, graphical items in menus. So this is actually a, a, a menu that shows some, uh, uh, fill patterns inside the menu.
Um, oh, we had the, the idea of the tray. The desk was getting cluttered, and we were trying to kind of make it a little less cluttered. So if you had several windows up that you wanted to kind of use but had in in play, you could pop one into the tray and then you could pull it from the tray to recover it without having it take up, uh, screen space.
I was talking earlier about the, uh, no modes. This is, this is the ideas for the graphics editor. This is the prototype I brought in that had our first, this is our first tool palette. So here's a tool palette where you can touch on rectangle, and now when you stretch out, you get a rectangle. Uh, but because it's highlighted there, the rectangle is highlighted, at least you know what mode you're in. You're in rectangle making mode versus oval making mode. But at least when when you chose an oval making mode and stretched out one, you saw an oval as you stretched it out.
Bruce Daniels was sort of the keeper of the mouse editor that we all used for writing code in. So he he maintained, uh, a, a working text editing environment that actually lived in a window and had scroll bars and had text selection and could cut and paste. And this was a really important, important part of our toolkit that we were all using to write code in.
Fairly near the end, we were rushing to completion, and we're trying to, like, like the rule was, no more changes, just fix the bugs and get it out the door. But Dan Smith and Frank Ludolph were working on the desktop manager. Everything was a manager. We had the window manager, event manager, menu manager, desktop manager. I don't know, we weren't like manager happy, but so that's that's on the Mac, that would be the Finder. Finder. And, and Dan came to me and he said, you know, we have, we have the 20 Questions filer. You, when you want to move a, a file from one folder in one diskette to another folder in another diskette, you sort of have to do first answer, well, which diskette is the source on, and what folder is it in, what folder in that, and which document. Okay, now you've got the source specified. Now specify all that for the destination and say, move it or copy it there. And he said, this is too complicated. And so he came to me and asked, could we simplify this? Our one of our first cuts was this little two-window thing where one window had the, the office, and one had the desk. And if you touched on this, it would show move up to this. It was kind of like a, uh, two levels of column view. The thing and the contents within it. And if you touch on one of those, then that's up there, and here's the contents within that. Or you touch here, it goes the other way.
Um, inside of, I'd say inside of two weeks, um, well, so we started a Skunk Works project. We went to Wayne Rosing, the engineering manager, and said, we really think we can make the filing operations much more concrete, understandable by, uh, going to icons and, um, draggable icons. And, uh, Wayne said, okay, don't tell anybody you're working on this. Only work on it at home and come in here and work your eight hours here, but then go back and and and work extra time on it at home. And we did that, and we kept mom about what we were working on. And we just, this is our first graphical diskette directory. This showed, here's what's on a diskette, here are the files on it, or some folders that you could then touch and it would show you contents of them. And then here's our first one where we actually put icons on the desktop. We didn't have that before. And I went a little bit crazy and put flies on the trash can if it was full, and that didn't pass the sanitation test, but, and then it shouldn't have, it was overboard. But, but this was our first actually putting files on the desk, desktop, putting icons and dragging and dropping.
We were now able to explain, uh, it, it was a more concrete way to think about documents. Real people don't get what a file is. Well, they do now, but they didn't back then. What is a file? They think of a file is either something that you scrape metal with to to smooth it down, or or as a file folder in a drawer. But what is a, what is a file on a computer? They didn't know what that was. But by introducing these icons of a document, icons of a folder, so here, here an icon for a file drawer, a diskette, a folder, uh, the tray, which we still had, a, a, uh, a pad, a document, a pad would be sort of a, a pad of documents you could tear off one. Uh, we introduced these, and that made it much more understandable. The workings of the desktop manager were the same. The hard work of actually moving the files and pre-flighting is enough room for them, the the work that Frank Ludolph and Dan Smith had done. This was just kind of a sugar coating on the front, front end of it. And we brought it in, fed to Comp Le working. And when we brought it in, we warned Wayne ahead of time, and he made up T-shirts for us that said "Rosing's Rascals." And it was, he was telling everybody, look, I sanctioned, I approved of this. Don't everybody else go off with crazy ideas at the last minute. We got to ship this thing. So we were, that's my favorite T-shirt from all of my Apple days is Rosing's Rascals. Wayne Rosing was an amazing man to work with. I, I loved working with him, and I still think he's an amazing person.
That's fascinating because the, the Mac could have been totally different if the Lisa hadn't, did you know, introduced icons at the last minute? Yeah, I mean, it could have been very almost unrecognizable. Well, the Mac came out only one year after the Lisa. Okay. It was a, a baby Lisa. It was, how do we make the Lisa Lisa affordable? $10,000 was too much for most people. And how can we also make it, um, yeah, not only lower cost, but, um, I don't, I don't know, less stiff. Mac was more playful. When people, people got a Mac, they, they sort of, I want one, and then they have to justify why. Yeah, you want to.
Here is some stuff about, uh, pictures and scaling. In order to scale pictures, right, you draw this picture, but you want to draw it at a different scale. I had to introduce bitmap scaling. So instead of just copying pixels one for one, I had to actually figure out how to to shrink or expand, uh, uh, pixels as I was drawing them.
Um, let me see what I think that's, that's, uh, that's most of the key stuff here. I see a lot of these halftoned images. These, oh, um, yeah, I had a, um, I had a Western Union desk facsimile machine that I had rigged up. And I, they, they're more, they were designed to be binary, either either zap the silver foil with electric or not. And so that it would make a remote copy of an image. But I modified it so it gave an analog signal and made an analog to digital converter for my, I had a wire-wrapped LSI-11 computer at home, my personal computer, and I, I rigged this up so I could take, um, I could scan images with it. This is before Apple had a scanner. And one of my pet, um, uh, little hobbies was, how do you make grayscale from black and white pixels? And you have to place them carefully so as not to get obvious patterns and dithering patterns. And so there's a lot of, in fact, uh, I, I worked on this, and later on the Mac, I worked on MacVision for a third-party developer that made this video digitizer, and we used my, uh, my halftoning algorithms. Later, when Andy Herzfeld did ThunderScan, he used my algorithm, and then he made some improvements, and then I handed them back, and I made some improvements. So we've, we've been playing back and forth on this. Later with HyperCard, I did HyperScan, and I made yet more improvements to the halftoning. So, yeah, so, yeah, that's the dithering algorithm that's named after you. Yeah, cool. So thank you.
These represent a, uh, sort of incremental documentation of the way we blunder it into the Lisa user interface. It, it was not just created denovo. It was iterated. It was hard engineering, trying stuff on real users, find out what they don't understand, keep fixing bugs, user bugs, until it worked more smoothly. The way you get, the way you get a smooth user interface is with user testing. There's no other way. If you don't test on users, I mean, I'll show you an example of a total failure of user testing. In my card, I have an Apple, uh, credit card here. And if I hold it with the writing right side up, my thumb is covering the chip. Every other card, my thumb doesn't cover the chip. Okay, Apple didn't do user testing on that. The second thing they didn't do user testing on is they made it out of titanium and didn't test that it will shred every other card in your wallet. Oh, bad idea. So, you know, user testing is always essential. And whatever we got in Lisa that made it work was because we were willing to be wrong and willing to iterate and willing to keep working at it until it was smooth. And, um, that's my strong advice for anybody trying to make a product today is test it on real users and watch what doesn't work for them. You can make it a whole lot better just by listening to their feedback. But don't be so arrogant as to think that you have all the answers. Yeah.
Is there a single slide that you think, um, captures what the Lisa was about? And maybe describe that. A single slide? Um, I guess it would be, uh, where we have a graphical diskette directory, we have a graphical, you know, icons on the desktop. This is about as far from a text-in and text-out user interface. Yeah, it was graphical. Um, you could use a mouse to interact with it, point and click, instead of type and be told that you were stupid. So it, it made a difference. Lisa made the computer accessible to more people. Unfortunately, it was kind of, it was too expensive. And, um, it was the stepping stone that allowed the Mac to become, and later the iPhone and the iPad. I mean, now we have, I don't know, this is probably here's and some of the seeds that that were cast, you know, Lisa, if Lisa hadn't been there, this wouldn't have been there. And these are in everybody's pocket these days. Lisa was influential as a stepping stone. It sewed seeds that other people picked the ball with and rolled and and made improvements.