Overlay Opacity Values

To show state changes, use an overlay over existing content. Additional visual signifiers can be used to support state changes, including: 
- Elevation
- Color
- Iconography
- Messaging  



Arizona State University

University of Michigan - Ann Arbor

"States are visual representations used to communicate the status of a component or interactive element."

States of Being 

Distinct: "States must have clear affordances distinguishing them from one other and the surrounding UI, emphasized according to their priority levels."

Additive: "When multiple states occur at once, such as selection and hover, both state indicators should be displayed."

Consistent: "States should be applied consistently across components in order to increase usability."

Principles of States

State Changes: Anatomy

- Enabled
- Disabled
- Hover
- Focused
- Selected
- Activated
- Pressed
- Dragged
- On
- Off
- Error


Learn Before

Related

Learn After