Beware Horizontal Scrolling and Mimicking Swipe on Desktop

by Katie Sherwin on April 27, 2014

Summary: Even as more sites mimic swiping gestures and incorporate horizontal scrolling in desktop designs, users remain reluctant to move sideways through content.


For years, we’ve known that horizontal scrolling is painful for users on desktop computers. Even with the wide adoption of mobile devices, where touch gestures are used to swipe for content, users on desktop websites have not embraced horizontal scrolling. This article addresses some of the inherent issues with the touchscreen-inspired horizontal scrolling and offers some alternatives and suggestions for how to help users move laterally through content. Obviously, you cannot literally swipe if you don’t have a touchscreen; throughout this article, we’ll use quotes around the word “swipe” to refer to the analog of the touchscreen swipe gesture on the desktop.

The Appeal of Horizontal Scrolling

The dominant standard for moving through long pages of content on desktop sites is by scrolling vertically. The conventional mouse and the scroll wheel make it easy for people to scroll up and down, thus reinforcing the pattern.

Websites that intentionally break convention and move the canvas left to right across a page often do so for one of the following reasons:

  • Consistency across devices. Our research on mobile devices indicates that horizontal swiping is common and users are comfortable with the swiping gesture on phone and tablet touchscreens. Responsive or mobile-first sites use the horizontal “swiping” across all devices, including desktops, because a single design across devices is cheaper to produce and supposedly offers a consistent experience. However, because horizontal scrolling is a lot less common on desktops, users often have no idea that they can discover content by “swiping” on large screens. Since people interact with mobile and desktop devices differently, the one-size-fits-all approach can backfire. The key point is that users are most likely to consider consistency as applying to the user experience they have while flittering between websites on their current device. They are less likely to remember the exact interaction techniques a particular site employed on a different device where they accessed that site some time ago.
  • Browsing through nonessential content. Not everything is critical content. For secondary information, for example images in a photo gallery, horizontal scrolling lets users see a small sample of the content and gives them the option to quickly “swipe” or click for more. For some content, it’s fine that customers won’t scroll through an entire filmstrip. Just be sure you’re not placing essential content behind a horizontal scroll, because not everyone will discover it.
  • Saving vertical screen space. Rather than displaying all the content at once on a very long page, horizontal layouts introduce users to smaller chunks of information. The layout is flexible and extensible, because content can be added both vertically and horizontally.
    Stacked filmstrips used to save space
    Hulu.com: Filmstrips by category are stacked, so users can see options within a category by “swiping” to the side, or scrolling down to see different categories. This use of two dimensions helps users by showing a variety of options without making them visit separate category pages.
  • Showcasing a distinctive design. Many sites, especially those of artists and digital agencies, use horizontal scrolling on their sites in order to stand out and offer a glimpse into their design capabilities. In contrast, for mainstream sites, being different for the sake of being different is a terrible design rationale.

The Risks of Horizontal Scrolling on the Desktop

While horizontal scrolling is acceptable in some situations, it should be applied with caution. Be aware: horizontal scrolling on the desktop is one of the few interactions that consistently generate negative responses from users. (Anecdotally, the disdain for it is so widespread, that I like to use it to illustrate what user experience is to people unfamiliar with the field. I ask if they can think of a website scrolling horizontally. They usually groan and say they hate it, and then I explain how we look at things like that and find ways to make them better. Usually they respond along the lines of “Thank you, I wish there were more of you.”).

Note that although “swiping” on the desktop does not evoke the same level of negative reaction as the traditional horizontal scrollbar, it does still pose similar risks. Let’s look at 3 main reasons why horizontal scrolling and “swiping” are problematic on the desktop.

1. The traditional horizontal scrollbar burdens the user by requiring constant attention and greater physical effort to maintain the dragging.

Most people use scrollbars to scroll, and not the scroll arrows. However, moving across a thin tunnel (like the scrollbar) is difficult because it requires careful steering of the pointing device. (This is an instance of the steering law, which says that the time it takes a user to steer a pointing device through a tunnel depends on the length and the width of the tunnel: the longer and narrower the tunnel, the more time it takes users to move the pointer from one end to another. The steering law is derived from Fitts’ law, which we discuss in our Human-Computer Interaction course). As a result, using a scrollbar on the desktop has a high interaction cost and slows people down. In a recent user test, a participant became frustrated scrolling sideways through product listings and complained, “It’s taking me forever to scroll through this.”

