Horizontal Scrolling in Mobile UI

Horizontal scrolling was used along with Vertical scrolling for the initial websites of internet. Over the time, horizontal scrolling became extinct due to usability issues. Mice which has only a vertical scrolling wheel and the predominant user interface tool ensured the demise of horizontal scrolling. Vertical scrolling became a standard pattern to access more information. Even historically paper scroll extensions are preferred from top to bottom rather than left to right. We almost do not find horizontal scrolling on a website these days unless the website is not responsive enough. One other area where it is found is the horizontal carousels with a time change frequency.

However over the past few years, with the advent of smart phones with touch screens, horizontal scrolling is making a comeback. Many usability experts prefer not to use horizontal scrolling unless there is a strong utility. Due to the limitation of space, UI designers are required to show more information of a particular group. Since it’s easier on a mobile to scroll horizontally, this can be a useful way to group information of a kind. One more advantage of mobile screens is that unlike desktop screens, we can have multiple horizontal scrolls on discreet sections of screen. For example, a mobile screen can be split up as 4–5 horizontal scroll sections, hence more information.

One of the most important check that needs to be done before implementing horizontal scrolling in mobile is affordance. Affordance is a way of telling the user that there is an action available which he/she can perform to get a desired outcome. Are we giving the end user a perception that there is more information if he/she swipes to his left (right, if the app is middle-eastern)? To illustrate this, I am adding the screenshots from the AppStore and LonelyPlanet.

The “Must See” section of the app has two places listed. For a casual user, it may seem that these are 2 must see places in Washington DC. However, the app does better than that by providing more must see places if the user scrolls left on the same section.

Let’s look at AppStore screen to know how the LonelyPlanet UI can be improved.

There are 2 important ways in which Apple is creating affordances to the end user:

  1. Content beyond borders: The image block which is on the extreme right of each section is shown partially giving a perception that there is more content on the right. User seamlessly swipes left if he/she wants to see more of that category.
  2. Arrows or Links: “See All” link with an arrow redirects the user to that category page providing more options to user. So user “swipes” if he/she just wants a cursory look of more apps and a “tap” if he /she wants to dig deeper. Remember Swipe > Tap in terms of user experience.

One other way we can show that there is more information to the right is by giving dots in the center of screen below the section.

Dots: The number of dots will be in proportion to the number of pages. When a particular page is being seen, the dot corresponding to it will be filled giving user a navigational idea towards left or right. This will work when we have limited results. Normally a section with more than 5 dots may look bulky.

To sum up, avoid horizontal scrolling as much as possible, but when it becomes inevitable, make it count.