Usage of the horizontal browser scroll is widely recognized as a bad practice by UX specialists. However, since wide content continues to exist online a number of different creative methods have developed to accommodate horizontal layouts in a user-friendly way.
1. Many Columns of Data
2. Interactive Banner
3. Click and drag to explore
4. Banner Narrative
5. Albums and portfolios
6. Wide editorial content
Why more scrollbars aren’t better
The “default” scroll on a webpage is usually the vertical browser scroll which is easily manipulated with a mouse. The horizontal scrollbar, however, requires an awkward wrist and arm motion to pull the bar across the bottom of the screen. When a website is built horizontally (with the bulk of content extending beyond the right of the screen), the simultaneous use of two scrollbars also forces a user to pull the scrolls alternately, to try and find the desired content. As eloquently put by Jakob Nielsen in his 2002 critique of horizontal scrolling, “when pages feature both vertical and horizontal scrolling, users have to move their viewport in two dimensions, which makes it hard to cover the entire space”.
The opportunity of horizontal motion
Now that I have listed a few of the reasons why horizontal scrolling should never be used, I would like to turn your attention to some creative solutions that can make wide sites successful. These sites might appear to break the rules, but are actually user-friendly and always omit the problematic horizontal browser scrollbar.
Scenario #1 Many columns of data
A timetable of arrival and departure data using an inset scroll (Cloudberry comp)
In this comp, an inset scrollbar is devoted to the spreadsheet so that it matches the width of the rest of the content on the page. Without an inset scroll, it would have extended through the right-hand side of the browser creating the quintessential Excel effect. This scrollbar is easily manipulated, and allows the user to scan through many columns of data with minimal mouse or hand movement. Because the scrollbar is inset (rather than living in the browser), there is only one browser dimension (up and down) and the user can scroll through the rest of the page normally with the mouse scroll.
Scenario #2 Interactive Banner
Interactive Banner by www.MeYouHealth.com
Sometimes a horizontal landscape is employed to give users the sense of motion and space for interaction. Me You Health has an interesting approach: the logo, head navigation, and footer all remain fixed and visible, juxtaposed with a movable upper banner that can be clicked and dragged. While it might still benefit from a drag bar to act as a visual cue, it still accomplishes two aims: a user’s cursor is kept close to the interactive features on the at all times, and the most important content (Home, About, Contact Us) is always visible.
Scenario #3 Click and drag to explore
An inset viewport in Google Maps allows the user to pull the map into their field of vision (www.maps.google.com)
An even more well known application of the “click and drag” interaction concept is seen in Google Maps where horizontal motion is technically infinite (you could spend all day scrolling around the globe, in a circle). Rather than utilizing arrow keys, Google maps uses an inset viewport and a hand-shaped cursor to mimic the motion of pulling a map into your line of sight.
Scenario #4 Banner Narrative
The Story of Send gives the user 4 navigation options (http://www.google.com/green/storyofsend)
One of best creative uses of horizontal motion that I have seen is Google’s “The Story of Send”. This narrative tells a story by taking a user along an email’s electronic path. The Story of Send gives the user four options for moving back and forth along the storyline, horizontally. To prompt the horizontal animation, a user may click the back or forth arrow on the screen, use their right or left keys (on the keyboard), rotate their mouse scroll, or click the pills at the bottom of the screen to skip the animation entirely.
Scenario #5 Albums and portfolios
Facebook allows users to flick through photos with arrow keys and mouse clicks (www.Facebook.com)
Frequently, portfolios and albums are arranged in horizontal streams rather than vertical ones. To create a horizontal layout that showcases one image at a time, Facebook employs directional arrows on screen as well as the right and left arrow keys on your keyboard.
Scenario #6 Wide editorial content
The NYT Skimmer has flexible layouts to accommodate content of any width. Left: wide, Right: narrow. (http://www.nytimes.com/skimmer/#/Top+News)
The previous examples all share the fact that they hide content until a user clicks, drags, or flicks to the unseen portion. But sometimes content must always remain visible – and when this is the case, the best solution is a flexible layout. A flexible layout will keep all content in view by prompting both text and images to wrap to fit a smaller screen thus taking horizontal motion out of the equation entirely. For example, the NYT Skimmer is a responsive site that employs a flexible layout keeping all content in view.
Do you have another solution? Frequent any interesting sites with horizontal motion? Tell us about it in the comments below!