Bill Atkinson: Polaroids showing the Evolution of the Lisa GUI

Bill Atkinson: Polaroids showing the Evolution of the Lisa GUI — Computer History Museum

Computer History Museum

AI-assisted summary of Bill Atkinson: Polaroids showing the Evolution of the Lisa GUI — original source. Check the original for full context.

Source published:

Key ideas

  • Bill Atkinson documents the creation of the Lisa graphical interface through a binder of Polaroids photographed from an Apple II prototype rig driving a custom bitmap display. (0:10)
  • The single-button mouse was chosen over two- and three-button alternatives after testing showed multi-button layouts forced users to look down at their hands instead of focusing on the display. (5:25)
  • The desktop icon interface and visual Trash Can were developed in secret as an after-hours skunkworks initiative by Bill Atkinson and Dan Smith to replace an unusable text-prompted file manager. (12:34)
  • To produce grayscale rendering on 1-bit monochrome hardware, Atkinson modified a Western Union Desk-Fax drum scanner and developed the foundational Atkinson dithering algorithm. (17:38)

Detailed notes

## Background Published by the Computer History Museum on YouTube on January 29, 2025, this video documents a recording from December 12, 2022, featuring Apple pioneer Bill Atkinson. According to the description, Atkinson presents and explains his personal binder of Polaroid photographs taken during the development of the Apple Lisa, capturing the historical evolution of its graphical user interface.

## TL;DR Using Polaroid snapshots taken from a custom Apple II prototype rig, Bill Atkinson details how the Lisa engineering team systematically invented core modern interface conventions through rapid iteration and hands-on user testing. He explains the origins of proportional fonts, the I-beam cursor, the single-button mouse, 1-bit dithering algorithms, and the fixed top menu bar that solved per-window clipping. The walkthrough also recounts the unauthorized skunkworks project with Dan Smith and Wayne Rosing that replaced a tedious '20 Questions' file prompt with free-floating desktop icons and direct drag-and-drop manipulation. Atkinson concludes by stressing that intuitive interfaces require treating user confusion as software bugs, framing the Lisa as the direct evolutionary ancestor of the Macintosh and modern computing.

## Atmosphere & style The presentation possesses an intimate, reflective, and warmly nostalgic atmosphere as Atkinson flips through tactile, one-of-a-kind photographic artifacts from computing history. His delivery is candid and self-effacing, readily chuckling over humorous dead-ends—such as drawing swarming flies around full trash cans—while passionately critiquing modern design missteps like the ergonomics of the titanium Apple Card. Watching the video feels like an unhurried masterclass in design philosophy, grounding iconic digital paradigms in the gritty trial-and-error reality of motorcycle rides, hacked fax machines, and late-night skunkworks coding.

## Bulletin - [00:10](https://www.youtube.com/watch?v=Qg0mHFcB510&t=10s) Bill Atkinson documents the creation of the Lisa graphical interface through a binder of Polaroids photographed from an Apple II prototype rig driving a custom bitmap display. - [05:25](https://www.youtube.com/watch?v=Qg0mHFcB510&t=325s) The single-button mouse was chosen over two- and three-button alternatives after testing showed multi-button layouts forced users to look down at their hands instead of focusing on the display. - [12:34](https://www.youtube.com/watch?v=Qg0mHFcB510&t=754s) The desktop icon interface and visual Trash Can were developed in secret as an after-hours skunkworks initiative by Bill Atkinson and Dan Smith to replace an unusable text-prompted file manager. - [17:38](https://www.youtube.com/watch?v=Qg0mHFcB510&t=1058s) To produce grayscale rendering on 1-bit monochrome hardware, Atkinson modified a Western Union Desk-Fax drum scanner and developed the foundational Atkinson dithering algorithm.

## Key takeaways - [00:10](https://www.youtube.com/watch?v=Qg0mHFcB510&t=10s) Atkinson prototyped Lisa interface ideas at home using unoptimized code on an Apple II with a custom graphics card, photographing screens with Polaroid film to discuss with Larry Tesler and the team. - [00:10](https://www.youtube.com/watch?v=Qg0mHFcB510&t=10s) Hand-crafted proportional fonts on the Lisa replaced fixed-width character generators, giving different glyphs varying horizontal widths. - [01:31](https://www.youtube.com/watch?v=Qg0mHFcB510&t=91s) Early Lisa display concepts retained 1970s terminal paradigms, including dark backgrounds, 8×8 dither textures for simulated grays, and HP 300-inspired dynamic soft keys matching physical buttons. - [05:25](https://www.youtube.com/watch?v=Qg0mHFcB510&t=325s) The I-beam cursor was created to resolve ambiguity over whether inserted keystrokes would land before or after a character highlighted by an arrow cursor. - [05:25](https://www.youtube.com/watch?v=Qg0mHFcB510&t=325s) Standardizing on a single-button mouse eliminated application-specific button confusion and kept user attention firmly anchored to the monitor. - [08:58](https://www.youtube.com/watch?v=Qg0mHFcB510&t=538s) Moving menus from window borders to a fixed system-wide menubar at the top of the screen eliminated horizontal and vertical clipping and was paired with ballistic mouse acceleration. - [08:58](https://www.youtube.com/watch?v=Qg0mHFcB510&t=538s) The internal graphics harness SketchPad served as the testing ground for Atkinson's QuickDraw engine before later evolving into MacPaint. - [08:58](https://www.youtube.com/watch?v=Qg0mHFcB510&t=538s) Persistent visual highlighting in tool palettes and live outline drags solved common modal errors in early graphical authoring. - [08:58](https://www.youtube.com/watch?v=Qg0mHFcB510&t=538s) The Desktop Manager—the direct ancestor of the Mac Finder—was built by Dan Smith and Frank Ludolph under intense pre-release deadlines. - [12:34](https://www.youtube.com/watch?v=Qg0mHFcB510&t=754s) Frustrated by the tedious multi-step '20 Questions filer', Atkinson and Dan Smith received permission from engineering manager Wayne Rosing to build an unauthorized icon-driven desktop during off-hours. - [12:34](https://www.youtube.com/watch?v=Qg0mHFcB510&t=754s) Wayne Rosing supported the skunkworks desktop upon its reveal by handing out 'Rosing's Rascals' T-shirts to ratify the change while preventing other last-minute feature additions. - [12:34](https://www.youtube.com/watch?v=Qg0mHFcB510&t=754s) The visual desktop metaphor—using icons for documents, folders, trays, and tear-off stationery pads—demystified the abstract concept of digital files for everyday users. - [17:38](https://www.youtube.com/watch?v=Qg0mHFcB510&t=1058s) Atkinson developed arbitrary bitmap scaling routines and the Atkinson dithering algorithm using a modified Western Union fax drum connected to a home-built DEC LSI-11 computer. - [17:38](https://www.youtube.com/watch?v=Qg0mHFcB510&t=1058s) Atkinson dithering traveled between Apple projects, being refined by Andy Hertzfeld for ThunderScan and integrated into MacVision and HyperCard's HyperScan. - [20:00](https://www.youtube.com/watch?v=Qg0mHFcB510&t=1200s) Atkinson argues that intuitive user interfaces require continuous user testing and treating user friction as engineering bugs, citing the Apple Card's chip placement as a modern design failure. - [20:00](https://www.youtube.com/watch?v=Qg0mHFcB510&t=1200s) While commercially unsuccessful due to its high price tag, the Lisa established the direct graphical, mouse-driven lineage inherited by the Macintosh, iPhone, and modern personal computing.

