A UX Guide to Microinteractions
  • Basics
    • Introduction
  • Criterion
    • Criteria
    • Component Groups
    • Motion Functions
    • Motion Principles
  • The System
    • Action Components
      • Button
      • Floating Action Button
      • Icon Button
    • Communication Components
      • Onboarding
      • Progress Indicators
      • System Status
    • Navigation Components
      • Nav Bar
    • Selection Components
      • Checkbox
      • Radio Button
      • Sliders
      • Switches
      • Pickers
    • Input Components
      • Text Input
      • Audio Input
  • References
    • Cited Works
Powered by GitBook
On this page
  • Motion Functions
  • Examples

Was this helpful?

  1. The System
  2. Communication Components

System Status

Status indicators are typically used to communicate important information to the user, such as whether an action has been completed successfully or not.

PreviousProgress IndicatorsNextNavigation Components

Last updated 1 year ago

Was this helpful?

Motion Functions

The primary function of a status indicator is Feedback. Users need to know whether their action has been completed successfully or not. Additionally, an error or success message can be punctuated by adding Emotive functions to drive home the action's result.

Examples

The above example is used to give feedback to users on whether their action was successful. Feedback is provided with a change of color and warning symbol. The color change drives a strong emotional response, as red is associated with warnings and errors. The movement of the transformed button helps provide additional reinforcement to the emotional response.

Similar themes can be found in the above two examples, where color change and subtle motion drive an emotional feedback response to the user.

Cover

Feedback Function

Cover

Emotive Function

Button with success/error states by Andrei Mironov
Email Verification by DΞNYS SΞRGUSHKIN
Password error animation by Aaron Iker.