Apple has gone to extraordinary lengths to make scroll bars invisible

https://twitter.com/simonw/status/1369708900216270849

by edward • 5 years ago

590 476 5 years ago

FreakyT• 5 years ago

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.

erwinh• 5 years ago

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

CharlesW• 5 years ago

QA & usability engineers must hate me :p

"Hate" is a strong work, but humble users like myself also dislike you (or rather, your choices).

distalx• 5 years ago

How? can you please share some example?

ShroudedNight5• 5 years ago

This comes across as smugly prideful at being explicitly user-hostile. What's the upside here?

deft• 5 years ago

Why? Stop making bad software and laughing about how it screws people over.

trinovantes• 5 years ago

I've seen so many broken web components do this:

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

squaresmile• 5 years ago

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 ¯\_(ツ)_/¯

scabbycakes• 5 years ago

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.

FireBeyond2• 5 years ago

Remember all the "Made for / Works Best in Internet Explorer" buttons from the early 90s/early 00s?

We've gone through a long period of "Works on my Safari".

markogresak• 5 years ago

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.

preommr• 5 years ago

* { overflow: hidden }

defeated dev noises

brockwhittaker• 5 years ago

but actually this is the worst possible solution to this and causes tons of issues.

jacurtis4• 5 years ago

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.

jakub_g• 5 years ago

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.

apocalyptic0n3• 5 years ago

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.

mrtranscendence• 5 years ago

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.

_Microft• 5 years ago

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.

smoe7• 5 years ago

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.

inetknght4• 5 years ago

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

vidanay• 5 years ago

Modern UI is a seething cauldron of non-intuitiveness and undiscoverability.

simonw8• 5 years ago

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!

neolog• 5 years ago

I'm not a mouse user

I'm curious about what tools you use to manage mouseless workflow?

rhn_mk14• 5 years ago

There's nothing stopping the mouse from dragging exactly like with the finger: click, move, release.

In addition to that, most mice have a scroll wheel.

I don't think I understand the issue you're referring to.

Kranar15• 5 years ago

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.

zozbot234• 5 years ago

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.

brundolf• 5 years ago

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).

epriest• 5 years ago

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.

pilif• 5 years ago

Has macOS changed the default setting for scroll bars? In the past, whenever a mouse was connected, it would switch to always showing scroll bars.

At least on Catalina, the default (System Preferences > General) is still set to “automatically based on mouse or trackpad”

antihero• 5 years ago

Mouse users on macOS have scrollbars visible by default.

root6702• 5 years ago

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.

jacurtis4• 5 years ago

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.

nprescott• 5 years ago

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.

smoe7• 5 years ago

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.

userbinator2• 5 years ago

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?

zepto7• 5 years ago

The scrollbar is useless and distracting if you aren’t using a mouse.

smoe7• 5 years ago

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.

stjohnswarts5• 5 years ago

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.

WorldMaker• 5 years ago

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.

TeMPOraL11• 5 years ago

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.

smoe7• 5 years ago

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.

titzer2• 5 years ago

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.

FridgeSeal• 5 years ago

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.

hieu2292• 5 years ago

I remember working on a panel, allows users to choose an element. Without visible scrollbar, it'd sometimes look like there is no more items.

I think it is important to signal there is more content. And how much more to the end of the page

ar_turnbull3• 5 years ago

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.

trefoiled• 5 years ago

Or maybe they're scrolling by default because they're used to not knowing whether or not content is scrollable?

hieu2292• 5 years ago

Interesting. Would you suggest to have the scrollbar visible?

BitwiseFool2• 5 years ago

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.

wk_end• 5 years ago

I wonder how long it'll be before the iconic global menu bar is gone from macOS when not in use?

inetknght4• 5 years ago

Browsers on mobile devices already do this and it's infuriating

tomku• 5 years ago

That's already an option you can set, since at least El Cap.

prionassembly• 5 years ago

This was possible back in 10.5 and 10.6 already.

FigmentEngine• 5 years ago

i don't have a mac - but a scroll bar does two things, allow scrolling and show scroll position.

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...

robin_reala2• 5 years ago

On macOS the convention is for the mouse cursor to disappear when you start typing.

godshatter2• 5 years ago

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.

inetknght4• 5 years ago

when something is not in active use it should be hidden from view

My mouse isn't over it or clicking on it but it's still being actively used.

Descon• 5 years ago

This explains why I can never find anything in XCode...

BitwiseFool2• 5 years ago

I'm glad I'm not the only one. I feel like I'm always jockeying tabs and panes looking for buttons to click. I waste so much time doing this.

heavyset_go2• 5 years ago

It also explains why discoverability on iOS is incredibly poor for those who haven't used it often or before.

pseudalopex6• 5 years ago

I'd call it a trend not a core philosophy.

simonw8• 5 years ago

Some more context on this: the actual problem I'm trying to solve here is displaying "wide" tables in Datasette - for example this one: https://global-power-plants.datasettes.com/global-power-plan...

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.

ar_turnbull3• 5 years ago

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

j-pb5• 5 years ago

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.

rhn_mk14• 5 years ago

horizontal scrolling is just abhorrent UX for everything but maps

Why? It seems to get the job done in spreadsheets.

simonw8• 5 years ago

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.

reaperducer6• 5 years ago

Sorry but horizontal scrolling is just abhorrent UX for everything but maps

Sounds like you've never had to build anything where people want to compare a set of three or more choices.

wlesieutre2• 5 years ago

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.

simonw8• 5 years ago

Yeah that's the exact problem I'm trying to solve.

synthmeat• 5 years ago

WRT #1, we've used a shadow and users seem to like it.

https://www.livecoinwatch.com

simonw8• 5 years ago

That's a really nice example, thanks!

pseudalopex6• 5 years ago

It's very subtle. I wouldn't have known what it was.

elliottkember• 5 years ago

I think you might need a visual hint. A little flag or button that says “more data this way”.

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.

pasc18782• 5 years ago

Oddly enough there is a commonly used standard UI widget that shows exactly this.

It is called a scrollbar

Sideways scrolling is common. That might be because I need large fonts and so zoom pages

