Lets Talk About Forms (Barcamp Perth 2010)

  • 939 views
Uploaded on

Updated version of my talk introducing two models for good form design: 4 Cs and 4 layers. Key difference is last "C" has been changed from Contextual to Cooperative.

Updated version of my talk introducing two models for good form design: 4 Cs and 4 layers. Key difference is last "C" has been changed from Contextual to Cooperative.

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
939
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
0
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Let’s talk about forms! Barcamp Perth 2010
  • 2. Confusing Long Burdensome Broken
  • 3. Confusing Clear Long Concise Burdensome Clever Broken Co-operative
  • 4. Clear The form-filler understanding …with minimal effort …what to do with the form …as the designer intended
  • 5. Concise Gathering the required information in the most efficient way possible It is not necessarily about being as short as possible (questions, pages or screens)
  • 6. Clever Reduce the workload and prevent errors: •  Make use of existing data •  Utilise sequencing •  Do calculations •  Enforce limits •  Validate
  • 7. Co-operative 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. Clear ✩ 4Cs of good Concise ✩ form Clever ✩ design Co-operative ✩
  • 9. The question Instruction The answer choices
  • 10. Join up Checkout method Join Booklovers Express checkout Use existing account Sign in Billing details Delivery method Gift wrap Confirm details Payment
  • 11. Header Progress indicator Left-aligned fields Action button
  • 12. Designer Stakeholder Processing Data user Self complete Order over using computer Order in-person the phone
  • 13. Q&A Flow 4 layers of a form Layout Process
  • 14. Clear ✩ 4 Cs of a good Concise ✩ form Clever ✩ design Co-operative ✩
  • 15. Q&A Clear ✩ Flow Concise ✩ Layout Clever ✩ Process Co-operative ✩
  • 16. 4 layers of a 4 Cs of good form form design Q&A Clear Flow Concise Layout Clever Process Co-operative
  • 17. Questions & Comments? formulate.com.au jessica@formulate.com.au @Formulate on Twitter