In 1984 the first Apple ‘Mac’ computer was released featuring pixelated icons and new typeface ‘Chicago’ created by Susan Kare. These features were designed to fit in with the screen. Susan Kare (/ ˈ s uː z ə n ˈ k ɛər /; born February 5, 1954) is an American artist and graphic designer best known for her interface elements and typeface contributions to the first Apple Macintosh from 1983 to 1986. She was employee #10 and Creative Director at NeXT, the company formed by Steve Jobs after he left Apple in 1985. She was a design consultant for Microsoft, IBM, Sony.

1. Susan Kare Icons Book
2. Susan Kare Mac Icons
3. Susan Kare Mac Icons Youtube
4. Susan Kare Icon

Designing Icons

Pang: Were you working on-site, in Cupertino?

Kare: Yes. I definitely learned on the job. As whenI went to Macintosh, there wasn't really an icon editor, but therewas 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 therewas a rudimentary icon editor. First they showed me how I couldtake the art and figure out the hex equivalent so it could bekeyboarded in. Then Andy made a much better icon editor that automaticallygenerated the hex under the icons. That was how I did the firstones. 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 firstMac still had the Twiggy floppy disk drive. The Finder displayeda floppy, and had draggable titles and files.

I didn't really have much computer experience, but even thenI found that rudimentary Mac more appealing to me than the AppleII. 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 whatkinds of icons they needed-- a trash can, files-- or was the designmore uncertain?

Kare: I recall that things were pretty much open. Thecursor existed. There was a paper with a folded corner. I thinkwhen I started there existed a trash can. I didn't invent that,Lisa had one, though I refined it to make it our trashcan. Since Lisa used pixels that weren't square, even if one hadwanted to use the exact same thing in Mac we would have had toadjust it.

Now it seems so ancient, thinking about about this. Usuallythey told me what concepts they needed, and I would try to comeup with a selection of things that might work. We would try themout, 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'swhen I came up with the icon that has a hand holding a pencilagainst a diamond. With that, you could easily distinguish betweendocuments and applications. I worked on the earliest MacPainticon, which was a brush that was painting, where the documenticon included an image that would associate it with an application.

We never imagined how many, many icons there would eventuallybe. There were 256 number sets available for fonts, and that justseemed cavernous-- we used only a few, and assumed that numberwould accomodate third-party font development.

Metaphors

Pang: I know some of the metaphors for the interfacechanged over time: with Lisa, for example, the scroll bar is calledthe 'elevator' for a while. I imagine that if you callsomething an elevator rather than a scroll bar, or the name trashcan changes over time, that you would design different icons;or that if you designed a really cool icon, the name of a featuremight change.

Kare: When I came, the title bar was always called thetitle bar, and I spent a LOT of time working on different designsfor it. Should it have stripes, should it have little architecturaldetails on the side? We were trying to figure out what you doto highlight that name. I think the first font that I did wasvery much like Chicago-- we called it 'Elefont' at first,that was the placeholder name.

MacPaint was first called MacSketch, but I don't think thathad much effect on the icons. Later, doing MacWrite and MacProject,I think the ideas for those always pretty clear. We definitelytalked about naming things in menus, and Bill Atkinson would comein sometimes with features for MacPaint and ask,' What doyou think we should call this?' Now the lasso, I think maybeBill did call it a 'lasso,' and had the form with thelittle slip knot, to make it like a lasso. I refined his imageto the 'final' lasso.

For while there was going to be a copy machine for making acopy of a file, and you would drag and drop a file onto it tocopy it. That was visual for a while, but then it went away. Itturned out was hard to figure out what you could draw that peoplewould see as a copier. I drew a cat in a mirror, like 'copycat' [Pang laughs]-- I tried a few ideas that were not practical.

We took a very common sense approach. People would ask forsomething, and I would do what I thought would work. I do rememberalways trying-- and I still do to this day-- to provide a richselection of choices, and see what works.People would have differentsuggestions.

Collaborators

All the programmers with whom I worked in the Mac group werevery articulate, clever, creative, and had a lot of good ideas.I also had the relative luxury of being a designer, but not workingwith a large number of other designers. So it was a great opportunityto 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, BruceHorn-- I don't want to leave anyone out-- Larry Kenyon-- I'm thinkingof the room in which we sat-- Jerome Coonen, Bud Tribble-- I workedin the software group, and we had our own space. Patti Kenyonwas the software librarian; she was Patti King at the time. BillAtkinson usually worked at his house, and he came in at certaintimes. All great programmers. But I probably worked most closelywith Andy, and a fair amount with Bill. Andy usually was the requester.

But I also worked on other things. We had the Scrapbook, andI drew the images for the Scrapbook. I was sort of a single-sourcevendor at the time, so I did a lot of work for Creative Services.I did some things with people writing the manuals, and workedmainly Chris Espinosa and Clement Mok, Tom Hughes, and Ellen Romanafrom Creative Services.

Choosing Icons

Pang: How long would it take to design a selection ofpossibilities for a copier or trash can?

Kare: Sometimes hours, sometimes days.

Pang: Can you explain how the Icon Editor worked? Wasit like a piece of graph paper, and you clicked on the squaresto draw an image?