SloopJon2• 5 years ago

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.

dbetteridge• 5 years ago

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)

widforss• 5 years ago

Using the horizontal scroll wheel on my mouse is oddly slow on your site. Do you know why that is?

masswerk2• 5 years ago

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.

zo1• 5 years ago

Mouse users can't even scroll to the bottom of the page because the entire-width map hijacks the scrolling when you scroll over it.

philsnow• 5 years ago

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?

robocat• 5 years ago

If you decide to use a second scrollbar:

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.

el_don_almighty• 5 years ago

give back my scroll bars just like my 'esc' key!!!

rootusrootus• 5 years ago

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.

llarsson• 5 years ago

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.

robin_reala2• 5 years ago

Obviously if you’re trying to solve this for your consuming users then we’re down to website hacks.

But if you just want scrollbars on macOS for your own use, that’s trivial. System Preferences / General / Show scroll bars / Always.

heavyset_go2• 5 years ago

They're also an accessibility nightmare.

my123• 5 years ago

It can be disabled freely by the user in System Preferences -> General on macOS.

dilap2• 5 years ago

Well, while we're griping...

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.

tokamak-teapot2• 5 years ago

I recommend Spark as mail client on iOS. It doesn’t do anything crazy with its UI so I find it easy to use.

dilap2• 5 years ago

Thanks! I'll give it a try.

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. :-)

whalesalad• 5 years 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.

ncw96• 5 years ago

Go to System Preferences -> General and change “Show scroll bars” to “When scrolling” to get the behavior you want.

smaccona• 5 years ago

On macOS, I have scrollbars always show. The setting is in System Preferences -> General -> Show scroll bars -> "Always".

On iOS, I definitely prefer no scrollbars, but I don't think there's a way to always display them.

josho• 5 years ago

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.

jpalomaki• 5 years ago

Scrollbar also tells how much hidden content there is.

xtracto• 5 years ago

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.

lucasmullens2• 5 years ago

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".

Hammershaft2• 5 years ago

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.

SloopJon2• 5 years ago

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.

tacker2000• 5 years ago

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.

masswerk2• 5 years ago

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.)

SavantIdiot• 5 years ago

I have a really hard time believing anyone would chose this

I did.

throwaway4good• 5 years ago

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 is correct in hiding the scrollbar.

tablespoon2• 5 years ago

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.

makecheck2• 5 years ago

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”.

efwfwef8• 5 years ago

Oh my... these macos notifications are driving me crazy, you can't just go and close them.

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

Toutouxc2• 5 years ago

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.

userbinator2• 5 years ago

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.

ectopod• 5 years ago

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.

divbzero• 5 years ago

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.

[1] https://developer.mozilla.org/docs/Web/HTML/Global_attribute...

[2] https://inclusive-components.design/tooltips-toggletips/

Klonoar• 5 years ago

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.

whywhywhywhy• 5 years ago

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.

ryandrake• 5 years ago

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!

jackson14422• 5 years ago

Websites that mess with my scrollbar preference always break scrolling since they implement their own version of scrolling for no discernible reason.

tengbretson• 5 years ago

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.

smoldesu• 5 years ago

+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.

disposekinetics2• 5 years ago

As someone with a hatred for touch based controls this frustrates me, but I think you're wholly correct.

kmfrk• 5 years ago

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.

jedberg• 5 years ago

After I learned of this issue a while back, I activated always on scrollbars on my Mac. It's amazing how many websites are clearly designed only by people on Macs, who don't realize all the extra scrollbars they have.

jbj• 5 years ago

my big issue with invisible scrollbars are particularly when they dont appear in small boxes and I dont realize I am passing a scrollable area

thih9• 5 years ago

This seems easy to solve; at least on MacOS: "System Preferences" -> "Show scroll bars" -> "Always".

Update: Ah, I now realise that the goal is to make sure that an app always displays scroll bars. I hope that's impossible; personally I don't mind either scrollbar setting but I do want consistency and I do want apps that respect my OS settings.

taylodl• 5 years ago

I haven't thought about scroll bars in years! I just use the two finger gesture on my trackpad to scroll. In System Preferences/General you can select Always for 'Show scroll bars' if you so desire. At least Mojave provides that option.

kemonocode• 5 years ago

I feel like designers at Apple at large with others following in tow to emulate them have been waging a silent war against the scroll bar for a while now.

Making it less and less visible until it ultimately disappears sounds reasonable when infinite scrolling (and heavens forbid, scroll hijacking) has rendered it far less useful.

gherkinnn• 5 years ago

I have a really hard time believing anyone would chose this

Speak for yourself. I love it. And it works like a charm with magic-y input devices like screens and touch pads.

It’s a bit shit with discreetly scrolling mechanisms and on OS’ that don’t do it right.

comprev• 5 years ago

First thing I do on a new mac account is enable "always on" scrollbars. They give me visual clue as to how much of the information I am reading - am I 10% down the page or 80%?

intrasight2• 5 years ago

The issue with MacOS is a lack of user choice. One reason that I gave it up 20 years back.

sbuk• 5 years ago

This changed is Mac OS X 10 years ago. You've literally been able to configure this behaviour in system Preferences ever since.

intrasight2• 5 years ago

That's good to know. With the arrival of Apple silicon, I am tempted to try again. Will probably wait for M2.

mschuster91• 5 years ago

It's not just Apple. Android is the same - good luck "catching" the scrollbar to read a long document in Chrome.

VectorLock• 5 years ago

I think the scroll bar getting smaller is a by-product of it being less prevalent as a usable control since swipe and multi touch scrolling is the fashion now.

timvdalen• 5 years ago

Is this the correct link? The text appears in this thread, which has much more context: https://twitter.com/simonw/status/1369705219110498304

passivate• 5 years ago

Can someone explain how this works? For e.g. Can an app choose to have always-visible scrollbars?

naikrovek17• 5 years ago

I really think that Windows 2000-era Windows Forms had the user experience nailed perfectly. It wasn't the prettiest UI paradigm ever, but it was the most functional and easiest to teach. Nothing was omitted, and the user was shown everything they needed to see in order to get a complete idea of the state of the application.

