The document provides design tips for creating complex forms that enhance usability, focusing on three layers: appearance, conversation, and relationship. It emphasizes the importance of clarity and user-centric language in form design to ensure users can easily navigate and fulfill their goals. Additionally, it advises on utilizing summary menus for complex forms to facilitate user engagement and decision-making.

1. Design tips
for complex forms
2011
Caroline Jarrett
J.Boye Conference Denmark

2. This form is beautiful, the questions are simple,
and the task is easy
2

3. But what happens if we have to work
with complex forms like this?
© Effortmark Ltd, from “Forms that work: Designing web forms for usability"
3

4. Lasting power
of attorney for
health and
personal affairs
“Living will”
4

5. Privacy on
Facebook
http://www.nytimes.com/interactive/2010/05/12/business/facebook-privacy.html 5

6. A form is complex if …
• More than one page
• Answers come from another:
– Form
– Document
– Page
– Person
• The consequences are important:
– Money
– Stress
– Prison?
6

7. Mat’s lost his job, no income, has to pay rent.
Can he get some government money?
7

8. Which of these statements
is most important for Mat?
That form was easy because…
1. I liked the way it looked and it was easy to read
2. I understood the questions and could answer them
3. I knew exactly what I had to do and I got the money
8

9. Users experience a form in three layers
Appearance
Conversation
Relationship
Can’t
read it
Can’t answer
it
Can’t achieve
my goal
9

10. A good form works well across all three layers
Appearance
Conversation
Relationship
Lovely and
legible
Easy questions,
obvious
answers
Goals achieved
(mine and yours)
10

11. 11

12. Task: find the right form
Subtask: look for ‘unemployment’
12

13. Where is ‘unemployment’?
13

14. 14

15. 15

16. OK, I’ll click “Unemployment” for the 3rd time
16

17. Ah, I know two clear things that I have to do
17

18. Relationship
Tip
Make it easy to find
the form by using
your users’ words
18

19. But maybe I need to read the whole page
19

20. Or maybe not
20

21. Relationship
Tip
Cut irrelevant topics
(or at least move them out of the main flow)
Drawing © Caroline Jarrett and Francis Rowland
21

22. Back to the UK. After lots of clicks and
a search, finally we can get started.
22

23. Screenshots up to National Insurance number
(equivalent to Danish CPR-nummer)
23

24. This page is an overview but…
14 screens
???
24

25. How is Mat expected to know
what questions are coming up?
25

26. Relationship
Tip
Explain clearly:
-How long it will take
-What documents I need
Relationship
Tip
26

27. Let’s skip forward
27

28. Possible answers to this question?
28

29. That exact date? Continuously or with a break?
Never had Jobseeker’s Allowance?
29

30. Options available do not match all the answers
30

31. Conversation
Tip
Design for all the
possible users’
answers, even if you
consider that some of
them are irrelevant
Image © nopitycity.com
31

32. A quick look at buttons. This is the first page
with a button aligned with the questions
32

33. Typical eye-movement when reading a form:
Look for field, turn left for label, look for field
Where to put the button?
A B C
33

34. In eye-tracking studies, I observed this
Looks here
first for button
Then looks here second
Looks
here last
3 1 2
34

35. Appearance
Tip
Best place for a button:
aligned with left-hand end
of text entry boxes
Appearance
Tip
Next
35

36. Let’s skip forward again
36

37. Many more steps.
But what documents will I need?
37

38. This is part of the most difficult form ever.
But at least it has a summary menu.
38

39. Conversation
Tip
If users need to gather answers
from many sources then a
summary menu works better
than a progress indicator
39

40. Complexity affects all three layers of the form
• Relationship
– Get users to the right form, quickly
– Explain what users have to do
• Conversation
– Design for all real-world options
– If the user has to gather many
answers, use a summary menu
• Appearance
– Put clearly labelled buttons
in the right place
Schema from “Forms that work: Designing web forms for usability”
40

41. Ideally, all three layers work together.
This button in is the right place (appearance).
41

42. “Join free” is clear (conversation)
and appropriate to task (relationship)
(Unfortunately, it’s not an accurate translation)
42

43. More resources on
http://www.slideshare.net/cjforms
43

44. Caroline Jarrett
twitter @cjforms
caroline.jarrett@effortmark.co.uk
44