From Interaction to Experience

Why do some digital experiences feel effortless?
Why do some interactions feel frustrating?
Why does motion matter?

[IMAGE PLACEHOLDER: Collection of modern digital products (Linear, Spotify, Notion, Duolingo)]

Today's Goals

Explain and experience the role of feedback in interactive systems
Distinguish between usability and delight
Analyze digital experiences using interaction design terminology
Evaluate whether motion improves or harms an experience
Defend design decisions with evidence and theory

Overview

Part 1

Emotional Design
Norman's Three Levels

Part 2

Psychology of Interaction
Cognitive Load
Affordances
Feedback

Part 3

Motion Analysis
Functional Motion

Part 4

Redesign Challenge

Part 5

Critique & Reflection

[IMAGE PLACEHOLDER: Journey map / roadmap graphic]

Experiences matter.

— Interactive Media Production

Why do people prefer some digital products?

Faster?
Easier?
More beautiful?
More useful?
More memorable?

Design ≠ Visual Design

Experience = User + Interface + Context + Interaction + Perception + Emotion

[IMAGE PLACEHOLDER: Comparison of two interfaces]

Beyond aesthetics

Good Design

Useful
Understandable
Efficient
Memorable

Great Design

Emotional
Meaningful
Delightful

[IMAGE PLACEHOLDER: Emotional response to product]

Levels of design

— Interactive Media Production

Three Levels of Design - Don Norman

Visceral
Behavioral
Reflective

Different layers

Different effects

[IMAGE PLACEHOLDER: Norman Emotional Design framework]

Visceral Design

First Impression

Look
Feel
Emotion

Questions to ask yourself?

Attractive?
Modern?
Trustworthy?
Exciting?
...

Visceral Design: Examples?

Visceral Design: Examples

Apple
Stripe
Airbnb

[IMAGE PLACEHOLDER: Premium product landing page]

Behavioral Design

During Use

Clarity
Understanding
Feedback
Efficiency

Questions to ask yourself?

Easy?
Predictable?
Fast?
...

[IMAGE PLACEHOLDER: Well-designed dashboard]

Behavioral Design: Examples?

What experiences did you find?

Behavioral Design: Examples

Booking.com
Notion
iBood

Reflective Design

After Use

Memory
Identity
Meaning

Questions to ask yourself?

Worth remembering?
Worth sharing?
Worth returning?

Reflective Design Examples?

What experiences did you share or remember recently?

Reflective Design Examples

Spotify Wrapped
Duolingo Streaks

[IMAGE PLACEHOLDER: Spotify Wrapped / Duolingo streak]

Exercise

3-Level Analysis

Analyze

First impression
Ease of use
Long-term value

Discussion

Strongest level?
Weakest level?

[IMAGE PLACEHOLDER: Interface screenshots]

Psychology & interaction

— Interactive Media Production

From Design to Psychology

What happens in the user's mind?

Attention (Cognition)
Perception (Feedback)
Decision making (Affordance)
Memory (Retention)

Interaction = Human Behavior

[IMAGE PLACEHOLDER: Brain + interface]

Why do some dashboards feel overwhelming?

Attention: Cognitive Load

Mental Effort

Processing information
Remembering information
Making choices

Brain is a limited resource, attention is finite.

[IMAGE PLACEHOLDER: Overloaded dashboard]

Sources of Cognitive Load?

Visual

Clutter
Noise
Too many colors

Structural

Complex navigation
Too many options

Motion

Excessive animation
Competing movement

[IMAGE PLACEHOLDER: Bad dashboard example]

Choice Overload

More options ≠ Better

Problems:

Indecision
Friction
Abandonment

Design Goal:

Reduce unnecessary decisions.

[IMAGE PLACEHOLDER: Too many choices]

Where have you experienced overload?

Examples:

University portals
Government websites
E-commerce platforms

[IMAGE PLACEHOLDER: Complex website]

Perception: Feedback Loops

How should user percieve your UI?

Without feedback:

