Mobile Design Pattern Gallery, 2nd Edition

Chapter 9. Feedback and Affordance

Feedback Patterns

Error Messages, Confirmation, System Status

Affordance Patterns

Tap, Swipe/Flick, Drag

Feedback Patterns

In its “Principles for Usable Design” (http://www.usabilitybok.org/principles-for-usable-design), the User Experience Professionals Association says that well-designed user interfaces should “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.” Paraphrasing an old movie tagline, I’d shorten this to: “Feedback means users never have to say, ‘What’s happening?!’”

Feedback can vary from simple progress indicators and confirmation messages to more sophisticated animations and effects. Mobile feedback patterns include Error Messages, Confirmation, and System Status.

Error Messages

Error Messages should be expressed in plain language (no codes), precisely indicate the problem, and suggest a constructive solution. Best practice is to make Error Messages highly visible onscreen, like in Soundwave and Pandora. These approaches are preferable to modal dialogs, since they may literally cover up the issue, as in Square Register and Pinterest.

Figure 9-1. Soundwave for Android and Pandora for iOS: highly visible Error Messages

Figure 9-2. Square ...