Designing the dialogue between:
User → Action → Response
[IMAGE PLACEHOLDER: User interacting with digital product]
Not:
But:
Users visit products because they want to:
Examples:
What does the user want?
User Goals are crucial to design interactions.
[IMAGE PLACEHOLDER: User journey illustration]
Desired outcome?
Spotify
Notion
[IMAGE PLACEHOLDER: Goal-oriented user behavior]
Behaviour performed to achieve goals.
What do you undertake to achieve a goal using a digital device?
[IMAGE PLACEHOLDER: Different web interactions]
Reaction of the interface.
Communicate state changes.
Examples of a system response?
After clicking:
[IMAGE PLACEHOLDER: Interface response examples]
System communicates results.
Which types of feedback exist?
Success
Warning
Error
Loading
[IMAGE PLACEHOLDER: Feedback message examples]
User Action
↓
System Response
↓
User Interprets
↓
Next Action
Clear loop
Broken loop
[IMAGE PLACEHOLDER: Feedback loop diagram]
[IMAGE PLACEHOLDER: Interaction design framework]
Analyse an application of your choice, document at least 5 interactions.
Action
↓
Response
[IMAGE PLACEHOLDER: Student analysis template]
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?
Reusable solution for recurring problems. Users do not want to learn every interface again.
Recognition over learning.
[IMAGE PLACEHOLDER: Common web patterns]
[IMAGE PLACEHOLDER: Familiar interface examples]
User's internal expectation of how something works. So design should match expectations.
Shopping cart
People expect:
[IMAGE PLACEHOLDER: User mental model diagram]
People prefer known solutions.
[IMAGE PLACEHOLDER: Familiar UX examples]
Elements behave similarly throughout the product.
[IMAGE PLACEHOLDER: Consistent UI system]
[IMAGE PLACEHOLDER: Pattern analysis worksheet]
Interaction Requires Motion
Navigation
Search
Forms
[IMAGE PLACEHOLDER: Animated UI patterns]
User expectations
Known behaviour
Predictable behaviour
Reusable solutions
[IMAGE PLACEHOLDER: Pattern ecosystem]
Blueprint of an experience. Content is real important but now we're only wireframing the interaction.
Not:
But:
[IMAGE PLACEHOLDER: Website wireframe]
Designing appearance first.
Goal
↓
Behaviour
↓
Structure
↓
Visual Design
[IMAGE PLACEHOLDER: Design process diagram]
Interaction opportunities.
[IMAGE PLACEHOLDER: Interactive wireframe annotations]
Focus only on behaviour.
[IMAGE PLACEHOLDER: Student event platform concept]
[IMAGE PLACEHOLDER: Homepage wireframe]
[IMAGE PLACEHOLDER: Event detail wireframe]
[IMAGE PLACEHOLDER: Registration flow diagram]
Paper sketches
Can users accomplish tasks easily?
[IMAGE PLACEHOLDER: Workshop activity]