Kare: That's pretty much it. I don't even remember verymuch about it now, but it was a grid with squares that toggledfrom black to white. After a while, I started using MacPaint tomake the icons, and it had all the classic MacPaint features ofbeing able to see the image enlarged and actual size at the sametime, and being able to draw circles and lines and erase. I thinkwith the first icon editor you could only toggle pixels, so itwas great to use MacPaint.

Pang: So what was it that would define a really successfulicon? Did you have some sense going into the project of what youthought a good icon would look like?

Kare: It's not usually my way to say, 'This isit.' As I said, I tried to make a selection and get people'sopinions.

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 someonetells you want it is once, it's easy to remember when you lookat it. I think that's a lot to ask of a symbol, that if you testedit 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 sensethan a scientific approach to that kind of thing.

User testing

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 tryto 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 ofpeople and just asking them what they thought. When choosing anicon for the fill function in MacPaint, I tried paint rollersand other concepts, but I guess the pouring paint can made themost sense to people. Then there are constraints with a few thingsthat are cursors that have one hot pixel: we tried different thingsto see what functioned well, and was easy to aim with. And somedetails came from the programmers: I didn't design the coupon-lookingsquare marquee, whoever designed that functionality came up withthat, and I tweaked it. Another time, Andy wanted to do a numberpuzzle, 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 theother 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.

Reviewing Designs

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 Jobswould wander in-- Lots of people from the group would wander in.

Pang: At what point, or who was it who said, 'Let'sdefinitely 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. Idon't remember any big fights about any of that, or any big meetingsto 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 InsanelyGreat last night, and it sounded from his account as ifSteve Jobs would look at the icons and say, 'Yes this one,not this one.'

Kare: I think he did, because he usually came in atthe end of every day. He'd always want to know what was new, andhe's always had good taste and a good sense for visual details.But I don't remember any formal meetings. He had ideas, but Iwas happy to mock up good ideas from anyone.

Pang: Was it a big change working in this kind of collaborativeenvironment with software people, compared to the stuff you'dbeen doing before? It sounded like in some of your earlier graphicwork, you worked pretty independently.

Kare: There's was noting to get adjusted to. Lots oflong hours, but I don't remember anything particularly difficultin adjusting to the job.

Pang: I was thinking as much about different as opposedto difficult.

Kare: I'd had lots of other jobs working with groupsof people.

International Considerations

Pang: In some book, someone said that the command keyicon had come from a Swedish manual--

Kare: That was a concept we struggled with, becausethat was the control key. I can't even remember all the thingswe tried. We tried many, many things that were trying to be metaphorsfor control-- I think we tried a badge-- and they all seemed toharsh, and nothing seemed to work. So I said, 'Let's trysomething 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 thatwas interesting. So that seemed to fit. And it lent itself tobeing digital without being jagged. That definitely came froma symbol book, or an interpretation of something in a symbol bookthat sort of made sense. Because I like the idea instead of justdrawing some shape and saying 'That's the control key,'even though nobody who ever saw it-- actually, every now and thenI hear from someone who actually had seen one of the signs. Mainlyit is just abstract, but I knew it meant something relevant.

Pang: One of the things that the Macintosh marketingpeople were thinking about early on was having the Mac be somethingthat could be sold internationally. Was this something that youtried to factor in in your work-- to develop things that didn'tseem particularly American?

Kare: I think there was an awareness of that, but Idon'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'ttranslate.

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 obviouslythey're legion. And beyond just not having a phone booth looklike a British or American phone booth. Even the trash can-- trashcans all over the world don't look like that, and garbage truckslook even more different in different place. But I think theredefinitely was an awareness of that, even if there weren't bannersup saying, 'Think international.' [Laughs]

Susan Kare Icons Book

Interface Design

Susan Kare Mac Icons

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 hardlynotice it any longer, but why is that stuff there?

Susan Kare Mac Icons Youtube

Kare: Well, as I said, I think Andy-- and you can checkwith Andy-- was responsible for some of that. I didn't do thatbasic design. I made different kinds of sliders and differentkinds of fills. I'm more obsessive about making sure that allthe dots line up. I think it was Steve Capps who originally cameup with a concept that had horizontals in the title bar, and Iran 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 differentnumbers of stripes, and we were just sort of asking people whatthey thought.

I would work with screen shots. I like to make things regular,and remove extraneous rectangles, and I think you get an overallperception 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 takea couple pixels out of the edge, just to have it look more polishedor well-crafted, if I could.

Pang: So what's the advantage to having that kind ofdetail, over just a title bar that has nothing?

Kare: Well, I think it's nice to have the interfaceoffset from the data: I think it makes it look more structured,when you that kind of detailing. Did I give deep thought to whywe did everything? No. [Laughs]

But you know, I think there's something nice to offsettingthe 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 thingswith details. Andy always says that it's good in a UI to havethings be noticeable, either by being bigger, or having some attentioncalled to them by a refinement in the surface, in proportion totheir importance and frequency that you use them. That was probablyalso somewhat of a factor. The right height of the title bar makesit easy to drag, and calls your attention to it.

Pang: So to some degree, it's ergonomics, but it's alsoa matter of attention--

Susan Kare Icon

Kare: --some of it's attention, but some of it is justaesthetics.

Contents

• Working on the Macintosh