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

- 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

"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