Pang: Were you working on-site, in Cupertino?
Kare: Yes. I definitely learned on the job. As when I went to Macintosh, there wasn't really an icon editor, but there was a way to turn pixels on and off. I did some work on paper, but obviously it was much better to see it on the screen, so there was a rudimentary icon editor. First they showed me how I could take the art and figure out the hex equivalent so it could be keyboarded in. Then Andy made a much better icon editor that automatically generated the hex under the icons. That was how I did the first ones. I think I did the fonts that way, going letter by letter, before we had a font editor.
Pang: Were you working on a Lisa?
Kare: No, on a Mac. Always on a Mac. Though my first Mac still had the Twiggy floppy disk drive. The Finder displayed a floppy, and had draggable titles and files.
I didn't really have much computer experience, but even then I found that rudimentary Mac more appealing to me than the Apple II. I was a typical customer that they were trying to attract, someone for whom the graphical side of it would have been attractive.
Pang: Did Andy and others have a clear sense of what kinds of icons they needed-- a trash can, files-- or was the design more uncertain?
Kare: I recall that things were pretty much open. The cursor existed. There was a paper with a folded corner. I think when I started there existed a trash can. I didn't invent that, Lisa had one, though I refined it to make it our trash can. Since Lisa used pixels that weren't square, even if one had wanted to use the exact same thing in Mac we would have had to adjust it.
Now it seems so ancient, thinking about about this. Usually they told me what concepts they needed, and I would try to come up with a selection of things that might work. We would try them out, and the final design would evolve from there.
The documents icon existed-- the paper with the folded corner-- and I thought it was good that documents look like documents; but I thought that applications needed to look more active. That's when I came up with the icon that has a hand holding a pencil against a diamond. With that, you could easily distinguish between documents and applications. I worked on the earliest MacPaint icon, which was a brush that was painting, where the document icon included an image that would associate it with an application.
We never imagined how many, many icons there would eventually be. There were 256 number sets available for fonts, and that just seemed cavernous-- we used only a few, and assumed that number would accomodate third-party font development.
Pang: I know some of the metaphors for the interface changed over time: with Lisa, for example, the scroll bar is called the "elevator" for a while. I imagine that if you call something an elevator rather than a scroll bar, or the name trash can changes over time, that you would design different icons; or that if you designed a really cool icon, the name of a feature might change.
Kare: When I came, the title bar was always called the title bar, and I spent a LOT of time working on different designs for it. Should it have stripes, should it have little architectural details on the side? We were trying to figure out what you do to highlight that name. I think the first font that I did was very much like Chicago-- we called it "Elefont" at first, that was the placeholder name.
MacPaint was first called MacSketch, but I don't think that had much effect on the icons. Later, doing MacWrite and MacProject, I think the ideas for those always pretty clear. We definitely talked about naming things in menus, and Bill Atkinson would come in sometimes with features for MacPaint and ask," What do you think we should call this?" Now the lasso, I think maybe Bill did call it a "lasso," and had the form with the little slip knot, to make it like a lasso. I refined his image to the "final" lasso.
For while there was going to be a copy machine for making a copy of a file, and you would drag and drop a file onto it to copy it. That was visual for a while, but then it went away. It turned out was hard to figure out what you could draw that people would see as a copier. I drew a cat in a mirror, like "copy cat" [Pang laughs]-- I tried a few ideas that were not practical.
We took a very common sense approach. People would ask for something, and I would do what I thought would work. I do remember always trying-- and I still do to this day-- to provide a rich selection of choices, and see what works.People would have different suggestions.
All the programmers with whom I worked in the Mac group were very articulate, clever, creative, and had a lot of good ideas. I also had the relative luxury of being a designer, but not working with a large number of other designers. So it was a great opportunity to develop one's own ideas, and respond to other people's ideas, but not have a huge number of these things go through the classic "designed by committee" process.
Pang: So who were the people you worked with most?
Kare: Andy Hertzfeld, Steve Capps, Donn Denman, Bruce Horn-- I don't want to leave anyone out-- Larry Kenyon-- I'm thinking of the room in which we sat-- Jerome Coonen, Bud Tribble-- I worked in the software group, and we had our own space. Patti Kenyon was the software librarian; she was Patti King at the time. Bill Atkinson usually worked at his house, and he came in at certain times. All great programmers. But I probably worked most closely with Andy, and a fair amount with Bill. Andy usually was the requester.
But I also worked on other things. We had the Scrapbook, and I drew the images for the Scrapbook. I was sort of a single-source vendor at the time, so I did a lot of work for Creative Services. I did some things with people writing the manuals, and worked mainly Chris Espinosa and Clement Mok, Tom Hughes, and Ellen Romana from Creative Services.
Pang: How long would it take to design a selection of possibilities for a copier or trash can?
Kare: Sometimes hours, sometimes days.
Pang: Can you explain how the Icon Editor worked? Was it like a piece of graph paper, and you clicked on the squares to draw an image?
Kare: That's pretty much it. I don't even remember very much about it now, but it was a grid with squares that toggled from black to white. After a while, I started using MacPaint to make the icons, and it had all the classic MacPaint features of being able to see the image enlarged and actual size at the same time, and being able to draw circles and lines and erase. I think with the first icon editor you could only toggle pixels, so it was great to use MacPaint.
Pang: So what was it that would define a really successful icon? Did you have some sense going into the project of what you thought a good icon would look like?
Kare: It's not usually my way to say, "This is it." As I said, I tried to make a selection and get people's opinions.
I like to think that good icons are instantly recognizable-- even if someone's never seen it, you can ask them what it does, and they get it-- or it's so easy to remember that if someone tells you want it is once, it's easy to remember when you look at it. I think that's a lot to ask of a symbol, that if you tested it everyone would all have the same one-word response as its function. But I think I had then, and still have, more of a common sense than a scientific approach to that kind of thing.
Pang: Some people were big advocates of user testing: Bill Atkinson and Larry Tesler, for example, did a lot of that. With the icons, did you just show them to people, or did you try to get a more systematic sample--
Kare: Oh, definitely-- I think it's great to test things, I just think of it more as-- when I said "not scientific," really what I meant was informal user testing, showing a lot of people and just asking them what they thought. When choosing an icon for the fill function in MacPaint, I tried paint rollers and other concepts, but I guess the pouring paint can made the most sense to people. Then there are constraints with a few things that are cursors that have one hot pixel: we tried different things to see what functioned well, and was easy to aim with. And some details came from the programmers: I didn't design the coupon-looking square marquee, whoever designed that functionality came up with that, and I tweaked it. Another time, Andy wanted to do a number puzzle, so I did the graphics for that.
Pang: I remember that from my very first Macintosh.
Kare: The puzzle, and the note pad, and some of the other things in the control panel, I worked on those with Andy. I still have on my business card the rabbit (for my fax number) and telephone from the original control panel.
Pang: What did the rabbit stand for?
Kare: There was a rabbit and tortoise, and they signified "fast" and "slow" time between mouse clicks, I think-- something to do with speed.
Pang: So who did you informally show your work to?
Kare: I'd say most of the people in the software group, and other people in the Mac group who might wander in. Steve Jobs would wander in-- Lots of people from the group would wander in.
Pang: At what point, or who was it who said, "Let's definitely go with this one, rather than these?"
Kare: I suppose Steve had some say in that, but also-- and this is my hazy memory-- it was somewhat of a consensus. I don't remember any big fights about any of that, or any big meetings to decide what the icons were going to be. It more or less evolved, thanks to lots of people's help.
Pang: I was re-reading Steven Levy's Insanely Great last night, and it sounded from his account as if Steve Jobs would look at the icons and say, "Yes this one, not this one."
Kare: I think he did, because he usually came in at the end of every day. He'd always want to know what was new, and he's always had good taste and a good sense for visual details. But I don't remember any formal meetings. He had ideas, but I was happy to mock up good ideas from anyone.
Pang: Was it a big change working in this kind of collaborative environment with software people, compared to the stuff you'd been doing before? It sounded like in some of your earlier graphic work, you worked pretty independently.
Kare: There's was noting to get adjusted to. Lots of long hours, but I don't remember anything particularly difficult in adjusting to the job.
Pang: I was thinking as much about different as opposed to difficult.
Kare: I'd had lots of other jobs working with groups of people.
Pang: In some book, someone said that the command key icon had come from a Swedish manual--
Kare: That was a concept we struggled with, because that was the control key. I can't even remember all the things we tried. We tried many, many things that were trying to be metaphors for control-- I think we tried a badge-- and they all seemed to harsh, and nothing seemed to work. So I said, "Let's try something abstract." So I was pouring through books of symbols, and I thought it was a sign on Swedish campgrounds that meant "interesting feature," or something to look at that was interesting. So that seemed to fit. And it lent itself to being digital without being jagged. That definitely came from a symbol book, or an interpretation of something in a symbol book that sort of made sense. Because I like the idea instead of just drawing some shape and saying "That's the control key," even though nobody who ever saw it-- actually, every now and then I hear from someone who actually had seen one of the signs. Mainly it is just abstract, but I knew it meant something relevant.
Pang: One of the things that the Macintosh marketing people were thinking about early on was having the Mac be something that could be sold internationally. Was this something that you tried to factor in in your work-- to develop things that didn't seem particularly American?
Kare: I think there was an awareness of that, but I don't know if we avoided things that were specifically American, so much as things that were specific to the English language. I tried not to use words, and not to use puns, because they don't translate.
Pang: So "Copy Cat" wouldn't have worked, because in Spanish or German it would mean something totally different--
Kare: --and it wouldn't make sense.
I can't think offhand of another example like that, but obviously they're legion. And beyond just not having a phone booth look like a British or American phone booth. Even the trash can-- trash cans all over the world don't look like that, and garbage trucks look even more different in different place. But I think there definitely was an awareness of that, even if there weren't banners up saying, "Think international." [Laughs]
Pang: I want to ask about the work you did on the windows-- the pinstriping on the title bar, the graying of the scroll bar, and so on. Those of us who've grown up with the Macintosh hardly notice it any longer, but why is that stuff there?
Kare: Well, as I said, I think Andy-- and you can check with Andy-- was responsible for some of that. I didn't do that basic design. I made different kinds of sliders and different kinds of fills. I'm more obsessive about making sure that all the dots line up. I think it was Steve Capps who originally came up with a concept that had horizontals in the title bar, and I ran with his concept to develop that. The horizontals were good, because they would stretch as the window was reseized. But again, it was something where I think we had different ones with different numbers of stripes, and we were just sort of asking people what they thought.
I would work with screen shots. I like to make things regular, and remove extraneous rectangles, and I think you get an overall perception that something's easy to use when the design is sparse, when it's refined. So sometimes I would get an item-- like a button, or the okay button-- and I'd just move an underline down, or take a couple pixels out of the edge, just to have it look more polished or well-crafted, if I could.
Pang: So what's the advantage to having that kind of detail, over just a title bar that has nothing?
Kare: Well, I think it's nice to have the interface offset from the data: I think it makes it look more structured, when you that kind of detailing. Did I give deep thought to why we did everything? No. [Laughs]
But you know, I think there's something nice to offsetting the main panel, and having it differ from where you would be working. The window is more like a piece of paper, and around it are things with details. Andy always says that it's good in a UI to have things be noticeable, either by being bigger, or having some attention called to them by a refinement in the surface, in proportion to their importance and frequency that you use them. That was probably also somewhat of a factor. The right height of the title bar makes it easy to drag, and calls your attention to it.
Pang: So to some degree, it's ergonomics, but it's also a matter of attention--
Kare: --some of it's attention, but some of it is just aesthetics.