Form Design Patterns

A presentation at Smashing TV in January 2020 in by Adam Silver

Slide 1

Slide 1

Form Design Patterns Adam Silver

Slide 2

Slide 2

  1. Why forms?

Slide 3

Slide 3

  1. Why forms? 2. Live redesign

Slide 4

Slide 4

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

Slide 5

Slide 5

Forms are at the center of every meaningful interaction

Slide 6

Slide 6

Forms attract lots of usability and accessibility issues

Slide 7

Slide 7

Nobody wants to use your form

Slide 8

Slide 8

Patterns save time and create a consistent user experience

Slide 9

Slide 9

nostyle.herokuapp.com

Slide 10

Slide 10

Break down problems like we do in real life

Slide 11

Slide 11

Macro Micro

Slide 12

Slide 12

Macro Questions Flow Micro

Slide 13

Slide 13

Macro Questions Flow Micro Form controls Microcopy

Slide 14

Slide 14

Micro Macro Questions Flow Validation Layout Form controls Microcopy

Slide 15

Slide 15

This is for everyone

Slide 16

Slide 16

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

Slide 17

Slide 17

ASOS is popular, interesting and typical

Slide 18

Slide 18

I’m not privy to ASOS’ constraints

Slide 19

Slide 19

Slide 20

Slide 20

Slide 21

Slide 21

#1 Postpone questions you could ask later

Slide 22

Slide 22

Slide 23

Slide 23

#2 Use form controls for forms

Slide 24

Slide 24

Slide 25

Slide 25

Slide 26

Slide 26

Welcome Delivery Payment Confirm

Slide 27

Slide 27

#3 Start without a progress bar

Slide 28

Slide 28

Slide 29

Slide 29

Slide 30

Slide 30

2 million extra orders per year

Slide 31

Slide 31

#4 Start with one thing per page

Slide 32

Slide 32

  1. Helps focus on the specific task

Slide 33

Slide 33

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

Slide 34

Slide 34

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

Slide 35

Slide 35

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

Slide 36

Slide 36

“But that’s a lot of clicks”

Slide 37

Slide 37

Slide 38

Slide 38

Slide 39

Slide 39

Slide 40

Slide 40

#5 Ask questions in a sensible order

Slide 41

Slide 41

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

Slide 42

Slide 42

[Long list of radio buttons]

Slide 43

Slide 43

Slide 44

Slide 44

Slide 45

Slide 45

#6 Use select boxes as a last resort

Slide 46

Slide 46

Slide 47

Slide 47

Slide 48

Slide 48

Slide 49

Slide 49

Slide 50

Slide 50

#7 Use sensible defaults

Slide 51

Slide 51

Slide 52

Slide 52

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

Slide 53

Slide 53

Slide 54

Slide 54

Slide 55

Slide 55

#8 Provide help in context of the question

Slide 56

Slide 56

Slide 57

Slide 57

Slide 58

Slide 58

Slide 59

Slide 59

Slide 60

Slide 60

Slide 61

Slide 61

#9 Avoid optional fields wherever possible

Slide 62

Slide 62

Slide 63

Slide 63

Slide 64

Slide 64

#10 Leave space for the answer

Slide 65

Slide 65

Slide 66

Slide 66

Slide 67

Slide 67

#11 Don’t hide (or disable) the submit button

Slide 68

Slide 68

Slide 69

Slide 69

Slide 70

Slide 70

Slide 71

Slide 71

Slide 72

Slide 72

Slide 73

Slide 73

Slide 74

Slide 74

Slide 75

Slide 75

Slide 76

Slide 76

Slide 77

Slide 77

Slide 78

Slide 78

#12 Make the width of the field match the expected value

Slide 79

Slide 79

Slide 80

Slide 80

Slide 81

Slide 81

#13 Let users check their answers

Slide 82

Slide 82

Slide 83

Slide 83

Slide 84

Slide 84

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

Slide 85

Slide 85

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