The topic popped up at work. After getting lost in a rabbit hole I wanted to summarize my new knowledge in this post. We won’t be the only ones struggling to decide whether to scroll or paginate our content.
The Problem
Sometimes content for web and apps tend to become very long, taking up a lot of space. This raises the question: should it be presented on one long page or separated into several shorter pages? What is best suited for the user? Scrolling or pagination?
As more and more people use their mobile devices to access digital content, it is save to assume that half the users use the page or app on mobile. Therefore mobile first is more important than ever. Scrolling is more suited for mobile devices, but we want a solution for both desktop and mobile.
In our case there is also validation triggered on navigation. So validating the form is another important point to consider.
Users
The first question to ask is, who are our users?
Is our content read and consumed or does it consist of a large form the user has to interact with?
Furthermore, do our users use the application or site as their everyday tool? In that case they are familiar with it and want to fill the form with as few klicks as possible. This is often the case for in-house-software.
If the users are familiar with the application, longer pages with more content and fewer navigation are the way to go. Because of efficiency.
Content fatigue
Too much content can be overpowering. Facing a huge form could scare away potential users and dynamically loading more content via infinite scrolling might result in users loosing track.
Infinite scrolling has its place for consumable content to load in the background, therefore giving a better user experience and keeping the users on site as long as possible.
For forms on the other hand it’s the opposite. It might not even be possible to grasp the size of the form presented.
Longer pages are suited for articles or stories, thus making it possible to consume them in one go. Navigation to the next page lets the users proceed to the next logical section or chapter.
Sections
On a side note content must be grouped into logical units. By using headings and chapters or putting them on the same page.
Forms can be grouped just like that. Are there personal data, addresses, bank data, information concerning a book or whatever – these questions can be grouped.
Bonus points if the code for fieldset is used, maybe additional headings to deliver context. On the contrary, related fields must not be separated to different pages.
Validation
Field validation should be triggered directly after the input. But there is additional validation that needs another trigger, i.e. navigating to the next page or submitting the form. This is the place where required fields are detected.
It is best practice to scroll to fields with errors, when they are detected to make correction as easy as possible. Now it’s clear that the longer the page the longer the motion to scroll back to the bottom.
Or when there is no automatic scroll, the whole page has to be searched for the field with the error.
Progress
For long and for many pages alike the user needs to have a clue on what to expect. How long is this page gonna be or how many pages will follow?
One possibility to show this progress is a progress bar. Maybe an additional text saying “page 2/5”.
For long pages or articles anchors and a table of contents are helpful.
In both cases it must be clear what scope to expect for the content. Bonus points if the estimated time for reading or entering data is given.
Conclusion
“It depends” is the answer – as it is most of the time. Long pages or many pages, this would be best decided using an AB-test (if anybody did, please let me know).
Besides here are my key takeaways:
- If the content is there to be consumed, use few and long pages.
- Group forms into logical sections and place them on single pages.
- Use a progress bar or a similar widget to show the scope of the content ahead.
Concerning my very specific problem at work we will find a solution that lays in the middle. Half long pages with inputs that can be thematically grouped.
Sources
My ideas come from these two sources and some bits and pieces that one picks up when being on the internet for quite some time:
- Infinite Scroll vs. Pagination (designerly)
- Pagination in Web Forms (uxmatters)
Leave a Reply