This document provides design tips for complex forms based on principles of usability. It discusses how complexity can affect a form's appearance, the conversation with the user, and the relationship between the form and the user's goals. Tips include focusing on the user's needs, putting the first task first, using consistent language, providing just enough help where needed, and placing buttons in alignment with text boxes for optimal visibility. Complex forms require consideration of all three layers - appearance, conversation, and relationship - to ensure the user can successfully complete the important task.

1. Design tips
for complex forms
Malta 2012
Caroline Jarrett

2. This form looks appealing,
the questions are simple,
the task is easy
Image credit: www.swiths.com
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. Apply to be
authorised as a
financial adviser
4

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

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

7. Three women do their tax
Anna Maria Lisa
Image credits: Shutterstock.com
7

8. Which of these statements
is most important for Maria?
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 my tax done on time
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
Goals achieved
(mine and yours)
Easy questions,
obvious answers
10

11. Live
site
Beta
site
11

12. Task: find the right form
12

13. Let’s see what’s visible on a typical laptop

14. Next click?
14

15. That ‘Income Tax Return’ link… isn’t a link
15

16. Ah ha, there it is
16

17. A quick suggestion?
17

18. A quick suggestion?
18

19. Form tip 1
(about
relationship)
Focus on what your
users need to do
Image credit: Fraser Smith
19

20. Let’s keep clicking
20

21. Task: find the right form
21

22. What do you need to do first?
22

23. Form tip 2
(about
relationship)
Put the first thing first
Image credit: Per Ola Wiberg
23

24. Let’s try that in the UK: ‘beta’ version of gov.uk
24

25. 25

26. Click or scroll?
26

27. I’m a new user
27

28. Um, um, um… not so sure here
28

29. Um, um, um… where is ‘tax return’?
29

30. Form tip 3
(about
conversation)
Use the same words
all the way through
Image credit: Paul Luffel (PakaLoeff)
30

31. 31

32. Suggestion:
put the help on the same page
32

33. Form tip 4
(about
conversation)
Put just enough help
where the user needs it
Image credit: Betsy Weber
33

34. A quick look at buttons.
34

35. 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
35

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

37. A quick look at buttons.
37

38. A second suggstion
38

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

40. Complexity affects all three layers of the form
• Relationship
– Focus on what your users need to do
– Put the first thing first
• Conversation
– Use the same words all the way
through
– Put just enough help
where the user needs it
• Appearance
– Put clearly labelled buttons
in the right place
Schema from “Forms that work: Designing web forms for usability”
40

41. Recently I had to fill in this form
And I succeeded, because
the task was important
41

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

43. Thanks to Morgan Kaufmann for these books
43

44. Virtual seminar “Design tips for surveys”
• 28th February 2012
• 1:30pm Eastern time = 7:30pm Malta time
• 2nd in ‘Next Steps’ series from
User Interface Engineering and
Rosenfeld Media
44

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