Presentation at Making Links Conference 2010 in Perth, Western Australia. www.makinglinks.org.au

1. Designing online forms
Making Links
16 November 2010

4. Confusing
Long
Burdensome
Rude, broken,
frustrating

5. Confusing
Long
Burdensome
Rude, broken,
frustrating
Clear
Concise
Clever
Cooperative

6. Clear
The form-filler understanding
…with minimal effort
…what to do with the form
…as the designer intended

11. Concise
Gathering only the required information in the most
efficient way possible
It is not necessarily about being as short as
possible (questions, pages or screens)

15. Clever
Reduce the workload and prevent errors:
• Make use of existing data and associations
• Utilise sequencing
• Do calculations
• Enforce limits
• Validate

20. Cooperative
Work with the user:
• Manage expectations
• Match the user’s mental model
• Provide definitions and explicit boundaries
• Give background and explanations
• Confirm before submission, and allow modification
• Be bug free, stable, consistent and flexible
• Don’t frustrate!

28. Clear
Concise
Clever
Cooperative
✩
✩
✩
✩
4 C s
of good
form
design

31. The question
Instruction
The answer choices

32. Sign in
Billing details
Join Booklovers
Delivery method
Gift wrap
Confirm details
Payment
Join up
Use existing
account
Express
checkout
Checkout "
method?

33. Header with logo
Left-aligned
fields and
labels
Action button
Progress indicator

34. Order over
the phone
Self complete
using computer
StakeholderDesigner Processing Data user
Order in-person

35. Q & A
Flow
Layout
Process
4 layers of
a form

36. Clear
Concise
Clever
Cooperative
✩
✩
✩
✩
4 Cs of a
good
form
design

37. Q & A
Flow
Layout
Process
Clear
Concise
Clever
Cooperative
✩
✩
✩
✩

40. Q & A
Flow
Layout
Process
Clear
Concise
Clever
Cooperative
4 layers of a
form
4 Cs of good form
design

41. Questions
& Comments?
formulate.com.au
jessica@formulate.com.au
@Formulate on Twitter