Designing UX: Forms

Table of contents

1. Preface
2. Who Should Read This Book
3. Conventions Used
4. Supplementary Materials
5. Introduction
   1. Designing Forms Is the Worst Best Job in the World
   2. Some (Crucial) Definitions
   3. Three Dimensions
   4. Which Forms This Book Is About
      1. Online
      2. Mobile
      3. Touch
      4. Accessibility
      5. Performance
   5. One Design to Rule Them All
   6. What Makes a Good Form?
6. Form Projects
   1. Form-specific Information Gathering
      1. Questions to Ask
      2. What If You’re Doing Agile Development or Lean UX?
      3. What If the Form Is Part of a Bigger Web Project?
      4. How to Ask
      5. Who to Ask
   2. Metrics
      1. Metrics Can Highlight Design Issues
   3. Don’t Copy Others
   4. A Guiding Principle for Form Design
7. Words
   1. Words Matter Most
   2. Questions
      1. Good Form Questions Are Hard to Find
      2. What Is a Question?
      3. Four-stage Model for Question Answering
         1. Comprehension: Understanding Words and Meaning
         2. Plain Language Resources
            1. Full Sentence or Brief Prompt?
         3. Retrieval: Searching Memory, Feelings, Thoughts and Sources
      4. Satisficing
      5. Judgement: Checking Answer Suitability, and Making Adjustments
      6. Answering: Physically Providing the Answer
         1. Characteristics of Usable Closed Answer Fields
         2. Alphabetical Order
         3. Punctuation at the End of the Label
      7. Questionlevel Help
         1. Rotten Repetition
      8. Deciding What Questions to Ask
         1. Information Need
         2. Data Quality
         3. How Long Is Too Long?
      9. Common Questions
         1. Title
         2. Don’t Use Title as a Proxy
         3. Name
         4. Resources About Names
         5. Address
         6. Email
         7. Phone
         8. Date of Birth
         9. Sex and Gender
         10. Credit Card Details
         11. Display Payment Options
   3. Other Words in Forms
      1. Headings
         1. Form Title
         2. Section Headings
         3. Questions Posing as Section Headings
         4. Step Headings
      2. Button Labels
      3. Messages
         1. Error Messages
      4. General Instructions
   4. Yours or Mine?
      1. Start Without Pronouns
      2. Where Pronouns Can Be Helpful
      3. Referring to More Than Two Parties
   5. Words That Work
8. Layout
   1. A Mantra: It’s All about Balance
   2. For Realz
      1. Abbreviations
   3. Choose Your Field Types
      1. Problems with Using “Enhancements” to Answer Field Types
         1. Issues with Dropdowns
         2. What to Use Instead of a Dropdown
         3. Long Lists of Options
         4. Implementing Country Text Box with Autosuggest
         5. Segmented Controls and Switches
         6. What to Use Instead of a Segmented Control or Switch
         7. Date Pickers
         8. International Date Picking
         9. What to Use Instead of (or in Addition to) a Date Picker
         10. One Text Box or Many?
         11. Sliders and Steppers
         12. Sliders in HTML5
         13. Spinners
         14. What to Use Instead of a Slider or Stepper
         15. Single Checkboxes
   4. Alignment
      1. Vertical Path to Completion
         1. Don’t Put Questions Beside Each Other
      2. Aligning Answer Fields
      3. Label Placement
         1. What about That Study?
         2. Avoiding the Gutter
      4. Button Alignment
         1. Single-step Forms
         2. Multistep Forms
         3. Buttons on Mobile
   5. Spacing
      1. Proximity
         1. Always Show Questionlevel Help
      2. Text Box Widths
      3. Empty Text Boxes
         1. No Background Color
         2. No Placeholder Text
         3. Float Labels
      4. Touch Tips
   6. Color
      1. Be Very Careful with Color
      2. What Colors Should You Use?
         1. Message Colors
      3. Color Blindness
      4. Color Contrast
   7. Required Versus Optional Fields
      1. Many Optional Questions
   8. Buttons
      1. No Reset
   9. Typography
      1. Typeface
         1. Body Text
         2. Headings
      2. Case
      3. Line Length
   10. Contact Information
   11. What’s Absent from Our Layout
   12. Review
9. Flow
   1. Order
      1. Question Order
      2. Principles for Deciding Question Order
         1. Follow How the User Thinks
         2. Core Before Supplementary
         3. Easy Before Difficult
         4. Related Together
         5. Be Consistent
         6. Principles, Not Rules
         7. Tab Order
      3. Screens
         1. Three Different Ways to Split over Screens
         2. Deciding the Number of Screens
         3. Multistep (Screen) Forms
         4. Keep it Together
         5. One Question per Screen
         6. Progress Indicators
         7. Modal Windows
      4. Before and After
         1. Gateway Screen
         2. Confirmation Screen
         3. Email Confirmation
         4. Review Screens
   2. Validation
      1. Two Types of Errors
      2. Errors of Omission
         1. Disabling the Primary Action Button
         2. Errors of Commission
         3. International Formats
      3. Inline Validation
         1. Never Rely Solely on Client-side Validation
   3. Messages
      1. Error Messages
         1. Errors Take Time
      2. Warnings
      3. Success
      4. System Processing
   4. From Good to Great
      1. Reduce Workload
         1. Touch Device Smarts
         2. Double Entry
         3. Show/hide Password
         4. Prepopulation
         5. Defaults
      2. Tailor the Experience
         1. Conditional Questions
         2. Eligibility
         3. Time Limits
   5. The Art and Science of Flow
10. Forms Documentation: QxQ
    1. Contents of a QxQ
       1. Simple Forms Don't Need a QxQ
    2. The Investment in a QxQ Has a Great Return