I don't think that efforts to hide UI elements that aren't in use is going to prove to be a good idea when we look back at today from the future.

Here's a good rule, in my mind: Don't hide UI elements from the user. End of rule. I do not care if it looks better without whatever UI element. The toolbox in my garage would look better if I could only see the tools I needed at the time I need them, and I would return that toolbox (or never buy it in the first place) because it is constantly lying to me about the state of the toolbox, which is absolutely insulting position for a toolbox designer to adopt.

makecheck2• 5 years ago

To this day I am embarrassed to discover entire options in apps I had been using for ages, that were hidden behind invisible scroll regions. I even reported a bug once because I thought a feature was removed in an update, when in reality it was just a stupid default clipping issue with no visible scrolling.

When something looks like two simple controls in a small rectangle, and you have to accidentally shuffle your trackpad over it to figure out that it will move to reveal a dozen more controls, that is a failure of design.

dimitrios1• 5 years ago

Needing that many controls to begin with is the real failure.

jonplackett• 5 years ago

We were doing one of those online escape rooms the other day and I had this problem. We couldn't figure anything out and then finally realised the invisible scroll bars were hiding the fact there was A LOT more clue!

IshKebab2• 5 years ago

This very Twitter link invisibly starts half way down the page. Took me several seconds to realise you have to scroll up to get to the start.

Another bad one is Mac's "Do not disturb" option. Good luck finding that.

kingersoll• 5 years ago

We have an FAQ dedicated to this for our users. We get so many tickets from Mac users saying options are missing from our menu. Nope they are there, Apple just decided you shouldn't know they are there.

silicon24012• 5 years ago

I agree about older Windows UI. In my opinion, the worst is the increasing abstraction of UI elements like icons. Floppy disk and folder icons may be small, but if you can see them then it's easy to relate to the real world. It's been difficult explaining modern smartphone icons to my >80yo grandma after I got her a phone, when everything is a flat and abstract symbol.

gundmc• 5 years ago

I see the same problem with elderly relatives who struggle to use technology. I am hoping that things like activity blocks on Android [1] become more streamlined and I can use those to make a simplified interface to help make it more navigable.

https://blog.google/products/android/accessibility-updates-h...

Swenrekcah• 5 years ago

I agree 100%.

Just wanted to point out that neither a floppy disk nor a Manila folder have been in public use for almost two decades. Still they survive as these icons and I hope they’ll continue on for the next 500 years.

ptsneves• 5 years ago

Do you think that the problem is your grandna is 80 year old? I am in the early thirties and cannot understand the Google Drive and Google photos icons in my phone. Even the Gmail icon is so similar to all other Google icons I actually need to think hard about what I want, to press the right one. Often I just stare at the icons for 5 seconds. It used to be obvious. Maybe I am mentally challenged :(

dkonofalski5• 5 years ago

As long as you realize that this isn't how the majority of people work, I see nothing wrong with this. The vast majority of users, though, are easily overwhelmed by excessive options, especially those that are infrequently used. It's been proven in study after study that progressive disclosure is the most discoverable paradigm. I'm not saying that Apple is getting this right (they have screwed it up several times) but seeing every option you have is rarely useful for the average user. Case in point - the Office Ribbon interface. It's terrible and somehow uses both progressive disclosure (new tabs show up in context) while also showing you ever possible option in the most non-intuitive groupings.

breakfastduck5• 5 years ago

2000 era windows forms are literally the worst UI ever. A design language where it's developers seem compelled to put a million fields and buttons on one page.

pfortuny3• 5 years ago

The basic window controls are universal and have not changed their functionality in ages.

naikrovek17• 5 years ago

I would say that the vast majority of users can adapt to anything you throw at them. Users are not delicate flowers which need to be coddled and babied.

Remember that the majority of the computer usage growth of the past 50 years was on home computers that booted to a command prompt when powered on. Certainly the earliest days, when adoption was most vulnerable and the most difficult.

Saying that users can't learn something complex or intricate is just not true, and if you look for it, you'll see that users almost always take pride in their ability to wield a complex piece of software.

I'm not saying that good design is wasted effort, mind you. I'm not saying that good UX is bad for anyone. I'm saying that a user will often (always?) opt for an option that they believe will make their lives easier, because people almost always underestimate what they are capable of.

Simplifying a UI so much that you decide to hide scrollbars is simplifying to the point that you think your users are boneheaded idiots who cannot learn and who are confused by slight movement or strange noises. It's insulting and denigrating, even if this is the outcome that UX/UI testing reveals.

systemvoltage3• 5 years ago

This is just the symptom of a larger, deeper and more insiduous problem - design education, short-term corporate targets, discipline, anti-functionalism, celebration of aesthetics, marketing overreach, lack of rigorous criticism and unwilling to convince users.

We're not going to solve it. It requires complete scrub of how we think about building excellent products with deep understanding of humans (not users). Furthermore, needs overhaul on multiple fronts since great design doesn't sell apparently according to most rebuttals. Just look at Apple.com and see how loud it all is. Developers love Stripe design, but it is overrated - full of animations, bright colors, sexy transitions and for some reason they love diagonal lines. We need to revive some people like Paul Rand and Josef Muller-Brockmann, may be get Stankowski and a few others to do marketing. We don't celebrate great design anymore. If it wasn't for Elliot Noyes, no one would ever think of IBM in the same way.

We've gotten so worse, it is appalling and we should all be ashamed.

hootbootscoot• 5 years ago

Don't forget "dark patterns" that serve deliberate goals. It's often perfectly functional for a company to force you into certain courses of action due to apparent mistakes that aren't.

core-questions2• 5 years ago

celebration of aesthetics

Yes and no. Aesthetics are always going to be critical to the consumer experience of technology; the problem is that there are difference schools of aesthetics, and presently the high-status UX school is a minimalist one that values showing as little information as possible in order to look 'easy to understand' in screenshots and at-a-glance tours.

If Windows 2000 wasn't "aesthetic" then we wouldn't have Vaporwave, after all; look how that late-90s look is glorified now. There's no shortage of people (myself included) that will still defend it as being a pinnacle of sorts, though I'd point at NeXT as being the real high water mark.

I'd call that late 90s style Modern Desktopist, where the metaphor of being a 'desk' we may have seen in some 80s Classical Desktopist has been left behind and replaced with functional, well-designed UI widgets building on years of refinement. There was a reaction to this modernism, and it came first in the form of Late 2000s Skeuomorphist UI as on iOS and in many creative applications on desktops preceding it: the 90s style being seen as too corporate, too 'suit', we ended up with skinnable apps, and apps that mimic the real world (I'm thinking of Propellerhead Reason here as the king of these). What skeuomorphism added in terms of enjoyment was lost in terms of losing all of the expected conventions of normal desktop applications: drag-n-drop, multiple select, keyboard shortcut consistency, etc.

