Small Interventions: Scroll Barred
When evaluating a site or an app’s user experience, it’s common to describe how easy it is to use, or how quickly its users can get to what they’re looking for. Lately I’ve noticed a few experiences on heavily trafficked sites or ad networks that are hurting their ease and speed of use. These inefficiencies have a very small impact when examined at an individual level (we’re talking milliseconds), but when extrapolated across the millions of users who likely face the same tiny issues on a daily basis, we can start to see a real and significant impact to the time and effort that users spend on getting what they want. As always, small interventions in the UX could have a large impact.
The first site I’d like to talk about is www.nytimes.com. I’m a voracious consumer of the Times; I return to its homepage at least once an hour, normally many times more than that, and I follow a number of its Twitter accounts for any articles I might have missed. However, the “above the fold” section of the homepage is roughly 20% more frustrating to use than it needs be.
Here, take a look:
Do you see the part I’m talking about?
At first glance, that area seems useful: it’s a live feed of the most recent news from other sources.
However, if you get to the Times’ website and try to scroll down to see more of the page, your mouse has to be outside of that area. Otherwise, you’ll only scroll within that small pane, which is… a pain.
All it takes to correct the error is a small move of the mouse to the left of that area. This takes a fraction of a second if you know what’s going on, but there are probably a number of users who might be visiting the Times for the first time. For them it’ll take a bit longer to go through this thought process:
I’d like to see more of the page.
I’m scrolling but the page is stationary.
For some reason, that small part of the page is moving.
Oh, my mouse is hovering over that part of the page. Maybe if I move it over it’ll let me scroll down.
Yep, that seems to have done it.
Now, let’s take a look at more of the page.
Everything within the highlighted pink section is “out of bounds” for users who might like to scroll down to a lower section of the overall homepage.
In interrogating why this seemed like such an imposition for me (as a user), I realized a few specific things about the way that I use my computer.
First, I rely on my mouse or trackpad for scrolling. I don’t use the spacebar or the arrow keys.
Second, when browsing the web I usually place my mouse to the right side of the screen, which is partly so that I don’t obscure content (silly, considering how small the pointer is) but is also likely inherited from the days of scrollbars, when to get to the bottom of the screen you had to physically click and drag the scrollbar downward.
You’ll also notice that Facebook’s homepage has a similar (albeit smaller) section:
So, what are we to do with this observation? And is it really an issue at all?
One simple intervention could be to require an extra step to activate the panel.
By adding a “click to scroll” button, you can show enough content to make it clear that it’s a “most recent news” feed, and allow users to access it by clicking the button once they get to the bottom of that pane. This would unlock the entire area for scrolling.
Another option is to employ the “force touch” technology now emerging in Apple’s laptops (and presumably in the next generation of iDevices). A “light scroll” would imply a scroll with greater breadth (i.e. whole page) while a “heavy scroll” could signal more specific intention within the larger page.
Next week I’ll write about a similar inefficiency that I’ve seen in mobile UX, specifically around mobile ads and their impact on scrolling. Thanks for scrolling all the way to the bottom of this page!