Display Feedback

Fundamentals of interface design

If the UI has changed state or if it’s in the process of changing state, then the user needs to know about it — especially when the change was triggered by an action the user took.

Feedback reduces uncertainty and frustration for the user, and preserves their confidence in the UI.

A UI needs to show feedback for the following states:

Success when a change in state was successful. This doesn’t always have to be a green checkmark and a success message. It can be as subtle as changing a label from “on” to “off,” for example.

Error when a change in state failed or an input was invalid.

Progress when quantity or position has incremented.

Loading when the UI is between states, waiting for data to load.

Empty when there is no data to show. This makes it clear there is no data rather than a bug or connection error.

Connection Status if data isn’t syncing.

Interactivity Hover, Pressed, Focused, Disabled states on interactive elements like buttons, links, inputs, and controls.

This is post is part of a series on the fundamentals of interface design.

The series summarizes technical knowledge and best practices that make it easier for humans to interact with software on screens.

More Writing
  1. How to Design and Implemenent Theming

    Theming in design systems

  2. Why Implement Theming?

    Theming in design systems

  3. 2023 Year In Review

    Reflecting on what happened in 2023

  4. How I’ve Been Using AI

    A look back at how I used AI in 2023