Skeuomorphism was rejected in favour of what some call "flat" or "material" design, first in the Microsoft Metro form emulating highway signs, and then in the Google form emulating... nothing. Developer laziness, perhaps? I call this Digital Brutalism, it's at once "function over form" but at the same time missing a great deal of the "function" that the previous era had. It's fundamentally a skeuomorphic UI evolved to lose the skin and to hide most of the controls.

We're honestly all just waiting for someone to come out with a drastically more efficient UI paradigm. There's still room to make a real difference with people who use a desktop from day to day....

trilinearnz3• 5 years ago

Agreed. Steve Jobs once expounded the notion of 'discoverability' with the Macintosh UI - in particular the use of drop-down menus - which was a response to the keyboard shortcut-heavy applications of the IBM ecosystem.

A lot has changed since then. GUIs are standard, touch-based 'appliances' like the iPad are the norm, and there are fewer people for whom computing is totally new to (a big issue back in the 80s and 90s that drove efforts of approachability you saw in the Macintosh and Windows 95). Despite this, I think there's still a timeless usability lesson in that early approach. Gestures, it could be argued, are just another form of the IBM keyboard shortcut.

redwall_hp2• 5 years ago

We should dial it back to the last known good state and build from there: bash and vim, praised be thy names.

The supposition that modern UIs are based on is that they should be drop dead simple for a brand new user to pick up and use without training, but at the expense of flexibility and utility. You can't overwhelm them with options, even under menus, and you need to present large buttons for them to immediately identify and mash. Basically, Fischer-Price toys. However, you're only briefly a new user. You may be using a tool every day for months or years, so the obvious design philosophy should be focusing on efficiency (i.e. keyboard control, snappy response, advanced features) for the long term user.

phendrenad2• 5 years ago

I've been starting to think a dangerous thought - that maybe UI/UX designers aren't very good as a group. It seems like they SHOULD be, and hand-waving away an entire profession seems like a rookie mistake... but it's the only thing that makes sense at this point. Sure, there are some great designers, and they command a high price, and work for companies who's founders or leadership understand user needs instinctively (as Steve Jobs did), but I think most are just carrying forward things they learned in design school... bad ideas they learned and are repeating by rote.

kibwen• 5 years ago

How do you feel about the infamous Microsoft Office ribbon? Compared to standard 2000-era UI design it made a lot more things visible (by taking things that were "hidden" in File/Edit/etc. dropdown menus and making them into persistent toolbar buttons), but that didn't keep it from being maligned at the time.

minikites• 5 years ago

You didn't ask me, but I think the ribbon is brilliant and very effective.

chronogram• 5 years ago

I personally love that ribbon. It’s so functional. It’s like a tree-based menu.

RHSeeger• 5 years ago

They weren't "hidden" in the menus. It's always been very clear that commands live in the menus. They weren't up front and center, but you knew where they were if you wanted them. The fact that there is a menu bar makes it very clear that there's more you can do.

The ribbon design is in your face, it takes up valuable real estate, and (to this day) I still find it hard to locate the options I'm looking for. I find it to be a HUGE step down from the functionality of menus.

qayxc• 5 years ago

It's a a double-edged sword really.

On the one hand it's a much more approachable and user-friendly design (especially the preview feature), on the other hand it blocks valuable screen real-estate; this is especially an issue ever since the 16:9 trend took over the mainstream laptop and monitor markets.

The issue most users had at the time (and some still do to this day) was that they felt it unnecessary and obtrusive. Personally, I welcomed the change since the old menus weren't as discoverable and obvious to me.

Since the shortcut keys stayed compatible (I think?) and the ribbons could (and still can) be hidden by default, I never really understood the bad reception of this feature by many (old-school & power-)users.

WalterSear• 5 years ago

I hated it, and still do. The cluttered mess of icons makes it harder to find things rather than easier.

im3w1l• 5 years ago

That's now how I remember it. Before the ribbon you had a huge amount of tiny icons on toolbars, then came the ribbon and replaced with a small number of big icons. Many tools are hidden, because they are in different ribbon-tabs from the one you currently have open.

TeMPOraL11• 5 years ago

I like it when I'm using my sidearm in tablet mode, because I get big touch targets (I learned to appreciate the ribbon in Explorer in particular).

I hate it when I'm in laptop mode, or on my desktop PC. My biggest problem is that their layout is unstable - it's context-dependent, size-dependent and seems to magically change with time from one use to another.

The second thing that annoys me is that the ribbon only shows a configurable subset of actions - which means I have no easy way to tell if the feature I'm looking for does not exist, or is just not assigned to ribbon.

smegger0012• 5 years ago

that was about the time I said fuckit and went full Linux all the time were i had been duel booting previously. I hated the way MS was going and gnome looked good and got out of my way unless i wanted it to (compiz was fun to play with i miss my wobbly winds and desktop cube). of course they then did their own brain dead UI and I switched to Mate/Cinnamon for saner desktop environments

Reason077• 5 years ago

System Preferences > General > Show Scroll Bars > Always

It's right there, people!

naikrovek17• 5 years ago

That doesn't work in the browser, which is what the tweet linked by this story is discussing.

pfortuny3• 5 years ago

And the philosophy of having them off “by default “? That is the issue here.

