Designing Narrative: Contrast, Timing, and Context

Michael Leis http://blog.michaelleis.com

Designing NarrativeContrast, timing, and context

Presented at Sears, February 10, 2010

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

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

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

Gif t appl icat ion

The Wal l

e - card

Naught yor

Viewer

Don’t turn off the way to

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

‣ml@michaelleis.com

‣@mleis

Designing Narrative: Contrast, Timing, and Context

Technology

Neuron, Volume 61 Supplemental Data Timing, timing, timing

Proposed Document: IMDRF Terminologies for …€¦ · Web viewit is readily usable, in contrast to narrative text, for more sophisticated approaches to signal detection (i.e. the

Journal of Cardiovascular Computed TomographyGuidelines Journal of Cardiovascular Computed Tomography xxx (xxxx) xxx–xxx 2. Timing of contrast administration and the start of the

Narrative Narrative, Narrative Analysis, and Narrative Writing

Narrative Art - College in Kansas | College Degree ...€¦ · include the concepts of unity, repetition, contrast, balance, ... Narrative art is found in Egyptian tomb paintings

Fundamental Expository Patterns. 1) Classification and analysis (descriptive) 2) Narrative 3) Comparison and contrast 4) Cause and effect 5) Discursive

Timing Recovery in Digital Synchronous Data Receivers · 2015. 2. 15. · sampled. Timing recovery from the digitized signal must always be achieved with a feedback loop, in contrast

Understanding and evaluating WCAG contrast requirements...• Chrome DevTools • Colour Contrast Analyser • WebAIM Link Checker. Color contrast. Color contrast. Color contrast

Net Assessment - Artificial Intelligence Narrative Analysis › wp-content › uploads › 2017 › ... · In contrast, the dominant narratives are characterized by high narrative

Your primary literacy resource.€¦ · Report Narrative Report Narrative Report Narrative Report Narrative Recount Narrative 4 Report NarrativeExplanation Report Narrative Procedure

Project 2 - Logos - TAFE NSWlmsresources.newengland.tafensw.edu.au/NEI/edu/AdobeSuite/assets/... · Project 2 Logos Timing: ... • Contrast and the colour wheel ... • Project rubric

VARIOUS WAYS OF TIMING NORMAL TIMING - BLOCK. NORMAL TIMING - STAGGERED. DAISY CHAIN - STAGGERED. REVERSE TIMING - BLOCK. REVERSE TIMING - STAGGERED

1-877-574-4444 canxus1346 timing chain $43.80 1352 timing chain $10.97 1358 timing chain $18.08 1362 timing chain $30.80 1364 timing chain $27.11 1384 timing chain $37.60 1394 timing

PROGRAMME OBJECTIVES Coherence and cohesion in writing - Channel conversion (flowchart into process) - Types of paragraph (cause and effect / compare and contrast / narrative / analytical)

· Web viewChoreographic form, analyze, framework, compare and contrast, Haiku, Limerick, Sonnet, ABA, narrative, variation on a theme, kinesiology, alignment, critique, regimen

The Optimization of Scan Timing for Contrast-Enhanced ... · 142 Korean J Radiol 1(3), September 2000 The Optimization of Scan Timing for Contrast-Enhanced Magnetic Resonance Angiography

Blending Compare and Contrast with Narrative

Intermodal Contrast as a Narrative Device in Film Changing the (Semantic) Frame Intermodal Contrast as a Narrative Device in Film Martin Siefkes Chemnitz

Timing to the Statement - University of Virginiafaculty.virginia.edu/mlipscomb/Molly_Lipscomb... · our sample period. In contrast to Gelman et al (2013), automated bill payments

Scalable and Deterministic Timing-Driven Parallel ...lemieux/publications/wang-masc2011.pdf · quality metrics degrades as much as 100%. In contrast, the parallel placer can scale