2018-05-29 : 10:00
2018-05-27 : 23:17
2018-04-23 : 18:03
2018-04-06 : 14:55
2018-03-24 : 14:41
2018-09-20 : 18:49
You can improve your form design with a simple pattern named "One Thing Per Page". Learn how to split up a complex process into multiple smaller pieces.
In 2008, I worked on Boots.com. They wanted a single-page checkout with the trendiest of techniques from that era, including accordions, AJAX and client-side validation.
Each step (delivery address, delivery options and credit-card details) had an accordion panel. Each panel was submitted via AJAX. Upon successful submission, the panel collapsed and the next one opened, with a sliding transition.
Users struggled to complete their orders. Errors were hard to fix because users had to scroll up and down. And the accordion panels were painful and distracting. Inevitably, the client asked us to make changes.
We redesigned it so that each panel became its own page, removing the need for accordions and AJAX. However, we kept the client-side validation to avoid an unnecessary trip to the server.
This version converted much better. Though I can’t remember the exact numbers, I do know that the client was happy.
Six years later (2014), when I was at Just Eat, the same thing happened. We redesigned the single-page checkout flow so that each section became its own page. This time, I made a note of the numbers. The result was an extra 2 million orders a year. Just to be clear, that’s orders, not revenue.
A couple of years later (2016), Robin Whittleton of GDS told me that putting each thing on a page of its own was a design pattern in its own right, known as “One Thing Per Page.” Apart from the resulting numbers, there is a strong rationale behind the pattern, which we’ll get to shortly.
Before we do that, though, let’s take a look at exactly what this pattern is…