The Case for Horizontal Scrolling!!!
In the last few years, I’ve noticed alot of websites using horizontal scrolling for their navigation. From a design perspective, horizontal scrolling is a type of navigation that is still not widely used. But, it seems to emerging (or-re-emerging) on some websites now. In some respects, horizontal scrolling may actually offer a better alternative to standard vertical navigation.
From a usability perspective, horizontal scrolling is generally considered a poor design choice (sources: Usability.gov, Jakob Nielsen). In usability circles, there is a funny story about how Jakob Nielsen demonstrated his thoughts on horizontal scrolling by nodding his head up and down saying, “vertical scrolling, yes”, then, shaking his head left and right saying, “horizontal scrolling, no”. A great way to make your point. As a usability professional, we need to re-think this “defacto standard”.
Here are some cool examples of where horizontal scrolling with some thoughts on why I think it works. Enjoy!
Portfolio Sites Use Horizontal Scrolling
| So, you want to showcase your work in a cool and interesting way. These sites are using horizontal scrolling to draw attention to their portfolios. |
| The Horizontal Way |
 |
| Visuall |
 |
| Alex Flueras |
 |
Videos Would Be Hard to Watch Without Horizontal Scrolling
Horizontal scrolling is simply how we navigate when we watch videos. Consider how awkward vertical scrolling would be on You Tube. Watch Stephen Tyler mess up the National Anthem.
You can use the horizontal scrollbar to fast forward and rewind. At a glance, you know the location of the video to do a video clip, isolate something, edit, and so on. The horizontal scrolling is just how we watch videos.
Sites That Use Horizontal Scrolling to Mimic Reading
| For most cultures, the predominant way to read horizontally–left to right, right to left. Sites using horizontal to mimic reading can provide an interesting contrast to sites that use vertical scrolling or pagination. Two examples here: 1) mimicking a book and, 2) mimicking a menu. |
| Section Seven |
 |
| Denny’s |
 |
Using Horizontal Scrolling for Fun & Games
| Sometimes, you just want to have a little fun. Sites are starting to play with horizontal navigation to showw off their brand as fun and engaging. |
| Kia Picanto |
 |
| Head to Heart |
 |
About Post Author
The game changer for horizontal scrolling is the tablet/iPad environment. Horizontal scrolling is uncomfortable on the desktop, but feels very natural in a touch-based system. It feels like flipping through the pages of a catalog or magazine. On the desktop, I’ll continue to avoid horizontal scrolling.
I agree with you that tablets, smartphones, e-readers, and handheld video games have totally changed the game. Horizontal scrolling, navigation, and experiences thrive in these mediums. I think you can make the case for horizontal scrolling on web sites. Portfolio sites use them to make the person look more distinct. Gantt charts and videos use horizontal scrolling to show a timeline, too. Sites that mimic reading can use horizontal scrolling (like reading the Denny’s menu on their website).
Finally, sites that are data intensive with lots of tables can use horizontal scrolling. Pagination, pop-up windows, accordions, and other ways to show th data have their drawbacks to horizontal scrolling. I conducted a usability test where 20 participants all scrolled horizontally on a small table. Nobody struggled. They just scrolled to the right. It was not a HUGE deal.
One issue with scrolling (whether horizontal or vertical) is how easy it is to grab the scroll bar and drag. I use a number of web sites and applications whereI feel the dragger is much too thin or otherwise difficult to select and drag.
One thing that might help me feel better about horizontal scrolling is if the scroll bar / dragger / handle is “fatter” than usual. It would give me more confidence that I can quickly select it and move it with accuracy.
Also, I wonder if anyone has experimented with moving the scroll bar to the top of the screen, for horizontal scrolling? I don’t even know if this is technically possible with modern browsers (maybe there is some fancy javascript trick to pull this off?) I would be interested to see usability studies if so. It would be unconventional, but we don’t know if it’s more usable until we try it out.
Another things to consider (for non-touch devices) is the type of input device and how people use it. I have long felt that scrolling horizontally with a mouse is more difficult than with my input device of choice, a trackball. With the trackball, I just roll my thumb left to right, instead of awkwardly moving my entire wrist. Then there are trackpads and trackballs, which all require different kinds of motions to scroll. Something to look at.
Great article, Brian!
This is an old thread but we’ve had a horizontal scroller on our search results pages at Foodily for a couple of years. What do you think of it used this way? http://www.foodily.com/s/fall-soups. Always appreciate any input.
Phillip
Both horizontal scrolling and vertical scrolling have their uses in UI design. For any Web site that contains a fair amount of contents, vertical scrolling is a likely choice to display all the information. As to horizontal scrolling, it has become quite ubiquitous these days.
I had experience designing a seat map of an aircraft in a Web check-in application. For large aircraft such as the 747 model, it is almost impossible to display a long airplane without some kind of scrolling. One requirement was to place the aircraft seat map horizontally on the screen. Since the width of most large aircraft is greater than the screen width, I chose to use horizontal scrolling to allow users to move left and right to see all the seats on the seat map. No users have complained about the horizontal scrolling.
Since either vertical or horizontal scrolling can be used in design, the key is to understand when to use which type of scrolling and how to use it effectively.
Brian, thanks for offering your thoughts on using horizontal scrolling.
Great job!
The negative aspect to horizontal scrolling came from early Web page designs that would require end-users to have to scroll back and forth many times in order to read/view content. The argument was not so much against horizontal scrolling, as it was against the need for repetitive scrolling on a single page, or to have to combine both horizontal and vertical scrolling in order to view the page. The rule was “Design so that the end-user doesn’t HAVE to scroll to view a page.” If they must scroll, they should only have to scroll in a single direction.
Consider also that computer screens, up until the past 5 years, were all 4:3. That, coupled with low resolutions (640×480!) made designing anything of width, difficult. The browser was forced to provide a horizontal scroll bar if the width of the page was wider than the screen resolution of the computer on which the page was being viewed.
Then there was the introduction of scroll bars inside windows that already had scroll bars. This created (and still does) confusion for the end-user.
You are correct Brian. There are many valid needs for horizontal scrolling. With the implementation of new technology and wider screens, horizontal scrolling is no longer a “bad” thing.
What IS bad is poor implementation of horizontal scrolling.
Thanks, Doug. I think you are right about how technology is impacting design, too. The whole responsive web design approach is a direct way to solve some problems. Thanks for such a great comment.
I find it funny that we didn’t side scroll to read this. I guess you don’t believe in it that much.
Now, that is funny! And genius, too.