You are previewing Mobile Design Pattern Gallery, Color Edition.

Mobile Design Pattern Gallery, Color Edition

Cover of Mobile Design Pattern Gallery, Color Edition by Theresa Neil Published by O'Reilly Media, Inc.
  1. Mobile Design Pattern Gallery
  2. Foreword
  3. Preface
    1. Introduction
    2. Intended Audience for This Book
    3. Safari® Books Online
    4. How to Contact Us
    5. Acknowledgments
  4. 1. Navigation
    1. Primary Navigation Patterns
      1. Springboard
      2. List Menu
      3. Tabs
      4. Gallery
      5. Dashboard
      6. Metaphor
      7. Mega Menu
    2. Secondary Navigation
      1. Page Carousel
      2. Image Carousel
      3. Expanding List
  5. 2. Forms
    1. Sign In
    2. Registration
    3. Checkout
    4. Calculate
    5. Search Form
    6. Multi-Step
    7. Long Form
  6. 3. Tables & Lists
    1. Basic Table
    2. Headerless Table
    3. Fixed Column
    4. Overview plus Data
    5. Grouped Rows
    6. Cascading Lists
    7. Table with Visual Indicators
    8. Editable Table
  7. 4. Search, Sort & Filter
    1. Search
      1. Explicit Search
      2. Search with Auto-Complete
      3. Dynamic Search
      4. Scoped Search
      5. Saved and Recent Searches
      6. Search Form
      7. Search Results/View Results
    2. Sort Patterns
      1. Onscreen Sort
      2. Sort Order Selector
      3. Sort Form
    3. Filter
      1. Onscreen Filter
      2. Filter Drawer
      3. Filter Dialog
      4. Filter Form
  8. 5. Tools
    1. Toolbar
    2. Option Menu
    3. Call to Action Button
    4. Contextual Tools
    5. Inline Actions
    6. Multi-State Button
    7. Bulk Actions
  9. 6. Charts
    1. Chart with Filters
    2. Preview Window
    3. Overview plus Data
    4. Datapoint Details
    5. Drill Down
    6. Zoom
    7. Pivot Table
    8. Sparklines
  10. 7. Invitations
    1. Dialog
    2. Tip
    3. Tour
    4. Video Demo
    5. Transparency
    6. 1st Time Through
    7. Persistent
    8. Discoverable
  11. 8. Feedback & Affordance
    1. Feedback
    2. Error Messages
    3. Confirmation
    4. System Status
    5. Affordance
      1. Tap
      2. Flick
      3. Drag
  12. 9. Help
    1. How To
    2. Cheat Sheet
    3. Tour
  13. 10. Anti-Patterns
    1. Novel Notions Anti-Pattern
    2. Metaphor Mismatch Anti-Pattern
      1. Control Mismatch
      2. Icon Mismatch
      3. Mental Model Mismatch
    3. Idiot Box
    4. Chart Junk
    5. Oceans of Buttons
  14. A.
    1. Additional Resources
    2. Navigation
      1. Primary Navigation
      2. Secondary Navigation
    3. Forms
    4. Tables
    5. Search
    6. Sort Patterns
    7. Filter
    8. Tools
    9. Charts
    10. Invitations
    11. Feedback
    12. Affordance
    13. Help
  15. About the Author
  16. Copyright
O'Reilly logo

Chapter 8. Feedback & Affordance

image with no caption

Feedback Patterns: Errors, Confirmation, System Status

Affordance Patterns: Tap, Flick, Drag

Feedback

The usability principle of feedback states “Provide appropriate, clear, and timely feedback to the user so that he sees the results of his actions and knows what is going on with the system.” Feedback can vary from simple progress indicators and confirmation messages, to more sophisticated animations and effects. Mobile feedback patterns include:

Feedback patterns

Figure 8-1. Feedback patterns

Error Messages

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. Highly visible error messages on the screen, like TaxCaster and Mint, are preferable to a modal dialog, since a dialog may cover up the issue.

TaxCaster and Mint

Figure 8-2. TaxCaster and Mint

Barnes & Noble Nook, error message in Action Sheet; Square, error message in dialog

Figure 8-3. Barnes & Noble Nook, error message in Action Sheet; Square, error message in dialog

Note

Use plain language that offers a solution for resolving the issue. Make the error visible; use in-screen messaging instead of modal dialogs.

Confirmation

Confirmation should be ...

The best content for your career. Discover unlimited learning on demand for around $1/day.