chipotle_coyote3• 5 years ago

I'm puzzled by this, too. But I think Willison (the linked tweeter) is complaining about a web-specific manifestation of this, when a web page has a sub-section that needs to scroll independently of the larger page that it's contained within. (The list of messages in Gmail is a good example of when this is useful.) Having said that, though, I'm not actually sure under what conditions his lack of scrollbar is occurring. Personally, I've noticed this can be more of an issue on iOS devices, where sometimes the contents of a <div> are meant to be scrolled, but it's almost entirely nondiscoverable due to iOS's lack of scrollbars.

summerdown2• 5 years ago

Is there any way to do that on ios?

I first turned on my ipad, then sat for several minutes staring at a box on the screen that clearly wanted input but had no continue button. Only slowly did it dawn on me that there was a hidden scroll region that would enable it.

Flow• 5 years ago

Windows 10 in dark mode is just horrible. Overlapping windows are really hard to see where one begins and another ends.

I long for Windows 3.11/OS2 Warp style window decoration with goofy distinct colors and a menu bar in every app. These days all apps in Windows hate the menu and hides it.

bluedino• 5 years ago

Dark mode is a horrible trend that I can't wait to see go away.

keyringlight• 5 years ago

Personally I found that a general issue with windows 10 when they reduced borders down to a 1 pixel line. The invisible zone to 'grab' it with the cursor is still a bit larger, but the actual graphical representation of "this is the window" is practically nothing.

frosted-flakes4• 5 years ago

Windows 7 had the best window design. Not only did it look cool, it was very functional. I get a very strong sense of nostalgia whenever I see a screenshot from Windows 7.

fomine33• 5 years ago

When Win10 was initially released (IIRC 1507, 1509), it won't support title bar coloring. That's horrible to detect which window is foreground. At future version, they added an option to coloring title bar. I suspect that what is foreground windows is not important for touch oriented device, but it's problem for keyboard operation.

int_19h2• 5 years ago

And the funny thing is, Win32 circa 2000 was basically just well-polished IBM CUA.

pfortuny3• 5 years ago

The adoration of minimalism has become the curse of user interfaces. Design not for the user but for beauty.

Needless to say, controls of dangerous machinery stay clear, loud and accessible.

patrickthebold• 5 years ago

I got a new macbook pro for a new job. I had to use hdmi since I didn't have a usb-c to displayport adapter. I wanted to check the refresh rate. You have to hold 'option' when you click one of the radio buttons, and then you have to click a check box with some label about 'low resolution modes' to see the refresh rate option.

Litterally impossible to do without googling.

FireBeyond2• 5 years ago

Apple just doesn't care if you're not using a ProDisplay XDR.

Display Stream Compression, working on Catalina, is completely, absolutely broken on Big Sur, since beta 1, through 11.2.3.

Got a 4K 144Hz panel? Or HDR? Apple could not care less.

karaterobot• 5 years ago

I agree with a lot of what you say, but let's take a step back and acknowledge that, on the whole, desktop and mobile UI design has improved a lot in the last 20 years.

Interfaces are generally more standardized than they were back then. The type and layout hierarchies are clearer. There are better patterns (and better technologies) both for orienting and getting help when you're lost. There's better feedback from the UI when there's an error or a state change. And that's not even getting into accessibility improvements.

It's definitely not better across the board, and the MacOS scrollbars are a good example of that. But, on the whole, it's a lot better than it was, and I wouldn't want to go back and unlearn all the things we've learned in the last 20 years.

MagnumOpus2• 5 years ago

Mobile I give you -- of course that is obvious, it would be hard to get worse UI on a 1080p OLED screen that we had on a 50x100 pixel monochrome display.

Desktop, no way. Windows 2000/Office 2002 usability by beginners was head and shoulder above today's versions, even at 10x less dev effort and 100x less HD/RAM/CPU usage (yes the functionality was lesser, but the UI wasn't).

And add to that the counterfactual of 200,000 man years of development within sane UI paradigms that don't live under the pretense that every Windows PC is a touchscreen tablet, and you could have so much more!

cybrjoe• 5 years ago

| The toolbox in my garage would look better if I could only see the tools I needed at the time I need them, and I would return that toolbox

This comment has completely broken my brain. That's exactly what a toolbox with drawers does, hides tools. Until you, the user, pull a drawer out and select the tool you need. Because you probably put the tools in their place you also have a high likelihood of knowing where they are. Maybe that's the paradigm? Show everything and let the user hide?

The opposite of hiding tools in a toolbox is littering your workspace with tools that you can see, but you soon run out of real estate with any decent amount of tools.

btach2• 5 years ago

I don't quite disagree, but yet I do. A toolbox organizes your tools so you know exactly where they are (and take much less space). You may not see the tools, but each drawer may have a label (should you choose to slap one on) fully visible at any time. That they are not transparent is an effect of their material. A transparent toolbox seems like it would be more difficult to construct with the same strength and the same inexpense.

naikrovek17• 5 years ago

This is what I get for using the wrong analogy for the sake of saving myself some typing...

When I wrote this, I was thinking of my time in a maker space where all tools belonged on a wall in a specific spot. You could see, at a glance, if the tool you needed was there, and you could see at a glance if any tools were gone at the end of the day.

