A presentation at Smashing TV by Adam Silver
Form Design Patterns Adam Silver
Forms are at the center of every meaningful interaction
Forms attract lots of usability and accessibility issues
Nobody wants to use your form
Patterns save time and create a consistent user experience
nostyle.herokuapp.com
Break down problems like we do in real life
Macro Micro
Macro Questions Flow Micro
Macro Questions Flow Micro Form controls Microcopy
Micro Macro Questions Flow Validation Layout Form controls Microcopy
This is for everyone
ASOS is popular, interesting and typical
I’m not privy to ASOS’ constraints
#1 Postpone questions you could ask later
#2 Use form controls for forms
Welcome Delivery Payment Confirm
#3 Start without a progress bar
2 million extra orders per year
#4 Start with one thing per page
“[…] questions that naturally ‘go together’ from the point of view of designers… don’t need to be on the same page to work for users.”
“But that’s a lot of clicks”
#5 Ask questions in a sensible order
[Long list of radio buttons]
#6 Use select boxes as a last resort
#7 Use sensible defaults
#8 Provide help in context of the question
#9 Avoid optional fields wherever possible
#10 Leave space for the answer
#11 Don’t hide (or disable) the submit button
#12 Make the width of the field match the expected value
#13 Let users check their answers
Postpone questions you could ask later Use form controls inside forms Start without a progress bar Start with one thing per page Ask questions in a sensible order Use select boxes as a last resort Use sensible defaults Provide help in context of the question Avoid optional fields wherever possible Leave space for the answer Don’t hide (or disable) the submit button Make the width of the field match the expected value Let users check their answers
A live redesign of the ASOS checkout flow using principles from my book, Form Design Patterns published by Smashing Magazine.
Here’s what was said about this presentation on social media.
for free. You
can too.