Interaction Design as
the Language of Story
Designing for Contexts + Characters + Plot
Dave Malouf	

@daveixd
From Busines...
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/...
The Pope that spawned a million tweets
Memory
Where were you when?
Or is this better?
Emotion > Empathy
Escape > Reflect
Instruct
Engage
Aristotle
A 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
• Task...
Tools of 	

The Craft
Script writers have had
this down for a long
time!
Tools exist
Adobe Story CC Plus
Comics are Easy Too
Comic Life or Comic Touch
Nouns
People, Places,Things	

Doers	

Manipulated	

Containers
verbs
do	

done	

be	

being
Modifiers
Adjectives	

Adverbs	

Scale	

Rate
Encode your UI
• Chunk into scenes	

• Add your nouns verbs and modifiers into
place.	

• Objects	

• methods	

• parameter...
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
Thank you!	

Questions?
Dave Malouf	

dave.ixd@gmail.com	

@daveixd
Dave Malouf - Interaction Design as the Language of Story (From Business to Buttons 2014)
Dave Malouf - Interaction Design as the Language of Story (From Business to Buttons 2014)
Dave Malouf - Interaction Design as the Language of Story (From Business to Buttons 2014)
Dave Malouf - Interaction Design as the Language of Story (From Business to Buttons 2014)
Dave Malouf - Interaction Design as the Language of Story (From Business to Buttons 2014)
Dave Malouf - Interaction Design as the Language of Story (From Business to Buttons 2014)
Upcoming SlideShare
Loading in …5
×

Dave Malouf - Interaction Design as the Language of Story (From Business to Buttons 2014)

7,465 views

Published on

Do you know your company's story? Can you explain how a customer of your product or service uses your system? Stories are not just a way to entertain. Stories are a structure that at the same time craft emotional responses and help people remember things. The narrative structure of communication when properly utilized is a tool for both business and design to co-create the future for their products and services. In the narrative there are characters who represent persona types, settings that represent understood contexts of use, and plot that demonstrates the activities of people and the responses of systems they interact with.
This talk will outline the structure of a story and reveal examples of how stories and storytelling are a great tool for business people and interaction designers to collaborate together and craft the future of their products and services. The story is not merely the description of the intended experiences, but the tools of storytelling are the same tools you can use for crafting those same experiences.

Published in: Design

Dave Malouf - Interaction Design as the Language of Story (From Business to Buttons 2014)

  1. 1. Interaction Design as the Language of Story Designing for Contexts + Characters + Plot Dave Malouf @daveixd From Business to Buttons April 2014
  2. 2. What is the core job of the designer?
  3. 3. Empathy
  4. 4. Story Rock Painting, Tassili n Ajjer, Algeria (Neolithic Agricultural Site)
  5. 5. Fill our culture
  6. 6. Create shared pain
  7. 7. Create heroes
  8. 8. Punish our enemies
  9. 9. Free us
  10. 10. Show us the way forward
  11. 11. In the telling
  12. 12. Embed Instructions
  13. 13. Create future frameworks
  14. 14. Engages the correct audience
  15. 15. And the story evolves
  16. 16. What do stories do?
  17. 17. Share Experience
  18. 18. Frames
  19. 19. 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
  20. 20. The Pope that spawned a million tweets Memory
  21. 21. Where were you when?
  22. 22. Or is this better?
  23. 23. Emotion > Empathy
  24. 24. Escape > Reflect
  25. 25. Instruct
  26. 26. Engage
  27. 27. Aristotle A dead Greek dude What is a story
  28. 28. Beginning Middle End
  29. 29. Gustav Freytag Less Old Dead Prussian Guy
  30. 30. Elements of a Story • People • Locations • Props • Activities • Dialog
  31. 31. A lot like what we do • People • Locations • Props • Activities • Dialog • Personas • Contexts • Interfaces • Tasks • Flow/Sequence
  32. 32. Tools of The Craft Script writers have had this down for a long time!
  33. 33. Tools exist Adobe Story CC Plus
  34. 34. Comics are Easy Too Comic Life or Comic Touch
  35. 35. Nouns People, Places,Things Doers Manipulated Containers
  36. 36. verbs do done be being
  37. 37. Modifiers Adjectives Adverbs Scale Rate
  38. 38. Encode your UI • Chunk into scenes • Add your nouns verbs and modifiers into place. • Objects • methods • parameters • Adjust scenes based on appropriate density
  39. 39. Scene Boarding: Mitosis Always have the complete story
  40. 40. Scene Boarding: Mitosis Always have the complete story
  41. 41. Scene Boarding: Mitosis Always have the complete story
  42. 42. Scene Boarding: Mitosis Always have the complete story
  43. 43. Building the UI Scale & use the visual vocal that makes sense for you. Noun Verb Modifier Modifier New Noun New Modifier
  44. 44. Comic Comic Comic word map word map word map
  45. 45. Thank you! Questions? Dave Malouf dave.ixd@gmail.com @daveixd

×