11 ms·

This essay is my attempt to synthesize a few general rules from recent work with custom scrolling. Scroll-based effects can be contentious, but I believe a lot

This essay is my attempt to synthesize a few general rules from recent work with custom scrolling. Scroll-based effects can be contentious, but I believe a lot of that comes violating reader’s expectations and breaking direct manipulation. There are ways to use scrolling effectively — to achieve the desired visual design without hurting usability.

tophtucker 12y ago
I love this. Thank you. - Are there general principles you'd emphasize for mapping continuous control domains to discrete content ranges? (Like input rasterization.) - If you could redesign the user control/input space (keyboards, mice, etc.), what might it look like?
- mbostock 12y ago
  Thanks. - Ideally, no mapping is necessary; controls should be naturally suited to their application. The problem here is that scrolling is designed for homogeneous content (such as a long column of static text), while web pages increasingly have heterogeneous media. Rather than try to rewire the controls, it’s easier to adapt the content so that it fits the controls we have. By limiting the visual changes and by retaining normal scrolling text, we are less likely to harm usability. - I’d like to have access to touch events in desktop, for one, so that I could know whether the fingers are down (on track pads and magic mice, e.g.). And I always thought chording keyboards were a cool idea (particularly after observing court stenographers), but never seriously tried one. And maybe some standardization of swipe events on mobile.
the_cat_kittles 12y ago
thanks, really liked the summary. I also found the linked nytimes articles incredible!
coldpie 12y ago
One thing I noticed is missing is supporting middle-click scrolling. I'm not a webdev, so I don't know how difficult it is. But that's pretty much the only way I scroll, so it's infuriating to run into shitty websites that break it.
- mbostock 12y ago
  If you follow rule 2 and adapt content to the viewport (rather than listening to wheel events directly), then middle-click scrolling should continue to work fine.
Vendan 12y ago
Have you thought about some kind of toggle for those of us for whom this scrolling junk irks? I've yet to see any site that actually uses it to present content that wouldn't have been fine without it.
- mbostock 12y ago
  Toggles aren’t a great solution; it’s a pain for you since you need to opt-in, and it’s a pain for the designer since they now have to create two different versions of the site. I think either we figure out how to use scrolling effectively or we collectively realize it’s a mistake and abandon it as a fad. My personal belief is that we can make it work, and improve the visual presentation without harming usability, but perhaps there are a few more things to figure out.
  - Vendan 12y ago
    Unfortunately, I don't care how much of a pain something is for the designer. Remember, the designer wants me on the page, not the other way around. And I'd rather be able to have a sane website experience rather then a crappy one. Most of the examples you had were absolutely horrible to deal with, even though I'm not on a weird platform. Win7 with latest Chrome, and the mac one won't let me get past the second tick thingy. IMHO, I wish this fascination with "Oh, let's screw with the user experience cause we want to be special" would just disappear.
    - SiVal 12y ago
      I strongly disagree. I like the variety and the experiments. When you try new things, some will work out, some won't, and which do and don't vary depending on who you ask. I'm still sympathetic. There are certainly UI experiences I can't stand. Pages that throw things in my face on hover are my biggest pet peeve. You jump to a page, your mouse happens to land on top of some random thing. You don't click, but it doesn't matter, because it throws a blanket over what you're trying to see because you hovered over something you didn't want to see, and now you have to figure out how to somehow get rid of it. It's a revolting experience that I see everywhere, but I seem to be the only one who notices that trying to move my mouse to something I DO want to click ends up stepping on a hover-mine, which covers what I was trying to click..., so it's not like I can get anyone else to complain. I feel your pain (even though I LIKE some of these scroll effects.) But if we were to tell designers to "stop screwing with the user experience", we'd just as likely have every page throwing random things in your face as part of the "standard hover UI" as get rid of it. We're better off in the end with lots of experiments, seeing what new ideas seem to work, and adding support for those into the evolving Web platform.
kyptin 12y ago
Well-written and well-reasoned. Thank you. I'd like to propose a sixth rule: don't move the goal posts. In other words, don't load additional content dynamically. This violates the user's expectation of when they will be finished scrolling. I find this frustrating, and I doubt I'm the only one. Thoughts?
- bengali3 12y ago
  I definitely agree with not moving the goal posts, I think this makes the scroll indicator useless since we make mental 'bookmarks' based on position. I believe a good compromise would be to keep the document height fixed and without loading everything. This wouldn't work for 'infinite scrolling' solutions, but scale-resetting could be minimized this way.
gohrt 12y ago
Consider adding: "If you think you need custom scrolling, think again."
- JetSpiegel 12y ago
  Alternatively, replace the entire page with "Don't" in bold big letters.
  - experimental- 12y ago
    I happen to like many of the New York Times articles that "mess" with your scrolling (that is, use the position changes to trigger events). To me, they somewhat resemble magazine articles with full page images in them, and I don't see a problem in there.
snegu 12y ago
I found this very interesting, but I was wondering if you have any data around these points? I'd love to see results of user testing or A/B testing, as right now I'm just surrounded by differing opinions.
dwwoelfel 12y ago
Are you doing any kind of throttling on the scroll events? When I was optimizing transitions based on scroll position, I found that pulling the scroll events off of a queue of size 1 was really effective in reducing dropped frames [1]. [1] https://github.com/circleci/frontend/blob/master/src-cljs/frontend/scroll.cljs https://github.com/circleci/frontend/blob/master/src-cljs/fr...
3rd3 12y ago
I think side notes are the single most underappreciated visual design element, and you make great use of them. I’m very much in favor of Ted Nelson’s idea that everything should have a content related, even editable/interactive sidebar.

