As the Mobile Web moves forward, we can use narrative modeling from Aristotle, film, and TV, as well as concepts unearthed by Eisenstein to create subtext and meaning in digital user experience.
Axa Assurance Maroc - Insurer Innovation Award 2024
Designing Narrative: Contrast, Timing, and Context
1. Designing Narrative
Contrast, timing, and context
Presented at Sears, February 10, 2010
Michael Leis http://blog.michaelleis.com
2. Aristotle
‣Poetics
‣The art of imitating life
‣Linear Narrative
‣Beginning, middle, end
‣350 BCE
Michael Leis http://blog.michaelleis.com
3. Classic 3-Act Narrative
Visible Story
Beginning Middle End
Complete
Narrative
Linear timeline
Michael Leis http://blog.michaelleis.com
4. Classic Campaigns
These videos, as well as the navigation above it are both examples of
classic beginning-middle-end narrative convention.
Beginning Middle End
Michael Leis http://blog.michaelleis.com
5. Circular Narrative
What makes circular narrative different, in this broad stroke, is that the
visible storyline is detached from the linear timeline which it refers to.
story
Beginning Middle End
Complete
Narrative
Linear timeline Story takes place
after main timeline
Michael Leis http://blog.michaelleis.com
6. What is the result of well-
executed circular narrative?
Michael Leis http://blog.michaelleis.com
8. Citizen Kane Structure
‣ We try to solve the mystery of Kane’s last word, “Rosebud”
by learning about his life through the filter of those who
were closest to him.
Michael Leis http://blog.michaelleis.com
10. Mapping the Story Viewer
‣And if we were to create a Wal ter
Thatc her Kane’s
conceptual model of this Life
interaction, it would look like J e didia h
M r B er ns tein
this: Lel and
Rosebud
M r. Thomp s on
Sus a n
Al e x a nde r
S er vant
Michael Leis http://blog.michaelleis.com
11. This is Social Media Community User Experience
Public Internet
‣When Will Evans Brand
visualized brand- Branded
Public Content
centered social
Brand Brand
media, it was clear
Community
this is the same
model as circular
narrative
Lifes t yl e/ Brand
Find out more about Will at Editor ial
blog.semanticfoundry.com
Brand
Michael Leis http://blog.michaelleis.com
12. Circular Narrative is
Interactive Narrative
Linear to the viewer,
circular to the creator
Michael Leis http://blog.michaelleis.com
13. Circular Discourse
Societal norms TV projects an
abstraction or
comment on
societal norms
Michael Leis http://blog.michaelleis.com
14. Circular Discourse
Societal norms Viewers
compare
My norms? programming
with their own
opinions,
values
Michael Leis http://blog.michaelleis.com
15. Circular Discourse
Societal norms The perceived
differences,
My norms? similarities are
then presented
to the peer
group for
mediation,
Dinner table
Facebook consensus
Watercooler
Train
Check peers School
Michael Leis http://blog.michaelleis.com
16. Circular Discourse
Societal norms
This process
My norms? can take
minutes,
hours, days
depending on
Dinner table
the peer group
Facebook
Watercooler
Train
School
Check peers Phone/TXT
Michael Leis http://blog.michaelleis.com
17. Circular Discourse
Opportunity
Societal norms to represent
(now also social peers
My norms? proof, mediation) instantanously
on TV
via mobile
(now also social object)
Check peers
Michael Leis http://blog.michaelleis.com
19. Claus Facebook Page User Experience
Viewer
MP3s
Claus
Video
e - c ard
Palm
Centro
The Wal l
G if t
ap p l ic ation
Naught y
or
N ice
Michael Leis http://blog.michaelleis.com
20. Don’t turn off
the way to
buy!
Michael Leis http://blog.michaelleis.com
21. The greater meaning of
juxtaposition
An idea from 1923 is what fuels Social Media Today
Michael Leis http://blog.michaelleis.com
22. Sergei Eisenstein: Montage of Attractions
The meaning of a single image
is mostly one-dimensional.
This is a woman.
Michael Leis http://blog.michaelleis.com
23. Sergei Eisenstein: Montage of Attractions
Look what happens when we add just one more image to the screen:
subtext created by juxtaposition!
Michael Leis http://blog.michaelleis.com
24. Sergei Eisenstein: Montage of Attractions
When you
juxtapose two
images, they
become more:
creating subtextual
meaning between
them.
In this scenario, by juxtaposing two images of similar color value (low contrast), the
Michael Leis http://blog.michaelleis.comthese subjects must be related to each other.
assumption is made that
25. Sergei Eisenstein: Montage of Attractions
As soon as you add a third image with contrasting color value, you’ve increased
subtextual meaning again -- more dramatically.
Michael Leis http://blog.michaelleis.com
26. Sergei Eisenstein: Montage of Attractions
This meaning can change depending on the order the images are viewed.
Michael Leis http://blog.michaelleis.com
27. Sergei Eisenstein: Montage of Attractions
This meaning can change depending on how closely you relate the images in time and
space.
Michael Leis http://blog.michaelleis.com
28. Montage of Attractions: Visa
We used low-contrast in the MyVisa Desktop application so that over time, receiving
timely news would be more closely assocated with the Visa brand.
Michael Leis http://blog.michaelleis.com
29. Emotional connections in the context of brand
Users build emotional connections with the iTunes interface cataloging their own
collection of music. Low contrast between your computer and store is key.
Michael Leis http://blog.michaelleis.com
30. Create attractions for all audiences
Design for contrast and value for every audience: internal and external
Michael Leis http://blog.michaelleis.com
31. The Brand At the Top Ultimately Wins
Michael Leis http://blog.michaelleis.com
32. Brands as a Platform
APIs rule.
Michael Leis http://blog.michaelleis.com
33. How Twitter Engages:
Juxtaposing images and text
I’m walking the dog.
This party is insane!
I’m sacrificing goats.
Michael Leis http://blog.michaelleis.com
34. How Twitter Engages:
Juxtaposing images and text
I’m walking the dog.
This party is insane!
I’m sacrificing goats.
Simply by changing the image next to the text, new meanings are created.
Michael Leis http://blog.michaelleis.com
35. Juxtaposition Between Tweets
In the Twitter stream, we have both the juxtaposition between text and avatar image, as
well as between all the updates on the page against each other.
Michael Leis http://blog.michaelleis.com
37. Juxtaposition Between Web Pages
While all the UI controls are persistent in space, Twitter allows customization to drive
maximum contrast in the User Experience of the Web presence
Michael Leis http://blog.michaelleis.com
38. Juxtaposition Between Application Designs
‣Each App provides a more fine-tuned UX
‣for the media and audience
Michael Leis http://blog.michaelleis.com
39. Miller ServerSpeak
‣B2B
‣Teaching Bartender Tips
‣Watch the video
‣Take the quiz
‣Win a prize
Michael Leis http://blog.michaelleis.com
40. Solution: Common Engine Content
‣One inventory of content serves up experience unique to
segment
Michael Leis http://blog.michaelleis.com
41. Mapping the Experience
Viewer
Cl ub hous e
Server
Speak Par t y
Central
Videos,
Quizzes,
Prizes,
User Data
‘Ol
R el iab l e
Sp otl ight
Home Away
From Home
Michael Leis http://blog.michaelleis.com
42. But We Can’t Offer Prizes
‣We can offer prizes if they have no tangible value
‣How much is a Facebook Virtual Trophy worth?
‣115 exposures per win
‣Social capital for bartenders
Michael Leis http://blog.michaelleis.com
43. APIs enable the
“local destinations”
of the information age
Put the content, utility where people are.
This is merely the newest, best content distribution system.
Michael Leis http://blog.michaelleis.com
44. Distribution History of the New York Times
Newsboys: Perfect for taking newspapers to crowded corners and yelling. Not so great
where it comes to children and labor laws.
Michael Leis http://blog.michaelleis.com
45. Distribution History of the New York Times
Newsstands: much more content, associated product choice delivered to populated areas
Michael Leis http://blog.michaelleis.com
46. Distribution History of the New York Times
Honor Boxes: Like newsboys, but without all the messy labor laws and exploitation.
Content is delivered via unionized labor driving trucks.
Michael Leis http://blog.michaelleis.com
47. Distribution History of the New York Times
The NYTimes OPEN API allows developers (read: newsboys) to develop and distribute
content that makes the most sense for their populated corner of the mobile Web.
Michael Leis http://blog.michaelleis.com
48. This is Not
Just Push Marketing
Michael Leis http://blog.michaelleis.com
49. Why Use Social Networks for Pull?
‣Put brand in the context of friends, peer group
‣Social Proof
‣The crowded line, canned laughter
Michael Leis http://blog.michaelleis.com
50. Bring The Social Network Back To You
Note the juxtapositions of your friends and major shared experience events at low
contrast within the CNN brand context.
Michael Leis http://blog.michaelleis.com
51. API Push/Pull is Important For People
‣Portability creates stronger friendships
‣Positioning within the peer group
‣Makes usernames and passwords easy to remember
‣For the user
‣For the brand
Michael Leis http://blog.michaelleis.com
52. Twitpic: Dual-Purpose API use
‣Put your picture on TwitPic
‣Sends it to Twitter
Michael Leis http://blog.michaelleis.com
53. How Can Brands Take Advantage of this?
‣Start one step into their own registration process
‣Provide API-based functions that help users on their own
site
Michael Leis http://blog.michaelleis.com
54. Metric Montage
Timing as added subtextual meaning
Michael Leis http://blog.michaelleis.com
55. The Right Way to Wireframe
‣Challenge
‣Depict/summarize the process of Interaction Design
from persona through sketch, wireframe, visual design
‣Solution: Metric Montage
‣Will allow for atomization and contrast
‣Goal: Create larger subtext around the process
Michael Leis http://blog.michaelleis.com
57. The Death of Mom Jokes in
Social Networks
Social Networking in Small, Private Groups
Michael Leis http://blog.michaelleis.com
58. Once Everyone is On Social Networks…
‣Niche networks that leverage time/ place/ exclusivity
Michael Leis http://blog.michaelleis.com
59. Now That People Get Social Networks
‣Private Social Networks help facilitate:
‣Consensus for purchase
‣Big Ticket items like Diamond Rings, Wedding Dresses
‣Coordination purchases like vacations
‣Sharing pictures, conversation with small groups
Michael Leis http://blog.michaelleis.com
60. Let’s Wrap This Thing Up.
What the heck was he talking about?
Michael Leis http://blog.michaelleis.com
61. The More Things Change...
‣Linear narrative has, and will continue to be solid as a
way to consume content
‣Interactive, circular narrative is how brands need to
furnish content going forward
‣Provide ways for people to mediate societal norms
‣Think more in terms of sponsoring experiences
‣Bring sociality, montage of attractions into the site as
hub
Michael Leis http://blog.michaelleis.com
62. Preparing For
Ubiquitous Computing
• Look for visual relationships, contrasts, meanings in
platforms
• How do people express identity, hierarchy within peer
groups?
• Agencies need to think in terms of connecting people to
content, with meaningful design and UX
• Inside and outside the organization
Michael Leis http://blog.michaelleis.com
63. Think of brands as platforms
Michael Leis http://blog.michaelleis.com
64. Help People Connect
Or be left behind.
Michael Leis http://blog.michaelleis.com
65. Thank you.
‣Michael Leis
‣Strategic Consultant
‣ml@michaelleis.com
‣@mleis