One thing per page principle
Last updated on
How do you make a complicated process easier to complete if you can’t make the process shorter? Well, one thing you can look at doing is applying the one thing per page principle to your process. The idea is simple enough, instead of having a complicated process all on one page break it up into smaller chunks and place them on screens of their own.
What this principle isn’t about
What this principle isn’t about is just having one element or component on a page, which it could if it makes sense. It is also isn’t saying that you should only have one question per page either, unless again it makes sense to do so.
Where the one thing per page principle came from
Where this principle came from was form expert Caroline Jarrett, who first wrote about the pattern in 2015, explains that user research “will quickly show you that some questions will be best grouped into a longer page.”. However, she goes onto to say that “questions that naturally ‘go together’ from the point of designs […] don’t need to be on the same page to work for users”
A case study of this is when Caroline was doing user research for GOV.UK Verify project, where they were looking at the onboarding experience. They decided to test putting the “create a username” on one page, and “create a password” on the next.
Naturally as a designer we would assume this would be overdoing things having these two questions spilt apart. What came out from the user research though was that users weren’t bothered. What we can take away from this is as a UX designer we can start with one thing per page, then go out and test that through research and see if grouping fields improves the experience.
What are the advantages to one thing per page?
There are a few reasons to follow this principle, lets discuss them. The first is that the pages in theory will be faster to load as there will be less to load. The benefit of this is that if you’re trying to improve conversion rate optimisation (CRO) then studies have been done to show a trend that a faster website leads to a better converting website.
People often enter the wrong information or miss details before submitting leading to errors. By having a smaller form the “errors are caught and shown early” and often. It is easier for the user to fix 1 thing per page and complete their task than saying there are errors on 5 different things wrong. This again will impact the willingness of the user wanting to complete your form.
By splitting up a form across many pages we can also use other useful features like “save and continue”. So if the user loses connection or goes off and does something else and forgets about the form then you can send them a reminder email to nudge them to finish off their task.
By spiltting up the form and allowing the user to go through many pages it adds a sense of progression to your form. Instead of being stuck on a page for a long time the user can do one task per page and feel like they are getting through each task quickly.
Written by
Senior Interaction Designer and Co-Author to Tiny CSS Projects