Uncertainty
Confusion
Frustration

With feedback:

Confidence
Understanding

[IMAGE PLACEHOLDER: Action-response diagram]

Examples of Feedback Loops in UI?

Examples of Feedback

Immediate

Hover
Active state

Short Delay

Loading indicator

Completion

Success message
Confirmation

[IMAGE PLACEHOLDER: UI feedback examples]

Invisible Feedback

Often unnoticed and very subtle.

Examples

Button state changes
Cursor changes
Progress indicators

Feedback, although subtle is essential

[IMAGE PLACEHOLDER: Subtle UI animations]

Decision making: Affordances

What can I do here?

Design suggesting action.

Examples

Button
Input field
Slider
Toggle

[IMAGE PLACEHOLDER: Different UI controls]

Common affordance failure

Is something:

Clickable?
Draggable?
Interactive?

Consequence: User hesitation.

[IMAGE PLACEHOLDER: Ambiguous interface]

Signifiers of affordance?

What can indicate interaction?

Signifiers of affordance

Basic visual clues

Shadow
Color
Shape
Motion

Motion as Signifier

"Something can happen here."

[IMAGE PLACEHOLDER: Hover interaction]

Memory: Recognition vs Recall

Recognition

Seeing options

Recall

Remembering options

[IMAGE PLACEHOLDER: Navigation comparison]

Examples?

Where is the menu located on a website?

Recognition > Recall

Good

Menus
Visible tools

Difficult

Hidden commands
Memorization

Design should reduce memory load.

[IMAGE PLACEHOLDER: Visible vs hidden actions]

Mini Analysis Exercise

Choose:

Instagram
Spotify
Discord
Notion
Figma
...

Analyze:

Feedback
Affordances
Cognitive load

[IMAGE PLACEHOLDER: App icons]

Motion & meaning

— Interactive Media Production

Motion is communication. Not decoration.

[IMAGE PLACEHOLDER: UI animation sequence]

Motion and Interactive Media

Orientation

Guide and understanding location.

Feedback

Understanding consequence.

Hierarchy

Understanding importance.

Storytelling

Understanding sequence.

[IMAGE PLACEHOLDER: Motion purpose diagram]

Functional Motion

Goal

Support usability.

Examples

Menu opening
Navigation transitions
State changes

[IMAGE PLACEHOLDER: Functional animation GIF]

Decorative Motion

Goal

Character Personality Emotion

Risk

Distraction

Question to ask yourself?

Worth the cost?

[IMAGE PLACEHOLDER: Decorative hero animation]

"Invisible Motion"

Best motion often goes unnoticed.

Supports

Comprehension
Flow
Confidence

[IMAGE PLACEHOLDER: Micro-interaction]

Examples of micro-interactions

Motion principles?

Timing
Anticipation
Continuity
Focus
Response

Timing

Speed and easing. Rythym and synchronization.

Questions to ask yourself?

Too fast?
Too slow?
Appropriate?

[IMAGE PLACEHOLDER: Timing comparison]

Anticipation

Preparing the user before major change.

Benefits

Predictability
Comfort
Clarity

[IMAGE PLACEHOLDER: Animation anticipation sequence]

Continuity

Objects stay connected, maintaining Relationships

Users should know:

Where?
Why?
What changed?

Benefits

Orientation
Spatial understanding

[IMAGE PLACEHOLDER: Shared element transition]

Focus

Directing Attention

Motion attracts attention.

Design Question

Where should users look?

[IMAGE PLACEHOLDER: Attention heatmap]

Response

Every action deserves a reaction.

Users need confirmation that:

Input was received
Action was completed
System is working

Examples?

Exercise

Observe motion and identify motion principles.

Open a website, app or platform.

Examples:

Instagram
TikTok
Apple
Linear
Stripe
...

Identify:

Timing
Anticipation
Continuity
Focus
Response

Discussion with a fellow student:

Which principle is used best? Why?

Extra:

Which principle is visible? Why is it effective? Could it be improved?