Download - Dave Malouf - Interaction Design as the Language of Story (From Business to Buttons 2014)
Interaction Design as the Language of Story
Designing for Contexts + Characters + Plot
Dave Malouf @daveixd
From Business to Buttons April 2014
What is the core job of the designer?
Empathy
Story
Rock Painting, Tassili n Ajjer, Algeria (Neolithic Agricultural Site)
Fill our culture
Create shared pain
Create heroes
Punish our enemies
Free us
Show us the way forward
In the telling
Embed Instructions
Create future frameworks
Engages the correct audience
And the story evolves
What do stories do?
Share Experience
Frames
Muji Manga Notebook
muji.co.hk muji.com.cn muji.com.sg
muji.net (Japan) mujikorea.net
muji.tw muji.com/th/ muji.com/ph/ muji.com/my/
muji.us
The Pope that spawned a million tweets
Memory
Where were you when?
Or is this better?
Emotion > Empathy
Escape > Reflect
Instruct
Engage
AristotleA dead Greek dude
What is a story
Beginning
Middle
End
Gustav Freytag
Less Old Dead Prussian Guy
Elements of a Story
• People
• Locations
• Props
• Activities
• Dialog
A lot like what we do
• People
• Locations
• Props
• Activities
• Dialog
• Personas
• Contexts
• Interfaces
• Tasks
• Flow/Sequence
Tools of The Craft
Script writers have had this down for a long
time!
Tools existAdobe Story CC Plus
Comics are Easy TooComic Life or Comic Touch
NounsPeople, Places,Things
Doers Manipulated Containers
verbsdo
done be
being
ModifiersAdjectives Adverbs
Scale Rate
Encode your UI• Chunk into scenes
• Add your nouns verbs and modifiers into place. • Objects • methods • parameters
• Adjust scenes based on appropriate density
Scene Boarding: Mitosis
Always have the complete story
Scene Boarding: Mitosis
Always have the complete story
Scene Boarding: Mitosis
Always have the complete story
Scene Boarding: Mitosis
Always have the complete story
Building the UI
Scale & use the visual vocal that makes sense for you.
Noun Verb
Modifier
Modifier
New Noun
New Modifier
Comic Comic Comic
word map word map word map
