Your SlideShare is downloading. ×
0
Future Web Trends
Where brands, people, and technology meet.



       Presented at Colle + McVoy, January 23, 2009
Stop Chasing


‣Trying to find the coolest shiny object will not help you
‣Google has looked at over one trillion pages
‣H...
Look for the larger framework

‣Don’t start with the story
  ‣Start with the narrative
  ‣The entire arc of communication
...
Aristotle
  ‣Poetics
    ‣The art of imitating life
    ‣Linear Narrative
    ‣Beginning, middle, end
    ‣350 BCE
Poetry is the Foundation of Narrative


 ‣Poets have always been civilization’s systems thinkers
  ‣Taking complex societa...
The destination we cannot
     help imagining
A streak of light in the sky
A hat on a peg
And outside the cabin,
And outside the cabin,
    falling leaves
Classic 3-Act Narrative
 ‣Broadly, this is this is the framework we use to create stories

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

‣And if we were to create a   ...
This is Social Media Community User
    Experience
                                                                 Public...
Circular Narrative is
Interactive Narrative
     Linear to the viewer,
     circular to the brand
Circular Media

                 Societal norms   Opportunity
                                  to represent
 My norms?
  ...
What Bridges these Devices?
           Widgets
ComScore reports: everyone uses widgets


‣77% penetration in the US
‣Just over 80% in Canada
‣Many Don’t even know they’r...
Portable Brands

‣Where can I take it?
Portable Brands

‣Marketing through
 branded portals
 (free)
Portable Brands

‣To a Facebook profile
Portable Brands

‣To the Dashboard
Claus Facebook Page
Claus Facebook Page User Experience
                                                                                      ...
Sigh.
Applications
Deeper meaning in the context of brands.
The greater meaning of
     juxtaposition
An idea from 1923 is what fuels Social Media Today
Sergei Eisenstein
‣At the Circus, discovered that each
 added ring (attraction) increased
 the subtext and meaning created...
Sergei Eisenstein: Montage of Attractions

‣With one image, the viewer can
 come to a simple conclusion about
 its meaning.
Sergei Eisenstein: Montage of Attractions

‣Juxtaposing two images of
low contrast (similar color
values) tells the viewer...
Sergei Eisenstein: Montage of Attractions

‣Adding a third image of high
contrast changes the meaning
of all three picture...
Sergei Eisenstein: Montage of Attractions

‣Even changing the order in
which the contrast appears
changes the subtextual
m...
Montage of Attractions: Visa

‣Creating a desktop RSS
reader with low contrast in
the application transforms
the subtextua...
Emotional connections
 in the context of a larger brand
‣Visual contrast of four main
elements

‣Creates visual, auditory
...
Emotional connections
 in the context of a larger brand
‣The emotional, subtextual
meanings created in the
interface are t...
Create attractions for all audiences

‣The future trend for
agencies is to create
meaningful interfaces for
external and i...
The Brand At the Top Ultimately Wins
‣Following basic usability, top of the visual hierarchy is most
important item.

‣Con...
Brands as a Platform
       APIs rule.
APIs
‣Application Programming Interface
‣Allows developers to take a controlled subset of your data
  ‣Create interfaces f...
APIs

                        Brand


           Developers


Audience
This is Not a Website




       It’s the Twitter Web interface
How Twitter Works (in theory)
Desktop apps
Tweetdeck, Twhirl

  Web Apps
   Twitter.com,
Search.Twitter.com,
   Web Widget...
What Makes Twitter So Engaging?

‣Juxtaposition of images of faces with
unpredictable text

‣API allows developers to desi...
How Twitter Engages:
Juxtaposing images and text


                 I’m walking the dog.

                 This party is i...
How Twitter Engages:
Juxtaposing images and text


                 I’m walking the dog.

                 This party is i...
How Twitter Engages:
Juxtaposing images and text


                 I’m walking the dog.

                 This party is i...
Juxtaposition Between Tweets

‣More than any three-ring
circus, the Twitter Web
interface is driving almost
endless possib...
Juxtaposition Between Web Pages

‣The experience of
navigating Twitter.com is
always juxtaposing
contrasting images

‣The ...
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
But We Can’t Offer Prizes

 ‣We can offer prizes if they have no tangible value




 ‣How much is a Facebook Virtual Troph...
Mapping the Experience
                                                Viewer

                             Cl ub hous e

...
APIs enable the
 “local destinations”
of the information age
 Put the content, utility where people are.
Distribution History of the New York Times
Newsboys
                                      API

           Newsstands

    ...
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 l...
Bring The Social Network Back To You
API Push/Pull is Important For People

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




This is not Twitter. Just using Tw...
How Brands Collaborate for API Push/Pull
How Can Brands Take Advantage of this?

‣Start one step into their own registration process
‣Provide API-based functions t...
Top Four Most Popular TV Shows

‣M*A*S*H* 50.1M
‣Dallas 41.47M
‣Facebook 40M US users
‣Roots 36.38M
The Death of Mom Jokes in
     Social Networks
     When Everyone is on Social Networks:
   Social Networking in Small, Pr...
