Interaction Design as the Language of Story

Dave Malouf
Dave MaloufLeading designers and their teams to be successful at DigitalOcean
Interaction Design as
the Language of Story
Dave Malouf
@daveixd
UX Hong Kong
March 2014
What is the core
problem of the designer?
Empathy
Story
Rock Painting, Tassili n Ajjer, Algeria (Neolithic Agricultural
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
Interaction Design as the Language of Story
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
Aristotle
A dead Greek dude
What is a story
Beginnin
g
Middl
e
En
d
Gustav
Freytag
Less Old Dead Prussian
Guy
Interaction Design as the Language of Story
Interaction Design as the Language of Story
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
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
Interaction Design as the Language of Story
https://vimeo.com/42723890
An
Example
Student work (SCAD) - credits in movie.
Thank you!
Questions?
Questions?
Dave Malouf
@daveixd
dave.ixd@gmail.com
1 of 40

More Related Content

What's hot(20)

Feedback lessons from a sensitive gpsFeedback lessons from a sensitive gps
Feedback lessons from a sensitive gps
Meryl Runion Rose748 views
Interface Design MantrasInterface Design Mantras
Interface Design Mantras
Robbie Manson354 views
Myths and legends activityMyths and legends activity
Myths and legends activity
ladymandona2.9K views
Metanomics Transcript Dec 9Metanomics Transcript Dec 9
Metanomics Transcript Dec 9
Remedy Communications334 views
Mise en-sceneMise en-scene
Mise en-scene
Bethany Maggs156 views
How to Be a Great StoryTellerHow to Be a Great StoryTeller
How to Be a Great StoryTeller
Greg Thomas843 views
Project 7th gradeProject 7th grade
Project 7th grade
Akash Chauhan131 views
Reading Skills_FIfth Grade_NCReading Skills_FIfth Grade_NC
Reading Skills_FIfth Grade_NC
JC Sawyer Dolphins330 views
Fairy Tale ElementsFairy Tale Elements
Fairy Tale Elements
burkebr37.6K views
Stories slides + handoutStories slides + handout
Stories slides + handout
Sue Johnston, MBA + a bunch of other stuff1.7K views
Metanomics Transcript Dec 9Metanomics Transcript Dec 9
Metanomics Transcript Dec 9
Remedy Communications425 views
It short film evaluationIt short film evaluation
It short film evaluation
katiemcquillanmedia48 views
Mise en-sceneMise en-scene
Mise en-scene
lauren8908127 views
Planning NarrativePlanning Narrative
Planning Narrative
afreens10380 views
Clarity in CollaborationClarity in Collaboration
Clarity in Collaboration
Arne Kittler509 views
Presentation PU, ICS MS morning faiza++Presentation PU, ICS MS morning faiza++
Presentation PU, ICS MS morning faiza++
Muhammad Ahmad155 views
Question 5Question 5
Question 5
clockwork101162 views

Similar to Interaction Design as the Language of Story(20)

Corporate storytellingCorporate storytelling
Corporate storytelling
Francesco Zaralli3.1K views
40698393 ux-storytellers40698393 ux-storytellers
40698393 ux-storytellers
jacksonassociates1.4K views
Student Fieldwork: AnthropologyStudent Fieldwork: Anthropology
Student Fieldwork: Anthropology
Abraham Lan2.1K views
Transmedia toe dipping 2013Transmedia toe dipping 2013
Transmedia toe dipping 2013
Jeni Mawter3.6K views
Write For Eye & EarWrite For Eye & Ear
Write For Eye & Ear
Brahmanto Anindito2.2K views
Digital and Mobile Storytelling in ELT Digital and Mobile Storytelling in ELT
Digital and Mobile Storytelling in ELT
Valentina Morgana2.1K views
Tams 2012Tams 2012
Tams 2012
Lance McConkey404 views
PreasationPreasation
Preasation
gogonzd514 views
Developing speaking skillDeveloping speaking skill
Developing speaking skill
Irina K5.5K views
Powerpoint generationPowerpoint generation
Powerpoint generation
Anselm Hook529 views
Collaborative Writing AGQTP 2013Collaborative Writing AGQTP 2013
Collaborative Writing AGQTP 2013
Anne Weaver2.2K views
Storytelling in UX by Lilha WillemsStorytelling in UX by Lilha Willems
Storytelling in UX by Lilha Willems
Tatiana Sidorenkova853 views
Getting your story straightGetting your story straight
Getting your story straight
danieljeevanej916 views
Language to Go: Learning Language with Mobile DevicesLanguage to Go: Learning Language with Mobile Devices
Language to Go: Learning Language with Mobile Devices
Shelly Sanchez Terrell15.9K views
Presentation 8Presentation 8
Presentation 8
Anne Weaver583 views

More from Dave Malouf(20)

Design OperationsDesign Operations
Design Operations
Dave Malouf442 views
Valuing Design & DesignOps PracticeValuing Design & DesignOps Practice
Valuing Design & DesignOps Practice
Dave Malouf1.1K views
Design OperationsDesign Operations
Design Operations
Dave Malouf3K views
Observation As CraftObservation As Craft
Observation As Craft
Dave Malouf609 views
Design Operations   mural - 8 mar 2017Design Operations   mural - 8 mar 2017
Design Operations mural - 8 mar 2017
Dave Malouf12.3K views
Climbing Strategy MountainClimbing Strategy Mountain
Climbing Strategy Mountain
Dave Malouf2.2K views
Interaction Design ResourcesInteraction Design Resources
Interaction Design Resources
Dave Malouf2.5K views
The Craft of ObservationThe Craft of Observation
The Craft of Observation
Dave Malouf2.1K views
Make Your Users BoogieMake Your Users Boogie
Make Your Users Boogie
Dave Malouf7.4K views
Move that thangMove that thang
Move that thang
Dave Malouf2.1K views
Education for Design For LifeEducation for Design For Life
Education for Design For Life
Dave Malouf2.4K views
Refresh Savannah, PeopleRefresh Savannah, People
Refresh Savannah, People
Dave Malouf1.8K views
Final mamaFinal mama
Final mama
Dave Malouf1.7K views

Recently uploaded(20)

3 Dark Design Templates3 Dark Design Templates
3 Dark Design Templates
Pixeldarts12 views
Doing Footwear - Footwear FactoryDoing Footwear - Footwear Factory
Doing Footwear - Footwear Factory
Doing Footwear6 views
Task 3 copy.pptxTask 3 copy.pptx
Task 3 copy.pptx
ZaraCooper215 views
UX Camp Nov 2023_upload.pptxUX Camp Nov 2023_upload.pptx
UX Camp Nov 2023_upload.pptx
Amir Ansari46 views
TISFLEET WEB DESIGN PROJECTTISFLEET WEB DESIGN PROJECT
TISFLEET WEB DESIGN PROJECT
Rabius Sany37 views
Design System.pdfDesign System.pdf
Design System.pdf
Atiqur Rahaman9 views
Presentation (1).pdfPresentation (1).pdf
Presentation (1).pdf
hjksa15 views
Here_Process bookHere_Process book
Here_Process book
nykimstudio15 views
My Creative Resume DIAPOS.pptxMy Creative Resume DIAPOS.pptx
My Creative Resume DIAPOS.pptx
BrayanQuispe237 views
Task 3.pptxTask 3.pptx
Task 3.pptx
ZaraCooper216 views
The Last GrainsThe Last Grains
The Last Grains
pulkkinenaliisa33 views
The dedicated christmas cookbookThe dedicated christmas cookbook
The dedicated christmas cookbook
petrusmorebane18 views
Benzodiazepines--Medicinal ChemistryBenzodiazepines--Medicinal Chemistry
Benzodiazepines--Medicinal Chemistry
NarminHamaaminHussen6 views
Anthelmintic Drugs-Medicinal ChemistryAnthelmintic Drugs-Medicinal Chemistry
Anthelmintic Drugs-Medicinal Chemistry
NarminHamaaminHussen5 views
Design System in Figma A to Z.pdfDesign System in Figma A to Z.pdf
Design System in Figma A to Z.pdf
Atiqur Rahaman13 views
Anti-Cancer Drugs-Medicinal ChemistryAnti-Cancer Drugs-Medicinal Chemistry
Anti-Cancer Drugs-Medicinal Chemistry
NarminHamaaminHussen6 views
SS25 Fashion Key Items trend bookSS25 Fashion Key Items trend book
SS25 Fashion Key Items trend book
Peclers Paris60 views
polarispolaris
polaris
scribddarkened352188 views
Anti -Parkinsonian Drugs-Medicinal ChemistryAnti -Parkinsonian Drugs-Medicinal Chemistry
Anti -Parkinsonian Drugs-Medicinal Chemistry
NarminHamaaminHussen7 views

Interaction Design as the Language of Story

Editor's Notes

  1. Create among all stakeholders a shared sense of meaning and purpose (aka value) around the solutions within any given set of problem spaces. By doing this they facilitate among those stakeholders the comprehensive vision by which they all can engage in executing on that vision. A shared intent is crafted, that they all co-create, and co-execute towards achieving value and meaning.
  2. Before there was ever design. Before there was the written word. At the dawn of language itself, with tools like fire and stone, there was story.
  3. Stories have been used to engage us, yes, but also to guide us. Let’s follow an oldie but goodie … Exodus.
  4. Pain doesn’t have to be deadly … just an annoyance.
  5. Leaders, heroes, magic come to our rescue
  6. Without a sense of justice we cannot move forward. We must be redeemed in some way. Doesn’t require death.
  7. We need not struggle, to be free. Our hero is magic. Design is the incantation in the cauldron of technology & culture. Having a staff, helps.
  8. They demonstrate a new world order, where without the magic, or its cause, we would be irresponsible without.
  9. A story by itself is not so much in the telling. The Hagaddah. The book that Jews use to guide them through their annual telling of Exodus is a tremendous tool for story telling.
  10. How to even tell the story to different audiences in this case.
  11. The frames get re-used throughout. With the rest of the system stories reinforce relationships, and create a cultural memory system. In the Seder (the “Ordered” telling) there are 4 cups of wine surrounding which are the rituals and parts of the story and why they exist. They are markers on our path.
  12. The Afikomen is an invention in later versions of the the story telling ritual that adds a game to the evening. It creates an annual anticipation of possible reward. The frames get re-used throughout. With the rest of the system stories reinforce relationships, and create a cultural memory system.
  13. What’s wrong w/ this plate? The orange … It has it’s own story. It communicates a cultures changing value systems that require a new type of engagement.
  14. The story is an anchor of a shared experience that all who hear it can share.
  15. Frames create structure for memory, and for retelling. It creates pathways similar to landmarks.
  16. It even gives us the means for framing how we even craft the story in the first place. Gives us a place to start.
  17. Stories have also evolved specific tools over time.
  18. But memory in a photo is not enough. We have other techniques to help us remember and those are by creating personal stories.
  19. We create structure so we can remember. The question is an invitation to create a story and once created it lives on it’s.
  20. But there are always new stories for a new generation, that keep getting created and enhanced.
  21. But because stories are human (or anthropomorphized) we connect deeply at an emotional level when done correctly.
  22. But stories are an externalization. Once externalized they are a mirror that allow us to reflect. No genre of storytelling reflects this better than Science Fiction. Whether the utopia of Star Trek or the distopia of classic Japanese anime or the billions of questions from the shortest of short Phillip K. Dyck stories, we are asked to reflect on ourselves and the society in which we live.
  23. As noted above, great stories have lessons for us.
  24. If they don’t engage the different intended audiences, we have failed and so every aspect of a story’s details needs to use the tools of psychological engagement: humor, fear, anticipation, suspense, climatic resolution, exposition, etc. to hold our attention, and create relevance. The multiple-levels of humor so prevalent in early Warner Bros. cartoons and now in Pixar movies (and Dreamworks and the like) allow both parent and child to share an experience and allowing children to mature and find new meanings in these modern stories.
  25. So a long time ago, some famous Greek dude, decided to espouse on what makes a narrative. He was a simple man though and came up with …
  26. He said, there is a definite beginning, and since there is invariably more than one word there is definitely an END, but the exciting part is that he said there is … wait for it … a MIDDLE!!!
  27. Fast forward a few millennia and this Prussian guy said this is a good start, but is not enough to make a narrative.
  28. So, he came up w/ 5 pieces to the story.
  29. This has hence been expanded on further. And for the designer, it is the last part that closes the loop between acts of a story, or between stories themselves that is most important to consider: transformation. If there is no transformation (positive transformation hopefully) there is no real basis of either measuring success, let alone having a reason for starting the design in the first place.
  30. This is not meant to be comprehensive and often these have different names such as character, setting and plot.
  31. But when you look at their structure in this way you see a direct correlation to what is we do as designers and why story is such a wonderful map for interaction design.
  32. Script writing differs from just writing a story. It has structure and form that offers guidance for how direct key elements like actors and cameras through a given part of a story (a scene).
  33. A tool that helps this process even deeper is Adobe Story. I highly recommend people who are interested in the language/narrative side of design to take a look at it.
  34. You can pair script writing w/ storyboarding and tools like Comic Life take the hard part of comics out of the way. You don’t have to think about the framing of your work, or the drawing of simple elements. By using photos instead of drawing (or finding photos online) you can build out comics to tell a story fairly quickly.
  35. Here is a video prototype that my students created 2 years ago to envision a future with a hybrid material library for the industrial design department at SCAD.