This article was originally written in 2015 for a team of developers but is now published on this site for public consumption since 2022.
In April 2015 the amount of mobile only internet users surpassed desktop only internet users launching us into a new digital age of mobile first. It’s been over a year since then and it’s now time to look at how our mobile users like to view the web and what design changes we should be making.
After reading this article it made me realize I needed to adjust my view on website design especially concerning mobile users. The article brought out that the web is full of more and more designs that are “long scrolling”. Perhaps it’s a parallax design, one page design or infinite scrolling design. The common theme is mobile users love to scroll! The myth that people don’t scroll and that no one will see your content unless you make sure your it is above the invisible fold, like an old newspaper, no longer exists. Next time you’re on the subway or in a spot to people watch mobile users watch them. They love sites like social media and will continue to scroll and scroll just to see if they missed a post or just because they enjoy the gesture swipe interaction. The thing in design we have to remember is making sure it’s evident in our design that there is more to scroll to. So while the content does not need to be above a magical “fold” we don’t want users to think they are at the end of our page either. Some designers have decided to completely hide content to solve this and while some times that is good, like on a search results page where we may shorten or remove the description, it’s not always good for a page that is supposed to have content on it. Adding collapsed content like accordions or read more comes at a interaction cost. Mobile users aren’t wanting to click a button to get to the next page or to read more of an article they like using gestures to navigate, they like the sliding feeling of a site going by normally caused by scrolling.
In fact gestures might be more intuitive than we once thought. A study back in 2009 showed that regardless of nationality or proficiency with mobile devices gesture-based controls seem to come naturally to us, or at least can be picked up quickly. If that were the case back in 2009 just imagine how more true this is now in this new age. Think about the first gesture you learned on your mobile device. It was likely a swipe to navigate or at the very least to unlock your device. Since its the primary gesture for navigation on a mobile device it’s actually more natural and intuitive to scroll on a mobile device then click and drag a scroll bar on a laptop or desktop.
Now let’s think about the future of the web. I look at my brother-in-laws who are only 3 and 5 years old and they can use a mobile device with ease because of how intuitive gestures are and trust me they love to scroll. Growing up in this digital age of mobile first they will desire their web experience to be even more intuitive and even less interaction costs. As we are building the web for this generation we might see a path to pageless websites.
Back to the present, the truth of the matter is In split tests, long pages often beat shorter pages. So as we build sites for our modern users, while we wait for this current one to grow up and build even more interactive sites than we dreamed of, let us not be afraid of scrolling content. Now why do I say content instead of design? Because sometimes the design can get in the way of content. While we don’t need to worry about the old newspaper fold when it comes to our content we don’t want our user thinking they are at the end of a site. If it’s perfectly okay if the content goes beyond the page or if content is below the initial view but we have to let the user know it’s there. After all most users don’t have or don’t notice the scroll bar that might popup while they are scrolling. A scroll bar varies depending on their device and browser. So we need to make sure our users know there is content to scroll to. This is especially important when the user goes to a new page on our site, they need to know they have landed on a new page. Since we can’t rely on a scrollbar showing how long the page is we have to make sure our layout is good enough to suggest there is more. Large design elements , such as banners, logos, navigation, search forms and etc, can cause the user to not realize they are on a new page with content. The last thing we want is the user having to scroll past a design to just find out if they are on the page that has the content they want. So if we have a large banner, maybe had an arrow high enough so that no matter you screen size the arrow is there and when you go to the next page maybe shorten or remove the banner all together.
Some goals while designing we can have:
- Always be able to identify when you are on a different page on load. A general rule (that might change as technology changes) is your headline for mobile shouldn’t be lower than 340px on the page.
- While scrolling you should be able to tell that there is more content to scroll to. Don’t allow large images, videos, white space or element that are normally at the end if the site, like social icons, break up the content to the point where you can’t see the next piece of content.
- Avoid collapsing content, its okay to collapse functions of a site like, search forms and other forms, filters, navigation. Things that aren’t content. Content is why the person is on the page. So if its just a page with a a sign up form and that is why they are there you wouldn’t collapse it but if the content was an article and you had a signup form after the article you could collapse that form so that the user can easily see there are related content links below that.
- Test your design on devices before development
- Test your design on devices after development
- Allow for changes in the design after initial development
- Avoid auto scrolling on load, this takes control away from users. It implies we know best for the user, another reason we shouldn’t collapse content is we are suggesting to the user it’s not important they will want to scroll past that section. If we can auto scroll past a section or collapse it, maybe it’s not important enough to even be on the page?
Since we aren’t afraid of scrolling anymore in this age then Is infinite scrolling the way to go? We have seen some major successes with infinite scroll like Facebook, Instagram, Pinterest and some failures like Esty. There are pros and cons to infinite scrolling. Really infinite scrolling is great for combing over large amounts of information. A big flaw is the fact that you easily lose your place if you click away and try to come back. This site is an example of a solution for that but, it really is a limited use case. Most clients have a big header and big footer, really this is only good if you only want to see a list of results. So, the determination on infinite scrolling has to be made with the end user in mind, or else your site will fail like Esty did. Really based on most feedback from users if you aren’t building a social media site then infinite scroll is not the way to go especially with the fact that even in social media users give feedback of frustration on trying to find something they saw before.
So, while infinite scroll has its limitations remember, if you have to scroll a lot on a site, especially on a mobile device, that is okay. Don’t feel the need to collapse or hide content, if the content is long that is fine. If there is content after the main content, that is fine too. Users will scroll as long as design elements don’t suggest they are at the end of the page. Let’s cut back on interaction costs and allow users scroll or more likely swipe through our sites.
Please share this article with anyone you feel would benefit from it.