Scrolling Usability Fail

Have a quick look at the Firefox UI heatmap. 95% of people explicitly click and drag the vertical scroll slider to scroll. And they do it a lot – an average of 200 clicks per user.

However, using the vertical scrollbar to scroll a web page sucks.

  • It’s a long way from the content area, where the user’s attention should be focussed;
  • It’s thin and hard to hit, particularly if the window is not maximised (hands up if you’ve tried to scroll a page and ended up resizing it because it’s a non-maximised window up against the edge of the screen);
  • At least on Ubuntu, the colour difference between it and the scrollbar track is minimal, making it hard to see;
  • It’s difficult to get consistent speed scrolling because the amount you have to move it is proportional to the size of the page. This can, on very large pages, lead to you entirely losing your place.

With good colour contrast between the bar and track, the scrollbar is a reasonable UI for seeing where you are in a page, but it’s a poor UI for scrolling.

Obviously, I’m not the first person to notice this. First, we had the wheel mouse, and now we have trackpads with dedicated vertical scroll areas (and sometimes horizontal too). And on some systems it’s possible to scroll a page by holding down a modifier key and moving the mouse, although I can’t for the life of me work out how to do it on Ubuntu. (Update half way through writing: this is what the “Use autoscrolling” preference is in the Firefox advanced options. I would certainly not have worked that out from the name – it’s not about automatically scrolling at all! We should fix that.)

And yet, with all these mechanisms available, 95% of people still pull the mouse all the way over to the side of the screen, click and drag.

Why?

Do the existing mechanisms suck? And can we do something about this? Making scrolling more pleasant would improve my day immensely. Can we turn ‘autoscrolling’ on by default?

