Would love to have had the Open Look and Athena scrollbars.
Open Look was super cool looking, but awful to use. Athena was (is?) awful looking and lacked any affordances for beginners, but was terrific for expert use.
I am fond of Open Look, and keep a copy of the Open Look GUI Functional Specification (Addison-Wesley, 1989) on my shelf, much as some people venerate the Apple HIG, except that mine is much less useful.
I would've liked it if they had included scrollbars outside of the common GUI toolkits. For example the type of scrollbar that can be found in editors like Sublime Text or VSCode, which is basically a long thumbnail of the document.
Open Look scrollbars would be impossible to implement properly in the web browser without using the Pointer Lock API that let you "warp" the mouse cursor position, because when you click on the elevator or cable, the elevator cab actually pushes the cursor up and down with it.
Here's a demo of Open Look scrollbars from Brad Myers' "All The Widgets" video, which he produced for the ACM CHI 1990 conference. It also has demos of many other kinds of scrollbars and other widgets. (Sun Microsystems, Inc. OPEN LOOK, 1988):
>All the Widgets (Fixed v2) - 1990:
This was made in 1990, sponsored by the ACM CHI 1990 conference, to tell the history of widgets up until then. Previously published as: Brad A. Myers. All the Widgets. 2 hour, 15 min videotape. Technical Video Program of the SIGCHI'90 conference, Seattle, WA. April 1-4, 1990. SIGGRAPH Video Review, Issue 57. ISBN 0-89791-930-0.
When I was working on The NeWS Toolkit at Sun (an Open Look toolkit implemented in PostScript), Jonathan Payne implemented the Open Look scrollbars, and I thought they had such a cool interesting 3D shape with their elevator, cable, anchors, ridges and arrows, that I carved an 3D Open Look scrollbar for him out of soap as a birthday gift. (He also implemented JOVE: Jonathan's Own Version of Emacs for Unix, and JED: Jot EDitor for TNT.)
Google Wave also had elevator-like scrollbars with arrows on the elevator, but since they were implemented in the web browser without the Pointer Lock API, they could not push the cursor like Open Look scrollbars, so they implemented a weird shadow and didn't move the elevator until you moved the mouse away, with was very confusing to users:
>Using Google’s scrollbars, it’s also possible to scroll by clicking, but since the arrows are attached to the thumb, that creates a bit of a problem. Typically, the thumb indicates the scroll position. But since you can’t move the thumb while the user is clicking on it, Google has introduced a second element, a «shadow» that is displayed below the thumb. This shadow indicates the current scroll position:
>Figure 6-1. Unlike the scrollbar in your web browser, Wave's scrollbar is the same height no matter how long the list it's scrolling, which keeps the up and down arrows always the same short distance away.
>The scrollbar on the right side of Wave's panels works a bit differently than the scrollbar in your web browser. Like most scrollbars, you can drag it up and down to scroll, or click its up and down arrows to move it. Unlike most scrollbars, the Wave scrollbar's height doesn't change. It's always the same, small size, which puts its up and down arrows in close proximity to one another, as shown in Figure 6-1. Google's intention is to benefit people accessing Wave on mobile devices or netbooks with a limited mousing area, but it has thrown off some preview users.[2] Google explains "the deal" with the scrollbar in Wave's Help section:[3]
>You might find that the scrollbar in Google Wave behaves a little differently from scrollbars in other Google products. To use it, you can drag the bar or you can use the arrows on either end of it—clicking the arrows without moving your mouse allows you to very quickly scroll up and down the page.
>Even at this early stage, at least one developer has created a Google Chrome extension that reverts Wave's custom scrollbars to Chrome's native scrollbars.
Google Wave: Scrolling. How to use the scrollbars in Google Wave.
I do recommend, for anyone who is interested in low level WIMP interaction design.... play with teleporting pointers! Not because it will ever work... it’s too weird to really use in a production system.
But just try it because it’s really an interesting experience to have your pointer move while you use it.
It turns the pointer more into a physical object on the screen.
But try it in a place it makes sense. This scroll bar is an example. I first tried it in a zoomable interface where I wanted the pointer to stay in a consistent “local position” within a window, even though the window was moving and changing size.
Just a really interesting thing for me to feel as a UI designer at the time.
Clicking in the gutter is inaccurate. On Macs, it advances by page, and in later versions animates; only option-clicking jumps the thumb to that position.
Windows also advances by page when clicking in the gutter, BUT based on the handle size it seems like the example scrollbars are not demoing a large enough scroll area to show both behaviors.
Likewise I remember Windows also jumping by a page. I remember being confused when I first experienced jumping to that position upon switching to Ubuntu.
Agreed that it's wildly inferior and a direct copy of how iOS does it, which might make sense on a small phone but is shit on a nice expansive desktop. You can make them permanently visible in settings, but they're still downrated (too narrow) and second rate compared to previously.
Change is driven by marketing demands as much as by genuine innovation. For example, with Windows 10 Microsoft removed the outlines from everything so almost everything in the UI blends together with everything else. The lack of contrast and distinct borders makes user interaction slower and less accurate but hey, it looks really sexy in the advertisements.
Bevels provide information about the relationships between controls. Visually "deeper" (concave) controls provide more detailed, contextual information. Buttons are convex because they act on the surface to which they're attached.
Windows 2000 professional was a high point for the language of UI design, if not the individual implementations...
I've heard explanations like this, yes, but I haven't seen any empirical evidence supporting the conclusion that flat interfaces are harder to use or learn or are prone to misclicks etc.
For my part I've used each version of Windows since 2.0, and have not noticed any decline in usability with the advent of the flat style in windows 8. Personally, I mildly prefer the current design language to the windows 2000 one (although I also consider that a local maximum), mostly due to the lack of visual noise. Personally, I have not experienced any of the usability frustrations evoked in this thread.
As someone increasingly moving towards UI design though, I'm willing to check personal preferences against hard data.
Enable dark mode on win 10 and have two explorer windows overlap so that only the title bars are visible (the way the os cascades windows). Where does one end and the other begin? So many misclicks...
Not windows in particular, but relative to flat UIs, I’d see Apple going full flat in iOS7 and having to bring bag borders and clearer buttons in the next versions as a pretty good sign those were needed.
>BEFITTING ITS FEARSOME name, Apple's new Lion operating system doesn't shy away from challenges. App organization has been radically reinvented and the workspace redesigned. But one change resonates with the force of history: Windows no longer sport the right-hand navigational element with the tablike "elevator" indicating one's place within a document. In other words, Apple has killed the scroll bar.
[...]
>The scroll bar's demise comes after a storied history. It was first implemented at Xerox's Palo Alto Research Center as part of the Smalltalk operating environment that was installed on the lab's bitmapped computer systems. "I first saw it there around 1975," says Larry Tesler, then a PARC researcher. "There were no arrows—just a bar with an elevator. You clicked above or below it to move a chunk of text."
[...]
>It was a model that ruled for more than 30 years. But then came something even more natural—multitouch gestures. Apple was willing to transform its operating system to implement them. And so the scroll bar got eaten by a Lion.
iOS, OS X and The Death of the Scrollbar (GigaOm, 2011-05-04)
>The scrollbar in OS X Lion does have an advantage in that it doesn’t take up as much space and visual weight in the interface. Gestures provide enough flexibility in control schemes that we don’t have to rely on a mouse click on the scrollbar control to move the viewport and a mouse click on the content to move the cursor. We have multiple ways to interact directly with the content. Content is highlighted before UI controls. What remains to be seen is if the change will prove as comfortable in practice as the theory might suggest.
I'm going to nitpick the title a bit. (Please downvote if inappropriate)
But this isn't evolutionary. It's a random sample of totally different takes on the same UI component. If scrollbars truly were designed in an evolutionary process, then all OS's would build upon the previous version and improve (or regress) from that. Or maybe I'm being too pedantic?
The site depicts a linear progression, but (like most things) it's more like a tree.
You can draw a line from Star → Lisa → System 1 → Windows 1 → Windows 3 → Windows 95, and maybe Windows 1 → NeXTstep, but it's more likely to be System 1 → NeXTstep.
MacOS 8's scrollbar comes from Win95, System 7, and NeXTstep (it was an option to have the arrow buttons at one end, like NeXT, or at both ends, like System 7), and MacOS X's scrollbar comes from MacOS 8's.
Windows XP's scrollbar comes from MacOS 8 (the grab handle), MacOS X (the bitmap-all-the-things theme) and Win95 (in function), and of course Vista's scrollbar follows on from that.
MacOS Lion's scrollbar actually comes from MacOS X and the conventions of mobile devices, which is a whole other lineage not even present.
And the Windows 10 scrollbar comes from MacOS Lion (and the minimalist design trend in general) and Vista.
That's false, actually. The Windows 95 look can be tied to IBM doing a massive amount of market research for their previous operating systems efforts; the monotone and 3D look was found to be the least-offensive UX globally.
Outside of programming, language can connote and suggest. It doesn't need to unambiguously and objectively define, particularly in a way that necessarily aligns with your specific "interpreter" (yer noggin!).
Methinks engineers oftentimes forget this. I feel like yelling, It's English for Chrissake, not some RFC!
There's nothing wrong with nitpicking. Details are important. I think you're accurate, just not focused on what's important. Would an editor ask your question? Event within the realm of non-clickbaity titles, I think "Evolution" does pretty well. I think the question to ask is, even if I can make the word more clinically accurate, does it make for a better title?
It's sort of like a English major who comes to programming and obsesses over the etymology of words in function names (trying to create a etymologically cohesive network of names) and about the poetic imagery and rhyme of code comments. All valid efforts, in the right domain, but in the programming domain that English major ought to just focus on clean function names and clear concise comments.
But hey, that's just my aesthetics. It seems normal and common for me, but maybe there are some people, yourself included, who want blindingly clear accuracy everywhere (suggestion and connotation be damned) because that's what's beautiful and feels right for them. I get that too. So if you're like that or similar, then you can take my comment a valid effort in the wrong domain, too!
It's unreasonable for you to expect "evolutionary" to imply a single lineage, especially when it's so obvious that many competing companies were involved in designing scroll bars for their platforms. And in at least some cases, differences were introduced to avoid litigation (hence NeXT scroll bars being so different from early Mac).
In the NeXT/Mac family tree, at least, it has steadily improved.
- The thumb became proportional.
- The arrows moved to the same end (so you didn't have to hit another tiny target on the opposite side of the screen when you overshoot by one line), and then disappeared entirely (when hardware scrolling interfaces became commonplace).
- They gained the ability for click to mean "jump here" (and option-click to reverse this setting on-the-fly).
- They disappear when not in use (to save space), and became bouncy at the ends (to show you more clearly when you're at the end).
Not every OS has improved their scrollbars in the same ways, but most other OSs have proven themselves not-quite-competent at understanding (and copying) the state-of-the-art in GUIs. Windows 1.0 was terrible at everything, not just scrollbars. That's not an indictment of this process as evolution.
But it's not so much how they looked, as how they worked. Bidirectional scrolling using a 3-button mouse, so elegant that you didn't need a scroll wheel.
Don’t forget cohesive. I still remember how almost all my applications changed to match the OS styling when I upgraded from 98->XP, it felt like a brand new computer. It’s difficult to imagine that these days, with most everything implementing custom versions of the OS controls.
I think the only ecosystem still trying to match the system’s design is iOS, but given how each version is regressing in its usability, I’m not sure that’s going to last.
KDE has a comprehensive suite of Qt applications which all adhere to the system theme. It also uses client-side decorations so all windows have the same decorations. Most popular Qt themes also have a corresponding GTK theme to make the rare GTK application (for me mainly Qalculate, Firefox, GIMP, and Gnome's Simple Scan) look and behave very similarly.
Fonts also all match in all desktop applications, and I have configured Firefox to ignore CSS fonts and use the same ones as the rest of the system.
I internally laugh every time somebody gets excited about a new dark theme for their application/OS - like they're coming out of a cave into the 19th century, while I'm living in the future.
There's a plasma-integration plugin for Firefox which makes scrollbars in FF match the Qt scrollbars! It also changes the Firefox scrollbars to click-to-warp instead of click-to-pgup/pgdn, to match with the rest of the system (I believe this happens in all GTK apps though).
There is only one inconsistency I have noticed - in Qt apps you can scrollwheel in inactive windows (configurable if desired), but sometime in the last year GTK changed so that this is no longer possible - I need to switch window focus to scroll GTK windows, except for Firefox. Also Electron apps stand out very much and feel unnatural to use - especially the theming and animations in the File/Edit/View menubar.
The Amiga Intuition scrollbars were proportional as well. Proportional scrollbars took a long time to catch on. I remember being quite confused by Macs and Windows of the time, coming from the Amiga it seemed like an obvious idea.
I wonder if https://twitter.com/ilistes/status/250658949467099136 was the inspiration for this (from 2012). I wish there were more scrollbars from cool Unix window managers, BeOS and such. Now that scrollbars are almost done it's a really nice idea to document not just their existence but also their behavior.
X window managers don’t supply the widget set used within windows, they only provide exterior window chrome. You need a matched pair of window manager and widget set to get a coherent UI. This is the result of the “mechanism, not policy” design flaw at the heart of X.
My favorite was the SGI scroll bar. It looked/worked like classic Windows but also had middle-click direct scroll and would leave a shadow of where it was on drag so it was very easy to return to where you were. “Modern” scrollbars are much less functional.
- adjusting the display for LISA none-square pixels. Scrollbars were about the same size as on the Mac. (A few applications had additional features, like a window splitting widget or dedicated buttons for page wise scrolling, like the Star interface.)
- including inactive window states and states for active non-scrolling windows (where the content doesn't exceed the viewport), since there were even more differences in those states and how they were signaling to the user.
* Did every OS treat clicking in the blank space above and below the scroll bar the same, like this website seems to suggest?
And,
* Why'd early versions of Apple's OS have the buttons on the bottom? What was the rationale & why'd they give in and move them to the top? I kind of like the bottom buttons.
Treating "click in the gutter" as "page up" or "page down" is pretty common, but at least on modern Linux desktops (GTK+3) it means "scroll to here".
On very old Unix desktops (classic Athena widgets), left-clicking anywhere on the scrollbar meant "scroll down" - if you clicked near the top, it would scroll down a little, if you clicked near the bottom it would scroll down a lot, and if you held down the mouse button it would keep scrolling at that speed. Right-clicking meant "scroll up". You had to middle-click to actually move the visible bar to a particular point.
The point of putting the scroll buttons together was to make small adjustments easier. Scroll buttons are fairly small targets, and the other end of the scroll bar can be a long way away, so if the other scroll button is at the other end, it can take a while to travel precisely to it since humans can make small, accurate movements and large, inaccurate movements but not large, accurate movements. On the other hand, if the other button is right next door, you can get there quite easily.
I was hoping they'd poke some humor at what modern websites do to the scrollbar. Scrollbars have worked well for so many years, why must web developers change it to an un-standardized mess? I'm talking about features like css-enabled smooth scrolling and infinite scroll everywhere.
I still remember in the early 00's there were software haphazardly ported from classic Mac OS to Windows and they retained the non-proportional scrolling indicator. It felt very off on Windows.
Maybe there could be a universal gesture that instantly brings up a minimap of the document at the cursor position, like right-click for context menus.
>Everyone expected him to unveil a new computer or two. Instead, Jobs showed off a flashy, completely redesigned Macintosh operating system called Mac OS X [ten], which, when it's delivered this summer, will put a glossy new face--graphical user interface, that is--on the Mac. "We made the buttons on the screen look so good you'll want to lick them," he says. (Some of the design elements he approved help illustrate these pages.) Just as provocative was a set of jazzy and useful free Internet services available immediately--online data-storage space, build-'em-yourself personal home pages and Websites, and a new kind of parental-control filter to keep kids from seeing the wrong kinds of Web content, to name just a few. These Web services, which Apple calls iTools, are designed to work exclusively with Macintosh computers, not PCs or any other kind of Internet device. Jobs' shrewd goal: to use the Internet to make Apple's computers show up Wintel PCs rather than merely stay even.
- they offer an affordance (a control) for moving a viewport.
- they offer the indication that there is more to see than just the current viewport
- they can offer an indication of where your viewport is in the overall data window, and optionally what percentage of the overall data window is covered by your current viewport.
Here's a discussion about disappearing scrollbars on c2 about "Long Enough To Force An Elevator Into The Scrollbar Discussion" that mentions Smalltalk-80's and Squeak's scrollbars, that float just OUTSIDE of the window, and DISAPPEAR when not required, so they don't taking up extra horizontal space in the window, or re-flow the text when they appear and disappear. Interlisp-D also had this kind of disappearing scrollbar.
>Squeak floats the scrollbar just outside the window when necessary, and only when the mouse floats over the pane. Bizarre. Apparently you can change this, but the magic scrollbar is as described.
>Bizarre by today's standards, yes. But also traditional and historical. Squeak's scrollbars, not surprisingly, are just like Smalltalk-80's scrollbars, which pre-dated all of the modern scrollbars. Commercial Smalltalks like VisualWorks allow you to change this and other look and feel items (didn't see a way to do it in Squeak right off). IMHO Smalltalk's scrollbars are easy to use and more powerful once you get used to them. For example you don't have to move your cursor up to an arrow button to scroll a line at a time. -- RandyStafford
Here's a demo of Smalltalk disappearing scrollbars from Brad Myers' "All The Widgets" (Xerox PARC & ParcPlace Systems Smalltalk, 1977):
>In this version of Smalltalk, the scrollbars pop up when the mouse pointer enters the window. The scrollbar has three regions. The one on the right: clicking there causes the text to move up. The one on the left: causes it to move down. And the one in the center can be used to scroll smoothly to arbitrary portions of the total text. The square rectangle with respect to the entire scrollbar indicates the fraction of the text that you see.
Here are some illustrations and a description of the disappearing scrollbars from Smalltalk-80, The Interactive Programming Environment, by Adele Goldberg, Xerox PARC:
p. 37> A scroll bar is a rectangular area, displayed adjacent to the left side of the view it controls. The scroll bar appears in the active view only when the cursor is actually inside the view. If you move the cursor outside the view (without pressing a button), the scroll bar will disappear. It will appear as soon as you move the cursor back inside the viewing area. Thus the scroll bar is a useful visual cue that the view will notice your typing or button pressing. Scroll bars appear only in those views for which scrolling is appropriate, typically in any view in which text can be edited or in list menus.
p. 38> Figure 2.3
The first hidden scrollbars were actually implemented in Bravo at Xerox PARC in 1974. They were just an blank region at the left edge of the window, that changed the cursor to an arrow icons when you entered the region and pressed any of the three buttons.
Here is a demo of Bravo scrollbars from Brad Myers' "All The Widgets" (Xerox PARC Bravo, 1974):
>When the cursor enters Bravo's scrollbar, it changes shape to indicate that scrolling is enabled. Each of the three mouse buttons corresponds to a scrolling operation. When the mouse 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 document window. Scroll down moves the line of text at the top of the document window to be adjacent to the cursor. Thumb causes the entire document to jump to the location in the document corresponding to the vertical position of the scrollbar. The boxed arrow indicates the location in the document that is currently visible.
Here's a demo of Interlisp-D disappearing scrollbars from Brad Myers' "All The Widgets" (Xerox Corporation Interlisp-D, 1980):
>Scrollbars in Interlisp-D appear on a window only when they are needed. The user indicates this by rolling out of the content area of the window, into the left or bottom margin. What appears is a scrollbar showing the position of the material that is visible as a small section which is grayed out. The length of this indicates how much is actually visible. Scrolling can be done by using the left button for going up, and the right button for going down. You scroll farther the farther you are away from the top of the window. In addition, the middle button is used to thumb to the place in the whole document that you want to see.
Xerox Development Environment and Xerox Star abandoned the idea of disappearing scrollbars, and Xerox Star moved them to the right edge of the window.
Here's a demo of Xerox Development Environment scrollbars from Brad Myers' "All The Widgets" (Xerox Corporation XDE, 1981):
I can't really effectively screenshot what makes it different. The feel of using it is a bit different than you'd expect by even watching a video. The bar itself is only a few pixels wide and when you approach it with your cursor, a little thumb slider pops out that you can either click and drag, or click the embedded up/down buttons to scroll. I'm personally not a fan, but it's an interesting design.
Open Look was super cool looking, but awful to use. Athena was (is?) awful looking and lacked any affordances for beginners, but was terrific for expert use.
I am fond of Open Look, and keep a copy of the Open Look GUI Functional Specification (Addison-Wesley, 1989) on my shelf, much as some people venerate the Apple HIG, except that mine is much less useful.
Here's a nice post that came up in a search for the Open Look scrollbar: "Evolution and design of scrollbars" https://pim.famnit.upr.si/blog/index.php?/archives/153-Evolu...