Hacker News Reader

Comment by afandian | Hacker News Reader

I wish people who made webpages trusted browsers to scroll. The number of sites that play with the scroll speed and consistency by hijacking scroll events makes me doubt whether the designers spare a passing thought for usability.

Scrolling is one of those things that (in my opinion) get calibrated in the brain for hand-eye co-ordination. Which is why (again IMHO) there are religious wars fought over, for example, Apple's trackpads. This stuff is important. It can be a jarring experience when scrolling suddenly doesn't work. Flip side is, I'm sure some people don't care.

There's nothing more annoying than a web designer saying "I know better than you" and re-implementing features. Because they're usually wrong.

EDIT: Would people accept it if each webpage re-adjusted your mouse pointer speed and acceleration? Is there any difference between one mouse function and another? Why do web designers think they have the right?

View on HN

> There's nothing more annoying than a web designer saying "I know better than you" and re-implementing features. Because they're usually wrong.

It's not just that they are saying "I know better than you", they are saying they know better than HCI teams that have spent years tuning interfaces in response to actual research and testing. Most of the web and app designers I've worked with have never watched a person use their designs, much less considered their work in the context of the entire OS experience.

I'll never forget the despair I felt when I started a new job and sat down with the designer of the site we were to be working on.

She told me "Our site isn't going to work like any other website."

She was right. It didn't. The whole thing was canned six months later.

This is a battle I've fought a zillion times. It's just so hard for some designers, who are used to a world where originality is a good thing, to understand that in UX originality is a liability.

There are 15-year old bugs in Firefox on scrollbar designs that are fixed under Chrome/Webkit.

Often times custom scrolling is used to fix that.

Can you provide more details about what you're talking about?

https://bugzilla.mozilla.org/show_bug.cgi?id=77790

We could remove 90% of custom scrollbar javascript if this was fixed.

Have you (or anyone else) offered a patch? Skimming that bugzilla page, it looks like in 15 years nobody has cared enough to even submit a patch.

It seems there's only a small overlap between the people suffering and the people being able to solve this.

If a "normal" web developer struggles with that, they can provide JavaScript workarounds, perhaps many, but they usually aren't that intimate with C/C++ and the whole framework on which Firefox is based.

Also, as with most projects, if a webdev can solve this problem with a workaround now, they don't invest time to provide a proper long-term solution. If if they are capable of improving Firefox, they'd still need to create the JS workaround, because short-term is what they are paid for.

Maybe fix it then? Or better yet, don't fiddle with users' UI items. The scrollbar is the same everywhere on my desktop, why fiddle with a thing that the user's really used to?

Because designs on the web are different from those on desktops and big white scrollbars on a dark design look horrific? Also, because you want your design to work nicely irrespective of the browser and scrollbars and dropdowns make that really hard.

It sucks, but there's a reason that people choose to try to replace these elements (unfortunately, with mixed results).

For future reference, you can actually get rid of nasty scrollbars without ruining the normal scroll behaviour by having an outer div(overflow:hidden, width:x) containing the content div(width:x+scrollbar-width).

> Because designs on the web are different from those on desktops and big white scrollbars on a dark design look horrific?

Where do you draw the line, though? The scrollbar is not part of the website, it's part of the window where the website is being rendered, and the window is itself part of a desktop environment. Would you try to override the look and feel of the desktop environment if you could?

>Would you try to override the look and feel of the desktop environment if you could?

The answer to this question is almost always yes by short sighted designers who try to control scrolling behavior. In fact optimally they'd like to control your hardware look and feel also.

There's a difference between changing behaviour and changing the design. I'd imagine that most designers that design without scroll bars have no idea what the devs are going to do to change behaviour.

I hate it when the scrolling feels unnatural. At the same time, it's good when the design looks nice. It's possible to achieve both of those things.

There's a difference between the whole window and an element within the page. We have a single page app that still had scroll bars for subsections in the sidebar and quick frankly, it's embarrassing.

