Michael Leis http://blog.michaelleis.com
Designing NarrativeContrast, timing, and context
Presented at Sears, February 10, 2010
Michael Leis http://blog.michaelleis.com
Aristotle‣Poetics
‣The art of imitating life
‣Linear Narrative
‣Beginning, middle, end
‣350 BCE
Michael Leis http://blog.michaelleis.com
Classic 3-Act Narrative
CompleteNarrative
Beginning Middle End
Visible Story
Linear timeline
Michael Leis http://blog.michaelleis.com
Classic Campaigns
Beginning Middle End
These videos, as well as the navigation above it are both examples of classic beginning-middle-end narrative convention.
Michael Leis http://blog.michaelleis.com
Circular Narrative
CompleteNarrative
Beginning Middle End
story
Linear timeline Story takes place after main timeline
What makes circular narrative different, in this broad stroke, is that the visible storyline is detached from the linear timeline which it refers to.
Michael Leis http://blog.michaelleis.com
What is the result of well-executed circular narrative?
Michael Leis http://blog.michaelleis.com
Arguably the greatest movie of all time
Michael Leis http://blog.michaelleis.com
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
Rosebud
Michael Leis http://blog.michaelleis.com
Mapping the Story‣And if we were to create a conceptual model of this interaction, it would look like this:
Rosebud
Kane’sLife
M r Bernstein
SusanAlexander
WalterThatcher
M r. Thompson
JedidiahLeland
Ser vant
Viewer
Michael Leis http://blog.michaelleis.com
This is Social Media Community User Experience
‣When Will Evans visualized brand-centered social media, it was clear this is the same model as circular narrative
Community
BrandedPublic Content
Li festy le/Editor ia l
Brand
Brand
Brand
Brand
Brand
Public Internet
Find out more about Will atblog.semanticfoundry.com
Michael Leis http://blog.michaelleis.com
Circular Narrative is Interactive Narrative
Linear to the viewer,circular to the creator
Michael Leis http://blog.michaelleis.com
Circular Discourse
Societal norms TV projects an abstraction or comment on societal norms
Michael Leis http://blog.michaelleis.com
Circular Discourse
Societal norms
My norms?
Viewers compare programming with their own opinions, values
Michael Leis http://blog.michaelleis.com
Circular Discourse
Societal norms
My norms?
Check peers
The perceived differences, similarities are then presented to the peer group for mediation, consensus
Dinner tableFacebook
WatercoolerTrain
School
Michael Leis http://blog.michaelleis.com
Circular Discourse
Societal norms
My norms?
Check peers
This process can take minutes, hours, days depending on the peer groupDinner table
FacebookWatercooler
TrainSchool
Phone/TXT
Michael Leis http://blog.michaelleis.com
Circular Discourse
Societal norms
My norms?
Check peers
Opportunityto represent
peers instantanously
on TVvia mobile
(now also social proof, mediation)
(now also social object)
Michael Leis http://blog.michaelleis.com
Claus Facebook Page
Michael Leis http://blog.michaelleis.com
Claus Facebook Page User Experience
PalmCentro
Claus
Video
Gif t appl icat ion
MP3s
The Wal l
e - card
Naught yor
N ice
Viewer
Michael Leis http://blog.michaelleis.com
Don’t turn off the way to
buy!
Michael Leis http://blog.michaelleis.com
The greater meaning of juxtaposition
An idea from 1923 is what fuels Social Media Today
Michael Leis http://blog.michaelleis.com
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
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
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 assumption is made that these subjects must be related to each other.
Michael Leis http://blog.michaelleis.com
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
Sergei Eisenstein: Montage of Attractions
This meaning can change depending on the order the images are viewed.
Michael Leis http://blog.michaelleis.com
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
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
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
Create attractions for all audiences
Design for contrast and value for every audience: internal and external
Michael Leis http://blog.michaelleis.com
The Brand At the Top Ultimately Wins
Michael Leis http://blog.michaelleis.com
Brands as a PlatformAPIs rule.
Michael Leis http://blog.michaelleis.com
I’m walking the dog.
This party is insane!
I’m sacrificing goats.
How Twitter Engages: Juxtaposing images and text
Michael Leis http://blog.michaelleis.com
I’m walking the dog.
This party is insane!
I’m sacrificing goats.
How Twitter Engages: Juxtaposing images and text
Simply by changing the image next to the text, new meanings are created.
Michael Leis http://blog.michaelleis.com
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
Juxtaposition Between Tweets
Facebook is no different
Michael Leis http://blog.michaelleis.com
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
Juxtaposition Between Application Designs‣Each App provides a more fine-tuned UX ‣for the media and audience
Michael Leis http://blog.michaelleis.com
Miller ServerSpeak
‣B2B
‣Teaching Bartender Tips
‣Watch the video
‣Take the quiz
‣Win a prize
Michael Leis http://blog.michaelleis.com
Solution: Common Engine Content‣One inventory of content serves up experience unique to segment
Michael Leis http://blog.michaelleis.com
Mapping the Experience
Videos,Quizzes,Prizes,User Data
ServerSpeak Par t y
Centra l
Spot l ight
Clubhouse
‘OlRel iable
Home Away From Home
Viewer
Michael Leis http://blog.michaelleis.com
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
APIs enable the “local destinations”
of the information agePut the content, utility where people are.
This is merely the newest, best content distribution system.
Michael Leis http://blog.michaelleis.com
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
Distribution History of the New York Times
Newsstands: much more content, associated product choice delivered to populated areas
Michael Leis http://blog.michaelleis.com
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
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
This is Not Just Push Marketing
Michael Leis http://blog.michaelleis.com
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
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
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
Twitpic: Dual-Purpose API use‣Put your picture on TwitPic‣Sends it to Twitter
Michael Leis http://blog.michaelleis.com
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
Metric MontageTiming as added subtextual meaning
Michael Leis http://blog.michaelleis.com
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
Michael Leis http://blog.michaelleis.com
The Death of Mom Jokes in Social Networks
Social Networking in Small, Private Groups
Michael Leis http://blog.michaelleis.com
Once Everyone is On Social Networks…
‣Niche networks that leverage time/ place/ exclusivity
Michael Leis http://blog.michaelleis.com
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
Let’s Wrap This Thing Up. What the heck was he talking about?
Michael Leis http://blog.michaelleis.com
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
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
Think of brands as platforms
Michael Leis http://blog.michaelleis.com
Help People ConnectOr be left behind.
Thank you.
‣Michael Leis
‣Strategic Consultant
‣@mleis