tophtucker 12y ago

I love this. Thank you. - Are there general principles you'd emphasize for mapping continuous control domains to discrete content ranges? (Like input rasterization.) - If you could redesign the user control/input space (keyboards, mice, etc.), what might it look like?

mbostock 12y ago
Thanks. - Ideally, no mapping is necessary; controls should be naturally suited to their application. The problem here is that scrolling is designed for homogeneous content (such as a long column of static text), while web pages increasingly have heterogeneous media. Rather than try to rewire the controls, it’s easier to adapt the content so that it fits the controls we have. By limiting the visual changes and by retaining normal scrolling text, we are less likely to harm usability. - I’d like to have access to touch events in desktop, for one, so that I could know whether the fingers are down (on track pads and magic mice, e.g.). And I always thought chording keyboards were a cool idea (particularly after observing court stenographers), but never seriously tried one. And maybe some standardization of swipe events on mobile.

the_cat_kittles 12y ago

thanks, really liked the summary. I also found the linked nytimes articles incredible!

coldpie 12y ago

One thing I noticed is missing is supporting middle-click scrolling. I'm not a webdev, so I don't know how difficult it is. But that's pretty much the only way I scroll, so it's infuriating to run into shitty websites that break it.

mbostock 12y ago
If you follow rule 2 and adapt content to the viewport (rather than listening to wheel events directly), then middle-click scrolling should continue to work fine.

Vendan 12y ago

Have you thought about some kind of toggle for those of us for whom this scrolling junk irks? I've yet to see any site that actually uses it to present content that wouldn't have been fine without it.

mbostock 12y ago
Toggles aren’t a great solution; it’s a pain for you since you need to opt-in, and it’s a pain for the designer since they now have to create two different versions of the site. I think either we figure out how to use scrolling effectively or we collectively realize it’s a mistake and abandon it as a fad. My personal belief is that we can make it work, and improve the visual presentation without harming usability, but perhaps there are a few more things to figure out.
- Vendan 12y ago
  Unfortunately, I don't care how much of a pain something is for the designer. Remember, the designer wants me on the page, not the other way around. And I'd rather be able to have a sane website experience rather then a crappy one. Most of the examples you had were absolutely horrible to deal with, even though I'm not on a weird platform. Win7 with latest Chrome, and the mac one won't let me get past the second tick thingy. IMHO, I wish this fascination with "Oh, let's screw with the user experience cause we want to be special" would just disappear.
  - SiVal 12y ago
    I strongly disagree. I like the variety and the experiments. When you try new things, some will work out, some won't, and which do and don't vary depending on who you ask. I'm still sympathetic. There are certainly UI experiences I can't stand. Pages that throw things in my face on hover are my biggest pet peeve. You jump to a page, your mouse happens to land on top of some random thing. You don't click, but it doesn't matter, because it throws a blanket over what you're trying to see because you hovered over something you didn't want to see, and now you have to figure out how to somehow get rid of it. It's a revolting experience that I see everywhere, but I seem to be the only one who notices that trying to move my mouse to something I DO want to click ends up stepping on a hover-mine, which covers what I was trying to click..., so it's not like I can get anyone else to complain. I feel your pain (even though I LIKE some of these scroll effects.) But if we were to tell designers to "stop screwing with the user experience", we'd just as likely have every page throwing random things in your face as part of the "standard hover UI" as get rid of it. We're better off in the end with lots of experiments, seeing what new ideas seem to work, and adding support for those into the evolving Web platform.

kyptin 12y ago

Well-written and well-reasoned. Thank you. I'd like to propose a sixth rule: don't move the goal posts. In other words, don't load additional content dynamically. This violates the user's expectation of when they will be finished scrolling. I find this frustrating, and I doubt I'm the only one. Thoughts?

bengali3 12y ago
I definitely agree with not moving the goal posts, I think this makes the scroll indicator useless since we make mental 'bookmarks' based on position. I believe a good compromise would be to keep the document height fixed and without loading everything. This wouldn't work for 'infinite scrolling' solutions, but scale-resetting could be minimized this way.

gohrt 12y ago

Consider adding: "If you think you need custom scrolling, think again."

JetSpiegel 12y ago
Alternatively, replace the entire page with "Don't" in bold big letters.
- experimental- 12y ago
  I happen to like many of the New York Times articles that "mess" with your scrolling (that is, use the position changes to trigger events). To me, they somewhat resemble magazine articles with full page images in them, and I don't see a problem in there.

snegu 12y ago

I found this very interesting, but I was wondering if you have any data around these points? I'd love to see results of user testing or A/B testing, as right now I'm just surrounded by differing opinions.

dwwoelfel 12y ago

Are you doing any kind of throttling on the scroll events? When I was optimizing transitions based on scroll position, I found that pulling the scroll events off of a queue of size 1 was really effective in reducing dropped frames [1]. [1] https://github.com/circleci/frontend/blob/master/src-cljs/frontend/scroll.cljs https://github.com/circleci/frontend/blob/master/src-cljs/fr...

3rd3 12y ago

I think side notes are the single most underappreciated visual design element, and you make great use of them. I’m very much in favor of Ted Nelson’s idea that everything should have a content related, even editable/interactive sidebar.