ruk·si

🌈 UI
Feedback Patterns

Updated at 2015-08-19 00:09
  • Live Preview: Show the final version while editing before requiring saving the changes. E.g. editing a blog post shows the final blog post under it.
  • Progressive Disclosure: Show tips when the content they relate to is relevant, hide tips when they are not relevant.
  • Progress Indicator: Give user instant feedback about lengthy actions. E.g. "Search" button text changes to "Searching...".
  • Periodic Refresh: Refresh content using AJAX. E.g. newest replies to topics are shown as they come in.

Live preview engages users. Reduces fear of errors, especially if the changes go live after saving. Simplifies interface if show on the same page as editing interface.

Use progressive disclosure to simplify lengthy process.

Use progress indicators to improve perceived performance. When users see instant feedback, they know the action was triggered and the action seems faster. For searches, the result area is a good place for loading indicator.

Progress indicators should show state, not exact progress. Make loading always start from 10% and steadily move it forward. Slow the pace down near the end if not yet ready.

Start the process before the progress bar if possible. Start uploading images when naming them, before a progress bar is even shown.

Use periodic refresh to keep content fresh. But maintain balance between readability and relevancy. Optionally allow disabling automatic refresh or make hovering the area stop the refreshing.

Sources

  • Designing Web Interfaces, Bill Scott, Theresa Neil