30 thoughts on “Scrolling Usability Fail

  1. On windows, auto-scrolling refers to middle clicking (often clicking the wheel) and moving the mouse up or down to scroll around.

    Course the fact certain mouse companies (logitech) keep reassigning the middle button to stupid features like flip 3D doesn’t help.

  2. I wonder if any of this has to do with the fact that Button3 behavior is “paste” by default (in Linux).

  3. Another useful tidbit would be: are these people using laptops with trackpads? So many people I know don’t use the margins on the side and bottom that substitute for a mousewheel…

  4. A few thoughts off the top of my head:

    1) I’ve seen implementations of “scroll wheel” where the mouse driver appears to actually move the mouse onto the scrollbar and click – could this be leading to false impressions in your data collection?

    2) Does your data distinguish between a click-and-drag versus just a click? The page-down keyboard button is on the right hand side of the keyboard. If your right-hand is on the mouse, and you want to page-down, it is quickest to just click in the empty space of the scrollbar causing a page-down rather than moving your hand from mouse to keyboard and back.

    3) For those cases where someone is actually doing a click-and-drag, it would be good to measure how tall the page is, and how far they are dragging. If the screen is more than about 4-5 pages long, you can move much quicker using the scrollbar than you can with autoscroll or scroll-wheel

    4) On my system, auto-scroll causes smearing of the page which does not occur if I hold the bar and move slowly down the page (May be related to my smooth scrolling setting, which is turned off). This means that click-and-drag allows me to skim a page in a way that no other UI matches.

    5) On my system, to auto-scroll I need to middle click and then move the mouse away from the scroll icon to move the page. I then need to _Move Back to the Icon_ to slow or stop the scrolling. This re-targeting of the icon takes attention away from the primary task – skimming the page that is scrolling by. The scrollbar method allows skimming without ever taking your eyes or attention off the page, so long as you can move the mouse in a more-or-less straight vertical line.

    6) Activating and deactivating auto-scroll with a middle-click is prone to mistakenly clicking a part of the page which will open a link in a new tab. Scrollbar avoids this.

    7) Most importantly, and this is captured in essence in some of the points above, clicking down and holding onto the scrollbar “attaches” the whole page to my hand. Once I’ve grabbed the scrollbar with the mouse, I can move the page fast by moving my hand fast, slow by moving my hand slowly, stop by stopping movement of my hand, start again by moving again. Having there be no additional clicks required makes this sort of navigation feel more reflexive than any other (the page feels attached to my eyes more than to my hand, and I only become aware of my hand if I happen to move it off the mousepad, or move too far horizontal and lose focus of the scroll)

  5. “Autoscrolling” is actually great for panning in any direction and getting to where you want at the pace you desire. It should definitely be on by default on all systems. There are two drawbacks with the current implementation, however. First, scrolling on Linux is painful. On a slightly-complex page, if I start scrolling in one direction and then want to slow things down or stop at a certain point, the browser will often take a while to respond, and will have moved beyond my desired location by that point. This is not the case on Windows, even on my ancient machine. The second problem is that “autoscrolling” is both modal and quasimodal. When you’re using a mouse, this is pretty annoying. It is very common that I will try to middle-click on a link and just barely miss, leaving the system in autoscroll mode, which requires another middle-click to turn it off. This modal behaviour should be off by default (but easily enabled for accessibility and for touchpad users). Instead, by the default, it should be that the only way to use autoscrolling is by holding down the middle mouse button.

    As for scroll bars, they should be made much thinner already. This might force people to get used to better mechanisms. At the moment, the only way I know of to have that is to use the elementary GTK+ theme (or Firefox theme).

  6. I think you’ve got it figured out. Some things work well. The rest are not as good.

    Working
    ================
    The scroll bar works. If you want to move something, the best way is to pick it up and move it to where you want it (e.g., with the scroll bar). It works like an analog control that is well connected to what you are trying to move.

    Sometimes the scroll bar slider is touchy. Then the page keys and cursor keys work well. In fact, they work well most of the time, and I think I use them more than the scroll bar, because I don’t have to go grab the mouse. (I forget, though, maybe sometimes response to these keys can be slow, and that is a pain.)

    Mouse wheel works well, but it’s slow if you’re going far. Often faster to hit cursor keys.

    I don’t think there’s a substitute for the horizontal slider, so that’s probably indispensable.

    Working poorly
    ====================
    Most of the other controls fail from time to time, and are not worth much. It’s hard to accurately remember the specifics of exactly what fails on Firefox and what doesn’t, but here are some general methods of failure:

    1. Lagging. If you have 100 repeats of a keypress stored up before the system responds, you’re in trouble. This often happens with spreadsheet programs, not sure about Firefox. Sometimes you can stop it with a mouse. Windows sometimes fails to respond to keystrokes.

    2. Middle click and move (is this called auto-scroll?) works sort of, but it’s jerky, unpredictable, and slow. Like a lot of lousy digital controls, it also controls velocity instead of position. Even control of the velocity is imperfect, and depends greatly on content. And if you’re scrolling very far, you have a long time to wait. Or else, stuff whizzes by and you don’t really know where you are.

    3. Arrows on scroll bar are usually too small to hit easily with mouse and usually too slow anyway.

    4. Clicking in scroll area (outside the slider bar) is dumb. I see you didn’t even check for that! You have to fiddle with the mouse to position it. Then it works OK until the scroll bar gets to the mouse cursor, then it stops or reverses or something. With UNIX the little thingy on the scroll bar is much too fiddly to hit. Much easier to use the page up/down keys. Easier to hit, and much easier to repeat.

    Conclusion: combination of keys, mouse wheel and scroll bars works well. Nothing else is worth bothering with.

  7. As for your question whether autoscrolling should be turned on by default, it IS turned on by default. It doesn’t do much harm, although it is possible to (1) accidentally click on a link while trying to scroll or (2) scroll while trying to click on a link. I don’t share much enthusiasm for it, but if you like text moving at a constant rate before your eyes, that’s a good way to do it–when it works.

    And I take it back about the scroll bar being smooth and firmly linked to the mouse. Unfortunately, NOTHING is smooth and predictable all the time, but it’s still often better than other methods. I’m sure it depends on the computer and the content.

  8. I’ve often wondered what it would be like if we implemented an always on invisible scroll box, similar to the interface of a real time strategy game. It would feel a bit uncontrollable at first, and users might get frustrated as they initially tried to target items outside of the box’s bounds. But it would be the most efficient way to do scrolling, no modifiers or external knowledge required.

  9. I use the extension “Scrollbar Anywhere”, which allows me to right-click-drag anywhere on the page and scroll as if I were left-click-dragging a scrollbar.

    Benefits over scrollbar: Don’t have to hit a specific target. Don’t have to move mouse horizontally at all.

    Benefits over auto-scrolling: Better control over speed of scrolling. No up/down scrolling arrow thing.

    As a default option, I’d have concerns about it’s intuitiveness, but then auto scrolling isn’t really that intuitive either (middle button generally serves other purposes, as far as I can tell it’s only by convention that auto scrolling is really known as a middle-button thing).

  10. > However, using the vertical scrollbar to scroll a web page sucks.

    Says you. The thing is, it takes you exactly as far as you want to go. No other scrolling mechanism does that, to my knowledge. (I suppose I could be missing something, since I only know of about a dozen different ways to scroll a web page.)

    > It’s a long way from the content area, where the
    > user’s attention should be focussed

    Huh? It’s right beside the web page. Unless you’re looking at a page with gratuitously large side margins (*cough* default Blogger themes *cough*) or a bunch of advertising junk on the side (e.g., Yahoo), that makes it directly adjascent to the content. Besides, you only have to grab it once, and then you can drag it as you read, without even looking at it. (Somehow I doubt I’m the only one who does that.)

    > It’s thin and hard to hit

    That depends on your window manager and its theme and settings (or on the Appearances settings if you’re in Windows), and also somewhat on your resolution. (You do realize 800×600 is still the most popular screen res, right? Though 1024×768 is slowly but surely gaining on it.)

    > At least on Ubuntu, the colour difference between it
    > and the scrollbar track is minimal

    I’ve not seen that, but then the last Ubuntu release I’ve used at this point was Hardy Heron, which I think is about four releases old now. In any case this is going to depend very much on your window manager and its theme and settings.

    > It’s difficult to get consistent speed scrolling

    The only scrolling methods I’m familiar with that are better in this regard are ones that either take forever to get you anywhere (e.g., clicking the little arrow buttons at the top and bottom of the bar, or using the scroll wheel on your mouse) or don’t involve the mouse at all (here I’m thinking of keyboard shortcuts for scrolling, which many people don’t know how to use, and which do weird stuff when the cursor gets into a form element). If you want to actually get your scrolling done while you’re still young, and you’re predominantly a mouse user, dragging the slider is totally where it’s at.

  11. Another question: do these stats show what percentage of scroll operations are done this way, or only what percentage of users do it this way at least some of the time? Because when I have a scroll mouse (the workstation I’m on right now has a traditional three-button mouse…) I use the scroll wheel if I only want to scroll a short distance, but I reach for the slider if I want to go farther.

  12. I don’t want to keep replying to this question, but you know, it’s hard to know what one uses.

    Contrary to what I wrote, autoscrolling is often very useful. It works very well on this page, for example. And you don’t have to hit some stinking little control with the mouse. I find that if my hand is on the mouse anyway, I may try the mouse wheel. If that’s too slow, I’ll probably try autoscrolling, unless it’s one of those heterogeneous jerky sites, in which case I’ll probably try the scroll bar.

    If my hand is on the keyboard, I’ll probably use keys.

  13. Scrolling with the mousewheel is fine for short pages or short moves of the page. For anything else it has to be the scrollbar for me.

    IMO autoscroll style stuff just fails because its too hard to get accurate and its more difficult clicks (on a mousewheel) than just clicking a button.

  14. Are there biases in window state / scroll bar usage from the OS in use?

    As a Windows user, I tend to maximize my browser windows (even if it’s half empty…) when browsing. I’ve noticed that my Mac-using coworkers don’t, though. What OS do you and the people near you use?

    Amusingly I just noticed that I unconciously used the scroll bar to go back to your post at the top – even though I thought I used the scroll wheel (err, side-on-trackpad) more. It’s pretty easy to hit on the far right of my screen; in fact, I manually adjusted my Thunderbird (non-default) theme to remove the padding next to the scroll bar when the window is maximized.

  15. Wow, lots of great comments :-)

    MrS: middle click paste and autoscroll are not mutually exclusive. And middle click paste is (sadly) only turned on by default on Linux, IIRC. It’s certainly not on Windows – don’t know about Mac.

    KevinH: Christopher Jung tells me that “the data for the scroll bars reflects drag AND clicks on the track area (which should actually be separated)”.

    On my system, to auto-scroll I need to middle click and then move the mouse away from the scroll icon to move the page. I then need to _Move Back to the Icon_ to slow or stop the scrolling.

    … or release the button. But yes, it would be interesting to have an implementation where the scroll speed depended on how hard you were moving the mouse, not the distance from the icon.

    I have a Trackpoint, so my mouse doesn’t “move”. This makes autoscroll actually much better, because I can’t run off the edge of the mousepad. I’m starting to really like it :-)

    Scrolling on a touch device like the iPad, though, is a dream. Perhaps we do want a “throw”-style UI, where you can grab the page (perhaps with a right-click?) and then the mouse attaches to the page, but you can also flick and throw.

    David said: “The second problem is that “autoscrolling” is both modal and quasimodal.”

    Are you sure? It’s not for me. When I release the middle mouse button, it switches off.

    Ben Basson: Thanks for the tip. I’ll definitely try Scrollbar Anywhere.

    All of this seems to tell me that we need to do more research into people’s scrolling habits.

  16. I consider myself a fairly advanced user and although I mostly use scrollwheel or (when on mac laptop), scroll with two finger panning gesture on a trackpad, but I sometimes feel I need to fall back to using scrollbar directly for “precision” scrolling.

    Other than that — most of the users I’ve seen using scrollbar heavily are what we usually call “average user” for whom this is not so much that other scrolling methods offer worse usability but rather that scroolbar is the only thing they know they can use to scroll a page.

    The trouble is (and I am making wild assumptions here) that scrolling is not universally iomplemented across all applications (even in the full suite of Microsoft products) and using scrollbar is the only consistent ui they know for sure how to use and most likely have never learned how to use anything else…

  17. I’m a big fan of autoscrolling, but it doesn’t come naturally. It requires a little bit of training to become familiar with in my experience. It’s also imprecise in my experience, I prefer using the mouse scroll to move those last few lines.

    I do, however, find it much less irritating than using the scroll bar, which often takes so long to get to and is to so fiddly to use (keep my mouse inside a thin area whilst I move it up and down repeatedly – it sounds like a challenge in a video game) that I lose track of what I was doing. Not to mention if I was after a form or other interactive element, I have to pull my mouse back to where it was before I wanted to do the operation.

    I find myself using all three mechanisms during everyday use. None feels ideal – but without autoscrolling any attempt at fidelity would be awkward on a large page. Trying to find exactly the right pixel to rest the scrollbar requires manual dexterity you can’t expect from users.

  18. If autoscroll had the Option to behave like Kevin H’s 7th point a lot of people would choose to use it that way.
    The only reason I don’t use the scroll bar in that way much is because of the pain in my finger from having to keep the mouse button held down. But if I could just middle click and let go and get that behaviour it would be wonderful.

    A middle click with mouse movement should simply “grab” the page and move it like the hand tool in photoshop/adobe reader/preview.app

    1. A middle click over a link without mouse movement should open links in new tabs.

    2. A middle click without mouse movement anywhere else on the page should activate the current autoscroll widget.

    3. On first use of the old autoscroll there should be a notification informing the user about #1 and about an option to make the autoscroll widget also work like #1 (click once and let go to pan rather than keeping the middle mouse button held down (it’s always been the hardest button to press on every mouse I’ve ever had) )

    I’m sure with this more hand-tool grab and move approach some people will miss the velocity features of the old autoscroll. For them I think it would be good to integrate the grab and “throw” features I’ve seen in a few scrolling related extensions. I think you can see the grab and throw features in the last 2 versions of photoshop as well.

    Other alternative options for the current autoscroll widget:

    A. A Joystick graphic where the handle moves in relation to the mouse position + a speedometer to show how fast the page is moving (in x and y) + transparent colored “zones” around the central graphic to give an idea of how fast the page will move in relation to how far the mouse is moved.

    B. Middle click toggles an alternataive set of scrollbars over the page itself that are semi transparent, super-fat, super easy to target. There would be 2 options for the way these scrollbars worked.
      1.They work like normal scrollbars where there is an relationship between the size handle and the page length.
      2. They work like analog controls for scrolling down/up/left/right/ and the position of the drag handle controls scrolling speed only. Letting go of the drag handle snaps it back to the middle of the track and eases the page to a stop.

    C. In addition to B above the browser calculates the number of printed pages the web page would generate and gives a list of large clickable “page” icons as well as PGUP and PGDN buttons.
    I could see these same large, easily clicked controls being useful on touch devices as well.

  19. (keep my mouse inside a thin area whilst I move it up and down repeatedly – it sounds like a challenge in a video game) Posted by: Danny Moules at September 16, 2010 2:06 PM

    In OS X I just click the drag handle and I can move my mouse anywhere and it still controls the scrolling. I can even move my mouse to a 2nd monitor. You don’t have to keep your mouse within the narrow vertical area of the drag track. I think windows 7 works the same way.

  20. Gerv wrote,
    “David said: ‘The second problem is that autoscrolling is both modal and quasimodal.’
    Are you sure? It’s not for me. When I release the middle mouse button, it switches off.”

    Gerv, autoscrolling works in two ways. If you middle click and hold, it scrolls as long as you hold the button. But if you middle click and release, it scrolls until you middle click again. That’s for XP; I can’t check Linux at the moment.

    Danny Moules wrote,
    “the scroll bar… often takes so long to get to and is to so fiddly to use (keep my mouse inside a thin area whilst I move it up and down repeatedly – it sounds like a challenge in a video game)”

    Danny, as thinsoldier wrote, you don’t have to keep the mouse on the slider. It works for ANY OS, as far as I know.

    Gerv wrote,
    “All of this seems to tell me that we need to do more research into people’s scrolling habits.”

    Why? You’ve already found out that everyone uses something different, and in most cases they use multiple devices. If you eliminate any of the many devices, you will sorely inconvenience a lot of people, for little or no gain. Now, if you can insure that all methods will result in smooth and certain scrolling, now THAT would be worth doing.

  21. Ben Basson: I just installed Scrollbar Anywhere, and it gets very close to being an ideal replacement for the scrollbar. The one shortcoming is, if I begin my click and drag from the middle of the page, then I am only able to scroll halfway down the page before “running out of room” and having to reset my mouse position to complete the scroll.

    I have a feeling this is an insurmountable problem for the extension developer, because they either would need to exponentially increase the speed the page scrolls based on my distance from the bottom of the window (sounds like a bad idea) or they would need to be able to reposition my pointer at the correct position of the page, to provide me the room I need to scroll the page all the way down or up (which sounds like something that would not be available at the extension level [and possibly not even at the application level on all Operating Systems])

  22. Make scrolling with scrollbar finally smooth. Not jerky as it is today. Smooth!

    Make us of hardware acceleration on _each_ platform, not just Windows and Mac. Linux is an important and growing OS too! And it features OpenGL as well as Mac.

    I hate to see my graphic card to handle FullHD videos, smooth desktop effects but my browser (whatever it is) to fail at scrolling. It sucks.

    It’s 21st century!

  23. To the person who said that “autoscroll” is that stupid middle-click thing, thank you! That’s been getting on my nerves on a regular basis since I started opening links in new tabs. I just figured it was an OS thing, since it had been happening since I got my first wheelmouse. No more having the page scroll all over the place because I was off by a pixel when I clicked!

    Re: having “throw” functionality in a non-phone browser. This is a horrible idea. Google Maps seems to have added something like this not too long ago and the usability has suffered severely. Sometimes it “throws” me several miles away because I twitched a little when I released the mouse button, or it assumes I’m pinch-zooming and zooms in or out several levels. Nothing like trying to get closer to something only to have it zoom out so far I have two world maps showing. On a phone that kind of behavior is expected and works great. On a computer it’s not expected and makes the browser look broken.

    If I want to scroll a long way I’ll either click in the gutter if I’m mousing, or hit PgDn/PgUp if I’m on the keyboard. If the slider is large enough to reliably grab I’ll drag it directly. But that also has the problem of “unscrolling” if I wander too far right or left. So 90-some% of the time it’s page keys and the gutter.

  24. Gerv, autoscroll is off by default in Ubuntu Fx and on by default in Windows XP! Once enabled, it seems to work exactly the same. It would be nice if you could get it turned on by default.

  25. Gerv: The modal mode is triggered when you middle-click and let go without moving the mouse. If you move the mouse at all before releasing, it’s only quasimodal. This is the way it works for me, both on Windows XP and on Ubuntu. If you can verify that it’s not like that for you, perhaps there’s a hidden setting I’ve missed.

  26. I’m using the mouse wheel a lot, but when I want to read a text-laden web page – such as the comments on this post – I move my mouse pointer out of the way of the web page anyhow, as it would be in the way of reading. Having done that, it usually lands on the right edge and is in the right position to use the scroll bar.
    Also, when I want to skim a lot of text, it’s easier for me to drag the scrollbar “grippy” (or whatever it’s called) then to use the mouse wheel, as scrolling fast sucks with any other method than the scrollbar.
    And, for one last thing, scrolling to a defined position, i.e. top or bottom of it, or browsing fast through the contents to find visually what I want is much easier with the scrollbar than with the mouse wheel or any other method.

  27. “Danny, as thinsoldier wrote, you don’t have to keep the mouse on the slider. It works for ANY OS, as far as I know.”

    thinsoldier, vanillamozilla: Unfortunately only true in certain contexts. Moving the mouse is capable of triggering focus or mouse capture events. Certainly I have found it good practice never to rely upon it.

  28. > As a Windows user, I tend to maximize?

    Yeah, in Windows you might as well maximize, because you’re going to have to minimize in a few moments anyway, to get to one of the icons on the desktop for something or another. That’s one of the limitations of the environment.

    As a Sawfish/gnome-panel user, I tend to leave windows in their same position for extended periods of time (weeks, even months), only minimizing the ones I don’t use much. Windows are arranged so that certain things show from behind the edges of the current one, so that I can easily glance down and see them without taking any action (in particular, without moving the mouse). It’s convenient. This is possible because I don’t need to minimize everything all the time to get to the desktop, because the Gnome panel has that covered. (In general, the Gnome panel is about 9487609 times better than the Windows taskbar. It is, as far as I’m concerned, the most important selling point for Linux.)

    > And middle click paste is (sadly) only turned on by default on Linux, IIRC.

    Probably on all X11 builds, I should think. The selection buffer is a standard feature that pretty much all X11 apps are expected to support (except for things that don’t do anything with text, like xeyes or xclock).

    The reason it’s not turned on on other platforms is because other platforms don’t have a selection buffer, only the explicit copy/paste buffer (“clipboard”). I suppose you could make middle-click paste from there, but you’d still have to explicitly hit Ctrl-C to copy, so it doesn’t really save you anything. Seems pointless to me.

    > autoscroll is off by default in Ubuntu

    Probably on all X11 builds, and for good reason: X11 users in general are accustomed to having the middle button do other kinds of things. If you want autoscroll on, just turn it on, no big deal. It’s not like you have to compile your own build from source to get it or anything, just toggle a preference.

    > it’s easier for me to drag the scrollbar “grippy” (or whatever
    > it’s called) then to use the mouse wheel, as scrolling fast
    > sucks with any other method than the scrollbar.

    Exactly.

    BTW, the usual term is “slider”. HTH.HAND.

    > Moving the mouse is capable of triggering focus or mouse capture events.

    If that happens while you’re dragging the slider, it’s a bug and should be reported as such.