Designing Narrative
                                      Contrast, timing, and context



                               ...
Aristotle
              ‣Poetics
                  ‣The art of imitating life
                  ‣Linear Narrative
        ...
Classic 3-Act Narrative


                                                        Visible Story

                         ...
Classic Campaigns
  These videos, as well as the navigation above it are both examples of
  classic beginning-middle-end n...
Circular Narrative
     What makes circular narrative different, in this broad stroke, is that the
     visible storyline ...
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 l...
Rosebud




Michael Leis http://blog.michaelleis.com
Mapping the Story                                                              Viewer

       ‣And if we were to create a ...
This is Social Media Community User Experience

                                                                          ...
Circular Narrative is
                          Interactive Narrative
                                            Linear t...
Circular Discourse

                                           Societal norms   TV projects an
                           ...
Circular Discourse

                                           Societal norms   Viewers
                                  ...
Circular Discourse

                                           Societal norms          The perceived
                     ...
Circular Discourse

                                           Societal norms
                                            ...
Circular Discourse
                                                                       Opportunity
                    ...
Claus Facebook Page




Michael Leis http://blog.michaelleis.com
Claus Facebook Page User Experience
                                                                                    Vi...
Don’t turn off
                                             the way to
                                                   ...
The greater meaning of
                         juxtaposition
                An idea from 1923 is what fuels Social Media...
Sergei Eisenstein: Montage of Attractions



                                           The meaning of a single image
    ...
Sergei Eisenstein: Montage of Attractions




   Look what happens when we add just one more image to the screen:
   subte...
Sergei Eisenstein: Montage of Attractions

                            When you
                            juxtapose two
...
Sergei Eisenstein: Montage of Attractions




   As soon as you add a third image with contrasting color value, you’ve inc...
Sergei Eisenstein: Montage of Attractions




   This meaning can change depending on the order the images are viewed.
Mic...
Sergei Eisenstein: Montage of Attractions




   This meaning can change depending on how closely you relate the images in...
Montage of Attractions: Visa




   We used low-contrast in the MyVisa Desktop application so that over time, receiving
  ...
Emotional connections in the context of brand




   Users build emotional connections with the iTunes interface catalogin...
Create attractions for all audiences




   Design for contrast and value for every audience: internal and external
Michae...
The Brand At the Top Ultimately Wins




Michael Leis http://blog.michaelleis.com
Brands as a Platform
                                           APIs rule.




Michael Leis http://blog.michaelleis.com
How Twitter Engages:
    Juxtaposing images and text


                                           I’m walking the dog.

  ...
How Twitter Engages:
    Juxtaposing images and text


                                           I’m walking the dog.

  ...
Juxtaposition Between Tweets




   In the Twitter stream, we have both the juxtaposition between text and avatar image, a...
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 ...
Juxtaposition Between Application Designs
          ‣Each App provides a more fine-tuned UX
            ‣for the media and ...
Miller ServerSpeak


          ‣B2B
          ‣Teaching Bartender Tips
              ‣Watch the video
              ‣Take ...
Solution: Common Engine Content
   ‣One inventory of content serves up experience unique to
    segment




Michael Leis h...
Mapping the Experience
                                                                              Viewer

             ...
But We Can’t Offer Prizes

          ‣We can offer prizes if they have no tangible value




          ‣How much is a Faceb...
APIs enable the
                       “local destinations”
                      of the information age
                 ...
Distribution History of the New York Times




   Newsboys: Perfect for taking newspapers to crowded corners and yelling. ...
Distribution History of the New York Times




   Newsstands: much more content, associated product choice delivered to po...
Distribution History of the New York Times




   Honor Boxes: Like newsboys, but without all the messy labor laws and exp...
Distribution History of the New York Times




   The NYTimes OPEN API allows developers (read: newsboys) to develop and d...
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...
Bring The Social Network Back To You




   Note the juxtapositions of your friends and major shared experience events at ...
API Push/Pull is Important For People

          ‣Portability creates stronger friendships
          ‣Positioning within t...
Twitpic: Dual-Purpose API use
          ‣Put your picture on TwitPic
            ‣Sends it to Twitter




Michael Leis htt...
How Can Brands Take Advantage of this?

          ‣Start one step into their own registration process
          ‣Provide A...
Metric Montage
                              Timing as added subtextual meaning




Michael Leis http://blog.michaelleis.c...
The Right Way to Wireframe


          ‣Challenge
              ‣Depict/summarize the process of Interaction Design
      ...
Michael Leis http://blog.michaelleis.com
The Death of Mom Jokes in
                  Social Networks
                         Social Networking in Small, Private G...
Once Everyone is On Social Networks…
          ‣Niche networks that leverage time/ place/ exclusivity




Michael Leis htt...
Now That People Get Social Networks


          ‣Private Social Networks help facilitate:
              ‣Consensus for pur...
Let’s Wrap This Thing Up.
                              What the heck was he talking about?




Michael Leis http://blog.m...
The More Things Change...

          ‣Linear narrative has, and will continue to be solid as a
            way to consume ...
Preparing For
                      Ubiquitous Computing
       • Look for visual relationships, contrasts, meanings in
  ...
Think of brands as platforms



Michael Leis http://blog.michaelleis.com
Help People Connect
                                           Or be left behind.




Michael Leis http://blog.michaelleis...
Thank you.
   ‣Michael Leis
    ‣Strategic Consultant
    ‣ml@michaelleis.com
    ‣@mleis
Upcoming SlideShare
Loading in …5
×

Designing Narrative: Contrast, Timing, and Context

4,521 views

Published on

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.

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,521
On SlideShare
0
From Embeds
0
Number of Embeds
130
Actions
Shares
0
Downloads
73
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

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
  7. Arguably the greatest movie of all time 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
  9. Rosebud 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
  18. Claus Facebook Page 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
  36. Juxtaposition Between Tweets Facebook is no different 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
  56. 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

×