Mobile Must-Have: Vertical, Finite Scrolling

WompMobile most have series focuses on best practices for mobile solution design and development

Vertical, Finite Scrolling

Don’t send your users – or your content – over the edge!  Limiting scrolling intelligently can enhance your users’ experience and comfort, leading to more conversions.  Use these tips to get the most of your mobile solution.

Avoid infinite scrolling

Infinite scrolling will keep adding more content to the bottom of the page endlessly.  The mobile user will never see a footer – which can be disorienting – and will have a long journey if they have to scroll back to the top of the page.  Often used for product lists in m-commerce, the goal is usually to keep shoppers browsing longer.  This may seem like a good idea, but are you more likely to buy a jar of peanut butter (and enjoy doing so) if the store offers 10 varieties or 100?  Most users will become overwhelmed and leave instead of purchasing.  Additionally, infinite scrolling is frequently buggy and doesn’t have much proven added value, so it is best avoided.

Use linear scrolling

WompMobile Must Have vertical, finite scrolling is a best practice design standard for converting your site to mobileAlways restrict page scrolling to straight up-and-down or left-and-right when you convert a site to mobile.  All content should fit the width of the screen either horizontally or vertically – which means scrolling should only happen in one direction anyway.  Allowing a page to move freely or in both directions at once is disorienting to most users.

The flick or drag is the most common way a mobile user will attempt to scroll and most people don’t do so in a perfectly straight line.  If users can only move in two directions, one at a time, users are less likely to miss or overshoot their target, click the wrong link, or become lost or disoriented.  Users will feel more in-control.  If you have a wide element like a slideshow that scrolls the opposite direction as the page, make sure touch events will only move either the page or the element and not both at the same time.  This gives you more design flexibility while maximizing user experience.

Use momentum scrolling

Momentum scrolling makes it easy for users to scroll vertically. Especially for long pages, this feature is essential.  Once scrolling is initiated, a page will continue scrolling without active input, which will keep a user’s stamina up, and slowly stop as if friction were acting on it.  This is a very popular method and most frequent mobile users will expect it.


If you liked this read, check out these:

Don’t miss any great content! Follow WompMobile on Facebook for all the latest!