Making the rounds is an interesting piece posted by Kelsey Campbell-Dollaghan on Gizmodo linking to an origin story of the hamburger icon (the 3 horizontal bars commonly used in mobile apps to signify the existence of a menu.) The article references a vintage SIGGRAPH video from 1990 called “All the Widgets.” It’s worth checking out if you, like me, enjoy the history and evolution of graphical users interfaces.
To scroll by one line, click in an arrow. To repeatedly scroll a line at a time, hold the mouse button down in an arrow. Note that the arrows point towards the data that will be exposed when pressed. To scroll by one windowful, click in a grey region. To repeatedly scroll by windowfuls, hold the mouse button down in a grey region. To scroll immediately to a desired location, press in the thumb, drag to the desired location and release. To abort the scroll, drag out of the scroll bar before releasing the button.
Now the Xerox Parc segment (emphasis mine):
The Cedar Document Editor [Kiyoga?] provides vertical scroll bars to the left edge of document windows. When the cursor enters into a scroll bar, the scroll bar darkens and the cursor indicates that scrolling is available. Each of the three mouse buttons corresponds to a scrolling operation. When a mouse button is depressed, the cursor shape indicates the enabled scrolling action. When the mouse button is released, the command is invoked. Scroll up moves the line of text adjacent to the cursor to the top of the window. Scroll down moves the line of text at the top of the document window to be adjacent to the cursor. Thumb causes display of the location in the document corresponding to the vertical position of the cursor in the scroll bar. The grey rectangle indicates the location in the document which is currently visible.
In Xerox’s demo, the scroll bar of one particular application has multiple scrolling operations depending on which mouse button is pressed that only get invoked when that same button is released. Even today’s users with decades old scroll bar experience would struggle to understand this implementation. I can’t imagine it being intuitive in 1982 when most computer users had no concept of a mouse driven user interface, let alone scrolls bars. Need more anecdotal evidence? Ask yourself which demo more closely resembles the scroll bar behavior ultimately found in Windows. Now imagine what scroll bars in Windows might have looked like in a world without Apple’s influence.
Update: Larry Rosenstein pointed out via Twitter that the Apple clip features scrolling behavior in the Macintosh, not the Lisa which also has extraneous page buttons in the scroll bar. I should have caught this if for no other reason than “Macintosh” was explicitly called out at the beginning of the snippet. I chalk up my misidentification to two reasons:
- While I played the video repeatedly, it was mostly to transcribe the instructions. I don’t know if I actually watched the beginning of the video more than once.
- I vastly over estimated 1982 Apple’s commitment to secrecy and assumed that any video released during that time wouldn’t show a high profile unreleased product such as the Macintosh. I also forgot that Jobs overconfidently believed that the Macintosh would ship in 1982. The subject of both of these oversights is beautifully covered in these two entertaining folklore.org pieces.
Finally, juxtaposing Larry’s photo of the Lisa with the Macintosh in the video is even better proof of Apple’s active involvement with and impact on user interface design in the early 80s. While they both look worlds better than the what was in the Xerox clip, the Lisa looks to me like a rough draft compared to the far more polished and simplified Macintosh.
_