Fair enough. I don't think it's such a big deal, though. Probably no one cares how it looks as much as you think they do.

Because it is also present in chromeless (aka full screen) mode.

It truly sucks, as you said. Also, the web pages are within my browser's chrome, which occupies about a third of my screen, and behind it there's my wallpaper, and behind my screen I've a nice champagne-colour wall and some books, pens, and other stuff. What will you do if your design looks off in front of them? Change them too? Should the browser allow you to change the wallpaper?

Nasty scrollbars. OK. What if I want to scroll down about a third of a hypothetical long page? I'd either use the wheel/touchpad and make multiple gestures to reach there, or hit space/page down multiple times, or hit end and page up a bit less times, or just point the mouse cursor to about where I want to go on the scrollbar and click on the blinking thing. That nasty scrollbar is mine.

Once again, it's possible to have scrollbars that function as normal but fit with the design of the page.

> Maybe fix it then?

A 16-year old bug with 200+ comments sure looks easy to fix…

This is not really a bug but a wontfix (seemingly). Firefox has its own toolkit so it should be easier than writing a whole slew of JS to fix that bug (a.k.a. add this feature).

It could be I'm on windows and maybe you are not, but it's common for me to see different styles of scrollbars in different applications.

Well I use Emacs and Firefox and mostly nothing else, on Xubuntu, and all the scrollbars are (happily) the same.

Would not it be better to style the scrollbar with CSS only in browsers that support it? That would be an example of progressive enhancement and adaptive markup.

For me, fast scrolling is more important than colored scrollbar.

No.

I'll give you three guesses which I care about more, a scroll bar that matches your site colors or responsive scrolling.

You're not the site designer, though.

Guess what the site designer cares about?

Their site is their branding, not yours, not Mozilla's.

If the "designer" only cares about the look of their site, then they're an artist, not a designer. Usability and accessibility are intrinsic parts of web design.

Obvious solution is obvious. If the user is using Firefox, instead of replacing the scroll bars, replace the page with a message telling them to switch to a better browser. That way everybody wins and it's so much less work.

Or more obviously - if a browser works a certain way, and the user has chosen to use it, let it be. If the designer doesn't like it, well - the user chose to use this browser, and they choose to use your site. If you start trying to change one of their choices, they might change the other.

And if their brand is "confusing and hard to use" or worse, "glitchy" then I guess making their own scroll bars is appropriate.

Back when splash pages were popular I pretty much closed any tab that presented a splash page -- life is too short. Likewise whizzy Flash sites. What I miss about Flash is that it was an excellent bozo avoidance system.

This is just confirmation that I'm better off with a most javascript and CSS turned off.

The solution here is simple -- lobby W3C to include custom scrollbar colors in the CSS specs, then call out Mozilla for not following the standards.

As it is, colored scrollbars are not part of any standard, so asking for them are like asking Google or Mozilla to support ActiveX for your webapp -- if you rely on non-standard, proprietary features, you're locked in to your non-standard browser.

> trusted browsers to scroll

This is especially egregious on mobile, where not only they implement scrolling badly in a way that only vaguely matches a single device/os (with terrible performance) and is completely off on others, but also feel compelled to hijack scrolling for "creative"† navigation, like swipe left/right to move across articles, which gets triggered every time you scroll downward but ever so slightly sideways. Like, I'm on a bus and actually holding the phone, so don't zap me to an unrelated article I don't care about on each encountered pothole please.

† at least as creative as the number of expletives I'm thinking about every single time such an abomination of an interaction triggers.

With the new AMP articles, Google News has become almost unusable to me for this reason. I used to love it, but now the experience is all janky and I constantly end up navigating to some other article instead of backwards when I use iOS' swipe back gesture.

I wish the same thing, but for desktop applications too. There are some that implement their own scroll and it's the most annoying thing ever, because it makes the scroll bar unusable. As the article point out, it's vastly different than scroll wheel, touch and keys.

