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

Thank you! Questions?

Dave Malouf dave.ixd@gmail.com

@daveixd