O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Designing UX: Forms

Book Description

A recent study found that on average, designing a form to have a great user experience almost doubled the rate of successful first-time completions. For example, Ebay made an additional $USD 500 million annually from redesigning just the button on one of their mobile form screens.

More conversions, fewer dissatisfied users, better return on investment. Can you afford not to improve your forms' user experiences?

This book will walk you through every part of designing a great forms user experience. From the words, to how the form looks, and on to interactivity, you'll learn how to design a web form that works beautifully on mobiles, laptops and desktops. Filled with practical and engaging insights, and plenty of real-world examples, both good and bad.

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