Let’s talk about forms!
          Barcamp Perth 2010
Confusing

Long

Burdensome

Broken
Confusing           Clear

Long             Concise

Burdensome         Clever

Broken       Co-operative
Clear


The form-filler understanding

…with minimal effort

…what to do with the form

…as the designer intended
Concise

Gathering the required information in the most
efficient way possible
It is not necessarily about being as short as...
Clever

Reduce the workload and prevent errors:
  •  Make use of existing data
  •  Utilise sequencing
  •  Do calculation...
Co-operative

Work with the user:
  •  Manage expectations
  •  Match the user’s mental model
  •  Provide definitions and ...
Clear ✩

 4Cs
of good        Concise ✩

 form
                 Clever ✩

 design
          Co-operative ✩
The question
               Instruction




               The answer choices
Join up 
            Checkout method
                        Join Booklovers
Express
checkout
             Use existing
  ...
Header
                               Progress indicator




Left-aligned
fields




               Action button
Designer          Stakeholder             Processing    Data user




  Self complete                                     ...
Q&A

Flow      4 layers of
             a form
Layout

Process
Clear ✩

4 Cs of a
 good            Concise ✩

  form
                   Clever ✩

 design
            Co-operative ✩
Q&A               Clear ✩


Flow           Concise ✩


Layout           Clever ✩


Process   Co-operative ✩
4 layers of a   4 Cs of good form
    form              design

  Q&A                Clear

   Flow             Concise

 ...
Questions
& Comments?

     formulate.com.au
        jessica@formulate.com.au
           @Formulate on Twitter
Lets Talk About Forms (Barcamp Perth 2010)
Lets Talk About Forms (Barcamp Perth 2010)
Lets Talk About Forms (Barcamp Perth 2010)
Lets Talk About Forms (Barcamp Perth 2010)
Lets Talk About Forms (Barcamp Perth 2010)
Lets Talk About Forms (Barcamp Perth 2010)
Lets Talk About Forms (Barcamp Perth 2010)
Lets Talk About Forms (Barcamp Perth 2010)
Lets Talk About Forms (Barcamp Perth 2010)
Lets Talk About Forms (Barcamp Perth 2010)
Lets Talk About Forms (Barcamp Perth 2010)
Lets Talk About Forms (Barcamp Perth 2010)
Lets Talk About Forms (Barcamp Perth 2010)
Lets Talk About Forms (Barcamp Perth 2010)
Lets Talk About Forms (Barcamp Perth 2010)
Lets Talk About Forms (Barcamp Perth 2010)
Upcoming SlideShare
Loading in...5
×

Lets Talk About Forms (Barcamp Perth 2010)

980

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

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

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

No notes for slide

Transcript of "Lets Talk About Forms (Barcamp Perth 2010)"

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

×