2. Users may ignore content accessible through horizontal scrolling or “swiping” as they don’t expect content there.

Our research found that even strong cues such as arrows frequently remain unnoticed. People expect to scroll vertically for additional content, but they don’t expect to scroll sideways. Horizontal scrolling works against their preexisting mental model of a web page.

Eyetracking heatmap of filmstrip
Apple.com: This eyetracking heat map shows how a user looking at a filmstrip of product images never glanced at the arrows, and thus never saw the other products in the rest of the filmstrip.

3. Even obvious cues for horizontal scrolling have weak information scent.

Even if people do notice cues for horizontal scrolling, they may not want to risk loading content that they cannot predict. Content hidden by a horizontal scroll is at a disadvantage because even salient visual cues don’t offer strong information scent: users can hardly guess what information they will get once they click on an arrow or scroll horizontally. In implementations where the entire page “swipes” to reveal new content, the risk of disappointment is even higher: the user may have to wait through a long page load only to discover that the new page is irrelevant for her needs.

Arrows have weak information scent
USAToday.com: Users ignored the arrows on the sides of the article pages, because it was not clear what would be revealed if they clicked. When specifically asked about the arrows, one user said, “I wouldn’t use these. I want to read what I want to read.”

Recommendations for Implementing Horizontal Scrolling or “Swiping” on the Desktop

If you are considering mimicking the swipe gesture or using horizontal scrolling on your desktop site, follow these recommendations to make it easier for your users to notice and access your content.

1. Don’t make “swiping” the primary navigation on your site.

Don’t force users to “swipe” through your content: some will, many won’t. Allow for alternative ways of navigation: give users the option to navigate with menus, too. Menus tell users what’s on your site and help them find the information that they need. Users rely on them to go deeper into your site or move between categories. Without global navigation, it’s harder for users to move around and discover more content.

Global navigation and horizontal scroll
Dennys.com: This design offers obvious global navigation in addition to arrows to advance through content. In testing this site, a user never used the arrows to swipe between pages. Instead, he relied entirely on the global navigation and was able to complete all the tasks successfully. Note, too, that the partial visibility of the content on either side of the main panel makes it less jarring when the content moves into focus.

2. Don’t make users guess how much content is left.

Use a scrollbar or pagination to show how much more content there is. It’s always best to show users where they are in your site, so they can better orient themselves. Tell people how much is left, so they can decide how much further to go. Or, in the case of a loop, users want to know when they’ve arrived back at the start.

Using pagination on filmstrips
Amazon.com: Page numbers and a link to go back to the start of the filmstrip offer useful context for how many options are left and how to quickly jump back to the beginning.

3. Create obvious, visible cues for horizontal swiping.

Let users advance through content on click and with the keyboard. If arrows are only visible on hover (like in the Netflix example below), people might not ever discover that there is more content. For both individual pages and carousels, design visible target areas where people can click to advance to new content.

No arrow until hover
Netflix.com: In its regular state, there are no visual cues to indicate that more content is available (top). Arrows appear only on hover (bottom). Additionally, to see more content within a category, users must hover over the arrow. When they do so, the strip starts to move; if users want to see more items, they must be careful not to move their mouse away from the arrow area. Not only does this interaction take a lot of effort and sustained attention, but it’s also slower and can cause a dizzying effect that is more nuisance than fun. Clicking to advance the entire set would be much faster.

Conclusion

Scrolling and “swiping” horizontally on the desktop is a different experience than on touchscreen tablets and mobile devices. This is one more example of why it is important to understand that people use mobile devices, tablets, and desktops differently, and why it’s beneficial to optimize design for different uses. Avoid breaking convention just to stand out, or to solve a multiplatform-development challenge. Instead, evaluate whether or not horizontal scrolling is really appropriate for your users, so you can be sure that your design enhances their experience instead of degrading it.

Learn more about horizontal scrolling, carousels, and filmstrip design, and ways in which you can make them usable in our Web Page Design course.


Share this article: Twitter | LinkedIn | Google+ | Email