Interaction Design

Designing States

What is a State?

Definition

A condition of an interface element.

Reality

Interfaces are never static.

Example

A button changes over time.

[IMAGE PLACEHOLDER: UI element state changes]

Why States Matter

Users Need Context

Questions

Is this clickable?
Did it work?
Is something wrong?
Is it loading?

States answer questions.

[IMAGE PLACEHOLDER: UI feedback examples]

Button States

Typical States

Default

Hover

Active

Disabled

Goal

Communicate possibilities.

[IMAGE PLACEHOLDER: Button states overview]

Form States

Examples

Empty

Focused

Completed

Validation

Purpose

Guide input.

[IMAGE PLACEHOLDER: Form state examples]

Success States

Purpose

Communicate completion.

Examples

Success message
Checkmark
Celebration animation

Keywords

Completion
Confidence
Reward

[IMAGE PLACEHOLDER: Success state examples]

Error States

Purpose

Communicate problems.

Good Error States

Clear
Specific
Helpful

Avoid

Blame
Confusion
Unclear messaging

[IMAGE PLACEHOLDER: Error state examples]

States and Motion

Motion Communicates Change

Examples

Default

↓

Hover

↓

Click

↓

Success

Motion Principle

Continuity

[IMAGE PLACEHOLDER: State transition timeline]

Designing State Flows

Think Beyond Screens

User

↓

Interaction

↓

State Change

↓

Feedback

↓

Next Action

[IMAGE PLACEHOLDER: State flow diagram]

Exercise

Create

Button States
Form States
Success States
Error States

Tool

Paper
Figma

Focus Question

What happens after interaction?

[IMAGE PLACEHOLDER: State design workshop]

Part 5 Reflection

Most Important Question

Not:

"What does it look like?"

But:

"What happens when the user clicks?"

[IMAGE PLACEHOLDER: Designer evaluating interactions]

End of Session Summary