Many native apps these days are meant to be used with a horizontal swipe across the entire screen. At my company now, the idea of having our web apps styled in this manner are being thrown around a lot.

This is all well and good when you're on a touch enabled device that actually enables a user to swipe the page to scroll to the right or left, but what is the best web alternative?

Some that I have seen are actually have a scrollbar at the bottom of the page (not a fan of this idea) like this page. This doesn't seem very usable to me or visually appealing.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

And another is to have arrows on each side of the screen that allow you to click it, or hover to go one way or the other, like a page wide carousel. Example here.

mockup

download bmml source

(Forgive the poor mockups please...)

Is there a better alternative to these? Should there be even different behavior for a website styled in this way to degrade gracefully? And does anyone have examples of a site doing this particularly well?

Thanks!

  • While I realize we aren't talking about carousels, the mechanics of what you are describing are fundamentally the same. UX Movement put up a good stub article on formatting this sort of interface: uxmovement.com/navigation/… – Imperative Jun 19 '14 at 0:25

At times the industry develops a certain trend and users get educated about the same. Involuntarily they start expecting things which may or may not be efficient solutions of problems, but since we are designing for the user, we have to consider their expectations and mental model while designing.

Talking strictly about web,

Currently the trend of horizontal scrolling is diminishing, and both the sites you linked are somewhat troubling executions. The first one is worse among the two as there is no visual cue for moving horizontally. An average user does not specifically look out for the scroll bars and makes his decisions. The second example, defaults the middle mouse click behavior when it starts navigating sideways when mouse moves at one side. It is tad better than the previous one, but moves away from the standard. Thankfully when they load the site, they clearly tell the user that the navigation works sideways.

The sites which we see these days, which include Google Nexus, Apple Mac Pro are examples of amazing creations using the vertical scroll, and one of the reasons for using vertical scroll is because it comes natural to the user, who is accustomed to scrolling vertically for data, and which maps with his action on mouse wheel. With the arrival of compatible technologies, we have seen more creative executions of vertical scrolls, and users expect the same these days. (Personal experience : Horizontal scroll is frowned upon).

Am I completely discouraging you from horizontal scrolling? Well, No. There are times when horizontal scrolling makes sense, like building a book layout which should turn pages or flow sideways, but times like this, I'd recommend capturing the mouse wheel action and mapping it to a effective horizontal scroll coupled with animations. In other words, a mouse wheel scroll or the track-pad scroll gesture should take you from one view to another seamlessly creating an impression of fluidity. This should not annoy your user very much so he might accept the shift the current trends.

Also graceful degradation is entirely different consideration.

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.