Designing online forms (Jessica Kerr, Formulate)

812
-1

Published on

Presentation at Making Links Conference 2010 in Perth, Western Australia.

www.makinglinks.org.au

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
812
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Designing online forms (Jessica Kerr, Formulate)

  1. 1. Designing online forms Making Links 16 November 2010
  2. 2. Confusing Long Burdensome Rude, broken, frustrating
  3. 3. Confusing Long Burdensome Rude, broken, frustrating Clear Concise Clever Cooperative
  4. 4. Clear The form-filler understanding …with minimal effort …what to do with the form …as the designer intended
  5. 5. 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)
  6. 6. Clever Reduce the workload and prevent errors: •  Make use of existing data and associations •  Utilise sequencing •  Do calculations •  Enforce limits •  Validate
  7. 7. 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!
  8. 8. Clear Concise Clever Cooperative ✩ ✩ ✩ ✩ 4 C s of good form design
  9. 9. The question Instruction The answer choices
  10. 10. Sign in Billing details Join Booklovers Delivery method Gift wrap Confirm details Payment Join up Use existing account Express checkout Checkout " method?
  11. 11. Header with logo Left-aligned fields and labels Action button Progress indicator
  12. 12. Order over the phone Self complete using computer StakeholderDesigner Processing Data user Order in-person
  13. 13. Q & A Flow Layout Process 4 layers of a form
  14. 14. Clear Concise Clever Cooperative ✩ ✩ ✩ ✩ 4 Cs of a good form design
  15. 15. Q & A Flow Layout Process Clear Concise Clever Cooperative ✩ ✩ ✩ ✩
  16. 16. Q & A Flow Layout Process Clear Concise Clever Cooperative 4 layers of a form 4 Cs of good form design
  17. 17. Questions & Comments? formulate.com.au jessica@formulate.com.au @Formulate on Twitter

×