Interaction Design, Patterns & Behaviour

Designing Interactive Experiences Before Building Them

What we'll learn:

Understand interaction design fundamentals
Analyze user behaviour
Recognize common design patterns
Design behaviour before visuals
Prototype interaction thinking

Chapters

Interaction Design Fundamentals
Design Patterns
Wireframing?

Part 1 Interaction Design Basics

What is Interaction Design?

Designing the dialogue between:

User
Interface
System

Formula

User → Action → Response

[IMAGE PLACEHOLDER: User interacting with digital product]

Focus of Interaction Design

Not:

Visual appearance

But:

Behaviour
Actions
Reactions

Why Interaction Design Matters

Users visit products because they want to:

Achieve goals
Solve problems
Complete tasks

Examples of goals, problems, tasks?

Examples:

Listen to music
Send messages
Buy products
Register for events

What does the user want?

User Goals are crucial to design interactions.

[IMAGE PLACEHOLDER: User journey illustration]

User Goals

Desired outcome?

Needs
Motivation
Outcome
Value

Examples

Spotify

Listen to music

Instagram

Consume content
Share content

Notion

Organize information

[IMAGE PLACEHOLDER: Goal-oriented user behavior]

User Actions

Behaviour performed to achieve goals.

Input
Behaviour
Interaction

What do you undertake to achieve a goal using a digital device?

Examples of User Actions

Click
Scroll
Search
Swipe
Drag
Type

[IMAGE PLACEHOLDER: Different web interactions]

System Response

Reaction of the interface.

Purpose:

Communicate state changes.

Examples of a system response?

After clicking:

Menu opens
Form appears
Content loads
Button changes

[IMAGE PLACEHOLDER: Interface response examples]

Feedback Loops

What is Feedback?

System communicates results.

Confidence
Trust
Clarity

Which types of feedback exist?

Types of Feedback

Success

Completed

Warning

Attention needed

Error

Problem occurred

Loading

Processing

[IMAGE PLACEHOLDER: Feedback message examples]

Feedback Loop Model

User Action

↓

System Response

↓

User Interprets

↓

Next Action

Good Design

Clear loop

Bad Design

Broken loop

[IMAGE PLACEHOLDER: Feedback loop diagram]

Recap: Interaction Design Summary

User

Goal

Behaviour

Action

Interface

Response

Communication

Feedback

Result

Goal completed

[IMAGE PLACEHOLDER: Interaction design framework]

Recognize Interaction Design

Action → Response Mapping.

Analyse an application of your choice, document at least 5 interactions.

Document

Action

↓

Response

Questions

What happened?
Was feedback visible?
Was feedback clear?
Could it be improved?

[IMAGE PLACEHOLDER: Student analysis template]

Part 2 Design Patterns

When looking at Interaction Design it's striking that most interactions are similar, you could almost say identical.

What examples of common interactions can you think of?

What is a Design Pattern?

Reusable solution for recurring problems. Users do not want to learn every interface again.

Familiarity
Expectations
Recognition

Recognition over learning.

[IMAGE PLACEHOLDER: Common web patterns]

Why patterns exist?

Faster learning
Less confusion
Better usability

Examples:

Navigation at the top
Search icon
Shopping cart
Login button
...

[IMAGE PLACEHOLDER: Familiar interface examples]

Why do design patterns work?

1. Mental Models

User's internal expectation of how something works. So design should match expectations.

Example

Shopping cart

People expect:

Add item
Store item
Checkout

[IMAGE PLACEHOLDER: User mental model diagram]

2. Familiarity

People prefer known solutions.

Comfort
Recognition
Simplicity

Benefits

Faster decisions
Reduced cognitive load
Greater confidence

[IMAGE PLACEHOLDER: Familiar UX examples]

3. Consistency

Elements behave similarly throughout the product.

Consistency Applies To

Layout
Navigation
Buttons
Forms
Animations

Benefits

Trust
Predictability
Learning efficiency

[IMAGE PLACEHOLDER: Consistent UI system]

Types of patterns

Navigation Patterns
- Help users move through content.
Search Patterns
- Help users find information.
Form Patterns
- Guide task completion.
...

Exercise

Pattern Hunt

Find 4 Examples for each category:

Navigation patterns
Search patterns
Form patterns

Discuss

Why do they work?
Why do users understand them?
What motion supports them?

[IMAGE PLACEHOLDER: Pattern analysis worksheet]

Examples

Top Navigation
Sidebar Navigation
Hamburger Menu
Tab Navigation
Search Bar
Search Suggestions
Filters
Sorting
Labels
Validation
Progress Indicators
Confirmation Messages

Patterns and Motion

Interaction Requires Motion

Examples:

Navigation

Open menu

Search

Display results

Forms

Success states
Error states

[IMAGE PLACEHOLDER: Animated UI patterns]

Recap: Design Pattern

Mental Models

User expectations

Familiarity

Known behaviour

Consistency

Predictable behaviour

Patterns

Reusable solutions

[IMAGE PLACEHOLDER: Pattern ecosystem]

Part 3 Wireframing for Behaviour

What is a Wireframe?

Blueprint of an experience. Content is real important but now we're only wireframing the interaction.

Not:

Colors
Branding

But:

Structure
Behaviour
Functionality

[IMAGE PLACEHOLDER: Website wireframe]

Design Before Visuals

~~Designing appearance first.~~

Better Approach

Goal

↓

Behaviour

↓

Structure

↓

Visual Design

[IMAGE PLACEHOLDER: Design process diagram]

Wireframing for Behaviour

Ask Questions

What can users do?
Where can they click?
What changes?
What happens next?

Focus

Interaction opportunities.

[IMAGE PLACEHOLDER: Interactive wireframe annotations]

Challenge

Student Event Platform

Create

Homepage
Event Detail Page
Registration Flow

Restrictions

No color
No branding
No visual styling

Focus only on behaviour.

[IMAGE PLACEHOLDER: Student event platform concept]

Homepage Thinking

Questions

What information appears first?
What should users do?
How do events get discovered?

Keywords

Discover
Browse
Search

[IMAGE PLACEHOLDER: Homepage wireframe]

Event Detail Thinking

Questions

What information matters most?
Where is the registration action?
How can motivation be increased?

Keywords

Information
Decision
Conversion

[IMAGE PLACEHOLDER: Event detail wireframe]

Registration Flow

Questions

Steps?
Forms?
Confirmation?

Keywords

Progress
Completion
Feedback

[IMAGE PLACEHOLDER: Registration flow diagram]

Exercise

Design

Homepage
Detail Page
Registration Flow

Deliver

Paper sketches

Evaluate

Can users accomplish tasks easily?

[IMAGE PLACEHOLDER: Workshop activity]