Form Design Patterns Adam Silver

  1. Why forms?

  1. Why forms? 2. Live redesign

  1. Why forms? 2. Live redesign 3. Questions

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

  1. Why forms? 2. Live redesign 3. Questions

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

  1. Helps focus on the specific task

  1. Helps focus on the specific task 2. Works better on mobile

  1. Helps focus on the specific task 2. Works better on mobile 3. Handles branching well

“[…] 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

  1. Email address 2. Country and delivery 3. Promo codes and payment

[Long list of radio buttons]

#6 Use select boxes as a last resort

#7 Use sensible defaults

<input type=”email” autocorrect=”off” spellcheck=”false” >

#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

  1. Why forms? 2. Live redesign 3. Questions