Horizontal scrolling in mobile
History of Horizontal scroll
Way back in 2005, the nationwide web usability report stated that one should NEVER use horizontal scrolling web design for websites. And that was because the whole UX of sideways scrolling was confusing to the user and it just did not comply to conventional web design standards.
How did the trend shift?
Horizontal scroll saw a shift in acceptance with the emergence of technologies such as iPads and extensive usage of smartphones in the recent years. With mobile devices, swiping movement became more intuitive and a whole site’s information could be available to the user at the swipe of a fingertip. The trend of horizontal scroll could be well attributed to
Most people, including you and me, immediately scroll down vertically when we click open an app.. What is it then, that we can do as designers to make a horizontal scroll intuitive? I discovered few for my designs. In this article I would talk about few of those tips.. Here they are —
1. Careful planning — Figure out what fits where
Okay, okay — this might not be the most mind-blowing tip on the list, but it’s definitely the most important one on the list.
Carefully planning out the interface is the first things we learn about design. Sometimes time crunch, short deadlines or lazy days leads to just doing away with planning. But, with a horizontal design you definitely want to take the time to plan it out, draw paper prototypes and mock-ups, and figure out where and how everything is going to fit. There are a lot of things to consider and because it is not what most designers or visitors or used to, you have to plan a lot more than you might with a vertical site.
2. Use horizontal scroll in specific cases
Horizontal scroll works best when you want to display a subset of a category. A few situations where horizontal scroll have seen good success are -
- Displaying a large catalogue of products or items so that different product categories can be easily shown
2. Displaying information in a large visual area that is not easy to see at a glance (e.g. a map)
3. Displaying discreet sections or slides of information on applications
3. Show visually
Horizontal sites are not as intuitive to visitors as vertical sites which they see all day, every day. So, desktops use arrows or dots to show the same. Your visitors would much rather be guided the way than have to click around to figure out how each thing works even if it makes complete sense to you as the designer. But this works well for desktops. Mobiles are touch based rather than click based.
For mobiles you have to do it differently. Your design must have a visual hint that a set of content is horizontally scrollable. The best way to do it is, letting a part of the scrollable content peek out!
4. Indicate extremes of a list
It’s important for the user to know when the scroll ends. We have noticed users repeat the scroll operation because they think that they didn’t scroll enough in the previous attempt.
- A neat animation helps users realise that they have reached the end of the list.
2. Another way of indicating the end of the list is use of extra space at the end.
Positives of horizontal scroll
- It is a design that is almost 100% consistent across all devices.
- It is designed to allow space for secondary information, that doesn’t hog page space. For example when displaying 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.
- Horizontal scrolling saves a lot of 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 much more flexible. One can add content in both directions — vertical and horizontal.
- Horizontal scrolling allows users to 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.
Conclusion
There is a lot of debate over the internet about the usage of horizontal scroll and it’s impact on UX. But I believe, if it’s used wisely it saves a lot of vertical space and helps in compartmentalising the content on an app. I’m happy to hear your thoughts on horizontal scroll and learn few more tips to make it intuitive.