Niche Networks Leveraging
Time/Place/Exclusivity
Now That People Get Social Networks


‣Private Social Networks help facilitate:
  ‣Consensus for purchase
  ‣Big Ticket it...
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
  ‣Interactive, circular narrative is how ...
Preparing For Ubiquitous Computing

‣Look for visual relationships, contrasts, meanings in
 platforms

‣How do people expr...
Think of brands as platforms

‣Widgets
  ‣Put value wherever people are
‣Applications
  ‣Brands must provide utility
‣APIs...
Help People Connect
     Or be left behind.
Thank you.
‣Michael Leis
 ‣Trellist Marketing | Technology
 ‣Senior Associate, Strategy
 ‣mleis@trellist.com
 ‣@mleis
Upcoming SlideShare
Loading in...5
×

Future Web Trends

4,549

Published on

What are the future Web trends? It starts with understanding the larger framework of narrative conventions and building subtext to create immersive experiences.

This is followed by examples of how brands and agencies can use these concepts to develop immersive experiences for their audiences.

Published in: Technology
1 Comment
26 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,549
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
526
Comments
1
Likes
26
Embeds 0
No embeds

No notes for slide

Transcript of "Future Web Trends"

  1. 1. Future Web Trends Where brands, people, and technology meet. Presented at Colle + McVoy, January 23, 2009
  2. 2. Stop Chasing ‣Trying to find the coolest shiny object will not help you ‣Google has looked at over one trillion pages ‣How much information will be created this year? ‣Four Exabytes ‣(4.0x10^19)
  3. 3. Look for the larger framework ‣Don’t start with the story ‣Start with the narrative ‣The entire arc of communication ‣Pick the best parts ‣Create subtext ‣Make them technologically available
  4. 4. Aristotle ‣Poetics ‣The art of imitating life ‣Linear Narrative ‣Beginning, middle, end ‣350 BCE
  5. 5. Poetry is the Foundation of Narrative ‣Poets have always been civilization’s systems thinkers ‣Taking complex societal movements ‣Expressing these concepts in concise, evocative terms ‣Requires deft manipulation of narrative conventions ‣Billy Collins, “Aristotle”
  6. 6. The destination we cannot help imagining
  7. 7. A streak of light in the sky
  8. 8. A hat on a peg
  9. 9. And outside the cabin,
  10. 10. And outside the cabin, falling leaves
  11. 11. Classic 3-Act Narrative ‣Broadly, this is this is the framework we use to create stories Visible Story Beginning Middle End Complete Narrative Linear timeline
  12. 12. Classic Campaigns These videos, as well as the navigation above it are both examples of classic beginning-middle-end narrative convention. It works! Beginning Middle End
  13. 13. 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 Circular Narrative Beginning Middle End Complete Narrative Linear timeline Story takes place after main timeline
  14. 14. What is the result of well- executed circular narrative?
  15. 15. Arguably the greatest movie of all time
  16. 16. 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.
  17. 17. Rosebud
  18. 18. Mapping the Story Viewer ‣And if we were to create a Kane’s Wal ter Thatc her conceptual model of this Life interaction: M r B er ns tein J e didia h Lel and Character interactions with Rosebud Kane to explain Rosebud M r. Thomp s on Sus a n Al e x a nde r Exposed in scenes to the S er vant viewer through character filter
  19. 19. 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 Brand Lifes t yl e/ Editor ial Find out more about Will at Brand blog.semanticfoundry.com
  20. 20. Circular Narrative is Interactive Narrative Linear to the viewer, circular to the brand
  21. 21. Circular Media Societal norms Opportunity to represent My norms? peers on TV via mobile Check peers
  22. 22. What Bridges these Devices? Widgets
  23. 23. ComScore reports: everyone uses widgets ‣77% penetration in the US ‣Just over 80% in Canada ‣Many Don’t even know they’re using them
  24. 24. Portable Brands ‣Where can I take it?
  25. 25. Portable Brands ‣Marketing through branded portals (free)
  26. 26. Portable Brands ‣To a Facebook profile
  27. 27. Portable Brands ‣To the Dashboard
  28. 28. Claus Facebook Page
  29. 29. Claus Facebook Page User Experience Viewer Each media object filters MP3s narrative from the brand to Claus the product, through the Claus character, to the Video e - c ard audience. Palm Centro Sadly, this nice, effective (90k+ friends) circular The Wal l G if t narrative was planned in a ap p l ic ation linear model, leading to.... Naught y or N ice Claus as circular narrative first published by Adam Broitman http://amediacirc.us/
  30. 30. Sigh.
  31. 31. Applications Deeper meaning in the context of brands.
  32. 32. The greater meaning of juxtaposition An idea from 1923 is what fuels Social Media Today
  33. 33. Sergei Eisenstein ‣At the Circus, discovered that each added ring (attraction) increased the subtext and meaning created depending on contrast. ‣In 1923, he applied this to film theory with the “Montage of Attractions”
  34. 34. Sergei Eisenstein: Montage of Attractions ‣With one image, the viewer can come to a simple conclusion about its meaning.
  35. 35. Sergei Eisenstein: Montage of Attractions ‣Juxtaposing two images of low contrast (similar color values) tells the viewer that these items are linked. ‣A greater subtextual meaning and interest is created.
  36. 36. Sergei Eisenstein: Montage of Attractions ‣Adding a third image of high contrast changes the meaning of all three pictures, creating even more meaning and interest to the viewers’ experience.
  37. 37. Sergei Eisenstein: Montage of Attractions ‣Even changing the order in which the contrast appears changes the subtextual meanings, and the story we take away.
  38. 38. Montage of Attractions: Visa ‣Creating a desktop RSS reader with low contrast in the application transforms the subtextual meaning of news to be within the context of the Visa brand.
  39. 39. Emotional connections in the context of a larger brand ‣Visual contrast of four main elements ‣Creates visual, auditory juxtapositions for my music experience in the context of Apple
  40. 40. Emotional connections in the context of a larger brand ‣The emotional, subtextual meanings created in the interface are transferred to the store ‣Audiences are persuaded and trained on how to shop by organizing the music that’s most important to them.
  41. 41. Create attractions for all audiences ‣The future trend for agencies is to create meaningful interfaces for external and internal audiences
  42. 42. The Brand At the Top Ultimately Wins ‣Following basic usability, top of the visual hierarchy is most important item. ‣Contrast and juxtaposition dictates meaning, value
  43. 43. Brands as a Platform APIs rule.
  44. 44. APIs ‣Application Programming Interface ‣Allows developers to take a controlled subset of your data ‣Create interfaces for their own niche audiences ‣The conceptual framework isn’t new at all
  45. 45. APIs Brand Developers Audience
  46. 46. This is Not a Website It’s the Twitter Web interface
  47. 47. How Twitter Works (in theory) Desktop apps Tweetdeck, Twhirl Web Apps Twitter.com, Search.Twitter.com, Web Widgets, Facebook Phone Apps Twitterberry Twitterific, et. al. TV
  48. 48. What Makes Twitter So Engaging? ‣Juxtaposition of images of faces with unpredictable text ‣API allows developers to design this engaging contrast in environment suited to their audience. ‣Montage of attractions = any text juxtaposition will make contrast of messages more sub-textually meaningful
  49. 49. How Twitter Engages: Juxtaposing images and text I’m walking the dog. This party is insane! I’m sacrificing goats.
  50. 50. How Twitter Engages: Juxtaposing images and text I’m walking the dog. This party is insane! I’m sacrificing goats.
  51. 51. How Twitter Engages: Juxtaposing images and text I’m walking the dog. This party is insane! I’m sacrificing goats.
  52. 52. Juxtaposition Between Tweets ‣More than any three-ring circus, the Twitter Web interface is driving almost endless possibilities of subtextual meaning via contrasting images and text.
  53. 53. Juxtaposition Between Web Pages ‣The experience of navigating Twitter.com is always juxtaposing contrasting images ‣The only consistency is in the Logo at top and ordering of objects
  54. 54. Juxtaposition Between Application Designs ‣Each App provides a more fine-tuned UX ‣for the media and audience
  55. 55. Miller ServerSpeak ‣B2B ‣Teaching Bartender Tips ‣Watch the video ‣Take the quiz ‣Win a prize
  56. 56. Solution: Common Engine Content ‣One inventory of content serves up experience unique to segment
  57. 57. 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
  58. 58. 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
  59. 59. APIs enable the “local destinations” of the information age Put the content, utility where people are.
  60. 60. Distribution History of the New York Times Newsboys API Newsstands Honor Boxes
  61. 61. This is Not Just Push Marketing
  62. 62. Why Use Social Networks for Pull? ‣Put brand in the context of friends, peer group ‣Social Proof ‣The crowded line, canned laughter
  63. 63. Bring The Social Network Back To You
  64. 64. 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
  65. 65. Twitpic: Dual-Purpose API use ‣Put your picture on TwitPic ‣Sends it to Twitter This is not Twitter. Just using Twitter user data.
  66. 66. How Brands Collaborate for API Push/Pull
  67. 67. 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 ‣But is there critical mass in social networking?
  68. 68. Top Four Most Popular TV Shows ‣M*A*S*H* 50.1M ‣Dallas 41.47M ‣Facebook 40M US users ‣Roots 36.38M
  69. 69. The Death of Mom Jokes in Social Networks When Everyone is on Social Networks: Social Networking in Small, Private Groups
  70. 70. Niche Networks Leveraging Time/Place/Exclusivity
  71. 71. 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
  72. 72. Let’s Wrap This Thing Up. What the heck was he talking about?
  73. 73. The More Things Change... ‣Linear narrative has, and will continue to be solid ‣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
  74. 74. 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
  75. 75. Think of brands as platforms ‣Widgets ‣Put value wherever people are ‣Applications ‣Brands must provide utility ‣APIs ‣The world is becoming networked
  76. 76. Help People Connect Or be left behind.
  77. 77. Thank you. ‣Michael Leis ‣Trellist Marketing | Technology ‣Senior Associate, Strategy ‣mleis@trellist.com ‣@mleis
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×