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


Forms of States

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

State Changes: Anatomy

UI state indicators should be distinct, additive, and consistent. Distinct: Each state must be clearly distinguishable from other states and the surrounding UI, with emphasis appropriate to its priority. Additive: When multiple states coexist, such as selection and hover, display each state indicator. Consistent: Apply state indicators consistently across components to support usability.

UI State Design Principles: Distinct, Additive, and Consistent

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

Arizona State University

Interaction in UI

Gestures let users interact with screen elements using touch.

Gestures

Selection refers to how users indicate specific items they intend to take action on.

Selection

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

States of Being

"Selection refers to how users indicate specific items they intend to take action on."

Material Design: Selection 

"Gestures let users interact with screen elements using touch."

Material Design: Gestures 

Motions can draw people's attention to the desired area of a page or design through animations such as transition. 

Learn Before

Related

Learn After

Learn After

Related