I would not want to keep track of tools in a common-use area without a system like this. (I've only described a portion of the entire system.)

This at-a-glance inventory system is what I meant when I said "toolbox" and there was no way for you to know that.

tonymet• 5 years ago

I agree. Designers are favoring "looks nice" over usability. It takes multiple taps to even show the UI, then taps to manipulate it. With tap-failures, you're talking 5-6 taps to get work done on the device.

Overall UI design has regressed heavily since the 90s. It's clumsy, counter intuitive, un-responsive and high-latency.

The latency alone drives me bonkers. My smart tv literally takes 5 seconds between tapping the remote and feedback on the UI

titzer2• 5 years ago

I'm still a fan of drop-down file menus. Actions laid out (roughly) hierarchically, by theme, written in a language I already speak? Context menus when you could right click on a thing and do stuff to it? We'll get back to those things eventually.

lordlimecat• 5 years ago

If someone were to invent a toolbox that could only show the tools you needed, I think they would end up with more money than Apple.

jml7c52• 5 years ago

The unstated caveat is that it sometimes fails to show tools you need.

hakfoo2• 5 years ago

I seem to recall using a system in the 90s/00s where the menu bar was dynamic-- based on where your cursor landed, it changed.

I think it might have been the Andrew system - https://www.cs.cmu.edu/~AUIS/ - but given it hasn't been touched since 1997 judging by the datestamps, I'm guessing it won't be an easy apt-get to experiment with.

jjav• 5 years ago

The trend to value aesthetics over all else (particularly functionality) is very unfortunate and leads to the current crop of software that is mostly useless for anything other than the very linear basic use case of a beginner.

I get to sit in many user testing sessions and while well-intentioned, the environment of observing someone who has never seen the system before do a few very basic tasks naturally selects for a design that optimizes for that use case. But in real life use, nobody gets to have less than an hour of experience with the system for more than one hour of their life. But now every subsequent hour spent using the system is hobbled by the limitations of that first hour.

Good thing for me that I mostly just still use emacs, mutt and zsh, or I'd go crazy.

This infantilization of users can be seen in industries far removed from software even. Look at sailboats from the 70s and 80s, mostly designed for usability at sea. Visit a boat show today and new boats are optimized for the initial 20 minutes someone spends touring them at the show, making them mostly terrible for life at sea.

dragonsky67• 5 years ago

Interesting you talk about sail boats, RV's caravans and a lot of cars suffer the same focus on the initial impression. What they don't realise is that a lot of real users a put off by the bling, as they realise it's just an added cost down the line when it either breaks or needs specialist cleaning.

benibela2• 5 years ago

I just changed my linux desktop theme to Reactionary (Windows 9x like)

One big reasons was to get better scrollbars. They used to have buttons to scroll a single line/item, but the modern scrollbars do not have it anymore, very annoying. It got the buttons back in all programs, except for Firefox.

lucasmullens2• 5 years ago

You can use ::-webkit-scrollbar and ::-webkit-scrollbar-thumb to force the scrollbar to be visible. It seems to be the easiest way to make sure the user knows a div is scrollable, even if it is fairly hacky.

wait_a_minute2• 5 years ago

Does anyone really want to see scrollbars even when we’ll be able to scroll with our eyes and even mind?

tbihl• 5 years ago

Yes. The scroll bar is primarily for showing progress.

wait_a_minute2• 5 years ago

good argument, I accept it.

samatman3• 5 years ago

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

I strongly prefer the invisible scroll bars in about 95% of cases.

I'm either using a trackpad or a scroll wheel on my trackball. In the former case, it's trivially easy to jog the screen up and down or sideways, to see if there's missing content. In the latter case, yeah, horizontal scrolling is challenging, but I'm going to be on a widescreen monitor, so my response is to fill more of the window with the content (quick shout-out to Moom, which makes this easy).

It very occasionally happens that I won't notice that there's more content available, and scroll bars would help with that. But I'd rather optimize for the usual case, and get the cleaner lines and extra real estate which go with it.

efwfwef8• 5 years ago

Good luck scrolling to the bottom of a very long page. And then going back up.

smnscu• 5 years ago

You can always click on the scroll bars -- invisible doesn't mean they don't exist, they simply go out of the way when they're not needed (i.e. most of the time / when not scrolling). You can do that on iOS and Android as well, tap and hold on the scroll bar to quickly scroll through an entire document.

breakfastduck5• 5 years ago

How exactly is that an issue?

Toutouxc2• 5 years ago

This is actually a non-issue (or at least a minor issue for extremely long pages) on a Mac, because macOS has system-wide kinetic scrolling and all Apple input devices use touch sensitive surfaces for scrolling.

Not saying you're wrong, it's certainly annoying on mobile devices (compounded by the narrow screens and responsive content).

jackson14422• 5 years ago

It's trivially easy. Just put your mouse at the edge and move the scroll wheel. You can then click it. There is also an option in System Preferences to change this behavior and always show the scroll bars. Since this motion is more intuitive on a trackpad than on a mouse, scrollbars always show when using a mouse by default.

https://i.imgur.com/LTg81eW.png

samatman3• 5 years ago

Ah you're right, just yesterday I sprained my pinky hitting command-up and command-down!

You got me on that one!

nikisweeting2• 5 years ago

Scroll has acceleration on macOS touchpads, doing it with two fingers is just as fast if not faster than dragging a scrollbar with the mouse.

Kalium• 5 years ago

In the former case, it's trivially easy to jog the screen up and down or sideways, to see if there's missing content

"I jog my screen around to see if anything moves" is a clear sign of two things:

One, that you're looking to see if there's missing content.

Two, that you do not know if there is missing content.

Missing content should be made evident by a display system designed to make it easy to access content. If your display system is hiding content from you and not showing you this, then is it really doing a good job of helping you access content?

Plus, consider how many users won't do the trivially easy thing. At scale, I would lay good odds that it's a disturbingly high number.

efwfwef8• 5 years ago

I really hate it too, I don't understand why they do this... Even using Chrome on mac I can't scroll properly if I'm not fast enough to catch the scrollbar after a light scroll.

nikisweeting2• 5 years ago

Why not just set "Always show scrollbars" in System Preferences if you don't like it that way?

efwfwef8• 5 years ago

MVP!

disposekinetics2• 5 years ago

I think another part of this problem is that websites are aloud to change scroll bar colors via CSS. The scrollbar is a UI element, not a part of the page and it adds to the problem.

squarefoot• 5 years ago

Not just Apple. Windows 8 and beyond horrors aside, I have this friend of mine to whom I already installed three Linux machines in the past (1 x XFCE and 2 x Mate) who was 100% satisfied with them. Having brought a new faster laptop for reinstall, I wanted to give him something prettier which wouldn't slow down. Turned out he came back frustrated because of the asinine way KDE Plasma desktop menus behave, literally hiding things from view based on mouse position and not following a click, which is against every rule of good UI programming.

Please stop following bad designs just because they're new and/or come from big names; Windows XP UX still beats everything out there both in usability and intuitiveness. If users have to read a manual even to do the most basic things with a new user interface, I call it a failure.

quacked• 5 years ago

When I was 8-10, I absolutely sailed through new programs in Windows XP. Now that I'm 25, every new thing I want to do in a "new" app (Discord, Slack, Facebook, Zoom, etc.) is precluded by "Google, how do I..."

There's so little conceptual integrity in modern applications. I can't stand it.

jacurtis4• 5 years ago

Since you mentioned Discord and Slack together here, I have to point out that one of the worst design choices a company can make is hide CRITICAL interaction elements behind a hover state.

Slack and Discord are both incredibly guilty of this. Lots of important things that you do everyday is only visible to the user if they are hovering over a certain element on the page. For some of us this isn't as big of a deal. For me, I tend to move my mouse around as I investigate a UI and try to figure out how to do something.

But when I watch my mom interact with a website, she works entirely differently. For example if she wanted to edit a message, she wouldn't naturally hover over the message and see the gray pencil appear on the far right of the message in a light gray bubble, and then think to click on the pencil. She is looking for something that says "edit". And she will stop, lean back, take her hand off the mouse, and start looking around with her eyes to the various parts of the app. She will NEVER find the edit button. Even if she is hovering she would probably see the pencil and not have it register that the light gray pencil means, "edit".

Furthermore, neither of these apps like to use "buttons". So when you do various things like editing a message or writing a room description, and stuff like this, they just assume you will press the ENTER key. There is no button to save or submit. In discord, light gray text shows up on the bottom that says "Press ENTER to save", but many people won't notice that.

Zoom is equally guilty, but not as bad. Zoom seems a little more logical in most places and they tend to use brighter colors on buttons and messages as opposed to Slack and Discord that want to use 50 shades of gray (and not in the sexy way) as the color palette throughout their app. Although I will admit, about once a week I forget how to leave a Zoom call. Zoom makes it far too complicated to do something that every Zoom user will do on every Zoom call, which is inevitably leave the room.

vmception• 5 years ago

Articles and papers should have dates and an indication of how long it is

shaggyfrog• 5 years ago

This has always drove me bananas, too. I still have 10.14 but `defaults write NSGlobalDomain AppleShowScrollBars -string "Always"` has worked for me for years now. Does it work in 10.15?

GeekyBear• 5 years ago

Even a bargain bin mouse has a scroll wheel these days, track pads use a two finger gesture to scroll.

If those options don't work for you, change the system preferences back to always showing the scroll bar.

foobarbecue• 5 years ago

I recently noticed that the Facebook android app never has scrollbars when you're reading a post (not in an infinite-scrolling situation), and I haven't found a way to make them appear.

opk• 5 years ago

Scrollbars are terrible UI. You have to drag them in the opposite direction to the way the way you want things to move. How far you need to drag the bar to move a certain distance is dependent on the length of the whole document. In general, I think many mistakes were made on early GUIs that simply became entrenched and it is now hard for people to imagine them being any different.

I long ago disabled scroll bars in my terminal and text editor and I never miss them.

aylmao• 5 years ago

I usually have them disabled too, yeah. I think with modern cursor devices they become redundant— you don't need a UI element to move around the document with the mouse/trackpad, because the mouse/trackpad usually has built-in scrolling with a wheel or gesture. I can see how in the past they were a necessary element though.

jonny_eh• 5 years ago

They're useful for at least knowing what IS scrollable and how much more distance there is left to scroll.

Rapzid• 5 years ago

You have to drag them in the opposite direction to the way the way you want things to move

In my mind I'm just moving the viewport down. I'm scrolling down the page, not moving the page up.

pnt12• 5 years ago

Drag down to see the content below, up to see above. Total scroll height is 100% of the page and the bar will have an height equivalent to the portion of page you're seeing, allowing to predict from a simple glance how long a page is. I'd say it's quite beautiful in its functional simplicity.

c-smile• 5 years ago

I'd like us to look on this from different angle:

Layout of visible scrollbars, to be precise scrollbars that take space off scrollable, may oscillate - not always has a determined solution in case of `overflow:auto;`, steps:

1. You start layout width without any scrollbars to determine height of the content;

2. If content height exceeds height of the scrollable you will need to show v-scrollbar, and so goto #1;

3. While reducing available width at #2 you may have content width overflow width of scrollable container minus v-scrollbar, so you need to show h-scrollbar that reduces available height, and so goto #2;

There are conditions at particular content/container sizes and layout algorithms when the solution oscillates.

So `overflow:auto;` (show scrollbars only when needed) is a) quite expensive (layout happens multiple times) and b) not that easy to implement.