## Detailed walkthrough ### [00:10](https://www.youtube.com/watch?v=Qg0mHFcB510&t=10s) The Prototype Rig, Polaroids, and Proportional Fonts

Bill Atkinson introduces a physical binder containing Polaroid photographs taken during the development of the Apple Lisa user interface. To build and test these concepts at home, Atkinson set up a cobbled-together prototype rig consisting of an Apple II outfitted with a custom graphics card that replicated the Lisa's bitmap display. He wrote throwaway, unoptimized code simply to put an interface idea on the screen. Whenever an idea was rendered, he snapped a Polaroid photo of the monitor, climbed onto his motorcycle, rode into Apple's offices, and convened with Larry Tesler and other team members to debate interface directions.

```mermaid flowchart LR accTitle: Atkinson Lisa GUI Prototyping Workflow accDescr: Cycle showing how Bill Atkinson coded interface ideas at home and reviewed them at Apple. subgraph Home ["Home Prototype"] A["Apple II with Lisa Display Card"] --> B["Unoptimized Interface Code"] B --> C["Polaroid Photo of Screen"] end subgraph Office ["Apple Office"] C --> D["Motorcycle Ride to Apple"] D --> E["Review with Larry Tesler & Team"] end ```

The earliest photographs document the very first typographic output on the machine: handbuilt proportional fonts. Atkinson highlights the stark departure this represented from the Apple II era, where every glyph occupied an identical width. Here, an "I" was noticeably narrower than a "W," establishing a typographic subtlety that modern computer users take entirely for granted.

- The home testbed relied on an Apple II host driving a custom Lisa bitmap display card. - Photographs were captured on Polaroid film and transported by motorcycle to Apple headquarters. - Screen mockups were reviewed collaboratively with Larry Tesler and the Lisa team. - Hand-drawn proportional typography marked the transition away from fixed-width character generators.