Scroll bars provides 3 different scroll methods:

- Click and drag scroll thingy. The most used method, but sometimes misunderstood. It should scroll only as much as you moved the mouse. It wreaks havoc with endless scroll pages.

- Click on the bar outside the thingy. This used to be equivalent to pgdown/pgup. It was the method I used the most, and I was infuriated countless times when it behave differently: on some platforms it means "go here".

- Arrow buttons. Not very useful and virtually extinct at this point.

You forgot Space key which is by far the best way when reading long texts.

Agreed. I have a great Apple mouse and trackpad. But I still use space when scrolling.

Lots of know-it-all web developers hijack scrolling and unsurprisingly don't know that you can scroll with space. The OS developers have thought about accessibility.

Near-ubiquitous floating headers (and even footers) have made full-page spacebar scrolling practically useless on most pages for me now, at least under Chrome on OSX. You always have to scroll back a little bit to see a line or two of content.

This bookmarklet helps a lot with this: https://alisdair.mcdiarmid.org/kill-sticky-headers/

What's frustrating is that this is a solvable problem. I've seen sites that have fixed it, and fixed it well. But they are vanishingly rare. So I will just keep killing their sticky headers and footers...

You're right, some sites manage to do it without breaking full page scrolling. One of these days I'd like to sit down and figure out the specifics (of both right and wrong ways) and write a good comprehensive medium post with clear instructions on doing persistent headers correctly.

Of course if someone else beats me to it, that's fine too...

The space key is not part of the scroll bar, so in the context of listing ways that a scroll bar can be used it wasn't forgotten but simply left out.

- Click and hold outside the thingy usually performs consecutive page jumps to the point (Firefox, Chrome)

Few omitted means to scroll - hold middle mouse button and drag (this usually works well sideways and in case no scroll bar is present) - spacebar / shift+spacebar, pgUp / pgDn, home / end - and FMoPW most importantly clicking the arrows in the scroll bar. For "us" this seems almost uncomprehensible, but I regularly see users perform scolling this way.

For example my wife with track pad (yes, it is capable of two finger gestures), and my mother even with mouse with scroll wheel, until recently.

No wonder, discoverability of that action is way above all that abstract "dragging", "swinging" and "pressing" concepts without direct visual clue.

shift+spacebar, you just changed my way scrolling on Mac keyboard

Arrow buttons.

I pretty much only use arrow buttons to scroll screens of text into my eyeline.