Floating scrollbars that appear on top of scrollable content and so do not take screen space are technically better.

Koshkin• 5 years ago

The Gnome desktop has done something (similar?) to the scrollbars (and I hate it).

runjake2• 5 years ago

You can change this behavior in System Preferences -> General-> Show scroll bars -> Always

This isn't some snarky comment.

1. A lot of people don't know about this setting.

2. When you set it to "Always", telemetry gets sent to Apple. If enough people do this, they may consider changing the default behavior.

kasabali• 5 years ago

Telemetry data is used for justifying decisions, not making them.

runjake2• 5 years ago

This is painfully true. You must've worked there.

littlecranky67• 5 years ago

On macOS as well iOS and AFAIK also Android, there is a rubber band/bouncy effect when you scroll to the bottom and reached the end. So you DO get a visual indicator when you are at the end. When you scrolled down and didn't get that "bounce" you know there is more to scroll to. Additionally, the scroll bar will show during scroll and indicate your position in the page.

Not saying this is good UX or in any way intuitive, just pointing it out. I think its a matter of taste and long-learned habits. Similar to "natural scroll" that is now the default for macOS. Being >20years a computer user, natural scroll felt just wrong to me, I always switched it back and thought Apple was just plain stupid. This changed when I introduced my father, who had long gotten away with not using computers, to a PC. When I showed him that he can use two-finger scroll on his laptop's trackpad on a website to get down, he said "oh, but its the wrong way!". I was puzzled, and he insisted and told me that its just the wrong way, reaching out to a piece of paper showing me that the content at the bottom would move UP into his view, if he puts 2 finger on the paper and moves them up, too. That was when I realized that "natural scrolling" is actual the physical way of doing it, and my hatred against it was just based that I was used to it in 20+ years of computers being the other way around.

