designing narrative: contrast, timing, and context

Michael Leis http://blog.michaelleis.com

Designing NarrativeContrast, timing, and context

Presented at Sears, February 10, 2010

http://blog.michaelleis.com



Aristotle‣Poetics

‣The art of imitating life

‣Linear Narrative

‣Beginning, middle, end

‣350 BCE




Classic 3-Act Narrative

CompleteNarrative

Beginning Middle End

Visible Story

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

CompleteNarrative


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.




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 filter of those who were closest to him.




Rosebud




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




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




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

My norms?

Viewers compare programming with their own opinions, values




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




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




Circular Discourse

Societal norms

My norms?

Check peers

Opportunityto represent

peers instantanously

on TVvia mobile

(now also social proof, mediation)

(now also social object)




Claus Facebook Page


Claus Facebook Page User Experience

PalmCentro

Claus

Video

Gif t appl icat ion

MP3s

The Wal l

e - card

Naught yor

N ice

Viewer




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 assumption is made that these subjects must be related to each other.



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 PlatformAPIs rule.




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.

How Twitter Engages: Juxtaposing images and text

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 fine-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

Videos,Quizzes,Prizes,User Data

ServerSpeak Par t y

Centra l

Spot l ight

Clubhouse

‘OlRel iable

Home Away From Home

Viewer




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




APIs enable the “local destinations”

of the information agePut 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 MontageTiming 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 ConnectOr be left behind.



Thank you.

‣Michael Leis

‣Strategic Consultant

‣[email protected]

‣@mleis

mailto:[email protected]

mailto:[email protected]

designing narrative: contrast, timing, and context

Technology

brand michael leis http

time michael leis http

rosebud michael leis

vant michael leis http

bce michael leis http

values michael leis

creator michael leis

middle end michael leis