[01:31](https://www.youtube.com/watch?v=Qg0mHFcB510&t=91s) Black Backgrounds, Soft Keys, and 1-Bit Patterns

The first operational screen layout for the Lisa retained the dark presentation standard across late-1970s hardware, showing light text against a solid black background. The display allocated 720 black-and-white pixels across 25 lines of 80-character text, augmented along the bottom by ten on-screen "soft keys." These screen labels corresponded directly to an unprinted row of ten physical keys positioned along the top of the keyboard; operators were expected to read the dynamic label on the glass and hit the associated physical button below. Atkinson notes that the hardware still featured dedicated scan-line pointers, enabling smooth vertical scrolling through the middle region of the screen as long as the content stretched the entire display width.

When asked by the interviewer about the architectural origin of these soft keys—citing colleague Al Kossow's recollection that Lisa engineers hailing from Hewlett-Packard brought over concepts from the HP 300—Atkinson confirms the lineage:

> “I think Roy Mueller was Hardware Manager or Software Manager, I'm not sure which, but he had worked at HP, and we had seen these terminals that had unlabeled keys and then labels show up on the screen.”

Working under strict hardware limits of one bit per pixel (strictly binary black or white), Atkinson devised repeating 8×8 dither textures to produce simulated grayscale. These textured fills gave the engineering group their first visual mechanism for segmenting and differentiating overlapping screen regions without native color hardware.

[03:24](https://www.youtube.com/watch?v=Qg0mHFcB510&t=204s) Early Windowing, Limited Menus, and the Folder/Document Confusion

Atkinson turns to the earliest snapshots depicting multi-window layouts, stressing that these were exploratory graphical shells rather than functional operating software:

> “Remember, this is string and bailing wires prototype, this is not real code that the team is using, okay, they're still working on specifications for these Lisa 7 apps.”

These early mockups combined overlapping rectangular windows with soft-key frames and primitive popup menus. Because these early popup menus surfaced only a tiny cluster of commands tied to current mouse coordinates, they utterly lacked the breadth and depth required by complex office programs such as full-fledged word processors.

```mermaid flowchart TD accTitle: Evolution of Menu Placement accDescr: Three progressive architectural stages of Lisa menu design from bottom bars to the fixed system menubar. M1["Bottom Window Menus<br>(Limited commands, awkward selection)"] --> M2["Per-Window Top Menus<br>(Clipped by narrow or short window bounds)"] M2 --> M3["Fixed Screen-Top Menubar<br>(Guaranteed full width/height; paired with mouse scaling)"] ```

During this design cycle, the team grappled with the conceptual distinction between directories and files. Rather than understanding a folder strictly as an organizational bucket for enclosing distinct files, Atkinson’s early screens treated the folder itself as a writable document surface with embedded text. Furthermore, commands were housed in a bottom-docked menu bar displaying headings like `Edit` and action items like `Copy`. To switch operational menus, an operator had to click into the primary heading before selecting a secondary item—an awkward interaction model that proved cumbersome in daily testing.

- 8×8 binary patterns supplied the visual illusion of gray values on monochrome hardware. - Early popup menus failed to provide enough organizational room for comprehensive application suites. - Folders were initially conflated with editable text documents rather than serving solely as containers. - Bottom-edge window menus forced an unnatural two-step interaction to switch command categories.

[05:25](https://www.youtube.com/watch?v=Qg0mHFcB510&t=325s) The I-Beam Cursor and the Single-Button Mouse Decision

When users attempted to edit prose, the default arrow pointer exposed an immediate design flaw: selecting a specific glyph left the typist unsure whether newly typed characters would land immediately in front of or behind the highlighted character. To resolve this ambiguity, Atkinson engineered the distinct "I-beam" cursor to demarcate exact insertion points between characters.

Concurrently, Apple resolved the fierce industry debate surrounding pointing devices. The development group had evaluated multi-button mice possessing up to three switches, routinely running design exercises to figure out button mapping:

> “We committed at this point to a one-button mouse. We had seen mouse with up to three buttons on them 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 ones, every application had a different meaning for them. And when we went to one button, people stopped looking at the mouse and started looking at the screen more.”

- The I-beam cursor replaced the general-purpose pointer to disambiguate precise inter-character insertion points. - Three-button layouts induced cognitive strain because secondary and tertiary buttons lacked system-wide consistency across apps. - The shift to a standardized single button eliminated physical fumbling, keeping user attention fixed on the CRT display.

[06:26](https://www.youtube.com/watch?v=Qg0mHFcB510&t=386s) Window Manipulation: Folder Tabs, Window Menus, and the Resize Bug

Before settling on free-floating desktop icons, Atkinson prototyped desktop "folder tabs." Touching an individual tab enlarged it into a full window, while clicking it a second time collapsed it back down. The engineering group iterated through several variations of this filing-cabinet metaphor: tabs shaped with subtle curved shoulders, tabs lined along the bottom perimeter to mimic drawers, and rounded tabs where an active selection was designated by subtle bold text. Real-world testing revealed that bold outlines were far too weak for users to notice, though double-clicking tabs to toggle open/closed states persisted as a foundational behavior.

Concurrently, the team relocated menu bars from the bottom border up to the top interior border of individual windows. While an improvement, this approach exposed severe spatial bottlenecks: if a user resized a window to be narrow, horizontal titles truncated; if the window was made short, long pull-down lists spilled past the frame.

Window resizing also suffered from a jarring usability pitfall. Atkinson’s initial resize box—located in a corner—demanded an outward drag. When tentative users cautiously clicked or jabbed at the resize handle without dragging wide, the bounding box collapsed inward to a tiny rectangle:

> “One of the problems was if people just dragged it a little bit, the window would [shrink] down to that size... and they'd think they'd broken the computer, 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.”

- Early folder tabs behaved as expandable drawers rather than static icons. - Per-window menu strips proved inadequate due to clipping within compact window boundaries. - Hair-trigger resize handles caused accidental collapses, frightening novice testers who thought the machine had lost power.

[08:58](https://www.youtube.com/watch?v=Qg0mHFcB510&t=538s) The Global Menubar, QuickDraw, Palettes, and the Desktop Manager

To permanently solve menu clipping, Atkinson elevated menus out of individual windows altogether, pinning a single universal menu bar across the very top edge of the entire display. This structural breakthrough ensured that menus always commanded maximum screen width and full vertical drop-down height. To counteract the increased physical distance required to reach the top edge, the software added dynamic mouse scaling (ballistic acceleration), allowing a swift flick of the wrist to fling the pointer across the screen. The resize control was anchored to the bottom-right corner, ensuring small drags yielded only small changes in window size.

```mermaid flowchart TD accTitle: System-Wide Lisa Screen Architecture accDescr: Top-level layout showing the fixed top menubar, application window with palettes, and desktop shelf. TopBar["Fixed Top Menu Bar (Full width, guaranteed vertical clearance)"] subgraph DesktopArea ["Desktop Workspace"] Window["Application Window<br>(Top-left close box, bottom-right resize corner)"] Palette["Tool Palette<br>(Direct tool selection with visual mode feedback)"] Tray["Desktop Tray<br>(Temporary shelf to clear workspace clutter)"] end TopBar --- DesktopArea ```

Atkinson’s QuickDraw engine simultaneously advanced, rendering rich typography (plain, bold, outline, inverse, italic, and shadowed text over patterned backdrops) alongside primitive shapes such as rounded rectangles, ovals, and graphic-filled menus. Atkinson points out an experimental harness named "SketchPad," which was an explicit homage to pioneer Ivan Sutherland's foundational interactive graphics system:

> “SketchPad was just a test bed for QuickDraw, it was never an application that shipped, and it later evolved into MacPaint. It was a tip of the hat to Ivan Sutherland; his first graphics editing program was called SketchPad, and I was a fan of his work.”

To tame overlapping workspace clutter, the team introduced a temporary parking shelf called the "tray," which allowed windows to be set aside without sacrificing desktop space.

For graphic manipulation, Atkinson introduced the first on-screen tool palette. By selecting icons for rectangles or ovals directly in the palette, the active tool remained clearly inverted so users always understood their operating state—countering traditional modal traps by making the active mode visually explicit and showing real-time shape outlines during mouse drags.

Behind the scenes, team member Bruce Daniels maintained the mouse-driven text editor that all engineers relied upon to author Lisa code, embedding scrollbars, cursor selection, cut, and paste. As the project neared its launch deadline under an aggressive policy forbidding new features, engineers Dan Smith and Frank Ludolph worked down to the wire completing the Lisa Desktop Manager—the direct architectural ancestor of the Macintosh Finder.

- A fixed system-wide menubar solved edge-clipping and was paired with mouse acceleration. - The bottom-right grow box eliminated sudden screen collapses during resizing. - "SketchPad" acted as the internal test engine for QuickDraw routines before maturing into MacPaint. - Tool palettes addressed mode errors through persistent visual highlighting and dynamic drag rendering. - Bruce Daniels' mouse-driven editor furnished the core programming environment used across the engineering team. - Dan Smith and Frank Ludolph built the Lisa Desktop Manager amidst late-stage crunch.

[12:34](https://www.youtube.com/watch?v=Qg0mHFcB510&t=754s) Replacing the "20 Questions" Filer with Desktop Icons and "Rosing's Rascals"

The turning point for the Lisa desktop interface occurred when Dan Smith approached Bill Atkinson about the unbearable friction in their existing file manager, which they nicknamed the “20 Questions filer.” To move a single file between folders across two floppy diskettes, a user was forced to navigate an exhaustive interrogation: identifying the source diskette, specifying the folder and subfolder, selecting the document, repeating the entire location hierarchy for the destination, and finally commanding the system to copy or move it. Atkinson and Smith initially mocked up a two-window navigational prototype displaying the "office" and the "desk," behaving much like an early two-level column view where clicking an item would expose its contents in the adjacent pane. Convinced they could make file management vastly more concrete, they pitched engineering manager Wayne Rosing on an unauthorized skunkworks initiative to build a system centered entirely on draggable icons. Rosing gave them permission under strict secrecy: they had to work their standard eight-hour shifts on official tasks at the office and write the experimental icon manager at home on their own time.

Operating under the radar, Atkinson and Smith produced the Lisa's first graphical diskette directory, followed by the breakthrough innovation of placing free-floating icons directly onto the desktop. Atkinson humorously pushed the visual metaphors too far at first, drawing swarming flies around the trash can whenever it was full—an addition that promptly failed the sanitation test and had to be cut. Grounding the interface in physical office objects solved a fundamental conceptual hurdle for non-technical users. Prior to the Lisa, ordinary people had no mental model for a digital file, associating the word either with an abrasive metalworking tool or a physical manila folder in a steel cabinet. The team introduced explicit visual icons for documents, folders, file drawers, diskettes, trays, and tear-off stationery pads. Underneath this intuitive visual layer, the core file-system engine and pre-flighting algorithms developed by Frank Ludolph and Dan Smith remained untouched; the icons served as the friendly front-end disguise. When they finally revealed the fully working system to the team, Rosing supported them completely, surprising them with commemorative shirts to signal his executive blessing while deterring others from derailing the schedule. As Atkinson recalled, “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 work extra time on it at home.’” Atkinson reflected warmly on the incident, remarking: “Wayne rosing was an amazing man to work with I I loved working with him and I still think he's an amazing person.”

The interviewer observes that if the Lisa team had not introduced icons at the eleventh hour, the Macintosh interface might have looked entirely unrecognizable. Atkinson emphasizes that the Mac, debuting just twelve months after Lisa, was conceived as an affordable “baby Lisa.” Priced at nearly $10,000, the Lisa was prohibitively expensive for individual consumers. The Mac's mission was not only to dramatically lower hardware costs, but to strip away Lisa’s corporate stiffness in favor of an approachable, playful personality that captivated consumers so intensely that they would immediately buy one and invent a practical justification later.

```mermaid flowchart TD accTitle: Evolution of Lisa File Management accDescr: Diagram contrasting the cumbersome 20 Questions filer workflow with the direct manipulation skunkworks icon interface.

subgraph OLD["The '20 Questions' Filer"] A1["Specify Source Diskette & Path"] --> A2["Select Source Document"] A2 --> A3["Specify Target Diskette & Path"] A3 --> A4["Confirm Move or Copy Command"] end

subgraph NEW["Skunkworks Desktop Metaphor"] B1["Graphical Directory & Desktop"] --> B2["Direct Object Icons (Docs, Trays, Pads)"] B2 --> B3["Drag-and-Drop Manipulation"] B3 --> B4["Visual Trash Can / Safe Deletion"] end

OLD -.->|"Redesigned by Atkinson & Smith"| NEW ```

- Dan Smith described the original multi-step file transfer process as completely unusable: “This is too complicated and so he came to me and asked could we simplify this.” - Atkinson noted how foreign computing concepts were to novice users: “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.” - To prevent organizational chaos after the skunkworks reveal, Rosing distributed custom T-shirts: “Rosings 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 Rosings Rascals.”

---

[17:38](https://www.youtube.com/watch?v=Qg0mHFcB510&t=1058s) Bitmap Scaling, Hack-Rigged Scanners, and Atkinson Dithering

Turning through the Polaroid binder, Atkinson points out photographs documenting his breakthroughs in graphical scaling and image processing. To display graphics across varying formats, he had to pioneer arbitrary bitmap scaling routines, moving beyond simple 1:1 pixel copying to dynamically calculate pixel expansion and contraction on the fly. As Atkinson explained, “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.”

The album also reveals a variety of intricate halftone images, which prompted Atkinson to share how he engineered an early scanner before commercial units existed at Apple. At home, Atkinson kept a personal wire-wrapped DEC LSI-11 minicomputer. He acquired an obsolete Western Union Desk-Fax facsimile machine—originally built to create binary copies by burning through electrosensitive silver paper with an electrical stylus—and modified its circuitry to output a variable analog signal. He then built a custom analog-to-digital converter to feed the scan lines directly into his home computer. Generating convincing grayscale imagery from strictly black-and-white displays became one of his passionate technical obsessions. He spent countless hours fine-tuning mathematical error-diffusion equations to distribute dark pixels without creating distracting moiré patterns or obvious visual clusters.

This work laid the foundation for the famous Atkinson dithering algorithm. The techniques Atkinson perfected during the Lisa era were later ported across several foundational personal computer imaging products. Third-party developers utilized his code for MacVision, an early video digitizer. Later, when Andy Hertzfeld was building the ThunderScan hardware-software bundle, Hertzfeld borrowed Atkinson’s half-toning engine, made key refinements, and traded the code back to Atkinson. Atkinson incorporated further improvements into HyperScan, the image-capture utility bundled with HyperCard.

- Atkinson modified an electrosensitive Western Union facsimile drum into an analog scanner hooked up to his home-built LSI-11 system. - The resulting algorithm, Atkinson dithering, became an industry benchmark for converting continuous-tone photographs into clear 1-bit bitmap images. - Dithering techniques traveled in an iterative loop across multiple Apple-ecosystem milestones: Lisa, MacVision, ThunderScan, and HyperCard’s HyperScan.

---

[20:00](https://www.youtube.com/watch?v=Qg0mHFcB510&t=1200s) Iterative Engineering, the Apple Card Fail, and Lisa's Living Legacy

Looking through the collection, Atkinson reflects that the binder preserves an unvarnished, incremental record of how the team stumbled their way toward the modern graphical interface. The Lisa UI did not emerge fully formed through sudden genius; it was forged through relentless, disciplined engineering iterations, repeatedly placing experimental builds in front of everyday test subjects to spot where confusion arose and diligently treating user errors as system bugs that required redesigns. Emphasizing the primacy of empirical validation, Atkinson stated: “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.”

To prove his point about the hazards of skipping user testing, Atkinson pulls his modern titanium Apple Card from his wallet. He demonstrates that when an owner holds the card right-side up to read the typography, their thumb naturally rests directly on top of the EMV chip, blocking it right as they attempt to insert it into a terminal—an elementary ergonomic blunder avoided by every conventional credit card. Furthermore, because Apple opted for a premium titanium finish without real-world wear testing, the card acts like an abrasive blade that shreds other cards kept in the same wallet sleeve. Atkinson cautions that engineers and designers must abandon self-satisfaction: “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.”

When asked to select a single Polaroid from the binder that encapsulates the essence of the Lisa, Atkinson selects the slide showing the graphical diskette directory alongside icons scattered across the desktop surface. That visual captured a radical departure from the punitive text consoles of the 1970s, replacing typed syntax errors with visual manipulation. As Atkinson observed, “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.” While commercial success eluded the overpriced Lisa hardware, Atkinson concludes that its foundational user experience served as the indispensable genetic seed for the Macintosh, the iPhone, and the modern mobile devices carried in pockets across the globe.

- Atkinson described the creation of the GUI as iterative problem-solving: “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.” - The core philosophical breakthrough of the Lisa GUI was empowering the human operator: users could “point and click instead of type and be told that you were stupid.” - Atkinson credited the Lisa as the direct evolutionary ancestor of modern ubiquitous computing: “Lisa was influential as a stepping stone it sewed seeds that other people picked the ball with and rolled and and made improvements.”

## Notable quotes > [05:25](https://www.youtube.com/watch?v=Qg0mHFcB510&t=325s) When we went to one button, people stopped looking at the mouse and started looking at the screen more. — Bill Atkinson

> [20:00](https://www.youtube.com/watch?v=Qg0mHFcB510&t=1200s) 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. — Bill Atkinson

## Mentioned Al Kossow, Andy Hertzfeld, Apple, Apple Card, Apple II, Apple Lisa, Atkinson dithering, Bill Atkinson, Bruce Daniels, Dan Smith, DEC LSI-11, Frank Ludolph, HP 300, HyperCard, HyperScan, Ivan Sutherland, Larry Tesler, MacPaint, MacVision, Macintosh, QuickDraw, Roy Mueller, SketchPad, ThunderScan, Wayne Rosing, Western Union Desk-Fax

## Video description [Recorded on December 12, 2022]

Bill Atkinson shows and explains his binder of Polaroid photos which he took during the development of the Lisa, documenting the evolution of its graphical user interface.

Catalog number: 102809056 Acquisition number: 2022.0174

[Source](https://www.youtube.com/watch?v=Qg0mHFcB510)

中文简报

比尔·阿特金森:宝丽来照片展现Lisa图形用户界面演进历程 借助一套定制的Apple II原型设备拍摄的宝丽来快照,比尔·阿特金森详细阐述了Lisa工程团队如何通过快速迭代和实际用户测试,系统性地发明了现代界面的核心规范。他解释了比例字体、工字光标(I-beam cursor)、单键鼠标、1位抖动算法以及解决单窗口裁剪难题的固定顶部菜单栏的起源。回顾中还讲述了他与丹·史密斯和韦恩·罗辛共同开展的未经授权的“秘密项目”,该项目用自由浮动的桌面图标和直接拖放操作,取代了繁琐的“20个问题”式文件提示。阿特金森最后强调,直观的界面需要将用户的困惑视为软件缺陷,并将Lisa定位为Macintosh和现代计算技术的直接进化先祖。 比尔·阿特金森通过一册宝丽来照片记录了Lisa图形界面的诞生,这些照片拍摄自一套驱动定制位图显示的Apple II原型设备。 (0:10) 之所以在两键和三键方案中选择单键鼠标,是因为测试表明多键布局会迫使用户低头看手,而无法专注于屏幕。 (5:25) 桌面图标界面和可视废纸篓是由比尔·阿特金森和丹·史密斯在工余时间作为秘密项目暗中开发的,旨在取代难以使用的文本提示式文件管理器。 (12:34) 为了在1位单色硬件上呈现灰阶效果,阿特金森改装了一台西联电报公司的Desk-Fax滚筒扫描仪,并开发了奠基性的阿特金森抖动算法。 (17:38)

Source quotes

[5:25] Bill Atkinson: When we went to one button, people stopped looking at the mouse and started looking at the screen more. [20:00] Bill Atkinson: 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.

Original transcript

[0:10] this is a binder of Polaroid photographs [0:13] that I took um while we were developing [0:15] the Lisa user interface at my home I had [0:19] a Lisa prototype and this consisted of [0:22] an apple two with a graphics card that [0:25] put up a display that was the Lisa bit [0:27] map display and I would um write code uh [0:32] that [0:33] would display on it and not highly [0:37] optimized code just stuff that would get [0:40] it on we could look at the a possible uh [0:43] user interface feature and I would uh [0:46] take a picture of it with my Polaroid [0:47] camera and get on at that time I was [0:50] riding a motorcycle get on my motorcycle [0:52] and drive it into apple and meet with [0:54] other people show it to Larry tesler and [0:56] a group of people and and discuss user [0:59] inform face [1:01] possibilities um this uh this one shows [1:04] the First characters on Lisa these are [1:07] uh handbuilt uh proportional font so [1:11] remember on the Apple 2 every character [1:13] was the same width and here was our [1:16] first example of an I being narrower [1:18] than a W uh that we take for granted [1:21] today but it we didn't take for granted [1:23] back then here's uh uh some text written [1:27] with that here's our first first uh user [1:31] interface for the Lisa notice it has a [1:34] black background like our computers did [1:36] back then and what it had was um 25 [1:41] lines by 80 characters uh plus soft keys [1:45] uh we were using our 720 pixels of black [1:50] and white and these soft keys are labels [1:55] along the bottom for uh it looks like [1:58] there's 10 soft keys that would [2:01] correspond to 10 Keys unlabeled keys on [2:04] a keyboard and you would read this label [2:07] and press that uh key on the [2:10] keyboard uh we still had at this point [2:13] we had in this Hardware we had scan line [2:16] pointers that would allow us to smooth [2:18] scroll the middle of this as long as was [2:21] the whole [2:22] width oh I wanted to ask a question [2:24] about this so um my colleague alosta who [2:28] I think you know um has mentioned that [2:31] the the reason for the soft keys was um [2:34] a lot of the people on the Lisa team had [2:36] come from HP and they worked on the [2:37] hp300 and that had used soft keys yeah I [2:41] think uh Roy Mueller uh was uh uh [2:46] Hardware manager or software manager I'm [2:49] not sure which but um he had worked at [2:51] HP and we had seen these terminals that [2:55] had unlabeled keys and then labels show [2:58] up on the screen took so while to get [3:00] rid of those um we only had one pixel [3:05] one one bit per pixel so this is yes or [3:08] no it's black or white and so I came up [3:11] with uh patterns little 8 by8 repeating [3:15] textures that gave us a some semblance [3:18] of of grayscale not color but at least [3:21] some kind of differentiable areas here's [3:24] our first one that shows some windows [3:27] now remember this isn't in the software [3:29] we're writing this is just a prototype [3:31] I'm drawing stuff on a screen and [3:33] showing it to the team um and here is um [3:38] Windows plus soft keys and also a little [3:42] popup menu now the popup menus only gave [3:46] a few items this is and which one would [3:50] pop up would be depend on where the [3:52] mouse was it wasn't it wasn't flexible [3:55] enough to do a real application like a [3:57] word processor not enough uh breadth uh [4:01] and depth of of [4:03] commands um so the popup menus there are [4:06] not [4:07] contextual well they would have been if [4:10] this was real right remember this is [4:12] string and bailing wires prototype this [4:14] is not real code that the that the team [4:17] is using okay they're still working on [4:20] specifications for these Lisa 7 apps [4:23] okay [4:25] um we had a confusion about folders and [4:30] documents so here is a folder with a [4:33] menu at the bottom well a folder we [4:36] think of a folder now as a container [4:38] that other things go inside of and a [4:40] document is something you actually write [4:41] on you you write on a word processing [4:44] document but we were confused about that [4:46] at the time and so we actually you know [4:48] we thought of this as a folder but it [4:50] was had text in it instead of having [4:53] other things in it um and here uh at [4:58] this point we have a menu at the bottom [5:00] it says edit and then copy and Etc the [5:04] items and if you were wanted to change [5:08] which menu you have to press on the [5:10] first thing and then choose a different [5:13] menu yeah it didn't it didn't work so [5:19] well um here is uh text selection here [5:25] and uh our first cursor was an arrow [5:28] cursor and one of the things uh we found [5:32] is [5:33] that when people want to uh type some [5:36] text they need to know where the new [5:38] characters are going to go and to insert [5:41] text if you select a character well you [5:44] don't know is it's going to go before or [5:46] after it so we ended up going to an [5:48] ibeam shaped cursor this is the first [5:51] example of an ibeam cursor uh we [5:53] committed at this point to a one button [5:56] Mouse we had con seen Mouse with up to [5:59] three button buttons on them and and we [6:01] had this sort of little contest okay for [6:04] each application what would you label [6:06] the three buttons the first one was [6:07] always select but the other the other [6:10] ones every application had a different [6:13] meaning for them and um when we went to [6:17] one button people stopped looking at the [6:19] mouse and started looking at the screen [6:21] more so [6:24] um [6:26] here and these are we'd bring in ideas [6:29] as I'd bring in ideas and we discuss [6:31] them and Larry would go over them too [6:33] and here's some of our first this isn't [6:36] an icon on the desktop this is a folder [6:38] Tab and you could touch on the tab and [6:41] it would become big you touch on there [6:43] and it become small so you could have [6:45] kind of expanding and and shrinking tabs [6:50] um that uh allowed us to have some [6:52] things out on the desktop here um here [6:56] we moved the pull down we made pull down [6:58] menus at the top of the window mhm so [7:01] again now you got a range of titles of [7:04] menus at the top with their items uh [7:07] flopping down um well that was an [7:10] improvement over having just the items [7:12] at the bottom but it uh it still had [7:15] problems because uh if you were if the [7:18] window wasn't very wide you couldn't get [7:20] all the titles and if the window was not [7:23] very tall you couldn't get all the [7:25] items [7:28] uh [7:30] at this point we had the grow icon to [7:32] make how do you change the size of a [7:34] window well you would press in this [7:36] little grow icon here and drag it [7:39] out one of the problems was if people [7:42] just dragged it a little bit the window [7:44] would down to that size because you know [7:47] drag out and let go but if they were a [7:49] little and just kind of stabbed [7:51] at it the window would go like that and [7:54] they'd think they'd broken the computer [7:56] like like when you take the power off a [7:58] television and it goes like that the [8:00] image kind of goes down so that didn't [8:02] work so well we debugged the user [8:05] interface one error at a time uh here we [8:10] had uh tabs the the the folder tabs were [8:13] actually shaped like folder tabs with a [8:16] little curve to them we're still [8:17] confused about folders versus [8:20] documents um here we had tabs arranged [8:24] along the bottom and think of it like a [8:26] combination of a file folder with all [8:29] these uh you know a filing drawer where [8:32] all these folder tabs up and when you [8:35] shrunk one down it go back into the [8:36] drawer so that was that what that was [8:40] here rounded folder tabs the active [8:42] folder is highlighted by bold that [8:45] wasn't strong enough people didn't even [8:46] notice that that this this little bold [8:49] highlighting uh double click on a tab to [8:52] open or close [8:54] it uh in this one this is the first one [8:58] where we move the menu us to the top of [9:00] the whole screen and this assured that [9:02] we had the full width assured that we [9:04] had the full height and but it meant you [9:07] might have to reach further to get to [9:09] that so we in introduced uh Mouse [9:12] scaling that a quick jerk would get [9:15] through up to the top quickly uh we put [9:18] the grow icon down on the bottom right [9:20] so that uh you could if you only moved a [9:23] little bit it would only change the [9:24] window a little bit it wouldn't suddenly [9:26] jerk down to [9:27] nothing um [9:31] um here's some of in quick draw some of [9:34] the different sort of styles of normal [9:37] text and bold and a out line inverse [9:40] metallic shadow shadow against gray uh [9:43] getting more miles out of a I see you [9:46] have this application called sketch pad [9:48] was that the protot sketch pad was just [9:51] a test bed for quick draw it was never [9:54] an application that chipped okay uh and [9:57] it later evolved in you Mac [10:00] paint was that named after Ivan s it was [10:04] it was a it was a tiip of the hat to [10:06] Ivan San his first uh Graphics editing [10:08] program was called [10:10] sketchpad and uh I was a fan of his his [10:13] work um here's some of the different [10:17] things we could draw with quick draw [10:19] ovals and round recks and [10:23] uh graphical items in menus so this is [10:26] actually a a a menu that shows some uh [10:31] uh fill patterns inside the [10:34] menu um oh we had the the idea of the [10:38] tray the desk was getting cluttered and [10:40] we were trying to kind of make it a [10:42] little less cluttered so if you had [10:45] several windows up that you wanted to [10:47] kind of use but had in in play you could [10:51] pop one into the tray and then you could [10:53] pull it from the tray to recover it [10:55] without having it take up uh screen [10:58] space [11:00] um I was talking earlier about the uh no [11:05] modes this is this is the ideas for the [11:07] graphic setter this is the Prototype I [11:09] brought in that had our first this is [11:12] our first tool pallet so here's a tool [11:15] palet where you can touch on rectangle [11:18] and now when you stretch out you get a [11:20] rectangle uh but because it's highlight [11:24] there the rectangle is highlighted at [11:26] least you know what mode you're in [11:28] you're in rectangle Le making mode [11:30] versus oval making mode but at least [11:32] when when you chose an oval making mode [11:34] and stretched out one you saw an oval as [11:36] you stretched it out Bruce Daniels was [11:40] sort of The Keeper of the mouse editor [11:41] that we all used for writing code in so [11:44] he he maintained uh a a working text [11:49] editing environment that actually lived [11:52] in a window and had scroll bars and had [11:55] text selection and could cut and paste [11:57] and this was a really important [11:58] important part of our toolkit that we [12:00] were all using to write code [12:02] in Fairly near the end we were rushing [12:06] to [12:07] completion uh and we're trying to like [12:11] like the rule was no more changes just [12:13] fix the bugs and get it out the [12:15] door but Dan Smith and Frank ludolph [12:19] were working on the desktop manager [12:22] everything was a manager we had the [12:23] window manager vent manager menu manager [12:27] desktop manager I don't know we weren't [12:29] like manager happy but so that's that's [12:32] on the Mac that would be the finder [12:34] finder and uh and Dan came to me and he [12:37] said you know we have we have the 20 [12:40] Questions filer you uh when you want to [12:43] move a a file from one folder in one [12:46] diset to another folder in another diset [12:49] you sort of have to do first answer well [12:51] which diset is the source on and what [12:53] folder is it in what folder in that and [12:55] and which document okay now they you've [12:57] got the source specified now [12:59] specify all that for the destination and [13:01] say move it or copy it there and he said [13:05] this is too complicated and so he came [13:08] to me and asked could we simplify this [13:12] our one of our first Cuts was this [13:14] little two window thing where one window [13:17] had the the office and one had the desk [13:20] and if you touched on this it would show [13:22] move up to this it was kind of like a uh [13:26] two levels of column view uh the thing [13:29] and the contents within it and if you [13:31] touch on one of those then that's up [13:33] there and here's the contents within [13:34] that or you touch here it goes the other [13:35] way um inside [13:39] of I'd say inside of two weeks um well [13:44] so we started a Skunk Works project uh [13:48] we went to Wayne rosing the engineering [13:50] manager and said we really think we can [13:53] make the filing operations much more [13:56] concrete uh understandable [13:59] by uh going to icons and um draggable [14:03] icons uh and uh Wayne said okay don't [14:08] tell anybody you're working on this uh [14:11] only work on it at home and come in here [14:14] and work your 8 hours here but then go [14:15] back and and and work extra time on it [14:17] at home and we did that and we kept mom [14:20] about what we were working on and we [14:22] just um this is our first graphical [14:25] diset directory this showed here's [14:27] what's on a diset here are the files on [14:29] it or some folders that you could then [14:31] touch and it would show you contents of [14:33] them and then here's our first one where [14:36] we actually put icons on the desktop we [14:39] didn't have that before and I went a [14:43] little bit crazy and put flies on the [14:46] trash can if it was full and that didn't [14:50] pass the sanitation test but and then it [14:52] shouldn't have it was overboard but but [14:55] uh this was our first actually putting [14:57] files on the desk desktop uh putting [15:00] icons and dragging and [15:03] dropping um we were now able to explain [15:07] uh it it was a more concrete way to [15:10] think about [15:12] documents real people don't get what a [15:14] file is well they do now but they didn't [15:17] back then what is a file they think of a [15:19] file is either something that you scrape [15:22] metal with to to smooth it down or or as [15:24] a file folder in a drawer but what is a [15:27] what is a file on a computer they didn't [15:29] know what that was but by introducing [15:32] these icons of a document icons of a [15:36] folder so here here an icon for a file [15:40] drawer a diset a folder uh the tray [15:44] which we still had uh a a uh a pad a [15:50] document a pad would be sort of a a pad [15:53] of documents you could tear off one uh [15:56] we introduced these and that made it [15:59] much more understandable the workings of [16:02] the desktop manager were the same the [16:05] hard work of actually moving the files [16:08] and pre-flighting is enough room for [16:10] them the the work that Frank ludolph and [16:12] Dan Smith had done this was just kind of [16:15] a sugar coating on the front front end [16:17] of it and we brought it in fed to comp [16:20] Le working and when we brought it in we [16:24] warned Wayne ahead of time and he made [16:26] up T-shirts for us that said Rosings [16:30] Rascals and it was he was telling [16:32] everybody look I sanctioned I approved [16:34] of this don't everybody else go off with [16:37] crazy ideas at the last minute we got to [16:39] ship this thing so we were that's my [16:42] favorite t-shirt from all of my Apple [16:44] days is Rosings Rascals Wayne rosing was [16:47] an amazing man to work with I I loved [16:50] working with him and I still think he's [16:51] an amazing person that's fascinating [16:54] because the the Mac could have been [16:56] totally different if the Lisa hadn't did [16:58] you know introduced icons at the last [17:00] minute yeah I mean it could have been [17:02] very almost unrecognizable well the Mac [17:05] came out only one year after the Lisa [17:07] okay it was a uh baby Lisa it was how do [17:11] we make the Lisa Lisa affordable 10,000 [17:14] bucks was too much for most people and [17:17] how can we also make it um yeah not only [17:19] lower cost but um I don't I don't know [17:25] less stiff Mac was more playful when [17:28] people people got a Mac they they sort [17:32] of I want one and then they have to [17:34] justify why yeah you want [17:38] to uh here is some stuff about uh [17:42] pictures and scaling in order to scale [17:45] pictures right you draw this picture but [17:47] you want to draw it at a different scale [17:49] I had to introduce bit map scaling so [17:52] instead of just copying pixels one for [17:54] one I had to actually figure out how to [17:57] to shrink or expand [17:59] uh uh pixels as I was drawing them [18:05] um let me see [18:08] what I think that's that's U that's most [18:12] of the key stuff [18:15] here I see a lot of these halone images [18:18] these oh um yeah I had a um I had a [18:22] Western Union desk fa simile machine [18:25] that I had jeeped up and I [18:28] they they're more they were designed to [18:30] be binary either either zap the silver [18:33] foil with electric or not and so that it [18:36] would make a remote copy of an image but [18:39] um I modified it so it gave an analog [18:43] signal and made a analog to digital [18:46] converter for my I had a wire wrapped [18:48] lsi1 computer at home my my personal [18:52] computer uh and I I jeeped this up so I [18:56] could take um I [18:59] could scan images with it this is before [19:01] Apple had a scanner and one of my pet um [19:06] uh little Hobbies was how do you make [19:09] grayscale from black and white pixels [19:13] and you have to place them carefully so [19:15] as not to get obvious patterns and [19:18] dithering patterns and so there's a lot [19:20] of in fact uh I I worked on this and [19:25] later on the Mac I worked on Mac vision [19:28] for a thirdparty developer that made [19:30] this video digitizer and we used my uh [19:34] my half toning algorithms later when [19:37] Andy herzfeld did Thunder scan uh he [19:40] used my algorithm and then he made some [19:43] improvements and then I handed them back [19:44] and I made some improvements so we've [19:46] we've been playing back on back and [19:48] forth on this later with hypercard I did [19:51] hypers scan and I made yet more [19:53] improvements to the half toning so yeah [19:57] so yeah that's the dithering algorithm [19:58] that's named after [20:00] you yeah cool so thank you these [20:05] represent a uh sort of incremental [20:09] documentation of the way we blunder it [20:12] into the Lisa user interface it it was [20:16] not just created denovo it was iterated [20:20] it was hard engineering uh trying stuff [20:23] on real users find out what they don't [20:26] understand keep fixing bugs user bugs uh [20:30] until it worked more smoothly the way [20:32] you get uh the way you get a smooth user [20:35] interface is with user testing there's [20:37] no other way if you don't test on users [20:41] I mean I'll show you an example of a [20:42] total failure of user testing in my card [20:46] I have an apple uh credit card here and [20:50] if I hold it with the writing right side [20:53] up my thumb is covering the chip every [20:58] other [21:00] card my thumb doesn't cover the chip [21:03] okay Apple didn't do user testing on [21:05] that the second thing they didn't do [21:07] user testing on is they made it out of [21:11] titanium and didn't test that it will [21:13] shred every other card in your wallet oh [21:16] bad idea so you know user testing is [21:21] always essential and whatever we got in [21:25] Lisa that made it work was because we [21:28] were willing to be wrong and willing to [21:31] iterate and willing to keep working at [21:33] it until it was [21:36] smooth and [21:39] um that's my strong advice for anybody [21:42] trying to make a product today is test [21:44] it on real users and watch what doesn't [21:48] work for them you can make it a whole [21:50] lot better just by listening to their [21:52] feedback but don't be so arrogant as to [21:55] think that you have all the [21:56] answers yeah [21:58] is there a single slide that you think [22:01] um captures what the Lisa was about and [22:05] maybe describe that a single [22:18] slide [22:26] um [22:43] I guess it would [22:44] be uh where we have a graphical diset [22:48] directory we have a [22:49] graphical um you know icons on the [22:56] desktop this is about as far from a text [23:01] in and text out user interface yeah it [23:06] was [23:07] graphical um you could use a mouse to [23:10] interact with it point and click instead [23:14] of type and be told that you were [23:18] stupid so it it made a difference Lisa [23:22] made the [23:24] computer accessible to more people [23:28] um unfortunately it was kind of it was [23:30] too expensive and um it was the stepping [23:35] stone that allowed the Mac to [23:37] become and later the iPhone and the iPad [23:42] I mean now we have I don't know this is [23:44] probably [23:45] here's and some of the seeds that that [23:50] were [23:55] cast you [23:56] know [23:58] Lisa if Lisa hadn't been [24:00] there this wouldn't have been there [24:05] and these are in everybody's pocket [24:07] these days Lisa was influential as a [24:11] stepping stone it sewed seeds that other [24:15] people picked the ball with and rolled [24:18] and and made [24:26] improvements