It is also the same with Y-Axis in computer games, basically the default setting of the first computer game you ever played determines how you set your controllers (non-) inverted Y-Axis for life :)

fogof• 5 years ago

This is especially a problem for me, since I use an extension to make my websites dark. To fix this, I recently downloaded the Rescroller Chrome extension. Not only are my scroll bars now visible, they are a fun lime green (users pick color)!

https://chrome.google.com/webstore/detail/rescroller/ddehdnn...

mdoms• 5 years ago

I really don't understand it - they refuse to implement a touch screen on their laptops but continue to design for touch interactions.

blackrock• 5 years ago

I’ve often made mistakes from not seeing extra data, because the data required you to scroll down to see it.

It’s a really infuriating situation. And quite a terrible UI design.

And by hiding the side scroll bars, it removes your ability to quickly page jump down to the bottom of the page, or to anywhere else on the page, from clicking on the white space of the scroll bars.

throw7• 5 years ago

The mistake Apple made was that they should have made them candy coated.

swiley• 5 years ago

It's in the default gnome theme too and changing themes on gnome is kind of a bitch if you're not actually using it as a DE (plus the devs hate it.) Now I have to run some kind of theming daemon (WTF?) just so I can have scroll bars. Sometimes it eats escape keys and launches random crap (occasionally an entire DE) just to throw a full screen modal dialog box telling me that escape isn't mapped to any shortcuts.

Defaults should be sane, not fashionable and many people still expect and even need scrollbars.

gowld• 5 years ago

My Mac shows scrollbars, because I toggled the preference setting.

not2b• 5 years ago

It isn't just Apple, I'm seeing an increasing number of web sites where the scroll bars disappear, and only re-appear if you click or maybe hover in just the right place. A couple of times I've wasted time not knowing that there was more content the next screen down, or that I needed to scroll some iframe or other object to reveal additional content.

Apparently designers have decided that scroll bars are ugly and should disappear when possible, and they get "when possible" wrong sometimes.

sandos• 5 years ago

Hidden scrollbars are cancer. Me, as a developer, using computers pretty much at least 8 hours per day still struggle with finding that god-damn scrollbar several times per week!

What about all the ones with even less know-how, or less patience?

wyuenho• 5 years ago

The Mac's hidden scroll bar is normally quite usable in Safari and Firefox, when you move the cursor to the side and start scrolling, it'll automatically pop up, with a thick bar that you can hold on to with the pointing device. That is, unless you are trying to figure out the exact behavior on Chrome or some Electron app, which is half the most used desktop apps on the macOS these days, and took you a while to figure it's actually a bug in Chrome.

https://bugs.chromium.org/p/chromium/issues/detail?id=678537

stjohnswarts5• 5 years ago

One of the first things I do is make scroll bars always on. I wish it was opt out rather than opt in but I never lost my mind over it.

eyelidlessness• 5 years ago

I personally prefer auto-hiding scrollbars for my own general use.

But I was recently in the same position as OP trying to make horizontally scrollable sections more discoverable and it’s really a pain.

OP is using JS so there’s a lot of options, but my use case was CSS-only and I ended up giving up on the scrollbar visibility and using a “scroll shadow” instead—where overflowing content displays a small shadow over the content which fades out at the end of the scroll.

It’s not as clear as an explicit scrollbar but it’s a fairly common pattern users do often recognize.

godshatter2• 5 years ago

On the topic of scrollbars and UX, I like it when a program shows a mockup of the rest of the window in the scrollbar area. For example, Kate from KDE does this. It's helpful not just to know where you are, but to see the basic structure of the document that's left to view.

therealdrag0• 5 years ago

I've been using the "rescroller" plugin in Chrome for years now. Nice to force a fixed solid grey scroll bar.

BluSyn• 5 years ago

I hate to say it; this entire thread is perfect case study of why engineers should never be put in charge of UI design. This is how you end up with a UX like AWS.

WalterBright• 5 years ago

I've noticed another trend towards very narrow scroll bars and a dot-like tab. They're annoyingly difficult to grab and move.

Then there are the web pages which simply will not scroll smoothly, because scrolling changes the content of the page. It's really irritating.

Harumph.

manicdee• 5 years ago

It gets worse:

1. Plug a monitor and external mouse into your MBA.

2. Now close the lid.

3. Open Safari, navigate to Tesla.com.

4. Open the hamburger menu, click the country down the bottom.

5. Try scrolling the "Select Your Region" content to pick United Kingdom.

If you use the mouse wheel, the div doesn't scroll. You can click-and-drag to highlight text and as you drag past the bottom of the div it will scroll.

Now open the lid of the MBA and the div can be scrolled using two finger gesture on the trackpad.

kjjjjjjjjjjjjjj• 5 years ago

Why is this a problem? Scrollbars are unnecessary and ugly

Hammershaft2• 5 years ago

I have a pet theory that as design is oriented around the conventions and abilities that users bring to the product, designers are couched in cultures and locations where users are highly tech literate. This anchors designers expectations of the average user towards the high end, and allows designers to justify stripping away ui hints in favor of aesthetics.

CoconutPilot• 5 years ago

"If you can't make it good, at least make it look good."

I guess Apple has conceded!

https://www.brainyquote.com/quotes/bill_gates_382270

bradgessler• 5 years ago

I’ll say it: I prefer it this way.

t0r0nat0r• 5 years ago

Lol people here need to chill. I like apple’s UX and i think the point here is a uniform experience across platforms. That being said, I think it works perfectly fine like it is now IMO.

LoveMortuus• 5 years ago

I believe that design should be done in such a way that no matter your background you can still use the tool without having to spend more time learning then actually using the tool.

Apple has gone to extraordinary lengths to make scroll bars invisible

Related Stories