An interesting output of this is, if you keep scrollbars visible, you'll find that a lot of websites end up with weird extra scrollbars on random elements.
What often causes this is some HTML element overflowing by one pixel, but no one saw it during the QA process because all the webdevs were using Macs, which have invisible scrollbars by default. I always enable visible scrollbars on my dev computers specifically so I can catch problems like this.
mac user & web dev here, I often employ a trick where I wrap my scrolling div in another div which has overflow hidden just to hide the scrollbar. QA & usability engineers must hate me :p
Hah if your Github repo name is at the right length, you'll get that bug with the fork pop-up window.
[0] https://i.imgur.com/dS5acnx.gifv The gif doesn't have enough fps. IRL the animation is about 10x faster than that so there's no time to click the username.
Reported it but the support agent couldn't reproduce ¯\_(ツ)_/¯
I call it Made-By-A-Macitis because it's so common in this industry since MBP's are issued by default almost in web dev companies, which inevitably leads to weird scrollbars here and there on their startup websites until someone else finally reports it or a dev finally breaks down and tests it on any other non-Apple device.
> dev finally breaks down and tests it on any other non-Apple device
Why the need for an extra device? There's a setting in the System Preferences > General > Show scroll bars: "Always".
Or it will automatically show scroll bars if you're using a mouse.
If you're a web developer and your target audience is not limited to only macOS and mobile, you should have the Show scroll bars set to Always. I'm using a mbp for most of my web dev career and I've always caught these bugs during development.
What I do agree is that Windows or Linux makes this setting a default, which makes it more obvious. While testing on different devices is always better, it's not necessary to catch these trivial problems.
I honestly think that this is the main reason that Apple hides scrollbars by default. I have turned on "always visible" scrollbars before and it really does ruin the internet experience.
Now I'm not sure if you blame the OS maker (Apple/Microsoft), the browser makers (Apple again, Google, Microsoft, Mozilla), or the web developers of the websites. But regardless of who accepts or deserves the blame, it is hard to dispute that the experience is far worse with scrollbars forced always on. It shouldn't be this way, but as of right now, it ruins the experience.
Like you mentioned, some websites simply don't work or don't work how they should. You end up with scrollbars on elements that aren't even form fields because of weird hacks that web developers are doing with overflow elements or strange CSS anomalies.
I'm not sure how you address this issue. But it is definitely more deeply seeded than the OS level, and I think web developers (a lot of us here) should take some of the responsibility for ruining scrollbars. It is our company's apps and sites that drove Apple to this decision.
I suspect that one of the reasons for hidden scrollbars by default is because the teams at Apple have tried to use the web with "always-on" scrollbars and didn't want their users experiencing the web that way. Remember also that defaults are important. Most people will never change the setting, even if it was obnoxious. Most Mac users are going to use the default setting, regardless of whether the default is always on, always off, or auto. Whatever the default is, that will be how most people use the computer and just accept it as "how it works". So Apple has to choose the best option (between three bad choices) that will best best for MOST people. Not everyone, but MOST.
I also think that MOST people are used to automatic scroll bars at this point. Again, my Mom is the person that will never change a setting. So she will always use whatever the default is. And she is used to automatic scrollbars. She knows that if she wants to see the scrollbars, she has to do a micro-flick of the scrollwheel (or her finger on mobile/touch) to reveal the scrollbar. It requires minimal-to-no effort and most people have grown accustomed to it now. Is it flawless? No. But I do think it is the best option MOST of the time.
> I have turned on "always visible" scrollbars before and it really does ruin the internet experience.
You have scrollbars everywhere precisely because they're hidden from developers who don't even know about them, and it seems ~all developers use Macs for web dev those days.
> no one saw it during the QA process because all the webdevs were using Macs, which have invisible scrollbars by default.
We've had this happen numerous times in the past. As a result, I had to make it mandatory that devs on my team and the QA team have scrollbars always on on their Macs. They get frustrated that I require it but it catches so many minor layout issues that it's worth it.
This is annoying in macOS, but I do prefer having no scrollbars in iOS. There's limited screen real estate, and messing with a scrollbar with my finger doesn't feel any better than just scrolling to where I want to be.
Learning never stops! I did not not know that you could actually use iOS scrollbars as real scrollbars. They are extremely fiddly indeed but I am pretty sure I am going to use them from time to time.
I always thought they were simply a sort of dumb progress bar.
> I have a really hard time believing anyone would chose this as opposed to some design lead at Apple pushing a weird personal preference for tidyness on their entire user base
Maybe I don't understand completely what he is referring to, but on mobile I certainly prefer having a bit more space than a always visible scrollbar. It is usually clear enough that there is more to see below the fold.
Scrollbars used to be sometimes useful to get a sense of how much content there is. But everyone using infinite scroll broke that, not apple.
> on mobile I certainly prefer having a bit more space than a always visible scrollbar.
I very much disagree. On all of the mobile devices I've used it has never been clear that scrolling is a thing unless there's a scrollbar.
I didn't even know you could "pull down" menus or pull up some app status thing until I called support and asked how to close background apps or turn off wifi
With mobile UI, that's kinda necessary. You don't have a whole lot of space to work with there. It's either really tightly packed touchscreen interfaces, or its horribly overloaded buttons ("when you're in the email app, press the Hang Up button to delete a message").
There is no excuse for it on desktop except blindly imitating mobile UIs.
> With mobile UI, that's kinda necessary. You don't have a whole lot of space to work with there. It's either really tightly packed touchscreen interfaces, or its horribly overloaded buttons ("when you're in the email app, press the Hang Up button to delete a message").
Or using a PDA-like UI with miniaturized desktop UI elements, but that style requires a stylus to use which is why the simpler, chunkier smartphone touch UIs became popular in the first place.
Mobile touch screens aren't really the issue here - the problem is mouse users on laptops, where they don't get to touch the screen to discover elements and they need to be able to interact with a visible scrollbar in order to scroll.
I'm not a mouse user so this issue caught me completely off guard!
Not GP, but I pretty much only ever use the mouse/trackpad for testing from a user perspective or in some apps that don’t have good keyboard support.
For the browser I use the Vimium plugin to navigate and only need to use the mouse in the case the site is badly made and e.g. a button is not a button but some styled div element with an event listener attached.
Most of the other daily needs like functions of the tiling window manager (AwesomeWM), Editors (IDEA, VS Code, emacs), terminals, etc. come out of the box with good keyboard control support.
I've had two separate users tell me that they use a mouse and they can't my scroll tables horizontally without first scrolling to the bottom of the page.
I can scroll horizontally on my touchpad, but on a mouse it doesn't work. Horizontal scroll wheels are rare (the Logitech Master series has them, but that's about it). Most apps allow you to hold ctrl while using the scroll wheel to scroll horizontally. Some implement some kind of drag-mechanic, but that feels incredibly awkward with a mouse and is unusable with a touchpad.
On some mice they do, and it's a really useful feature. But it's fairly niche and mostly on the more expensive mice. I would feel pretty confident betting that over 99% of Windows users don't have a tiltable scroll wheel.
Even though I have trackball with tilt wheel (MX Ergo), I noticed that I never use them. When I should scroll vertically, I just middle click and move cursor, or grab scrollbar and drag. Maybe because tilting wheel isn't comfortable way to scroll.
I like a UI that lets you scroll in every direction by clicking and holding the middle mouse wheel/button down. This is a more precise gesture than any trackpad can offer. Plus, with a vertical mouse you won't be killing your rotator cuff.
In web browsers this is referred to as "auto scrolling" and it works automatically on Windows but on Linux I have to install a chrome extension to get that feature in Chrome at least. It works in Firefox.
Not sure if it works on my Mac because I gave up trying to use third-party peripherals on Macs since they never work well.
It's a precise gesture, meaning that it happens when you want it to happen and not any other time.
I certainly cannot say the same for scrolling with a trackpad. If I happen to brush two fingers on the thing, things start scrolling when I don't want them to.
Need to is pretty strong. My company did UX testing on scroll bars and the overwhelming majority of our users on laptop scroll using the keyboard or the scroll wheel (which on laptop is done using two finger dragging). I forget the exact number but it was less than 10% of users actually interact with the scrollbar.
Not interacting with it doesn't mean you don't use it - I glance at it to see if there is more content and where in it I am, even though I use the scroll wheel to move.
Hiding relevant information from the user is a bad idea. The computer is a tool that the user employs to accomplish a task. Do not hide tools from people who need to use the tools.
A computer is a tool. It's not a design statement. It is not a canvas on which you paint. It is a toolbox full of tools a user needs to do work. Treat it as such, please.
This is how chrome does it to. The first time you scroll a little you see how long the page is. You don't need to keep seeing something that doesn't change.
The funny thing is, if scroll bars never existed and someone tried to add them they would be considered terrible UI.
You need to hit a tiny target with your mouse, that gets smaller and smaller in proportion to the size of the document. Missing the scroll bar, and hitting the gutter moves you to a random page with no simple way to get back.
On small documents a small mouse movement scrolls by a small amount, but on a large document a small mouse movement can scroll way too fast.
On some systems clicking the gutter is "page down". On others it is "move to this relative point in the document".
With a mouse wheel or track pad the scroll speed is consistent no matter the size of the document, and the user can scroll faster or slower very easily. And you have a huge target - the entire document. There is no chance of paging when you mean to scroll. Scrollbars are obsolete.
Is that how it works on macOS? If so, it's plainly broken.
On Windows, and in every Linux GUI framework I can think of, clicking anywhere above or below the scroll thumb scrolls exactly one screen page up or down, for the very reason you've described. To navigate to an arbitrary spot, you're supposed to drag the thumb.
On GNU/Linux systems, at least, you middle-click to say 'go to this place'.
I love my scrollbars, and I want them always visible. I don't use the mouse often, and I certainly don't want to have to use the mouse just to see context.
Chrome implemented even worse nasties on GNU/Linux with scrollbars though, including forcing a snapback to original position if you drag the scrollbar but happen to move the mouse a few pixels too far left or right of the scrollbar [1]. Apparently that's how Microsoft Windows users do things. So now we have to as well.
Windows does it, but "too far" is actually closer to 500 pixels, not "a few". You'll certainly never run into it in normal use. I actually find it useful because I can refer to two places in the same document without losing my scroll position (I don't think that's its intended purpose, but it works).
macOS can be set to either behave the way you're describing when you click above or below the scroll thumb, or to navigate to that point in the document when you do that (e.g., click 80% of the way down the scrollbar and jump to the 80% point in the document).
Scrollbars aren't meant to be clicked ever since the invention of the mouse wheel. Their primary job is to tell you that you can scroll, because there's more content. If you hide the scrollbar until you scroll, then users often won't scroll, because they won't know there is more to see.
The secondary job of the scrollbar is to tell you where you are in relation to the content, and how much of it there is, relative to what you see on your screen. Both of these roles are best fulfilled when the indicator is persistently visible.
You could make scrollbars transparent to clicks and they'd do 90% of their job already. The ability to click on them to quickly jump to a desired location is a useful bonus, even if not frequently used these days. What matters is that they're visible.
>If you hide the scrollbar until you scroll, then users often won't scroll, because they won't know there is more to see.
Do you have evidence for this, even if it's anecdotal? To be honest a statement like that sounds like a hypothesis and a reasonable hypothesis, but I am not joking when I say when we did user testing, it was absolutely never the case that someone actually didn't scroll because they didn't see a scroll bar. Now we didn't test specifically for that but I'd be surprised if a controlled experiment testing that hypothesis concluded that people will actually just never bother to scroll unless they explicitly see a scrollbar.
Scrolling is actually a very natural thing that people do without the need to visibly see a scrollbar. Using a dedicated scroll button or gesture is a very cheap and consequence free action to perform. I'd be very surprised if you have data that contradicts this and indicates that an actual human being would simply not scroll because the only visual cue/indicator that people use is a scrollbar, rather than the multitude of context specific information available to indicate whether more content is available.
I only have anecdotes to support this, but unless I'm a really weird outlier, I'd say it's indicative:
- Almost every discussion on Apple and scrollbars I see on-line has someone telling a story of how they didn't realize some app was scrollable, because its visual grid happened to align perfectly with viewport size of their iPhone/iPad;
- I got caught myself by this a few times on PC, where the design of the page looked complete, scollbars were hidden, and I didn't realize I could scroll down;
- I've been the person to tell some confused non-technical people that they could scroll down to see more, because the layout of a webpage did not make this obvious, and without a scrollbar visible, they were just puzzled why there's so little information on the screen.
Plural of anecdote is not data, so I'm open to the possibility I may have just had peculiar luck, but I think it's fair to assign a low prior to that.
> that an actual human being would simply not scroll because the only visual cue/indicator that people use is a scrollbar, rather than the multitude of context specific information available to indicate whether more content is available
What these cases had in common was that there was insufficient context-specific information available to make it apparent the content is scrollable (and - anecdotally, again - in my experience, non-tech-savvy people don't have the nervous tick of just randomly scrolling on the wheel, to check if it does something). Sometimes, the only such contextual information was the feeling you got after reading everything on the page, that something is missing. But if your users have to reach that point to figure out they can try scrolling, the UI failed at its job, and wasted them a minute of their lives.
The worst offender I've seen is the share button on the iphone. You can scroll down to select more sharing options, but the first row of options aligns perfectly with the bottom of the screen. I've seen at least two people have no idea there are more options.
The scrollbar is still there if you really want to use it, it's just not always visible. You can always move your mouse over to it and use it like always, but it's not going to appear unless it's being engaged in some way.
In many cases yes we do that too. Text is hidden until the user performs an action, types something in, or hovers/focuses over an element (think tooltip).
Why... (Tooltips I understand, as those are often something you only need a single time.)
Yes I am a vocal opponent of hidden UI elements. Shame on me, I guess.
If I were the innocent target of a firing squad, I would be a vocal opponent of the actions being taken against me there, too. "It's just a vocal minority. Fire."
Being a vocal minority doesn't make me wrong. But it probably means I have thought about the problem space more than those who are not. At that point you put the A/B testing aside and you talk to the people and listen to them, and see if they are informed or if they are crackpots.
For the simple reason that we want to present to the user only the information that is necessary for them to accomplish their immediate goal, and nothing more.
If you aren't scrolling, then the scrollbar provides little information in proportion to the amount of space it consumes. If you are scrolling, then the scrollbar is very important and it gets displayed. If you want to know where in a document you are, our experience is that users tend to already have a good idea of where in a document they are based on multiple cues including the fact that they are likely the ones who positioned themselves to that point in the document already. In the very rare moments where they need that cue, they can move their mouse (scrollbar appears when the mouse moves).
As screens are a finite resource, by minimizing information that isn't necessary towards accomplishing a goal, we can maximize the information that is.
If you are reclaiming the sliver of space occupied by a scrollbar because you need it to display other information, do you also do this on high resolution displays where the scrollbar does not consume as large of a fraction of available space, or do you just apply the rule no matter the situation?
I would genuinely love to see a UI where valuable information is unavailable without scrolling because of the presence of a scroll bar. I am not being sarcastic or snarky. I would love to see that UI
Sure, this is what our current software looks like but it's in the process of being redesigned:
[1] is an image comparing a list of trades with and without the scrollbar. The scrollbar literally hides an entire column's worth of data.
[2] is an image of a typical trader's layout so you can get a sense of the context and how the size of a scrollbar can add up.
As you can see, given that the scrollbar consumes around 20% of the width of a trade list, by eliminating it a user can can add one additional trade window for every 5 that are open. That's literally money in their pocket and our pocket.
Some additional info is that the Windows 10 titlebar is too tall and those minimize/maximize buttons are enormous, so we redesigned a new title bar that is not only slimmer, but allows us to make better use of it while still retaining the functionality. I am not going to declare that we are the masters of UX and everything we decide is absolutely correct, but we do really care about these issues because they make a measurable impact on our performance.
Alright. I had a feeling you were in stock trading. Those users are power users (truly) and know what they are asking for.
That said, almost all of those windows in the "typical usage" image have space enough to display everything fully AND show a scrollbar. And I would imagine a trader would shrink those windows enough to allow another window or two in the row, and be very happy without a scrollbar.
On another topic, I have an AutoHotKey script that, with some modification, may be of extreme use to those people. Felt appropriate to inform you of it.
I think the point is that I don't necessarily know by looking at a page that there is anything to scroll to without seeing the scroll bar. I may land on a page that contains enough content "above the fold" that it appears that's all the content available, so I navigate away without scrolling down to discover the additional content below.
It's possible the first time you go to a page or use new software that this is true, but for desktop productivity software that is repeatedly used on a daily basis, you usually come to identify multiple cues to know if there is more content, so hiding one specific cue in a specific circumstance won't inhibit your ability to use our software.
People's preferences about usability can change over the course of familiarizing themselves with your software, things that are friendly when they first use the software may end up being useless as they become more familiar with it. We obviously don't want to make our software hostile to new users, but for our purpose we want to ensure that people who are more familiar with our software have the optimal experience.
This makes no sense to me. Why can't I look at the scrollbar(s) and see where I am in the document without scrolling? Why is it important that this information be hidden from me?
The scrollbar doesn't just let you know that you can scroll, it shows you the size of the content in relation to the size of your viewing window, and it shows you
the location of the viewing window within the overall content, and it does this at a glance. A scrollbar is an extremely efficient use of screen space.
Don't hide things from the user that provide the user with information.
You can do that to, moving your mouse over the window reveals the scrollbars, as does scrolling.
The reason we hide the scrollbars is because scrollbars are not the one and only consideration that we make when designing a page, information density also matters and so we have to weigh these options together and conduct user testing to see what the impact of various design decisions are. Certainly there is a vocal minority of people who are dead set that scrollbars must always be visible, and we can respect their choice, but we also have to optimize our software for the majority of our users who would rather see more content.
The balance we went with was if you want to see the scrollbar, you need to perform an action that engages it, which is moving your mouse over the scrollable area, or performing a scroll operation. We have other things too that we have to consider, like until the mouse approaches the scrollbar it appears very thin and when the mouse is within a certain distance it expands to allow it to moved.
Will every single user like this approach? No of course not. But based on our user testing, it optimized for metrics that we care about.
> You can do that to, moving your mouse over the window reveals the scrollbars, as does scrolling.
The problem with revealing scrollbars it that they then obscure whatever was shown there before. (Or reflow the page, dear god). If you use that space, well you can't see it when you're scrolling; and if you don't use that space why not show the scrollbar the whole time?
Name me 3 websites/application where hiding the scrollbar is used for more content. Please don't use examples where is's obvious you can scroll. (ie Timeseries/tables).
> Don't hide things from the user that provide the user with information.
We already hide 99.9999% of things that provide the user with information. Thank god, because the real maxim should be don't overload the user with information.
We try to show only the things that show the most useful information at the times it's needed, and hide them the rest of the time.
Scroll bars used to be necessary primarily for scrolling. Once people switched to scroll wheels and trackpad gliding this the primary use case disappeared.
Knowing where in the document you are isn't usually that useful. You started at the top and already know how much you've read. For the infrequent moments where you really do need to know, just jiggle the scroll and you can see it instantly.
It's a very elegant solution. It really does work.
> We already hide 99.9999% of things that provide the user with information. Thank god, because the real maxim should be don't overload the user with information
> We try to show only the things that show the most useful information at the times it's needed, and hide them the rest of the time.
Surely there's a middle ground between showing a user everything and showing a user practically nothing and then trying to guess what they might need.
Software that tries to figure out what I want instead of just letting me just pick what I want is, frankly, annoying. How does software handle a situation where an option I might want is hidden because I have a use case that the developers didn't anticipate?
> Knowing where in the document you are isn't usually that useful.
Disagree. If I'm reading a document on the Internet, I probably don't know how long it is before I start reading it (and those ridiculous tags that say an article is XX minutes long are almost always so wrong that they're useless for me). If I'm scrolling with my scroll wheel, I'm probably not paying attention to the scroll bar. If I've been reading said document for fifteen minutes and I want to know approximately how far into the document I've read (and if I have any hope of finishing it up in the time before I have to do something else) the position of the box in the scroll bar is a great way for me estimate that at a glance. Jiggling the page or moving the mouse all the way to the side or doing some other incantation to make it appear completely breaks my flow reading the document and can make me easily lose my place (especially if I'm in the middle of a paragraph). A quick glance at the scroll bar also breaks the flow, but not quite as badly, and it's a lot easier to resume where I left off.
> Surely there's a middle ground between showing a user everything and showing a user practically nothing and then trying to guess what they might need.
Yes, that's what software already does. And a scroll bar that appears but only when you jiggle the scroll is that middle ground.
> Software that tries to figure out what I want instead of just letting me just pick what I want is, frankly, annoying.
That's literally all software though.
Otherwise every screen would be covered in every possible option, and would be unusable.
The use case didn't disappear. If you're looking at a very long list - could be a document, could be a list of files - it's simply quicker to scan it by scrolling than by finger-gliding. Especially with the Magic Mouse.
It's physically tiring to scroll through a long document with multiple finger drags on the surface of the mouse. And knowing how much there is left to look at is clearly useful.
Worse, the default MacOS micro-scroll bars are too narrow even when they're visible. I assume this is to encourage track pad and finger-drag use - but that's not a user-centric decision.
Why is hiding the scrollbar(s) today so necessary for real estate reclamation, when it wasn't necessary when 1024x768 was an above average screen size?
Mice with scroll wheels existed then, and were common, at least in Alaska, where I was at the time.
It's only in the last few years of computers with mouse-driven GUIs that suddenly the scrollbar is intolerable for UX people. Suddenly users are saying that a scrollbar is unacceptable? Really? Or are the survey questions worded to produce the results desired by the designer? The latter seems much more likely. (It's hard NOT to bias survey questions, if you don't know how easy it is to bias them accidentally.)
I can't believe that is the honest truth of the situation. I worked with my fair share of excellent designers, and I can't recall any of them ever groaning about any browser chrome, like a scroll bar, ever, with the notable exception of the viewable page space consumed by browser plugins which each added their own toolbar to the browser UI itself. What a horrid period of time that was...
If it is such an urgent need, where was that need 20 years ago? The web hasn't changed THAT MUCH. Scroll bars were an accepted thing; unquestioned. But today they're too intrusive? Or they consume too much space? What the?
I understand that the science of interactivity has matured, so I'm willing to admit that we know more about how users behave than we did 20 years ago. I still don't believe that any UI would ever benefit from hidden scroll bars over always visible scroll bars.
Not only that, but seeing the scrollbar tells you that there is more content that you can't see.
This is especially useful if you made your modern front page super fancy so that the above-the-fold space looks like a tidy complete package. Or if you have a sub-panel containing a list of something.
I make web sites for students. I've frequently found that, if it's necessary to have a scrollable list of something, I need to dynamically change the height of stuff so that the list starts with some list item partially peeking out over the fold, otherwise half the users with hidden scrollbars won't know to scroll and find more stuff.
Modern web pages get me on this every time - I filed multiple bugs on our new site because there was so much whitespace that I didn't realize there was more content below the fold.
I suppose this has made "above the fold" more valuable, or perhaps mobile devices show so little content that everyone has to scroll ...
I just realized that the "mobile-first" web has made using a computer with large screens a super-power. I have 17m pixels (and many more if I wasn't using Retina-like resolutions to get crisper text) - others I work with are stuck at barely over a million pixels.
Don't worry, they're killing that too, with infiniscroll!
Seriously, that's another thing I hate about infiniscroll: if I come to a giant list where I know I've looked at the top 10% of, it makes it impossible to jump down approximately 10%, or otherwise to a region I know I haven't explored.
Edit: And, of course, if you do want to go n% down, there's no choice but to page down, wait, page down, wait, page down ...
The #1 thing I hate about infiniscroll (and I actually kinda like it when I'm vegetating and pouring crappy content directly into my eyes) is that clicking on something and then hitting back almost always takes you back to the top of the list; at which point I bounce out and never return.
However, that one I blame the browsers for. I distinctly remember the back button working differently, where it would reliably take you to the exact state of the previous page, just as if you had opened the current link a new tab and closed it, but it changed at some point, and most sites do something that destroys the state when you back into them as well.
Quantitative finance where information density is of the utmost importance and our interest isn't in getting the most number of users, it's retaining the most skilled users.
For our application we have many tables of data that are narrow in size, maybe two or three columns, and having a scrollbar constantly displayed takes up valuable screen real estate that could be used to display more tables.
It's also a fallacy to think that because we optimize our application for 90% of users, that we end up losing 10% of them. People are not static automatons that make binary decisions about using your product strictly on the basis of how scrollbars function. People are fairly flexible and can adapt, get used to new things, and balance many different factors against one another when making choices.
This goes against the rule of thumb where if 5% of attendees are vegetarian you serve vegetarian and omnivores will adjust to it, while if you served the omnivore option the vegetarians would likely go hungry (more likely go find something else nearby if possible).
No because it's not as extreme as that. What you are talking about something that Taleb talks about which is a kind of minority rule [1] where for example kosher people will not eat food that isn't kosher, but non-kosher people will eat food that is kosher and so the end result is that Coca-cola, Pepsi, etc... all ensure their products are kosher even though only like 1 percent of their customers care about it.
That is a very important principle in UI design and we certainly adhere to it and take it into account, but this has nothing to do with that. We're talking about scrollbars here, and unfortunately the people who prefer to always see a scrollbar are not going to ditch your product strictly on that one single criteria.
If the business is "restaurants", but if it's "programming language conferences" I don't think vegetarians are going to start picking up C++ because PyCon didn't have a vegetarian option. No one is picking software based on scrollbar preferences just like no one is picking software conferences based on their dietary restrictions.
But unlike Apple or most other replies in this thread, your case has a valid justification: omitting scrollbar increases information density and usability, which are good things. I'm also guessing you train new users, so that there's no possibility they won't realize some table isn't scrollable just because there's no scrollbar.
We don't know Apple's justification for it but I wouldn't be surprised if their testing concluded something similar to ours... users don't depend on an always visible scrollbar to scroll.
It would be crazy to ignore 10% of the user base--to provide them no means to use your product or some features therein. However, it's not crazy to reprioritize their preferences. This happens all the time, and rightly so--if you can choose between delivering real functional value for a supermajority of users or cater to usability preferences of 10% of users, the former should win every time.
Note also the distinction between "prefers scrollbar" and "touched the scrollbar at all". At most 10% of users prefer scroll bar; the parent only claimed that 10% of users touched the scroll bar at all.
if you can choose between delivering real functional value for a supermajority of users or cater to usability preferences of 10% of users, the former should win every time
Not "every" time. I work in healthcare. I don't have the luxury of leaving ANYONE out.
I'm talking about preferences, not accessibility requirements. And healthcare is one of the most dramatic examples of giving no shits about preferences (I also work in healthcare, but on the provider side, not the consumer side)--my major hospital chain's web portal deliberately breaks on browsers (and versions) that it doesn't explicitly support. You certainly don't have to support scrollbars unless they're billed as an accessibility requirement.
Healthcare is certainly a "fun" space, but catering to scrollbar purists isn't usually part of the gig. :)
> I'm talking about preferences, not accessibility requirements.
It's not clear to me that those two things are neatly separated. I have a ~25th percentile visual memory - my brain does very poorly having to process and retain images, but text is very easy. I can, eventually, navigate visually, but at a much higher energy cost than the average. Is my affinity for text a preference or an accessibility concern?
I wouldn’t be surprised if some tiny portion of the population could legitimately claim an accessibility reason for scrollbars, however tenuous. But certainly not 10% or even 10% of 10%. Further, “accessibility requirements” refers to explicit, medically diagnosed issues not speculation about a preferences vs needs continuum. Moreover, as previously mentioned, accessibility requirements are out of scope—the assumption is that we’re talking about (at most) 10% of users who have a simple preference or custom for scrollbars. If we’re talking about accessibility the calculus is different, but that’s a distinct topic for another thread.
Nearly every industry. Pareto optimization implies that in almost all circumstances you get more bang for the buck investing in improving the experience of your 90% of users than the remaining 10%.
Seems a bit hypocritical to me, since I have hardly ever met a startup programmer/sales person that cares about the accessibility for disabled people of their product.
Would be curious to see the results controlling for page size and for type of task. For example, I normally don't use the scrollbar... until I do (because I'm scrubbing a huge page looking for some specific thing). And then I get annoyed that grabbing the darn scrollbar handle with a touchpad feels like a dumb peekaboo game.
Ah I see you don't work at CD Projekt Red - where they decided to hard-bind "use" in Cyperpunk 2077 to the middle mouse button which many mice have problems detecting due to prioritizing wheel smoothness over clickability. My partner had to borrow a different mouse to make it through the tutorial - after which it allows you to rebind the button.
The game doesn't let you rebind keys until after the tutorial? That's insane. So anyone who needs some unconventional control setup cannot play the game. Not to mention the tutorial is supposed to be the part that lets you test out the settings and familiarise yourself with the basics.
Those scrollwheels you described are definitely part of the problem too, though. I had the pleasure of using one like that and a few minutes were enough to generate the urge to throw it in the bin. It's already hard enough to find a decent mouse without worrying about the scrollwheel.
As a user of a laptop, the reason I use arrow keys to scroll is because of infinite scroll. Websites with that feature are effectively unusable via the scrollbar because it gets hijacked as you're in the middle of using it, move from 50% to 25%, and suddenly you're pressing down on 50% of double the original lines and get jerked past a quarter of the open entries in your feed. It's a terrible experience that forces you to use arrows or the scroll wheel as a workaround, not because that is an actual preference.
I never used a trackball, but I would have expected there to be either a button on the mouse or some key you could hold to turn the ball into scroll mode?
A search on Amazon, Best Buy, and Newegg for trackball and sorting the results from lowest to highest price all include scrolling buttons, either by touch, scroll ring, scroll wheel. The dirt cheapest option I could find for 20 bucks, the Logitech Trackman Trackball has something called WebScroll buttons and other cheap Logitech trackballs use SetPoint.
It appears, at least from all the evidence I can gather, that trackballs without a scroll option is the exception.
If you're on a Mac with a trackball, the scroll bars would show up all the time the same way they would if you were using a mouse. Unless the trackball says it has a scrollable function to the OS, you'd see the bar.
We absolutely did. As I indicated in another reply, we develop quantitative trading software and we use our own software internally as a trading firm. While we're not perfect by any means, we take UX research quite seriously.
> less than 10% of users actually interact with the scrollbar.
I wonder whether this was tested with the average modern website or a well-designed UI. Or on a desktop, which usually does not come with a touchpad.
The main reason I rarely drag the scrollbar is that it's become a total pain: they're generally hard to hit with the mouse because they tend to get narrower every year(Fitts' law anyone?), they auto-hide or even when not hidden have such a low contrast that I have a hard time making out the edges, or they're simply in a half-broken state thanks to convoluted web design. All those things basically go against the whole purpose of scrollbars.
Please don't mess with the scrollbar and scrolling in general. It provides no benefit and breaks UX in ways nobody can predict. With so many operating systems, user interfaces and browser plugins it's often trivial to make many websites near unusable because they were built by people who think they know better than some boring standard.
To be honest most of our tests for UI components are fairly abstract which has pros and cons. The way we test UIs is by creating multiple prototypes that differ in various ways (hidden vs. not hidden scrollbar), giving the user time to familiarize themselves with the prototype, and then asking them to perform a series of tasks. For example after asking them to familiarize themselves with an abstract spreadsheet like software, we might ask them to find a specific data item and we check how they go about it. Or we might give them a form and ask them to fill it out and we see their usage. Or we might present to them a large set of changing data, ask them to mentally keep track of any numbers that change to be between 100 and 200, and after 2 minutes we ask them how many numbers did they see and measure that, then we change the UI (increase information density) and have them repeat it and see what the effect is.
After we give this to a bunch of our users, for our specific business, we split users up according to a bunch of criteria including people who performed the task the fastest in terms of time, performed it using the fewest actions, in terms of precision, sometimes eye tracking is important, and a host of things.
Now the next thing I will admit people will find distasteful but for our industry it matters a lot... we then design the software according to how the "optimal" users accomplished the task. Sometimes it's possible most users accomplished the task one way, but the optimal users accomplished it another way... in many cases we will then design our software for the optimal users even if they are a minority.
For this case we were predominantly interested in information density and the scrollbar was taking up about 10% of the width of a table (on 96 DPI the scrollbar is I think around 15px and the window as a whole is about 150px). The optimal users, and the vast majority of users overall tasked to find data in a table as well as the ones who did best in terms of keeping track of changing numbers, don't move the mouse over a scrollbar and use it directly. I don't have all the details off the top of my head although I could ask the UX researcher about it if there's a lot of interest, but I seem to recall that the small number of users who did drag the scrollbar are "clumsier" and slower.
Since I work in quantitative finance, it's better for our business to design our software to appeal to the so called optimal user and try to find ways to get the majority of our users to adopt more optimal usage patterns. That means if we can get our users to prefer using more precise ways of using our software through familiarity, training, or other means, we'd rather get them to do that instead of trying to design our software to accommodate usage patterns that they are currently comfortable with, but that we measure as being suboptimal.
None of this is perfect, we don't always get it right, but we do care about it and put quite a lot of effort into it and have seen a lot of substantive improvements in our users that translate to substantial earnings for our trading firm.
Fascinating! Could you tell me more about who these optimal users are? Are they optimal because they are the most valued users in their firms? (Make the best trades or some such?) are they optimal as their opinion on the software matters a lot? Or something else entirely that I am failing to imagine
90% of users don't use the scrollbar on laptop/desktop? I find that hard to believe unless your apps don't really need a scrollbar to see all the options.
I don't exactly like invisible scrollbars either (and it sucks that Gtk+3/Adwaita has adopted thin/invisible scrollbars in Linux) but modern mice have dedicated scroll wheels.
I enable persistent scrollbars on any machine where I'm doing front-end web dev, so that I can better see what (some of) my users will see (not doing this has bitten me when it affected layout). But on my personal laptop I leave the scrollbars off. I virtually never drag them with the mouse these days and they just clutter my visual landscape; I'm glad the option is there to hide them (and dear god would they get in the way on the already-limited real estate of a phone screen).
I think mouse users don't generally suffer from this problem: by default, MacOS always shows a scrollbar in all contexts if you have a mouse plugged in to your computer.
Not only does it not show the scroll bar by default, but (not sure if this is a Chrome or Mac issue), when it does show up during a scroll operation, you have to have great reflexes to grab it with a click if you want to.
A customer of mine was surprised to see some extra VMs in vSphere a few days ago. He never tried to scroll a list somewhere in the app and always missed the extra content because his Mac doesn't display the scrollbar. He has a laptop, so no mouse. I tweaked my Gnome desktop to always display a transparent scrollbar (only the outline is visible) so I could see that the list had extra elements.
By the way, vSphere is part of the problem. It's one of those web applications that try very hard to look like a desktop application. It doesn't use the standard HTML behavior of building a page that scrolls. It clips everything at the borders of the screen. Ironically that reduced functionality probably cost them a lot of developer time.
Messed up a college entrance exam form once that used a small <textarea> with several lines requiring a response. Thought there was only 2 or 3 questions when the remaining 5 or so were out of view. Without the scroll bar I had no way of knowing I wasn't viewing the entirety of the element. An example of bad form design, but still.
Wouldn't a "submit" button be located at the bottom of the form?
In which case, in order to submit the form you would scroll down until you see the button, and would therefore have scrolled past all the fields?
It sounds like the form itself had a lot of problems. Either there wasn't enough contrast on the fields to know they existed, or the submit button was located above fields that needed to be saved, which is an inexcusable interface design choice. Also one could argue that there should be form validation as well to alert the user of critical unfilled form fields. Then again, we can't rule out simple user error.
I don't know, it just sounds like a lot of stuff was going on here. I doubt a scroll bar on the side of the webpage would be the critical element that solved all of the problems. I have no problem criticizing Apple, but its hard to put the responsibility of the entire internets' usability problems solely onto their shoulders.
The whole editable portion of the form was just a list of questions in a single <textarea> (you'd give your response under each one). Below the <textarea> was a submit button, so it was unclear that more text was in that element than was immediately shown. Obviously they should have created a proper form with separate inputs for each question.
As a specific example I routinely ran into forms that rendered like this (hidden scrollbars in three different browsers concealing content, though Safari rendered _just_ enough text that it might indicate there was more to see): https://nprescott.com/public/no-scroll-bars.png
In this specific case it is probably obvious enough that hey maybe I need to try scrolling randomly to find "baccalaureate" but the particular form that drove me to capture the above was littered with similar cases where it wasn't at all obvious. More than anything though the invisible scrollbars just meant I had to second guess every single form I ever submitted.
Ok, I haven’t thought of this inline case since I haven’t seen it in a while. But to be honest I’m not sure I would have noticed the scroll bars if those were full width elements. Personally I’d prefer some other visual indicator at the bottom of a cut off element or page.
A modern smartphone has a much higher screen resolution than a typical desktop PC of the 90s. Yet you can't spare the few pixels needed for a scroll indicator, while the page content itself is full of useless whitespace like it often is?
I routinely need to do this using interfaces that aren't driven by a mouse. On my phone, for instance, where despite having inertial scrolling, it's strain inducing to repeatedly flick through pages with large quantities of content.
I can dislike overuse of white space and scroll bars at the same time. Also I like my phones to be as small as possible, not the size of a baking tray.
I’m not an Apple user on desktop, but even there I have scroll bars disabled everywhere including the IDE. Why use the space for something I never use.
And btw, I’m not saying it should be like this for everyone. From my perspective this should be configurable. Same as I wish apps and sites would offer a dense mode toggle to reduce white space.
It makes sense on mobile, it doesn't really make very much sense on desktop. At least there's an option to make them always visible. One of the first things I do when I get on an apple machine. Along with turning off all the autocorrect junk in textedit.
> It is usually clear enough that there is more to see below the fold.
I feel like the big argument here is that it is often not clear. Maybe a scroll bar "wastes" too much space, but watching mobile device users you can sort of see there needs to be some sort of system-wide scroll indicator. A lot of mobile users have nervous habits/tics of randomly scrolling every screen of every application they use. It doesn't waste a lot of time in a day, but it makes everyone look nervous or mentally ill and it's a bunch of papercuts better interface design could solve.
When Microsoft briefly flirted most directly with hidden scrollbars by default in Windows 8 their design guidelines required that grids never align perfectly to available viewport so that stuff always "peaked out" if there was something to scroll into view. A lot of people found that aesthetically displeasing for whatever reasons, but it certainly was a good scroll indicator. Even mobile devices could use something to avoid the "random swipe syndrome" that seems to plague mobile users.
> When Microsoft briefly flirted most directly with hidden scrollbars by default in Windows 8 their design guidelines required that grids never align perfectly to available viewport so that stuff always "peaked out" if there was something to scroll into view.
And that was good advice. Because whenever there's a thread on Apple and scrollbars on the Internet, I can find someone telling a story of how they never knew some app was scrollable, because the grid aligned perfectly with their iPhone/iPad viewport.
I guess it depends quite a bit on usage types. I don’t use many web apps, don’t visit many product and landing pages. Probably 90% of the sites I visit on mobile are news sites, blogs, recipes and similar, all of which usually fulfill the basic assumption that there is more content than what fits on screen. Top of my head I can’t actually remember having recently visited a site that had all there is on a single screen.
Phones and tablets have had a extremely negative effect on desktop GUIs. Just an example: AMD's website. I wanted to price and compare some desktop CPUs and their site is just atrocious. Huge, pretty spreads with zero information on them that you must scroll past. Twelve different marketing takes, each a huge chip that begs to distract...please click ME...on something or other irrelevant...and finally...finally at the bottom, a cartoonish over-sized table with a massive font.
Strangely enough, a lot of computer hardware websites are really horrible.
Ever gone to motherboard/RAM/etc manufacturer websites? Unmitigated disaster. Is this the same ram stick model? Why are there 3 million variations and no explanation of the distinction between them? How is it that there are 5 different filters and none of them seem to filter for the thing you’re looking for? Why does the marketing page take me to a different sub domain for this one product, but not for the other? On and on.
Designers call this a "false bottom" and try to make sure it doesn't happen, but it can be a near impossible task to make sure there's never one given variation in screen sizes / orientations.
Often you see websites with hero areas and panels that fill the full screen on standard desktop sizes, but attentive teams will make sure something is cut off so that the page looks unfinished and people scroll.
For what it's worth, I've also seen data that Apple users are more likely to scroll by default simply because they've made the scrolling experience so pleasant.
Yup, that's possible too. Probably a bit of both TBH.
Though again, from user testing sessions I've observed, I'd say that "not knowing whether or not content is scrollable" can be a universal problem, not limited just to Mac users.
One of Apple's core design philosophies is that when something is not in active use it should be hidden from view. Through this perspective it makes sense that they would hide scrollbars when the user isn't doing any scrolling.
That being said, I would rather have it always be visible because I'm not that much of a minimalist and I still think that non active information has value at a glance.
Edit: This doesn't mean Apple tries to hide everything that isn't in active use. It's a design convention, not a law.
I miss this behavior all the time when using Windows. I recently discovered that Windows actually has a setting to enable this behavior, but it's up to each individual application to check for the setting and implement the behavior. And as far as I can tell, literally no one does.
On a similar note, I get annoyed with how Excel won't show the highlighted row or cell when moving focus to another window. Sometimes I want to look at that specific row while using another program, and it's hard to find the data that was just highlighted when that disappears. I don't for the life of me understand what problem that behavior is supposed to help with.
I want the table to scroll horizontally so that the map can stay visible.
The two complaints I've had from users about this are:
1. They didn't realize it could be scrolled, so they missed out on the extra columns. I'm probably going to fix this using some kind of visual indication - maybe a shadow.
2. Mouse users have to scroll to the very bottom of the page in order to find the horizontal scrollbar. I'm looking at adding a duplicate scrollbar at the top of the table using the trick implemented by https://github.com/avianey/jqDoubleScroll/blob/master/jquery... (re-implemented not to depend on jQuery)
If you can, try to cut off the content as the visual indication at the edge of the page. You might try bumping up the contrast of the headings as well so that the cutoff is more obvious.
Not quite as complex a dataset, but the NHL + MLB have done a reasonable job of making their various stats & standings tables responsive:
https://www.nhl.com/standings/2020/division
Sorry but horizontal scrolling is just abhorrent UX for everything but maps, and I'd argue that that interaction is not actually perceived as scrolling by the user.
I'm glad that it hidden scroll bars make that more inconvenient,
feels like a win win situation to me.
As for your datasette use case:
Why not have explicit buttons to move between colums at a time, or the ability to toggle and reorder individual columns, so that they become more wieldable, or both.
If you have both horizontal and vertical scrolling, gesture-scrolling systems (like touchscreen and two-finger trackpad) behave weirdly. It either wobbles back-and-forth, or it locks to a particular direction.
Also, mice with physical scroll wheels can only scroll in one direction.
Compare the scrolling behaviour of OPs example table, with the scrolling behaviour of Excel or Numbers.
With OPs version you get immediately lost in the grid because the headers don't float along with the scrolled view, which makes this best case useless, worst case harmful (e.g. confusing important columns).
If you have thousands of columns you're not going to do manual eyeballing of values anyways, you'll lose track because scrolling is not accurate enough, so you might as well represent rows as documents which densely shows the fields/columns and values, and which can then in turn be shown in a vertically scrollable list.
The problem you describe isn't horizontal scrolling, it's scrolling as implemented by OP. It also applies to vertical scrolling, as the headers don't follow around.
I'm planning on adding the ability to toggle columns, but the whole goal of Datasette is that you can point it at ANY data - including some crazy government data CSV file with a hundred columns in it - and start exploring it without having to do any customization first.
You can have pretty much as many things as you want in one dimension, but the other dimension has to be limited in turn, or people will get lost and confused.
If your users start to hold a piece of paper up to their screen to not loose their row you've failed as an UX designer.
Give them the ability to make sub-selections, and to reorder data. And compress the rest into interdependent interactive charts where selecting a data point in one, highlights the corresponding values in the others.
That's awesome that your suppositions work for your use case. But they are not universal truths.
Try comparing five Medicaid plans, in a method that is easy for people with an eighth-grade reading level to understand, that will also pass the scrutiny of three different government agencies.
Sub-selections, reordering data, and all the other things you list won't matter a whit.
I'm in Firefox on Windows and would not have noticed that the table is scrollable either.
The horizontal scrollbar is way down below row 100 (about 6 pages of vertical scrolling to get there), and since column sorting is set at the top you don't go down to the bottom of the table unless you're looking at it thinking "I wonder what dam has the 100th largest capacity?"
Maybe different for someone taking a serious look through the data, but for anyone getting a glanced impression off of it they're going to sort by X and look at the top 10-20 rows.
As for the Mac people with no visible scrollbars, I don't know if there's a fix. Maybe you just rely on 95% of them being on trackpads where they're much more likely to notice a horizontal scrolling table than people with scroll wheels.
I wish we had some standard but more compact UI affordance to indicate scrollable content without needing a scrollbar. Like an ellipsis for truncated text. But touchscreen phones have definitely driven user behavior to "just try scrolling everything, if it doesn't scroll that's how you know it's not scrollable."
Not great for scroll wheels, and I'm sure there are plenty of phone users who have issues with this too. Not everybody is constantly touching everything to see if it works. But the only thing you'll see is sometimes there's a line of text that's only half visible. And with the amount of whitespace everywhere lately, that's not even likely to happen most of the time.
If you constrain your table with respect to the viewport, with overflow scroll, your horizontal scrollbar will show at the bottom of the screen if enabled (similar to how google sheets does it). Either way having a shadow to indicate more content this way on the right side would indicate to touch users and scollbar hiders that this element can be scrolled. If you pin your header row in place your table will become a lot more scannable.
Even with scroll bars always visible, as they are on my system (Firefox on macOS 10.15), I can't see that there's a horizontal scrollbar until I go down several pages.
If I change from "Always" to "When scrolling", the only way I can make the horizontal scrollbar appear is to start scrolling by pressing my mouse wheel to the side. It's otherwise utterly invisible, even when I hover over that region. Edit: the table doesn't initially have focus, but if I click it, I can also use the arrow keys.
When I wrote a page to display a very information-dense table, I tried very hard to avoid horizontal scrolling. I abbreviated, used icons and colors, and allowed wrapping. You're implementing a general purpose utility that can have arbitrarily many columns, so you can't really control that.
I'm not much of a web dev, so I may be off base, but I think part of the problem is that you're mixing a page-wide vertical scrollbar with a div- or table-specific horizontal scrollbar.
Can you paginate your tables to fit the window height?
That would obviously fit less data by default, but allows people to see the scroll bar and you can just offer an option to increase the number of rows (at the bottom of the table)
Maybe, something like `max-height: 90vh;` helps. (So, without interfering too much with the browser UI, a user should eventually see the entire viewport of the table. It even provides some extra space for a textual hint, which is obviously, how we do usability nowadays.) Moreover, the table head may be a classic use case for fixed or even sticky positioning inside a scrollable element.
re #1 that's one of my pet peeves on ios, but for vertical scrolling components.
Because there's no affordance that says "there's more scrollable content down there!", I never know if the last item that I can see is actually the last item or if there's more. If the height of the scroll area is nearly exactly a multiple of the height of each item in the area, these can hide all over the place, so I end up trying to swipe up on tons of things that aren't actually scrollable.
ios has all kinds of affordances for accessibility ("button shapes" and "on/off labels" as two examples that actually change how apps look), why not one more toggle that makes standard scrollable views end with a fade-out effect or something if there's more stuff in that direction?
1. Consider using Excel style sticky headers and sticky left columns to give users column and row headings. Here’s a proof of concept: https://output.jsbin.com/qiqozum (sorry my example isn’t larger than viewport like your example, but it can be made to work with a large scrollable body on a smaller screen).
2. You can make the second scrollbar position:sticky so that it sticks to the bottom of the viewport (I think your idea of putting it at top would confuse users)
3. You can measure the “thickness” T of a scrollbar by looking at the difference between content height and container height for a div with a forced scrollbar at bottom.
4. I think you can get the second scrollbar to hide using CSS when the real scrollbar comes into view. You could use a container div with overflow:hidden and a negative margin at the bottom of height T, and put the scrollable div within, with an extra margin at the bottom of of it if T. Put the position:sticky scrollbar inside the container div. Edit: IGNORE this bullet point - it’s only relevant for small scrollable area, not whole body viewport.
5. You now run into the problem where the user doesn’t know they can scroll vertically to see more. Perhaps add an extra 20px of transparency below the sticky scrollbar, perhaps a little dark opacity, so user can see scrollbar is floating and that there is more data.
Things to watch for:
1. NEVER use the fake scrollbar as a 100% replacement for a real scrollbar... they are janky (JavaScript cannot provide smooth scrolling) and there are many many ways for the scrollbar to not show properly and screw the user over.
2. Scrollbar thicknesses can change dynamically. You can detect this as an event, but it isn’t necessarily simple.
3. Page zooming can cause troubles. Pinch zooming can cause troubles - needs lots of testing on touch laptops or Windows tablets.
4. Only Chrome, Safari and Firefox engines. Microsoft Edge before Chrome transplant is your enemy - nothing will work right. You can get everything above to work well in IE11 including jankfree sticky column and row headers, by using JavaScript, but it takes tricks that are not well known.
5. Test in Safari on Mac by switching on scrollbars in preferences.
6. Take a lot of care to ensure the second scrollbar never occludes the real scrollbar (bottom or right) - there is a risk the user can no longer scroll.
7. I haven’t had much experience using a fake scrollbar to scroll the viewport as needed by your example. I am fairly sure I am missing a couple of difficulties because my experience is mostly for scrollable elements rather than a scrollable body, and I know there are some troublesome differences between the two.
8. Keeping the scrollbar synchronised to content is not always as easy as you might think. Use non-blocking onscroll event so jank is not introduced.
On my iPhone, not only do I have invisible scrollbars, but when they do show up, it's in the middle of the screen. And not always exactly at the same spot.
Someone said it's a bug, and goes away if you don't use 'reduce motion' under accessibility settings. But it's been around for several versions of iOS, so I don't know that it's a priority to fix.
Plus, is not "reduce motion" a very common setting to get away from useless animations? I recall using that setting to make the whole iPhone feel snappier.
I don't mind disappearing scrollbars, but Gmail on iOS takes it even further, and completely eliminates the scrollbar! This is indeed rather annoying.
And even worse, amazingly annoyingly, long-ish emails are not downloaded in their entierty by default! So you get part way through the email, and then have to tap "view entire email" to get the rest. And extra super annoying, the rest is not cached, so if you're without internet, too bad for you -- you don't get to read the entire message.
So far, I've always ended up coming back to Gmail for one reason or another -- while there are lots of little UI annoyances, it always gets the fundamentals right, which is better than my experience w/ 3rd party clients so far. Fingers crossed for this one. :-)
I also tried various 3rd party clients and would always end up going back to gmail's app. My dad kept recommending Spark to me and I just didn't have the energy to try another 3rd party app. I eventually gave in and tried Spark and I haven't gone back to Gmail since. That was about 18 months ago.
I love it. I just dislike how when I plug in an old-school mouse to my Mac an old-school scrollbar returns. The scrollbar only needs to be visible during a scroll event.
Visible scrollbars are unnecessary with proper design.
Eg. Reading the Twitter thread I intuitively know that I can scroll to see more because the last line of text is partially cut off by the edge of the screen. This signals to my brain that there is more, and I can scroll.
Whereas as I type in this text box as I reply the box is sized perfectly to 6 lines of text and I don’t have the same visual accordance informing me that content exists outside the viewport.
Exactly, I find it funny how now I have to download additional 1MB of Javascript for a webpage to show me the place in the document I am at the moment.
It's a lot of work to get the elements on the page to always space themselves such that one element is cut off. I think it's pretty impressive if a site bothers with that, but it's hard to call that "proper design".
This is only true if your particular mix of vertical resolution, aspect ratio, zoom, and content visibly show a cut off element. Invisible scrollbars should not be the default.
I don't like the hidden scroll bars either, so I've set "Show scroll bars" to "Always". If I understand correctly, Simon wants his web site to display a scroll bar on a system that isn't so configured. I'm not sure why--does it mess with the viewport width or something?
Edit: simonw just posted more information on this thread.
On mobile it makes sense, since the user has much more direct control over the scrollable area and the area is quite small.
The thing is, apple has been trying to converge the desktop and mobile UI into one single interface, and this is a prime example where this approach fails.
A visible scrollbar is extremely important to the desktop user, but not really so to the mobile one.
To be honest, nobody needs text unless they read it. Moreover, all these different typefaces, sizes and tints are a serious threat to any corporate UI identity and professional UX. Especially, as texts from various sources are fighting for the display and user attention. Let's get rid of visible text, unless you hover or swipe on it! Much cleaner UIs and smooth UX are guaranteed, which is exactly what customers want!
(Disclaimer: this is obviously in the sarcasm category, but is still meant to provide viable food for a thought experiment.)
They are converging their desktop ui towards their mobile ui.
The scrollbar is learned functionality; if users know it, they know what to do. If you haven't seen it before, then it is not obvious and it is not an obvious way to interact compared to a scroll gesture on trackpad or a touch screen.
Apple can see that more user will be coming that are used to mobile os'es than users experienced in classic desktop ui's.
> Apple can see that more user will be coming that are used to mobile os'es than users experienced in classic desktop ui's.
Modeling a desktop UI off of a mobile UI is just as dumb as modeling a mobile UI off a desktop UI. Each platform has totally different constraints and strengths, shoehorning one into the other will always be a failure.
Also part of a trend to add more “hover and wait” elements pointlessly:
- Can’t see scrollbar without hovering and waiting.
- Can’t see folder drag icon in window title without hovering and waiting.
- Can’t interact with notifications without hovering and waiting.
- Can’t see full menu of options on Full Screen window button without hovering and waiting.
Dear Apple: this is a fundamentally backwards design trend that creates major productivity hits. These were arbitrary changes that made things harder to use. In short: there was no “design” happening here, it was just “fiddling”.
> Can’t see full menu of options on Full Screen window button without hovering and waiting.
So it's not just me! Correct me if I'm wrong but I don't think this is used anywhere else in macOS. It's obviously a button and it opens a normal vanilla macOS list-menu (don't know the term they use) without you clicking it. The hidden folder icon for dragging is a bit annoying, but this infuriates me for some reason.
I liked the Mavericks fullscreen button the most, but even the click-and-hold solution was better than this crap.
The worst part is when some app implements that poorly, so you end up with a scrollbar that disappears while you're still hovered, causing your click to fall through and hit something you didn't want.
Or you're trying to select text from the last line of a text file but the horizontal scrollbar keeps popping up and getting in the way. This absurdity happens in the default text editor in Mint Cinnamon.
One of my pet peeves with the HTML title attribute is that it requires “hover and wait” to view the content as a tooltip. MDN [1] links to a wonderful guide [2] on how to avoid tooltips whenever possible and make them accessible if needed. For some reason, the accessible tooltips require custom implementation and is not the default browser behavior for the title attribute.
A weird but possibly relevant question: is this more of a factor for mouse users on macOS?
e.g, I use a magic trackpad... it feels very natural to swipe on anything and expect it to move a little (or a lot). You lose this interaction with a mouse, or it's not as simple to do.
I actually very much dislike scrollbars after being trackpad only for some years.
Worst thing about this, for me is at least 5 times a year since this started I have to go back to our engineers and tell them that users can't tell whats scrollable because on windows all the scrollbars are hidden, or appearing in weird places where they shouldn't because the dev team who only tests in Chrome on Mac can't see any scrollbars anyway.
Visible scrollbars should be a user preference. If you're on macOS, it's easy to set: System Preferences > General > Show scroll bars. Done. Set it once and move on with your life.
If you're a web site, you need to respect the user's preference. Don't play tricks trying to jam a visible scroll bar onto your site if the user has it off in their preferences. Also please don't try to use tricks to hide a scroll bar if the user has it on in preferences.
Can't these web sites just focus on their content and not always be worrying about what magical 50 lines of JavaScript they can use to override the user all the time? Maybe I like to browse in a really long 4096 x 256 pixel window, and use a pink background color and Comic Sans font. Deal with it!
I think it's pretty clear at this point that OS X is meant to be interacted with using a trackpad, and that anything else is getting a second-class experience.
+1 for this. One of the most frustrating parts of MacOS is how miserable it is to use it with a mouse. Turning off mouse acceleration needs to get a settings menu entry, stat.
One thing I agree on wrt removing scroll bars is that scroll bars make a lot less sense now for articles, because you'll think you're 20% through an article, only for it to turn out that 60% of the article is ads and other crap. In that sense, it feels as if they've lost some of their meaning.
For articles, it might be interesting to do something to inform the user that not all content is alike, possibly through metadata.
490 comments
[ 45.7 ms ] story [ 855 ms ] threadWhat often causes this is some HTML element overflowing by one pixel, but no one saw it during the QA process because all the webdevs were using Macs, which have invisible scrollbars by default. I always enable visible scrollbars on my dev computers specifically so I can catch problems like this.
"Hate" is a strong work, but humble users like myself also dislike you (or rather, your choices).
1. Hover over an element that enables the visibility of something else
2. Trigger an overflow and cause scrollbar to show up
3. Scrollbar shifts the original element
4. Original element is no longer being hovered so new element gets hidden
5. Scrollbar disappears and original element moves back
6. Repeat
[0] https://i.imgur.com/dS5acnx.gifv The gif doesn't have enough fps. IRL the animation is about 10x faster than that so there's no time to click the username.
Reported it but the support agent couldn't reproduce ¯\_(ツ)_/¯
We've gone through a long period of "Works on my Safari".
Why the need for an extra device? There's a setting in the System Preferences > General > Show scroll bars: "Always".
Or it will automatically show scroll bars if you're using a mouse.
If you're a web developer and your target audience is not limited to only macOS and mobile, you should have the Show scroll bars set to Always. I'm using a mbp for most of my web dev career and I've always caught these bugs during development.
What I do agree is that Windows or Linux makes this setting a default, which makes it more obvious. While testing on different devices is always better, it's not necessary to catch these trivial problems.
defeated dev noises
Now I'm not sure if you blame the OS maker (Apple/Microsoft), the browser makers (Apple again, Google, Microsoft, Mozilla), or the web developers of the websites. But regardless of who accepts or deserves the blame, it is hard to dispute that the experience is far worse with scrollbars forced always on. It shouldn't be this way, but as of right now, it ruins the experience.
Like you mentioned, some websites simply don't work or don't work how they should. You end up with scrollbars on elements that aren't even form fields because of weird hacks that web developers are doing with overflow elements or strange CSS anomalies.
I'm not sure how you address this issue. But it is definitely more deeply seeded than the OS level, and I think web developers (a lot of us here) should take some of the responsibility for ruining scrollbars. It is our company's apps and sites that drove Apple to this decision.
I suspect that one of the reasons for hidden scrollbars by default is because the teams at Apple have tried to use the web with "always-on" scrollbars and didn't want their users experiencing the web that way. Remember also that defaults are important. Most people will never change the setting, even if it was obnoxious. Most Mac users are going to use the default setting, regardless of whether the default is always on, always off, or auto. Whatever the default is, that will be how most people use the computer and just accept it as "how it works". So Apple has to choose the best option (between three bad choices) that will best best for MOST people. Not everyone, but MOST.
I also think that MOST people are used to automatic scroll bars at this point. Again, my Mom is the person that will never change a setting. So she will always use whatever the default is. And she is used to automatic scrollbars. She knows that if she wants to see the scrollbars, she has to do a micro-flick of the scrollwheel (or her finger on mobile/touch) to reveal the scrollbar. It requires minimal-to-no effort and most people have grown accustomed to it now. Is it flawless? No. But I do think it is the best option MOST of the time.
You have scrollbars everywhere precisely because they're hidden from developers who don't even know about them, and it seems ~all developers use Macs for web dev those days.
We've had this happen numerous times in the past. As a result, I had to make it mandatory that devs on my team and the QA team have scrollbars always on on their Macs. They get frustrated that I require it but it catches so many minor layout issues that it's worth it.
Maybe I don't understand completely what he is referring to, but on mobile I certainly prefer having a bit more space than a always visible scrollbar. It is usually clear enough that there is more to see below the fold.
Scrollbars used to be sometimes useful to get a sense of how much content there is. But everyone using infinite scroll broke that, not apple.
I very much disagree. On all of the mobile devices I've used it has never been clear that scrolling is a thing unless there's a scrollbar.
I didn't even know you could "pull down" menus or pull up some app status thing until I called support and asked how to close background apps or turn off wifi
There is no excuse for it on desktop except blindly imitating mobile UIs.
Or using a PDA-like UI with miniaturized desktop UI elements, but that style requires a stylus to use which is why the simpler, chunkier smartphone touch UIs became popular in the first place.
I'm not a mouse user so this issue caught me completely off guard!
I'm curious about what tools you use to manage mouseless workflow?
For the browser I use the Vimium plugin to navigate and only need to use the mouse in the case the site is badly made and e.g. a button is not a button but some styled div element with an event listener attached.
Most of the other daily needs like functions of the tiling window manager (AwesomeWM), Editors (IDEA, VS Code, emacs), terminals, etc. come out of the box with good keyboard control support.
In addition to that, most mice have a scroll wheel.
I don't think I understand the issue you're referring to.
The Windows and macOS apps I tried zoomed or scrolled vertically with Ctrl.
On some mice they do, and it's a really useful feature. But it's fairly niche and mostly on the more expensive mice. I would feel pretty confident betting that over 99% of Windows users don't have a tiltable scroll wheel.
In web browsers this is referred to as "auto scrolling" and it works automatically on Windows but on Linux I have to install a chrome extension to get that feature in Chrome at least. It works in Firefox.
Not sure if it works on my Mac because I gave up trying to use third-party peripherals on Macs since they never work well.
I certainly cannot say the same for scrolling with a trackpad. If I happen to brush two fingers on the thing, things start scrolling when I don't want them to.
Hiding relevant information from the user is a bad idea. The computer is a tool that the user employs to accomplish a task. Do not hide tools from people who need to use the tools.
A computer is a tool. It's not a design statement. It is not a canvas on which you paint. It is a toolbox full of tools a user needs to do work. Treat it as such, please.
The funny thing is, if scroll bars never existed and someone tried to add them they would be considered terrible UI.
You need to hit a tiny target with your mouse, that gets smaller and smaller in proportion to the size of the document. Missing the scroll bar, and hitting the gutter moves you to a random page with no simple way to get back.
On small documents a small mouse movement scrolls by a small amount, but on a large document a small mouse movement can scroll way too fast.
On some systems clicking the gutter is "page down". On others it is "move to this relative point in the document".
With a mouse wheel or track pad the scroll speed is consistent no matter the size of the document, and the user can scroll faster or slower very easily. And you have a huge target - the entire document. There is no chance of paging when you mean to scroll. Scrollbars are obsolete.
On Windows, and in every Linux GUI framework I can think of, clicking anywhere above or below the scroll thumb scrolls exactly one screen page up or down, for the very reason you've described. To navigate to an arbitrary spot, you're supposed to drag the thumb.
I love my scrollbars, and I want them always visible. I don't use the mouse often, and I certainly don't want to have to use the mouse just to see context.
Chrome implemented even worse nasties on GNU/Linux with scrollbars though, including forcing a snapback to original position if you drag the scrollbar but happen to move the mouse a few pixels too far left or right of the scrollbar [1]. Apparently that's how Microsoft Windows users do things. So now we have to as well.
[1] https://bugs.chromium.org/p/chromium/issues/detail?id=377191
The secondary job of the scrollbar is to tell you where you are in relation to the content, and how much of it there is, relative to what you see on your screen. Both of these roles are best fulfilled when the indicator is persistently visible.
You could make scrollbars transparent to clicks and they'd do 90% of their job already. The ability to click on them to quickly jump to a desired location is a useful bonus, even if not frequently used these days. What matters is that they're visible.
Do you have evidence for this, even if it's anecdotal? To be honest a statement like that sounds like a hypothesis and a reasonable hypothesis, but I am not joking when I say when we did user testing, it was absolutely never the case that someone actually didn't scroll because they didn't see a scroll bar. Now we didn't test specifically for that but I'd be surprised if a controlled experiment testing that hypothesis concluded that people will actually just never bother to scroll unless they explicitly see a scrollbar.
Scrolling is actually a very natural thing that people do without the need to visibly see a scrollbar. Using a dedicated scroll button or gesture is a very cheap and consequence free action to perform. I'd be very surprised if you have data that contradicts this and indicates that an actual human being would simply not scroll because the only visual cue/indicator that people use is a scrollbar, rather than the multitude of context specific information available to indicate whether more content is available.
- Almost every discussion on Apple and scrollbars I see on-line has someone telling a story of how they didn't realize some app was scrollable, because its visual grid happened to align perfectly with viewport size of their iPhone/iPad;
- I got caught myself by this a few times on PC, where the design of the page looked complete, scollbars were hidden, and I didn't realize I could scroll down;
- I've been the person to tell some confused non-technical people that they could scroll down to see more, because the layout of a webpage did not make this obvious, and without a scrollbar visible, they were just puzzled why there's so little information on the screen.
Plural of anecdote is not data, so I'm open to the possibility I may have just had peculiar luck, but I think it's fair to assign a low prior to that.
> that an actual human being would simply not scroll because the only visual cue/indicator that people use is a scrollbar, rather than the multitude of context specific information available to indicate whether more content is available
What these cases had in common was that there was insufficient context-specific information available to make it apparent the content is scrollable (and - anecdotally, again - in my experience, non-tech-savvy people don't have the nervous tick of just randomly scrolling on the wheel, to check if it does something). Sometimes, the only such contextual information was the feeling you got after reading everything on the page, that something is missing. But if your users have to reach that point to figure out they can try scrolling, the UI failed at its job, and wasted them a minute of their lives.
It is faster than scrolling with the wheel
But when a site tries infinite scroll, it is often broken
Or use the scrollbar to jump to the top, you are forcing me to do extra things
Yes I am a vocal opponent of hidden UI elements. Shame on me, I guess.
If I were the innocent target of a firing squad, I would be a vocal opponent of the actions being taken against me there, too. "It's just a vocal minority. Fire."
Being a vocal minority doesn't make me wrong. But it probably means I have thought about the problem space more than those who are not. At that point you put the A/B testing aside and you talk to the people and listen to them, and see if they are informed or if they are crackpots.
If you aren't scrolling, then the scrollbar provides little information in proportion to the amount of space it consumes. If you are scrolling, then the scrollbar is very important and it gets displayed. If you want to know where in a document you are, our experience is that users tend to already have a good idea of where in a document they are based on multiple cues including the fact that they are likely the ones who positioned themselves to that point in the document already. In the very rare moments where they need that cue, they can move their mouse (scrollbar appears when the mouse moves).
As screens are a finite resource, by minimizing information that isn't necessary towards accomplishing a goal, we can maximize the information that is.
I would genuinely love to see a UI where valuable information is unavailable without scrolling because of the presence of a scroll bar. I am not being sarcastic or snarky. I would love to see that UI
[1] is an image comparing a list of trades with and without the scrollbar. The scrollbar literally hides an entire column's worth of data.
[2] is an image of a typical trader's layout so you can get a sense of the context and how the size of a scrollbar can add up.
As you can see, given that the scrollbar consumes around 20% of the width of a trade list, by eliminating it a user can can add one additional trade window for every 5 that are open. That's literally money in their pocket and our pocket.
Some additional info is that the Windows 10 titlebar is too tall and those minimize/maximize buttons are enormous, so we redesigned a new title bar that is not only slimmer, but allows us to make better use of it while still retaining the functionality. I am not going to declare that we are the masters of UX and everything we decide is absolutely correct, but we do really care about these issues because they make a measurable impact on our performance.
[1] https://imgur.com/kB02KUl
[2] https://imgur.com/ePnQhnd
That said, almost all of those windows in the "typical usage" image have space enough to display everything fully AND show a scrollbar. And I would imagine a trader would shrink those windows enough to allow another window or two in the row, and be very happy without a scrollbar.
On another topic, I have an AutoHotKey script that, with some modification, may be of extreme use to those people. Felt appropriate to inform you of it.
https://gist.github.com/naikrovek/b13a77d169de0e192bcf48fec0...
If you don't know AHK then it's difficult to pull apart what it's doing. AHK syntax is weird, toe anyway.
People's preferences about usability can change over the course of familiarizing themselves with your software, things that are friendly when they first use the software may end up being useless as they become more familiar with it. We obviously don't want to make our software hostile to new users, but for our purpose we want to ensure that people who are more familiar with our software have the optimal experience.
The scrollbar doesn't just let you know that you can scroll, it shows you the size of the content in relation to the size of your viewing window, and it shows you the location of the viewing window within the overall content, and it does this at a glance. A scrollbar is an extremely efficient use of screen space.
Don't hide things from the user that provide the user with information.
The reason we hide the scrollbars is because scrollbars are not the one and only consideration that we make when designing a page, information density also matters and so we have to weigh these options together and conduct user testing to see what the impact of various design decisions are. Certainly there is a vocal minority of people who are dead set that scrollbars must always be visible, and we can respect their choice, but we also have to optimize our software for the majority of our users who would rather see more content.
The balance we went with was if you want to see the scrollbar, you need to perform an action that engages it, which is moving your mouse over the scrollable area, or performing a scroll operation. We have other things too that we have to consider, like until the mouse approaches the scrollbar it appears very thin and when the mouse is within a certain distance it expands to allow it to moved.
Will every single user like this approach? No of course not. But based on our user testing, it optimized for metrics that we care about.
The problem with revealing scrollbars it that they then obscure whatever was shown there before. (Or reflow the page, dear god). If you use that space, well you can't see it when you're scrolling; and if you don't use that space why not show the scrollbar the whole time?
We already hide 99.9999% of things that provide the user with information. Thank god, because the real maxim should be don't overload the user with information.
We try to show only the things that show the most useful information at the times it's needed, and hide them the rest of the time.
Scroll bars used to be necessary primarily for scrolling. Once people switched to scroll wheels and trackpad gliding this the primary use case disappeared.
Knowing where in the document you are isn't usually that useful. You started at the top and already know how much you've read. For the infrequent moments where you really do need to know, just jiggle the scroll and you can see it instantly.
It's a very elegant solution. It really does work.
> We try to show only the things that show the most useful information at the times it's needed, and hide them the rest of the time.
Surely there's a middle ground between showing a user everything and showing a user practically nothing and then trying to guess what they might need.
Software that tries to figure out what I want instead of just letting me just pick what I want is, frankly, annoying. How does software handle a situation where an option I might want is hidden because I have a use case that the developers didn't anticipate?
> Knowing where in the document you are isn't usually that useful.
Disagree. If I'm reading a document on the Internet, I probably don't know how long it is before I start reading it (and those ridiculous tags that say an article is XX minutes long are almost always so wrong that they're useless for me). If I'm scrolling with my scroll wheel, I'm probably not paying attention to the scroll bar. If I've been reading said document for fifteen minutes and I want to know approximately how far into the document I've read (and if I have any hope of finishing it up in the time before I have to do something else) the position of the box in the scroll bar is a great way for me estimate that at a glance. Jiggling the page or moving the mouse all the way to the side or doing some other incantation to make it appear completely breaks my flow reading the document and can make me easily lose my place (especially if I'm in the middle of a paragraph). A quick glance at the scroll bar also breaks the flow, but not quite as badly, and it's a lot easier to resume where I left off.
Yes, that's what software already does. And a scroll bar that appears but only when you jiggle the scroll is that middle ground.
> Software that tries to figure out what I want instead of just letting me just pick what I want is, frankly, annoying.
That's literally all software though.
Otherwise every screen would be covered in every possible option, and would be unusable.
But in conjunction, they absolutely do. You can't look at anything in isolation.
Which is why, in UX, you have to be rigorous in removing everything that isn't absolutely necessary.
It's physically tiring to scroll through a long document with multiple finger drags on the surface of the mouse. And knowing how much there is left to look at is clearly useful.
Worse, the default MacOS micro-scroll bars are too narrow even when they're visible. I assume this is to encourage track pad and finger-drag use - but that's not a user-centric decision.
Mice with scroll wheels existed then, and were common, at least in Alaska, where I was at the time.
It's only in the last few years of computers with mouse-driven GUIs that suddenly the scrollbar is intolerable for UX people. Suddenly users are saying that a scrollbar is unacceptable? Really? Or are the survey questions worded to produce the results desired by the designer? The latter seems much more likely. (It's hard NOT to bias survey questions, if you don't know how easy it is to bias them accidentally.)
I can't believe that is the honest truth of the situation. I worked with my fair share of excellent designers, and I can't recall any of them ever groaning about any browser chrome, like a scroll bar, ever, with the notable exception of the viewable page space consumed by browser plugins which each added their own toolbar to the browser UI itself. What a horrid period of time that was...
If it is such an urgent need, where was that need 20 years ago? The web hasn't changed THAT MUCH. Scroll bars were an accepted thing; unquestioned. But today they're too intrusive? Or they consume too much space? What the?
I understand that the science of interactivity has matured, so I'm willing to admit that we know more about how users behave than we did 20 years ago. I still don't believe that any UI would ever benefit from hidden scroll bars over always visible scroll bars.
But how do I know I need to start scrolling to see the scrollbar, when I can't see the scrollbar so I know there is anything to scroll to?
This is especially useful if you made your modern front page super fancy so that the above-the-fold space looks like a tidy complete package. Or if you have a sub-panel containing a list of something.
I make web sites for students. I've frequently found that, if it's necessary to have a scrollable list of something, I need to dynamically change the height of stuff so that the list starts with some list item partially peeking out over the fold, otherwise half the users with hidden scrollbars won't know to scroll and find more stuff.
I suppose this has made "above the fold" more valuable, or perhaps mobile devices show so little content that everyone has to scroll ...
I just realized that the "mobile-first" web has made using a computer with large screens a super-power. I have 17m pixels (and many more if I wasn't using Retina-like resolutions to get crisper text) - others I work with are stuck at barely over a million pixels.
Seriously, that's another thing I hate about infiniscroll: if I come to a giant list where I know I've looked at the top 10% of, it makes it impossible to jump down approximately 10%, or otherwise to a region I know I haven't explored.
Edit: And, of course, if you do want to go n% down, there's no choice but to page down, wait, page down, wait, page down ...
However, that one I blame the browsers for. I distinctly remember the back button working differently, where it would reliably take you to the exact state of the previous page, just as if you had opened the current link a new tab and closed it, but it changed at some point, and most sites do something that destroys the state when you back into them as well.
What industry are you in where you can ignore 10% of the user base?
For our application we have many tables of data that are narrow in size, maybe two or three columns, and having a scrollbar constantly displayed takes up valuable screen real estate that could be used to display more tables.
It's also a fallacy to think that because we optimize our application for 90% of users, that we end up losing 10% of them. People are not static automatons that make binary decisions about using your product strictly on the basis of how scrollbars function. People are fairly flexible and can adapt, get used to new things, and balance many different factors against one another when making choices.
This goes against the rule of thumb where if 5% of attendees are vegetarian you serve vegetarian and omnivores will adjust to it, while if you served the omnivore option the vegetarians would likely go hungry (more likely go find something else nearby if possible).
I've never heard this before. 5% sounds incredibly low, I would think it would need to be 25% before omnivores would be okay with it.
If somewhere isn't serving meat, I don't want to be served there.
That is a very important principle in UI design and we certainly adhere to it and take it into account, but this has nothing to do with that. We're talking about scrollbars here, and unfortunately the people who prefer to always see a scrollbar are not going to ditch your product strictly on that one single criteria.
[1] https://medium.com/incerto/the-most-intolerant-wins-the-dict...
Note also the distinction between "prefers scrollbar" and "touched the scrollbar at all". At most 10% of users prefer scroll bar; the parent only claimed that 10% of users touched the scroll bar at all.
Not "every" time. I work in healthcare. I don't have the luxury of leaving ANYONE out.
Healthcare is certainly a "fun" space, but catering to scrollbar purists isn't usually part of the gig. :)
It's not clear to me that those two things are neatly separated. I have a ~25th percentile visual memory - my brain does very poorly having to process and retain images, but text is very easy. I can, eventually, navigate visually, but at a much higher energy cost than the average. Is my affinity for text a preference or an accessibility concern?
Try telling the sales people that their bonus checks will be cut 10% because you can't be bothered to build for every customer.
This is a very underappreciated point.
Those scrollwheels you described are definitely part of the problem too, though. I had the pleasure of using one like that and a few minutes were enough to generate the urge to throw it in the bin. It's already hard enough to find a decent mouse without worrying about the scrollwheel.
It appears, at least from all the evidence I can gather, that trackballs without a scroll option is the exception.
https://www.newegg.ca/p/pl?d=trackball&Order=1
https://www.bestbuy.com/site/searchpage.jsp?_dyncharset=UTF-...
https://www.newegg.com/p/pl?d=trackball&Order=1
I wonder whether this was tested with the average modern website or a well-designed UI. Or on a desktop, which usually does not come with a touchpad.
The main reason I rarely drag the scrollbar is that it's become a total pain: they're generally hard to hit with the mouse because they tend to get narrower every year(Fitts' law anyone?), they auto-hide or even when not hidden have such a low contrast that I have a hard time making out the edges, or they're simply in a half-broken state thanks to convoluted web design. All those things basically go against the whole purpose of scrollbars.
Please don't mess with the scrollbar and scrolling in general. It provides no benefit and breaks UX in ways nobody can predict. With so many operating systems, user interfaces and browser plugins it's often trivial to make many websites near unusable because they were built by people who think they know better than some boring standard.
After we give this to a bunch of our users, for our specific business, we split users up according to a bunch of criteria including people who performed the task the fastest in terms of time, performed it using the fewest actions, in terms of precision, sometimes eye tracking is important, and a host of things.
Now the next thing I will admit people will find distasteful but for our industry it matters a lot... we then design the software according to how the "optimal" users accomplished the task. Sometimes it's possible most users accomplished the task one way, but the optimal users accomplished it another way... in many cases we will then design our software for the optimal users even if they are a minority.
For this case we were predominantly interested in information density and the scrollbar was taking up about 10% of the width of a table (on 96 DPI the scrollbar is I think around 15px and the window as a whole is about 150px). The optimal users, and the vast majority of users overall tasked to find data in a table as well as the ones who did best in terms of keeping track of changing numbers, don't move the mouse over a scrollbar and use it directly. I don't have all the details off the top of my head although I could ask the UX researcher about it if there's a lot of interest, but I seem to recall that the small number of users who did drag the scrollbar are "clumsier" and slower.
Since I work in quantitative finance, it's better for our business to design our software to appeal to the so called optimal user and try to find ways to get the majority of our users to adopt more optimal usage patterns. That means if we can get our users to prefer using more precise ways of using our software through familiarity, training, or other means, we'd rather get them to do that instead of trying to design our software to accommodate usage patterns that they are currently comfortable with, but that we measure as being suboptimal.
None of this is perfect, we don't always get it right, but we do care about it and put quite a lot of effort into it and have seen a lot of substantive improvements in our users that translate to substantial earnings for our trading firm.
How did you determine this difference? I use a mouse with my laptop, because work only gives us laptops.
No it doesn't - and why would it? Any reasonable modern mouse has a scroll-wheel or touch area so you don't need to click the scrollbar.
Not only does it not show the scroll bar by default, but (not sure if this is a Chrome or Mac issue), when it does show up during a scroll operation, you have to have great reflexes to grab it with a click if you want to.
By the way, vSphere is part of the problem. It's one of those web applications that try very hard to look like a desktop application. It doesn't use the standard HTML behavior of building a page that scrolls. It clips everything at the borders of the screen. Ironically that reduced functionality probably cost them a lot of developer time.
At least on Catalina, the default (System Preferences > General) is still set to “automatically based on mouse or trackpad”
In which case, in order to submit the form you would scroll down until you see the button, and would therefore have scrolled past all the fields?
It sounds like the form itself had a lot of problems. Either there wasn't enough contrast on the fields to know they existed, or the submit button was located above fields that needed to be saved, which is an inexcusable interface design choice. Also one could argue that there should be form validation as well to alert the user of critical unfilled form fields. Then again, we can't rule out simple user error.
I don't know, it just sounds like a lot of stuff was going on here. I doubt a scroll bar on the side of the webpage would be the critical element that solved all of the problems. I have no problem criticizing Apple, but its hard to put the responsibility of the entire internets' usability problems solely onto their shoulders.
In this specific case it is probably obvious enough that hey maybe I need to try scrolling randomly to find "baccalaureate" but the particular form that drove me to capture the above was littered with similar cases where it wasn't at all obvious. More than anything though the invisible scrollbars just meant I had to second guess every single form I ever submitted.
The scrollbar is the only way to scrub/seek through a large page's content efficiently.
On iOS the scrollbar is only invisible when you aren’t scrolling.
Whether it’s visible or not, you can drag it with directly with your finger just like dragging desktop scrollbar. No need to induce any strain.
The same is true on the Mac.
This entire issue is only about the default at rest behavior.
Scrollsbars are visible during scrolling, and if you want them the whole time, that’s a setting.
I’m not an Apple user on desktop, but even there I have scroll bars disabled everywhere including the IDE. Why use the space for something I never use.
And btw, I’m not saying it should be like this for everyone. From my perspective this should be configurable. Same as I wish apps and sites would offer a dense mode toggle to reduce white space.
I feel like the big argument here is that it is often not clear. Maybe a scroll bar "wastes" too much space, but watching mobile device users you can sort of see there needs to be some sort of system-wide scroll indicator. A lot of mobile users have nervous habits/tics of randomly scrolling every screen of every application they use. It doesn't waste a lot of time in a day, but it makes everyone look nervous or mentally ill and it's a bunch of papercuts better interface design could solve.
When Microsoft briefly flirted most directly with hidden scrollbars by default in Windows 8 their design guidelines required that grids never align perfectly to available viewport so that stuff always "peaked out" if there was something to scroll into view. A lot of people found that aesthetically displeasing for whatever reasons, but it certainly was a good scroll indicator. Even mobile devices could use something to avoid the "random swipe syndrome" that seems to plague mobile users.
And that was good advice. Because whenever there's a thread on Apple and scrollbars on the Internet, I can find someone telling a story of how they never knew some app was scrollable, because the grid aligned perfectly with their iPhone/iPad viewport.
Ever gone to motherboard/RAM/etc manufacturer websites? Unmitigated disaster. Is this the same ram stick model? Why are there 3 million variations and no explanation of the distinction between them? How is it that there are 5 different filters and none of them seem to filter for the thing you’re looking for? Why does the marketing page take me to a different sub domain for this one product, but not for the other? On and on.
I think it is important to signal there is more content. And how much more to the end of the page
Often you see websites with hero areas and panels that fill the full screen on standard desktop sizes, but attentive teams will make sure something is cut off so that the page looks unfinished and people scroll.
For what it's worth, I've also seen data that Apple users are more likely to scroll by default simply because they've made the scrolling experience so pleasant.
Though again, from user testing sessions I've observed, I'd say that "not knowing whether or not content is scrollable" can be a universal problem, not limited just to Mac users.
That being said, I would rather have it always be visible because I'm not that much of a minimalist and I still think that non active information has value at a glance.
Edit: This doesn't mean Apple tries to hide everything that isn't in active use. It's a design convention, not a law.
Yet another unintuitive undiscovered feature because Apple decided to change 20 years of best practices
With scrollbars, auto hiding /re-appearing isn’t even something I notice happening.
does the mouse cursor disappear when not being moved? does the text in a terminal disappear when not being edited?
seems like dual function elements where one function is indication should be exempt...
My mouse isn't over it or clicking on it but it's still being actively used.
I want the table to scroll horizontally so that the map can stay visible.
The two complaints I've had from users about this are:
1. They didn't realize it could be scrolled, so they missed out on the extra columns. I'm probably going to fix this using some kind of visual indication - maybe a shadow.
2. Mouse users have to scroll to the very bottom of the page in order to find the horizontal scrollbar. I'm looking at adding a duplicate scrollbar at the top of the table using the trick implemented by https://github.com/avianey/jqDoubleScroll/blob/master/jquery... (re-implemented not to depend on jQuery)
It's really frustrating how tricky this is.
Not quite as complex a dataset, but the NHL + MLB have done a reasonable job of making their various stats & standings tables responsive: https://www.nhl.com/standings/2020/division
I'm glad that it hidden scroll bars make that more inconvenient, feels like a win win situation to me.
As for your datasette use case: Why not have explicit buttons to move between colums at a time, or the ability to toggle and reorder individual columns, so that they become more wieldable, or both.
Why? It seems to get the job done in spreadsheets.
Also, mice with physical scroll wheels can only scroll in one direction.
With OPs version you get immediately lost in the grid because the headers don't float along with the scrolled view, which makes this best case useless, worst case harmful (e.g. confusing important columns).
If you have thousands of columns you're not going to do manual eyeballing of values anyways, you'll lose track because scrolling is not accurate enough, so you might as well represent rows as documents which densely shows the fields/columns and values, and which can then in turn be shown in a vertically scrollable list.
Having the headers float makes 2 dimensional scrolling usable but not great.
Why do we store data as rows and columns? To be able to quickly compare them. Is that possible with 50 columns? No.
Sounds like you've never had to build anything where people want to compare a set of three or more choices.
You can have pretty much as many things as you want in one dimension, but the other dimension has to be limited in turn, or people will get lost and confused.
If your users start to hold a piece of paper up to their screen to not loose their row you've failed as an UX designer.
Give them the ability to make sub-selections, and to reorder data. And compress the rest into interdependent interactive charts where selecting a data point in one, highlights the corresponding values in the others.
Try comparing five Medicaid plans, in a method that is easy for people with an eighth-grade reading level to understand, that will also pass the scrutiny of three different government agencies.
Sub-selections, reordering data, and all the other things you list won't matter a whit.
That MIGHT actually pass government scrutiny, but if anything that's a good metric for how bad government approval is of a metric.
Also we're not talking about 5 columns here, but about 50.
Good luck comparing 50 medicaid plans by continuously scrolling back and forth between them.
How does that not immediately evoke a cartoon-ish ridiculous scene in your mind?!
The horizontal scrollbar is way down below row 100 (about 6 pages of vertical scrolling to get there), and since column sorting is set at the top you don't go down to the bottom of the table unless you're looking at it thinking "I wonder what dam has the 100th largest capacity?"
Maybe different for someone taking a serious look through the data, but for anyone getting a glanced impression off of it they're going to sort by X and look at the top 10-20 rows.
No license, but looks simple enough to implement.
As for the Mac people with no visible scrollbars, I don't know if there's a fix. Maybe you just rely on 95% of them being on trackpads where they're much more likely to notice a horizontal scrolling table than people with scroll wheels.
I wish we had some standard but more compact UI affordance to indicate scrollable content without needing a scrollbar. Like an ellipsis for truncated text. But touchscreen phones have definitely driven user behavior to "just try scrolling everything, if it doesn't scroll that's how you know it's not scrollable."
Not great for scroll wheels, and I'm sure there are plenty of phone users who have issues with this too. Not everybody is constantly touching everything to see if it works. But the only thing you'll see is sometimes there's a line of text that's only half visible. And with the amount of whitespace everywhere lately, that's not even likely to happen most of the time.
https://www.livecoinwatch.com
Sideways scrolling is so rare on the web that it might just be easiest to add a little affordable at the right of the screen.
It is called a scrollbar
Sideways scrolling is common. That might be because I need large fonts and so zoom pages
If I change from "Always" to "When scrolling", the only way I can make the horizontal scrollbar appear is to start scrolling by pressing my mouse wheel to the side. It's otherwise utterly invisible, even when I hover over that region. Edit: the table doesn't initially have focus, but if I click it, I can also use the arrow keys.
When I wrote a page to display a very information-dense table, I tried very hard to avoid horizontal scrolling. I abbreviated, used icons and colors, and allowed wrapping. You're implementing a general purpose utility that can have arbitrarily many columns, so you can't really control that.
I'm not much of a web dev, so I may be off base, but I think part of the problem is that you're mixing a page-wide vertical scrollbar with a div- or table-specific horizontal scrollbar.
That would obviously fit less data by default, but allows people to see the scroll bar and you can just offer an option to increase the number of rows (at the bottom of the table)
Because there's no affordance that says "there's more scrollable content down there!", I never know if the last item that I can see is actually the last item or if there's more. If the height of the scroll area is nearly exactly a multiple of the height of each item in the area, these can hide all over the place, so I end up trying to swipe up on tons of things that aren't actually scrollable.
ios has all kinds of affordances for accessibility ("button shapes" and "on/off labels" as two examples that actually change how apps look), why not one more toggle that makes standard scrollable views end with a fade-out effect or something if there's more stuff in that direction?
1. Consider using Excel style sticky headers and sticky left columns to give users column and row headings. Here’s a proof of concept: https://output.jsbin.com/qiqozum (sorry my example isn’t larger than viewport like your example, but it can be made to work with a large scrollable body on a smaller screen).
2. You can make the second scrollbar position:sticky so that it sticks to the bottom of the viewport (I think your idea of putting it at top would confuse users)
3. You can measure the “thickness” T of a scrollbar by looking at the difference between content height and container height for a div with a forced scrollbar at bottom.
4. I think you can get the second scrollbar to hide using CSS when the real scrollbar comes into view. You could use a container div with overflow:hidden and a negative margin at the bottom of height T, and put the scrollable div within, with an extra margin at the bottom of of it if T. Put the position:sticky scrollbar inside the container div. Edit: IGNORE this bullet point - it’s only relevant for small scrollable area, not whole body viewport.
5. You now run into the problem where the user doesn’t know they can scroll vertically to see more. Perhaps add an extra 20px of transparency below the sticky scrollbar, perhaps a little dark opacity, so user can see scrollbar is floating and that there is more data.
Things to watch for:
1. NEVER use the fake scrollbar as a 100% replacement for a real scrollbar... they are janky (JavaScript cannot provide smooth scrolling) and there are many many ways for the scrollbar to not show properly and screw the user over.
2. Scrollbar thicknesses can change dynamically. You can detect this as an event, but it isn’t necessarily simple.
3. Page zooming can cause troubles. Pinch zooming can cause troubles - needs lots of testing on touch laptops or Windows tablets.
4. Only Chrome, Safari and Firefox engines. Microsoft Edge before Chrome transplant is your enemy - nothing will work right. You can get everything above to work well in IE11 including jankfree sticky column and row headers, by using JavaScript, but it takes tricks that are not well known.
5. Test in Safari on Mac by switching on scrollbars in preferences.
6. Take a lot of care to ensure the second scrollbar never occludes the real scrollbar (bottom or right) - there is a risk the user can no longer scroll.
7. I haven’t had much experience using a fake scrollbar to scroll the viewport as needed by your example. I am fairly sure I am missing a couple of difficulties because my experience is mostly for scrollable elements rather than a scrollable body, and I know there are some troublesome differences between the two.
8. Keeping the scrollbar synchronised to content is not always as easy as you might think. Use non-blocking onscroll event so jank is not introduced.
Someone said it's a bug, and goes away if you don't use 'reduce motion' under accessibility settings. But it's been around for several versions of iOS, so I don't know that it's a priority to fix.
But if you just want scrollbars on macOS for your own use, that’s trivial. System Preferences / General / Show scroll bars / Always.
I don't mind disappearing scrollbars, but Gmail on iOS takes it even further, and completely eliminates the scrollbar! This is indeed rather annoying.
And even worse, amazingly annoyingly, long-ish emails are not downloaded in their entierty by default! So you get part way through the email, and then have to tap "view entire email" to get the rest. And extra super annoying, the rest is not cached, so if you're without internet, too bad for you -- you don't get to read the entire message.
So far, I've always ended up coming back to Gmail for one reason or another -- while there are lots of little UI annoyances, it always gets the fundamentals right, which is better than my experience w/ 3rd party clients so far. Fingers crossed for this one. :-)
On iOS, I definitely prefer no scrollbars, but I don't think there's a way to always display them.
Eg. Reading the Twitter thread I intuitively know that I can scroll to see more because the last line of text is partially cut off by the edge of the screen. This signals to my brain that there is more, and I can scroll.
Whereas as I type in this text box as I reply the box is sized perfectly to 6 lines of text and I don’t have the same visual accordance informing me that content exists outside the viewport.
Edit: simonw just posted more information on this thread.
(Disclaimer: this is obviously in the sarcasm category, but is still meant to provide viable food for a thought experiment.)
I did.
The scrollbar is learned functionality; if users know it, they know what to do. If you haven't seen it before, then it is not obvious and it is not an obvious way to interact compared to a scroll gesture on trackpad or a touch screen.
Apple can see that more user will be coming that are used to mobile os'es than users experienced in classic desktop ui's.
Apple is correct in hiding the scrollbar.
Modeling a desktop UI off of a mobile UI is just as dumb as modeling a mobile UI off a desktop UI. Each platform has totally different constraints and strengths, shoehorning one into the other will always be a failure.
- Can’t see scrollbar without hovering and waiting.
- Can’t see folder drag icon in window title without hovering and waiting.
- Can’t interact with notifications without hovering and waiting.
- Can’t see full menu of options on Full Screen window button without hovering and waiting.
Dear Apple: this is a fundamentally backwards design trend that creates major productivity hits. These were arbitrary changes that made things harder to use. In short: there was no “design” happening here, it was just “fiddling”.
I think we should create some rules:
- if there's an animation/wait time to get to a UI, it's crap
- if users have to be fast to get to a UI, it's crap
So it's not just me! Correct me if I'm wrong but I don't think this is used anywhere else in macOS. It's obviously a button and it opens a normal vanilla macOS list-menu (don't know the term they use) without you clicking it. The hidden folder icon for dragging is a bit annoying, but this infuriates me for some reason.
I liked the Mavericks fullscreen button the most, but even the click-and-hold solution was better than this crap.
[1]: https://developer.mozilla.org/docs/Web/HTML/Global_attribute...
[2]: https://inclusive-components.design/tooltips-toggletips/
e.g, I use a magic trackpad... it feels very natural to swipe on anything and expect it to move a little (or a lot). You lose this interaction with a mouse, or it's not as simple to do.
I actually very much dislike scrollbars after being trackpad only for some years.
If you're a web site, you need to respect the user's preference. Don't play tricks trying to jam a visible scroll bar onto your site if the user has it off in their preferences. Also please don't try to use tricks to hide a scroll bar if the user has it on in preferences.
Can't these web sites just focus on their content and not always be worrying about what magical 50 lines of JavaScript they can use to override the user all the time? Maybe I like to browse in a really long 4096 x 256 pixel window, and use a pink background color and Comic Sans font. Deal with it!
For articles, it might be interesting to do something to inform the user that not all content is alike, possibly through metadata.