I get really annoyed when arrow buttons are overloaded to tab between screen elements instead of scrolling (my online banking site, I'm looking at you!)

I mean the buttons in the GUI scroll bar, that have little arrows or triangles in them. They're way too small and too far apart to be used effectively. For that reason some UI toolkits had both buttons together at the bottom.

Custom scrollbar implementations also often ignore scrolling speed set in OS's settings.

There was also right clicking on bar background and clicking "scroll here" on the menu. Imagine how many times this feature is used in whole history!

my only issue with scrolling is how the the bar looks >

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

it comes in only one color variant, it's inconsistently looking across browser, takes a lot of space, especially for scrolling narrow elements, it has low contrast so it doesn't even do a good job accessibility wise etc.

go to a site like Bulgari's and bam, custom scroller, precisely for this reason

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

you'll notice the page scroller is untouched, because it doesn't contrast with the page style, being a browser element, but the inside page scroller would sucks.

you gonna argue with them they have to design their website style to accomodate the gray slate slab of vintage scrollers?

Accommodate? They chose to make something that runs in a web browser so they should make something that works in a web browser. If I choose to use one with big scroll bars, that's up to me.

I don't know what browser you're using, but if it's Windows or some GNU/Linux distro, from memory both of these allow you to customise scrollbars. What if I have accessibility requirements and want to customise how software that I run on my own computer works?

> What if I have accessibility requirements and want to customise how software that I run on my own computer works?

The modern web cares very little about such requirements, since they are unlikely to be correlated with making money.

I don't like where things are going :-(.

Don't worry, it will all implode eventually.

I think it's sadly like that comment about Uber a few days ago -- it's a question of staying insane longer than competitors can remain solvent. The web will eat everything sooner or later.

Yeah right.. "If you don't like the web, go somewhere else!!11"

There is a new trend of full-page slide that scrolls but without the scrollbar. I'm seeing a lot of this type websites lately. Though I love the classic scrollbar.

There is some UI chrome that is the responsibility of the browser, not the content within it. Back button, refresh button, scroll bars, address bar, etc. These should be off limits to the content within the web view.

The only person who cares what the scroll bars look like is the designer of the content within the web view. They have mistakenly thought that this is their responsibility.

If it is such an issue for the designer, maybe they should implement designs that are complimentary to the scroll bar?

> they should implement designs that are complimentary to the scroll bar?

that's impossible because, as I said in the comment above, every browser has it's own scroll bar forced upon the user, especially if you factor in mobile browser and their slim, thin black translucent bar (which only appears when you scroll so you don't even know something is scrollable... talk about good design uh?)

I think it betrays a pretty limited understanding of design, to declare a design task impossible because color-coordination can't be scoped in. Prioritizing aesthetics over function usually defeats both.

Meanwhile in the real world aesthetics play a big role in corporate/brand identity and corporate that care enough will build horrendous kludges to work around the limitations of browser styling, but once again it has proven a fool errand to argue with the ivory tower warriors that inhabits the websites for the technically minded.

I'm gonna take your word for it tho and will use the complain button on that Bulgari page to let them know their solution "betrays a pretty limited understanding of design" and they will need your more competent service. /s

> Meanwhile in the real world aesthetics play a big role in corporate/brand identity and corporate that care enough will build horrendous kludges to work around the limitations of browser styling

The browser scrollbar shouldn't be part of the corporate/brand identity any more than the browser menu, address bar or navigation buttons. Navigation belongs to the user, not the webpage designer.

Forced? The browser and OS are the one thing that the user DOES choose! If I don't like the way it works, I can use another one or change the config. If the web designer chooses to change the scrollbars on their site, I have no choice when using their site.

I recently discovered how Facebook do their fade-in thin scroll elements in the messenger[1] web app. They actually size the DIVs too wide by about 20+ pixels, then they alter the z-order so that the DIV edge (where the native scrollbar is) is hidden under another DIV (or over the window bounds). Then they overlay their own scroll bar element at the new visible edge of the DIV and hook it to the div scroll event.

It's one of the worst CSS kludges I have ever seen. I don't know enough about cross browser compatibility though to know if there's a better way?

[1] https://www.messenger.com

Kludge it may be, but if it allows them to have custom scrollbars without replacing native scrolling, it's absolutely the lesser evil.

I've set OS X to always show the scroll bars, and wondered why they disappear on Facebook.

Their custom scroll bar looks identical to the native one.

The whole thing they made feels pointless and user hostile.

Non-macOS-user here. I always wondered why the Messenger webapp looked so weird. It just dawned on me that they're trying to emulate Apple design to the t. It's like running a Java app with the emulated look-and-feel for the wrong OS.

This actually sounds a pretty low cost way to make an important visual change without abandoning the behavior underneath it. User don't know or care about it. Until there is a standard way to do this, a funky CSS hack that adds a few otherwise unneeded elements is more cognitive load for the programmers, but users don't care. And eventually weird kludges like this influence what features get worked on. I hope!

There is some progress or at least hope in this area. http://caniuse.com/#feat=css-scrollbar

As the user why would I want a UI element I look for to change?

Hah! Yeah, this doesn't bother people using the site.

As someone who actually uses scrollbars, I like scrollbars to be wide enough to actually use, especially when they're not against the edge of a maximized window.

The pellet in your second image isn't the worst, but I'm pretty sure anyone implementing "gorgeous" 5-pixel slivers never uses them or they'd have permanent black eyes from punching themselves in the face.

If i am your user, i will hate your second scroll bar. 1. Too small, 2. don't know were click. 3. First one clean scroll bar second waste thinking cycle to know it is scroll bar

Please note, as it says on the tin, that these are intended for your local use only.

Adapt the styling if you wish, using Stylish:

https://codepen.io/dredmorbius/full/QwXBEO/

> There's nothing more annoying than a web designer saying "I know better than you" and re-implementing features. Because they're usually wrong.

This is my problem with overly designed interfaces in general. Your website is not a special snowflake. It doesn't need a new way to interact, it needs consistency with other sites.

Webpages that mess with scroll behaviour invariably annoy me as much as those that autoplay videos, open popups, etc. I just instinctively ctrl-w that shit immediately.

I've been adding them to my router firewall as DNS blackholes as well. Just for good measure

Does it matter anymore?

For those of us who use the scroll bar for its intended purpose, everything broke with the single page fad. Now so much of the web doesn't scroll anymore that I've re-trained myself on the arrow keys. That mostly works, until they set keyboard focus too.

Even newspapers now load some entirely different article when I've read half way through one, just in case I want to feast my eyes on something unrelated when I'm done. I'm just sitting this one out. It'll pass.

In case you haven't seen it (didn't notice it linked in the replies): http://codepen.io/gunderson/full/GJJPpV/

I agree with you — BUT, I have conducted a fair amount of user tests where someone will not scroll. It's often an older demographic, but I've seen 30 year olds fall into it as well.

So it's not always a designer saying "I know better than you."

I do think that they're going about solving the problem the wrong way though. Your design should on its own encourage scrolling by making it obvious that additional content exists (avoiding so-called "false floors") — it can be harder to do this than unchanging your design and suggesting scrolljacking, which is why I think we see it so often.

I think that's a different issue. If people don't know they need to scroll (your false floor example), that's a failing of the visual language, so it's entirely appropriate to put an explicit message "you can scroll" to make up for the failure of visual language.

I'm talking about what happens when you actually do scroll. In my experience those seem to the same sites that are visually confusing are the ones that re-program your scroll down as a page-down...

This is a pet peeve of mine too and I agree with all your points. But I think more often than not, such custom scrolling may happen as a result of trying to control something else, like some infinite scroll with virtualization that would normally start shifting elements and make the scrollbar behave funny.

not defending this pattern, I just don't think people fuck with the scrollbar just to make it "better". they probably try to make it as close to original as they can which of will of course be, nothing like the original :)

Scroll highjacking can be done to avoid partial content being displayed on the screen.

You know those pages with several 100% height slides? They don't look as nice if there's a bit of the previous one showing at the top or the next one at the bottom.

But yeah, it sucks, we all agree with that.

We need this to be done in CSS, something like body { scroll-step : 100%; }

What I don't understand is scroll highjacking in something like Google AMP.

It replicates the browsers default behavior, only poorly. No tap the menu bar to scroll to the top, motion sickness inducing acceleration, etc

Surely the navigation should be decoupled from scrolling. I think this happens because people try to shoe-horn multiple pages into one page. IMHO these should be separate pages, not one page with pseudo-subpage content. You could use mouse events, or click buttons, or touch events to navigate between them. Perhaps this comes out of the hinterland between touchscreen scrolling and gesturing.

What if I want to zoom in or out on the slide for reasons of accessibility?

Somewhat related: Chrome plugin to stop scroll hijacking – https://joshbalfour.github.io/disable-scroll-jacking/

yeah I find any cursor hijacking to be very frustrating, and always results in a "worse" user experience. A big one is Google search results, where a down arrow increments a step through the result list, and not an immediate page scroll.

Reply on news.ycombinator.com