Embed Size (px)
Citation preview
storytelling+design
A N E XC E R PT O F A TA L K BY M AU R I C I O E ST R E L L A ,
F O R T H E U I UX CO N F E R E N C E C H I N A .
Two pivotal moments in
human evolution.
first one: our ability to cook.
COOKING ACTED TO EXTRACT PROTEINS. IT BROKE STARCHES INTO SUGARS AND BROKE DOWN FIBERS THAT WERE NEARLY IMPOSSIBLE TO DIGEST.
WE STOPPED SPENDING 60% OF OUR DAYLIGHT TIME HUNTING FOR FOOD, OR EATING IT.
WE DEVELOPED "RGER BRAINS, WHICH REQUIRES MORE ENERGY THAN ANY OTHER PART OF YOUR BODY.
MORE EFFICIENT FOOD = BIGGER BRAIN IS AFFORDABLE.
second one: our ability to document history.
PAINTINGS OR WRITING = BETTER MEMORY DEVELOPMENT. KNOWLEDGE TRANSFER WAS POSSIBLE.
WE BECAME A MORE INTELLIGENT SPECIES.
we became storytellers.
WHAT’S IN THIS PDF:
• WHAT IS STORYTELLING • FRAMEWORKS (TALE, COMPLEX TALE,
COMICAL, HERO’S JOURNEY) • STORYTELLING + DESIGN (SERVICE
DESIGN, PRODUCT FEATURES, INTERACTION
DESIGN, METAPHORS)
STORYTELLING IS USED FOR ENTERTAINMENT, EDUCATION, CULTURAL PRESERVATION, MORAL VALUES.
HUMAN LIFE IS NARRATIVELY ROOTED. WE CONSTRUCT OUR LIVES AND SHAPE OUR WORLD INTO HOMES IN TERMS OF THESE GROUNDINGS AND MEMORIES.
Storytelling frameworks
1. CONTEXT 2. CONFLICT 3. RESOLUTION
classic tale
H T T P : // T O M T U N G U Z .C O M / S T O R Y T E L L I N G - D U A R T E /
1. CONTEXT 2. CONFLICT 3. RESOLUTION 4. COMPLICATION 5. ACTUAL RESOLUTION
complex tale
H T T P : // T O M T U N G U Z .C O M / S T O R Y T E L L I N G - D U A R T E /
1. CONFLICT 2. RESOLUTION 3. CONTEXT REVEAL
comical
1. CALL TO ADVENTURE 2. SUPERNATURAL AID 3. THRESHOLD GUARDIAN 4. MENTOR OR HELPER 5. ABYSS 6. DEATH & REBIRTH 7. TRANSFORMATION 8. RETURN
the hero’s journey
what does this mean for
designers?
1. Service design 2. Product feature ideation 3. Interaction design 4. Storytelling metaphors
1. Service design
USE STORIES TO HELP YOU DESIGN THE BEST PATH.
1. Service design 2. Product feature ideation 3. Interaction design 4. Storytelling metaphors
CREATE SCENARIOS WHERE YOUR USERS ARE HEROES, AND YOUR
PRODUCT IS THEIR WORLD. WEAVE A STORY AROUND IT.
2. product feature ideation
A. THINK OF YOUR USER AS A STORY CHARACTER: AN INCOMPLETE HERO.
2. product feature ideation
B. HOW CAN YOU HELP THEM UNLOCK THEIR ABILITIES?
2. product feature ideation
C. ONCE THEY UNLOCK THEIR ABILITY, HOW DO YOU LET THEM USE IT?
2. product feature ideation
D. WHO IS THE HERO’S SIDEKICK?
2. product feature ideation
2. product feature ideation
D. WHO IS THE HERO’S SIDEKICK?
E. WHAT’S THE MAXIMUM REACH OF THEIR SUPERPOWERS?
2. product feature ideation
F. WHAT’S THEIR KRYPTONITE?
2. product feature ideation
F. WHAT’S THEIR KRYPTONITE?
2. product feature ideation
1. Service design 2. Product feature ideation 3. Interaction design 4. Storytelling metaphors
3. interaction design
MAP SEGMENTS OF LINEAR EXPERIENCES OR ‘FLOWS’ WITHIN
YOUR PRODUCT.
3. interaction design
3. interaction design
GUIDING ANIMATIONS
3. interaction design
TIMED COMPLEXITY
3. interaction design
1. Service design 2. Product feature ideation 3. Interaction design 4. Storytelling metaphors
4. storytelling metaphors
CREATE NARRATIVE USE-CASES FOR YOUR PRODUCT.
“AN ASTRONAUT IS FLYING IN A SO"R SYSTEM, LOOKING FOR A FLOATING SPATIAL ANOMALY.”
4. storytelling metaphors
N O M A N ’ S S K Y B Y H E L L O G A M E S
“THIS ANOMALY WAS P"CED IN THE STAR SYSTEM BY MISTAKE AND IT RISKS CREATING CHAOS. THIS
WOULD BE CATASTROPHIC!”
4. storytelling metaphors
N O M A N ’ S S K Y B Y H E L L O G A M E S
“THE ASTRONAUT NEEDS TO LOCATE THE ANOMALY IN THE STAR SYSTEM, AND DO TWO
THINGS: TAG IT.…“
4. storytelling metaphors
N O M A N ’ S S K Y B Y H E L L O G A M E S
“…AND FIND A MAP TO THE NEAREST SAFE AREA IN SPACE WHERE THE ANOMALY CAN BE RELOCATED
WITH A SPECIAL TOOL.”
4. storytelling metaphors
N O M A N ’ S S K Y B Y H E L L O G A M E S
• USER MUST FLY OVER STAR FIELD
• USER MUST BE ABLE TO DISTINGUISH A STAR SYSTEM WITH ANOMALIES
• USER MUST FIND/RELOCATE ANOMALY BEFORE IT DISRUPTS GRAVITY ON NEARBY P"NETS
• USER MUST UNDERSTAND THE MEANING AND POSSIBLE RE"TIONSHIPS BETWEEN STARS, STAR SYSTEMS, AND P"NETS.
4. storytelling metaphors
N O M A N ’ S S K Y B Y H E L L O G A M E S
• INTERFACE MUST HAVE OPTIMAL 3D-NAVIGATIONAL CONTROLS
• INTERFACE MUST BE CLEAR ON DISP"YING DIFFERENT SYSTEMS AND THEIR POTENTIAL ANOMALIES
• INTERFACE MUST ALLOW EASE OF USE TO TARGET SPECIFIC ANOMALY AND PROVIDE MEANS TO RELOCATE IT
• INTERFACE MUST HIGHLIGHT CONNECTIONS BETWEEN ELEMENTS DISP"YED
4. storytelling metaphors
• USER MUST FLY OVER STAR FIELD
• USER MUST BE ABLE TO DISTINGUISH A STAR SYSTEM WITH ANOMALIES
• USER MUST FIND/RELOCATE ANOMALY BEFORE IT DISRUPTS GRAVITY ON NEARBY P"NETS
• USER MUST UNDERSTAND THE MEANING AND POSSIBLE RE"TIONSHIPS BETWEEN STARS, STAR SYSTEMS, AND P"NETS.
N O M A N ’ S S K Y B Y H E L L O G A M E S
4. storytelling metaphors
© S TA C K R AY
4. storytelling metaphors
• INTERFACE MUST HAVE OPTIMAL 3D-NAVIGATIONAL CONTROLS
© S TA C K R AY
4. storytelling metaphors
• INTERFACE MUST BE CLEAR ON DISP"YING DIFFERENT SYSTEMS AND THEIR POTENTIAL ANOMALIES
© S TA C K R AY
4. storytelling metaphors
• INTERFACE MUST ALLOW EASE OF USE TO TARGET SPECIFIC ANOMALY AND PROVIDE MEANS TO RELOCATE IT
© S TA C K R AY
4. storytelling metaphors
• INTERFACE MUST HIGHLIGHT CONNECTIONS BETWEEN ELEMENTS DISP"YED
© S TA C K R AY
4. storytelling metaphors
© S TA C K R AY
closing thoughts.
HUMAN KNOWLEDGE IS BASED ON STORIES.
STORIES MIRROR HUMAN THOUGHTS, BECAUSE WE THINK IN NARRATIVE STRUCTURES AND
REMEMBER FACTS IN STORY FORM.
FACTS ARE SMALL VERSIONS OF A "RGE STORY.
DATA NEEDS THE PAST.
INNOVATION NEEDS THE FUTURE.
STORYTELLING NEEDS BOTH.
• IT HELPS US TO SHARE THE LINEAR JOURNEY OF OUR USERS AS WE DEVELOP A PRODUCT.
• PROBLEMS CAN BE SPOTTED EARLIER.
• C"RIFIES GOALS UP FRONT.
• IT HELPS DESIGN/DEV TEAMS TO CRAFT THE PRODUCT WITH A MORE UNDERSTANDABLE NARRATIVE.
storytelling + design
the end.
T H I S P D F H A S B E E N S H A R E D P R I VAT E LY F O R A S S I S TA N T S O F T H E U I U X C O N F E R E N C E I N C H I N A , I N O C T O B E R 2 0 1 6 . A L L M AT E R I A L S S H O W N H E R E A R E U S E D F O R C O N T E X T A N D D E M O N S T R AT I O N P U R P O S E S O N LY. N O C O P Y R I G H T I N F R I N G E M E N T O R D I S C L O S U R E I S I N T E N D E D B Y E I T H E R T H E O R G A N I Z E R S O F T H E E V E N T, T H E S P E A K E R , O R T H E C A R R I E R O F T H I S P D F . A L L I N F O R M AT I O N C O N TA I N E D H E R E I S A S U M M A R Y O F A TA L K T H AT R E Q U I R E D L E S S S L I D E S A N D B U L L E T P O I N T S T H A N T H E O N E S P R E S E N T I N T H I S D O C U M E N T. P R O P E R A C C R E D I TAT I O N C A N B E F O U N D I N T H E F O L L O W I N G L I N K S , W H E R E M O S T O F T H E R E F E R E N C E S H AV E B E E N TA K E N F R O M T O B U I L D T H E C O N T E N T I N T H E A F O R E M E N T I O N E D P D F F I L E .
H T T P S : // W W W. U X P I N .C O M / S T U D I O / E B O O K S / V I S U A L - S T O R Y T E L L I N G -W E B - U I - D E S I G N /
H T T P S : // L I B R A R Y.G V.C O M / W H Y- G O O D - S T O R Y T E L L I N G - H E L P S -YO U - D E S I G N - G R E AT-P R O D U C T S - 1 4 8 C 9 B B C 74 0 4 # .O 0 O Q 2 Y 7 Y X
H T T P : // D E S I G N R E S E A R C H T E C H N I Q U E S .C O M / C A S E S T U D I E S / S T O R Y T E L L I N G /
H T T P S : // W W W. U X P I N .C O M / S T U D I O / B L O G / S I M P L I F Y I N G - U X - D E S I G N -T H R O U G H - S T O R Y T E L L I N G /
H T T P : // T H E N E X T W E B .C O M / D D /2 0 1 5 /0 9/0 8 /6 - S T O R Y T E L L I N G -T E C H N I Q U E S - F O R - G R E AT- I N T E R A C T I O N - D E S I G N / # G R E F
H T T P S : // S P E C K Y B OY.C O M / T H E - I M P O R TA N C E - O F - S T O R Y T E L L I N G - I N - D E S I G N /
H T T P S : // W W W.W I K I WA N D .C O M / E N / S T O R Y T E L L I N G # / H I S T O R I C A L _ P E R S P E C T I V E
H T T P : // T O M T U N G U Z .C O M / S T O R Y T E L L I N G - D U A R T E /
