7 ms·
Evolution of the Scrollbar
- timbit42 3y agoThis doesn't accurately reflect how some of these scrollbars work. The Amiga and Windows 3.x ones, for example, should scroll a full page page up and down when you click above or below the scrollbar. It doesn't jump to 10% when you click 10% from the top.
- Quinzel 3y agoWhat is the purpose of a scrollbar? I don’t see the need.
- Arnt 3y agoI worked with this a while ago. It's a navigation/organisation tool for GUIs. GUIs have many such tools, and each of them is unnecessary in the sense that you can use others. But each of them is also better than the others in some cases. Suppose you're working on an interface to show something that's 2D, is generally 3× as wide as the viewport and 5× as as high, and the viewport is big (a computer screen, not a smartwatch). In that case two scrollbars may be the best way to let the user navigate. The user can see at a glance what part of the thing is visible within the viewport, can move the viewport by manipulating the same thing that shows the location, and the movement has a low error rate (the effect is generally close to the user's intent). If the typical sizes are, say, 100× as wide as the viewport, then the scrollbar doesn't work as well. If the viewport is so small that the scrollbar takes up much of the space, ditto. If the viewport is a touch screen, that changes the tradeoff compared to a draggable viewport.
- Quinzel 3y agoOh thank you, I didn’t know that :)
- masswerk 3y agoThere's also a notable ideological split, a schism, in this amazing instrument combining both the aspects of a positional indicator and a navigational device in a single widget that we call a scrollbar. Namely, it's about the question, whether the scroll thumb should be flexible in size, thus representing the size of the viewport in relation to the total dimension of the document, or not. If it is, the user can obtain information about the approximate size of the entire document nearly immediately. On the other hand, if it does not, it rather emphasizes the position of the viewport in a document and allows for more precise navigation to a certain location in the given document. Moreover, this second type of scrollbar doesn't suffer from issues with very long or very short documents. (As the second option provides a bit more usability, it was quite naturally removed in the process, we know as the history of user interfaces.)
- Arnt 3y agoFWIW, I've seen issues with that type too. Specifically, I once watched a user trying to scroll across a very large model. When the scrollbar moved by just one pixel, the model moved by more than half a screenful. It was painful.
- adamzochowski 3y agoWhen keyboard is not supported and I can't scroll by pagedown/space buttons. When keyboard is not supported and I can't scroll to the bottom. When I want to scroll to find something in a binary like fashion, scroll to the middle, decide if what I want is at upper half or bottom half, etc. Not all people have scrollwheel to begin with Scrollwheel is broken, as many overwrite OS behaviour, and generally slow even if you specify in settings to perform larger motion per scroll action
- 2h 3y agoa scrollbar when done right is the most natural form of moving down a page. most scrollwheels have "notches", so if you move the wheel one "notch", its rarely the exact amount you wanted to move. the middle click is also not ideal, because it starts moving the page based on the current mouse position relative to the original position. so if you accidentally move too far away from the origin, the page shoots up or down. with a scrollbar done right, you have fine grained, manual control of the movement of the page.
- mayoff 3y agoI'm not sure why you'd call it the most ‘natural’ form. Scroll bars don't appear in nature. Of all the ways to scroll content, direct manipulation (dragging your finger directly on the document on the screen) is most like the way we move real things around in nature.
- 2h 3y agoyes, because the word "natural" only has one meaning.
- kwertyoowiyop 3y agoSo sad you can’t use a scroll bar to scroll through the scroll bars. Also sad that the current direction is to hide them until you mouse over.
- datenyan 3y agoI was so confused when I tried to scroll through this and couldn't do it; seems like such a missed opportunity!
- treve 3y agoAlways realize I have infinite love for the Windows 3 aesthetic. I image others must feel the same about their first GUI
- deleted 3y ago[deleted]
- 2h 3y agoyou forgot Windows 11, the worst of them all. 1/3 the width of Windows 10, AND it auto hides. who in gods name could have possibly thought this was a good idea? what are you helping? width is RARELY the problem with desktop real estate, its always height. so you're freeing up space that doesn't need to be freed up. I get the thinking for a mobile device, but we are talking about Windows 11, its a desktop operating system. stop designing assuming everything needs to look exactly like an iPhone. for a desktop OS, its just objectively, scientifically worse: https://youtube.com/watch?v=E3gS9tjACwU https://youtube.com/watch?v=E3gS9tjACwU
- I_am_uncreative 3y agoSeriously, this. We upgraded my nearly 93 year old Grandma to Windows 11 from Windows 10 and this was the most disruptive change for her. At least she quickly learned how to use a scroll wheel.
- hulitu 3y agoYour grandma does not uses her computer for 8 hours a day.
- Sakos 3y agoSo she doesn't matter? Wow, our industry really has become a toxic cesspool.
- I_am_uncreative 3y agoWhat does that have to do with anything? And she uses her computer a lot for someone of her age. Not 8+ hours like I do, but more than most people do. Keeps the boredom away.
- apostacy 3y agoThere was no thought behind it. They just mindlessly copied from a mobile interface, where you don't need scrollbars nearly as much.
- eviks 3y ago
- anArbitraryOne 3y agoI like how the Mac OS X Lion scrollbar removes most of the functionality, and had me wondering for a second "how do I use this?" Would someone care to explain to me what Apple's design philosophy is, and how it makes any sense whatsoever? To me it is "Make things minimalist until they become unusable, then hide them" but surely that can't be all there is
- sherry-sherry 3y agoThe website incorrectly represents it. Since Lion, how the macOS scrollbar/position looks depends on your input device. By default if you are using a regular mouse, the scrollbar is displayed with a light-gray marker for the current position (much like the Windows 10 example to the right). If you are using a multi-touch input device (Magic Mouse or Trackpad), the scrollbar is hidden entirely by default. This includes the space or 'track' left for it, the scrollbar just appears as a floating bar when you start scrolling. You can change this via settings to always show track and position.
- anArbitraryOne 3y agoUseful to know I can change that. Thanks.
- DoughnutHole 3y agoHuh, I'd never actually noticed that. Now having fun plugging my mouse USB dongle in and out.
- pkdpic 3y agoLove this project, feels like an unpretentious work of webart. Both happy and sad it didn't include browsers. Makes me curious, was there any historical / visual / analog precedent for the scrollbar before Xerox?
- vondur 3y agoThe NeXT scrollbars look nice. The OS was pretty darn cool at the time.
- zagrebian 3y agoWhen did Apple introduce overlay scrollbars on Mac? Does anyone know? I ask because it seems that Windows and Linux are moving in that direction as well.
- 2301421898 3y agoIIRC (tho I could be making this up), scrollbars became overlay because most mice have a scroll wheel and most trackpads have gesture scrolling support. These are faster than a scroll bar, because you don't need to move your mouse to the side of the screen to use them.
- hulitu 3y agoTry to scroll a 1500 pages PDF with the mouse.
- twobitshifter 3y agoI imagine if you had the usage data, you’d see the scroll bar is clicked very infrequently.
- Sakos 3y agoI also infrequently need to jump to certain parts of a page compared to how often I use mouse scrolling or other options. But when I do want to jump to certain parts of a page, I want that scrollbar. Just because "the data" shows it's clicked infrequently doesn't mean it's not important. I hate the modern data-driven world. I'm convinced 99,99999% of people who use data for stuff like this don't actually understand what the data means and how large of a negative impact removing the long tail is.
- hulitu 3y agoI only click my "Start" button to shutdown the computer. /s
- robertoandred 3y ago
- behnamoh 3y agoToo bad that UI elements got flat and boring over time. the late 90s and early 2000s designers knew what they were doing.
- 2h 3y agoWindows 95 scrollbar looks the best of all of them IMO. it looks like it was professionally designed, compared with Windows 10 scrollbar, which looks like it was designed by an 8th grader.
- nocoiner 3y agoYeah, 95 looks really good. So does OS 8. Can’t believe how pixelated OS X looks in retrospect. That didn’t age super well, but it looked pretty at the time.
- account42 3y agoThe article shows the scrollbars at 2x resolution.
- mc32 3y agoWindows 10 has at least two styles. One where the arrow is a triangle and the other it's a chevron (as in the example). System 8 (and Next) were odd in the up and down arrows were on top of each other. That works for the initial scroll or if there is only one scroll movement, if there are more than one in a given direction, it becomes annoying (if you're using a mouse on the arrows to move the bar).
- justsomehnguy 3y ago> Can’t believe how pixelated OS X looks in retrospect CRTs had a built-in anti-aliasing
- twobitshifter 3y agoI’m voting for Amiga
- bjtitus 3y agoThis is very interesting when you consider the device timelines. Apple introduced their first external trackpad in 2010 and then introduced the hidden-by-default scrollbar with Lion in 2011. Once trackpad gestures had become good enough, scrollbars became largely redundant, as they would be with touchscreen devices. At this point they're mostly a progress indicator. I think the Amiga bar is my favorite.
- blahedo 3y agoEven before trackpads were good enough, scroll wheels were a thing (and I still prefer them). Your dismissive "mostly a progress indicator" is burying the lede: yes, I've seen scrollbars as primarily progress indicators for more than a decade now, and I'm still irritated when they're not there! (They're also useful to quick-jump to a specific portion of a page or to scan very quickly without swiping a million times, but those aren't as important as their progress-indicator function most of the time.)
- mayoff 3y agoThis doesn't correctly simulate how mouse clicks affect Mac scroll bars. Clicking in the track outside the elevator box should move a page at a time. Maybe it's not intended to accurately simulate interaction, only appearance.
- friend_and_foe 3y agoNo linux scrollbars, no mobile scrollbars, no interesting application specific scrollbars? There are a lot Kore interesting designs for scrollbars out there, there are like 3 main layouts in this presentation wity what amount to fashionable skins of their time.
- tomger 3y agoNice project. How ironic that on iOS it’s hard to try the scroll bars cause of the carousel’s drag gesture.
- eviks 3y agoOne of my most annoying gestures, and no Mac flexibility to change them
- zakki 3y agoWhat missed are: - CDE scrollbars - Linux based GUI scrollbar (KDE, Gnome, xfce, etc) edit: Is System 1 scrollbar is unix based?
- tail_exchange 3y agoWhat did the + and - buttons do for the Xerox Star scrollbar? And is there any particular reason for its arrows to be inverted?
- justsomehnguy 3y ago> Between 1981 and 1982, the Xerox Star moved the scrollbar to the right to get it out of the way and reduce visual clutter. Scroll arrows pointed inwards in the direction the content would move based on user studies, and + and – buttons allowed for scrolling by pages. The thumb was a fixed size diamond, independent of how much of document is visible. Clicking in the thumb elevator region would jump to that part of document.[7]
- tail_exchange 3y agoThat's interesting. Maybe just a product of what I expect from the UIs nowadays, but the arrows seem very counter-intuitive, and the + and - buttons lead me to believe it is going to zoom in and out from the document, not scroll by pages.
- twobitshifter 3y agoWe keep making scrollbars worse. How to make them better? Show more than your position - Show the content - Highlight matches - Show what you’ve already read - Show things that just loaded Do more than just scroll - Make the handle draggable and expandable to zoom - Bookmark your position - Autoscrolling - Preview scroll position on hover What are other things you have seen or would like to see?
- account42 3y ago> Show more than your position > - Show the content > - Highlight matches KDE's editors (KWrite, Kate, KDevelop) do this. I don't think they were the first though. This is not really possible to do in a generic scrollbar component though.
- hexo 3y agoId like to see always visible scrollbar. So called no-bullshit type. With buttons of course. No scroll overlay or whatever other random nonsense.
- KnobbleMcKnees 3y agoThis is my nightmare, a scrollbars loaded with bloatware
- Sakos 3y agoLike everything else, it should be configurable. SublimeText provides a version that shows a minified view of the document I have open. That's incredibly useful. If you don't need/want that, you can change it to a standard scrollbar. I'm not sure why or when we collectively decided the best solution for everybody is some mediocre middleground that can't be adjusted to your needs.
- KnobbleMcKnees 3y agoMuch like how I'm not sure when we decided decades of widely ccepted and intuitive access to those same functions is a "mediocre middle ground". If overloading scrollbars with bloat was a good idea, someone would have done it already.
- marcodiego 3y agoIt is missing my favorite one: https://www.omgubuntu.co.uk/2011/07/ubuntu-oneiric-updates-slicker-scrollbars-modal-dialogs-and-thunderbird-by-default https://www.omgubuntu.co.uk/2011/07/ubuntu-oneiric-updates-s...
- neilv 3y agoNot shown here, the Open Look scrollbars, defined in the 1980s, had the arrow buttons attached to the position indicator. It was probably best that died, but it was distinctive. Also not shown here, the Motif scrollbars of the same era had the arrow buttons on opposite ends of the widget (like on the Macintosh), but the position indicator was dynamically sized to also indicate the percentage of the scrolled world currently visible in the viewport. This is now ordinary. Autohiding scrollbars that stopped taking widget space when there was no amount to scroll became popular a little later. They are great when you want many views scrollable when necessary but don't want the clutter of scrollbars when not. Some modern UX design (i.e., advertising/engagement-driven) introduced a different kind of autohiding scrollbars -- which disappear when the pointer or finger isn't in the scrollbar area, even when there is something to scroll. They are an HCI abomination. Doubly so, when the suddenly appearing scrollbar interferes with the view.
- mixmastamyk 3y agoWish I could get the Win2k-era scrollbar back. Now that we have 8x? the resolution, thin/hidden scrollbars make no sense. https://cdn.maxxinteractive.com/uploads/images/gallery/2020-05/IRIX.png https://cdn.maxxinteractive.com/uploads/images/gallery/2020-... There was a similar looking scrollbar with a feature I loved from IRIX. When you would drag the middle slider, it would leave a shadow underneath it. So you could easily see where it was if you wanted to go back. Haven't seen another scrollbar before or since with that little nicety.
- JodieBenitez 3y agoOn most of my devices, there is no scrollbar, or it's not visible until I actually scroll... and it's fine. So it's not so much evolution of the scrollbar than disappearance of the scrollbar.