Designing Narrative: Contrast, Timing, and Context

Designing Narrative
Contrast, 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


Classic 3-Act Narrative

Visible Story

Beginning Middle End

Complete
Narrative

Linear timeline


Classic Campaigns
These videos, as well as the navigation above it are both examples of
classic beginning-middle-end narrative convention.



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


Complete
Narrative

Linear timeline Story takes place
after main timeline


What is the result of well-
executed circular narrative?


Arguably the greatest movie of all time


Citizen Kane Structure
‣ We try to solve the mystery of Kane’s last word, “Rosebud”
by learning about his life through the ﬁlter of those who
were closest to him.


Rosebud


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


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


Circular Narrative is
Interactive Narrative
Linear to the viewer,
circular to the creator


Circular Discourse

Societal norms TV projects an
abstraction or
comment on
societal norms


Circular Discourse

Societal norms Viewers
compare
My norms? programming
with their own
opinions,
values


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


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

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

Claus Facebook Page


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


Don’t turn off
the way to
buy!


The greater meaning of
juxtaposition
An idea from 1923 is what fuels Social Media Today


Sergei Eisenstein: Montage of Attractions

The meaning of a single image
is mostly one-dimensional.

This is a woman.



Look what happens when we add just one more image to the screen:
subtext created by juxtaposition!


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


As soon as you add a third image with contrasting color value, you’ve increased
subtextual meaning again -- more dramatically.


This meaning can change depending on the order the images are viewed.


This meaning can change depending on how closely you relate the images in time and
space.

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.


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.

Create attractions for all audiences

Design for contrast and value for every audience: internal and external

The Brand At the Top Ultimately Wins


Brands as a Platform
APIs rule.


How Twitter Engages:
Juxtaposing images and text

I’m walking the dog.

This party is insane!

I’m sacrificing goats.


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.


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.


Juxtaposition Between Tweets

Facebook is no different


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

Juxtaposition Between Application Designs
‣Each App provides a more ﬁne-tuned UX
‣for the media and audience


Miller ServerSpeak

‣B2B
‣Teaching Bartender Tips
‣Watch the video
‣Take the quiz
‣Win a prize


Solution: Common Engine Content
‣One inventory of content serves up experience unique to
segment


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


But We Can’t Offer Prizes

‣We can oﬀer prizes if they have no tangible value

‣How much is a Facebook Virtual Trophy worth?
‣115 exposures per win
‣Social capital for bartenders

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.


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.



Newsstands: much more content, associated product choice delivered to populated areas



Honor Boxes: Like newsboys, but without all the messy labor laws and exploitation.
Content is delivered via unionized labor driving trucks.



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.


This is Not
Just Push Marketing


Why Use Social Networks for Pull?

‣Put brand in the context of friends, peer group
‣Social Proof
‣The crowded line, canned laughter


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.


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


Twitpic: Dual-Purpose API use
‣Put your picture on TwitPic
‣Sends it to Twitter


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


Metric Montage
Timing as added subtextual meaning


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


The Death of Mom Jokes in
Social Networks
Social Networking in Small, Private Groups


Once Everyone is On Social Networks…
‣Niche networks that leverage time/ place/ exclusivity


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


Let’s Wrap This Thing Up.
What the heck was he talking about?


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

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


Think of brands as platforms


Help People Connect
Or be left behind.


Thank you.
‣Michael Leis
‣Strategic Consultant
‣ml@michaelleis.com
‣@mleis

Designing Narrative: Contrast, Timing, and Context

Recommended

Recommended

More Related Content

More from Michael Leis

More from Michael Leis (6)

Recently uploaded

Recently uploaded (20)

Designing Narrative: Contrast, Timing, and Context