Better Form Design: One Thing Per Page!

...

Travis Bradberry

Science Says These Five Things Prove You're Smart

dmarge.com

Study Reveals That Material Goods Don't Bring Happiness

flipboard.com

Web 2.0 on Flipboard

Noman Ur Rehman

Working with JSON in MySQL

Ian Johnson

The Hitchhiker’s Guide to d3.js

smashingmagazine.com

Better Form Design: One Thing Per Page!

Sailing With Sails.js: An MVC-style Framework For Node.js – Smashing Magazine

What Everyone Should Know About The Process Behind App Design...

bestdesign2themes.com

Why Laravel Development Is Popular Php Frameworks

reindex.io

You Might Not Need Underscore

Laurence Bradford

8 Tech Tools To Communicate Your Ideas More Effectively

readwrite.com

5 predictions for artificial intelligence for for the coming year

Jose Aguinaga

How it feels to learn JavaScript in 2016

css-tricks.com

Adding and Leveraging a CDN on Your Website

lifehack.org

5 Secret Hacks for More Powerful Web Designs

androidauthority.com

Google Wallet's new web app is here!

Serdar Yegulalp

5 wicked-fast Python frameworks you have to try

hbr.org

Machine Learning Is No Longer Just for Experts

humaan.com

Custom HTML Markers with Google Maps - Websites, Mobile and eCommerce – Humaan

major.io

Automated Let's Encrypt DNS challenges with Rackspace Cloud DNS!

Philleep Florence

Get the next record in a SQL table!

Getting More with LESS! - Mixins!

Code Snippets - Get DOM Element Content

A New Year, A New Site

PhilleepEdit Webmaster

Philleep Florence Bug Tracker and Project Management has moved!

Code Snippets - HandleBars.js Helpers - ONE

2017-09-21 : 04:25


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…


smashingmagazine.com
Philleep Florence LLC

This unknown unknown does not support some features required to view Philleep Florence LLC. Please download a newer unknown Browser.

 
 
Philleep Florence LLC
 
Philleep Florence LLC
Image Preview