Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Sat, 13 Oct 2007
AIGA Next
Denver, CO

Annotated Version




                    Khoi Vinh
                    Subtraction...
About Me
Today’s Subject
Khoi Vinh
                           Subtraction.com




Why is interactive design
different from print design?
Khoi Vinh
                          Subtraction.com




The answer lies in control.
But First…
What Is Good Design?
Khoi Vinh
Narrative                  Subtraction.com




Historically, we’ve defined
good design as solutions
that also tel...
Khoi Vinh
                                             Subtraction.com




A handful of examples of narrative in good
design…
Khoi Vinh
Napoleon’s March to Moscow Charles Joseph Minard      Subtraction.com




                                      ...
Khoi Vinh
Priester Matches Lucien Bernhard                    Subtraction.com




                                        ...
Khoi Vinh
Harper’s Bazaar Alexey Brodovitch      Subtraction.com




                                    Publication desig...
Khoi Vinh
Concert Posters J. Müller-Brockmann                                     Subtraction.com




Narrative can also b...
Khoi Vinh
IBM 1975 Annual Report Paul Rand                        Subtraction.com




                                    ...
Khoi Vinh
Beach Culture David Carson      Subtraction.com




                             Narrative is such a
           ...
Khoi Vinh
Principles of Good Storytelling               Subtraction.com




• A coherent world view
• Fine-tuned managemen...
Khoi Vinh
What Do These Add up To?                      Subtraction.com




+ A coherent world view
+ Fine-tuned managemen...
Khoi Vinh
                             Subtraction.com




If narrative is the guiding
principle of traditional design,
th...
Khoi Vinh
                               Subtraction.com




But the guiding principle of
interactive media is not
narrati...
Khoi Vinh
                          Subtraction.com




Designing for behavior
means transferring some
measure of control ...
Khoi Vinh
Or, Put Another Way…      Subtraction.com




Digital media is taking
control away from
designers.
Khoi Vinh
For Many Designers…     Subtraction.com




Many designers think:
“This is blasphemy!”
Khoi Vinh
                        Subtraction.com




“Designers must control the
 communication, because we
 know what we...
Khoi Vinh
                          Subtraction.com




“If we give people what they
 say they want, they’ll never
 get wh...
Khoi Vinh
“Don’t They Know This Is Bad?”      Subtraction.com




                                 A notorious example
   ...
Khoi Vinh
                                                 Subtraction.com




Undesigned sites like MySpace have been on
...
Khoi Vinh
                                               Subtraction.com




Over the past decade, users have rejected
man...
Khoi Vinh
Failed Techniques for Control                  Subtraction.com




Typographic requirements. (Very early on.)


...
Khoi Vinh
Failed Techniques for Control                  Subtraction.com




Rendering text as images instead of as HTML.
Khoi Vinh
Failed Techniques for Control                    Subtraction.com




Resizing browser windows or launching daugh...
Khoi Vinh
                                                   Subtraction.com




Linking a site’s functionality exclusivel...
Khoi Vinh
Failed Techniques for Control                   Subtraction.com




Counting on users to ‘learn how to use a sit...
Khoi Vinh
                          Subtraction.com




“If user control trumps all,
 aren’t we saying that design
 has no...
Khoi Vinh
                        Subtraction.com




No, actually. But to
understand why, we have to
look at behaviors.
Behaviors
Khoi Vinh
Given a Page of Text…     Subtraction.com




                        What can you do
                        wi...
Khoi Vinh
Content and Presentation Are Wedded                   Subtraction.com




In each case, it’s difficult to separat...
Khoi Vinh
   Subtraction.com




Given a block of text
on the Web, what
can you do with it?
Khoi Vinh
   Subtraction.com




• Enlarge it
Khoi Vinh
   Subtraction.com




• Click on it to go
  somewhere else
Khoi Vinh
   Subtraction.com




• Roll-over it to
  reveal other
  behaviors
Khoi Vinh
   Subtraction.com




• Re-render it in a
  different typeface
Khoi Vinh
   Subtraction.com




• Read it back via
  screen reader
Khoi Vinh
  Subtraction.com




• Comment on it
Khoi Vinh
   Subtraction.com




• Read it via RSS
  aggregator,
  completely stripped
  of its presentation
  layer
Khoi Vinh
   Subtraction.com




• Quote it liberally.
Khoi Vinh
   Subtraction.com




• Edit it (in Wiki
  form)
Khoi Vinh
Let’s Split Up                                   Subtraction.com




In digital media, presentation and content ...
Khoi Vinh
                                                  Subtraction.com




That’s not necessarily the case. What we’r...
Khoi Vinh
                                                 Subtraction.com




The challenge has changed. There are more
s...
Khoi Vinh
                                              Subtraction.com




The designer still has a job to do.
How does t...
What Are We Designing?
Khoi Vinh
                            Subtraction.com




Digital media is as different
from print as a speech is
differen...
Khoi Vinh
What They Have in Common                     Subtraction.com




They’re both exchanges of information
between p...
Khoi Vinh
Compare and Contrast                                       Subtraction.com




                       Print (Spe...
Khoi Vinh
                                                Subtraction.com




In fact, what we’re talking about here is th...
Khoi Vinh
                             Subtraction.com




Digital media looks like
writing, but it’s actually
conversation.
Khoi Vinh
Instant Messaging & Bulletin Boards = Conversation   Subtraction.com
Khoi Vinh
Email Looks Like a Document—But It’s Really Conversation   Subtraction.com
Khoi Vinh
Blogs                    Subtraction.com




Sometimes documentary,
almost always
conversational.
Khoi Vinh
Del.icio.us Is Conversation   Subtraction.com




Meta-sites enable
conversation through links,
tagging, micro-c...
Khoi Vinh
Traditional Documents Too   Subtraction.com




Traditional journalism
becomes a framework for
conversation.
Khoi Vinh
Social Context                                 Subtraction.com




The tension between print and digital is
embl...
Khoi Vinh
                                                  Subtraction.com




Writing transformed ancient peoples from t...
Khoi Vinh
                                                 Subtraction.com




In Medieval Europe, the failure of governme...
Khoi Vinh
                                              Subtraction.com




Gutenberg’s press pitted mass
communication ag...
Khoi Vinh
                                                 Subtraction.com




The PC transformed ‘cathedrals’ of informat...
Khoi Vinh
But They Need to Co-Exist                       Subtraction.com




This push and pull is essential to media
evo...
Khoi Vinh
                          Subtraction.com




Good narrative gives rise to
good conversations.
What’s Next
Khoi Vinh
                          Subtraction.com




Yes. People are looking for
traditional design values
online.
Khoi Vinh
From MySpace to Facebook                              Subtraction.com




It’s no accident that the shift is on ...
Khoi Vinh
Blueprint CSS                                     Subtraction.com




There’s a tremendous interest in grid-base...
Khoi Vinh
Technological Formalization of Traditional Design                    Subtraction.com




And this proposed speci...
Khoi Vinh
Technologists Seek Typography   Subtraction.com




“Fonts & Encodings” by
Yannis Haralambous
Contents include:
...
Khoi Vinh
Downloadable Typefaces                          Subtraction.com




Recent revisions to WebKit (Safari) allow fo...
Khoi Vinh
The Trend in Tools Is for More Control                                     Subtraction.com




As our tools prog...
Khoi Vinh
Good News                   Subtraction.com




Principles of good storytelling
still apply—with adjustment.
Khoi Vinh
People Want Traditional Design Values, But…   Subtraction.com




People are looking for
narrative design to be
...
Khoi Vinh
                         Subtraction.com




Users want to retain control
over their own experiences.
Khoi Vinh
                           Subtraction.com




Users also want their
experiences to be guided
and clear.
Khoi Vinh
                              Subtraction.com




There’s a compromise
between user control and
designer intenti...
Khoi Vinh
                          Subtraction.com




As our tools enable more
control, the expectation for
greater cont...
End
Control (Annotated)
Control (Annotated)
Control (Annotated)
Upcoming SlideShare
Loading in …5
×

Control (Annotated)

92,354 views

Published on

This is the main stage presentation I made at the AIGA National Design Conference in Denver, CO on 13 Oct 2007. It's been annotated to include additional captions on some slides that were images only when I presented them. See also <a href="http://www.subtraction.com/archives/2007/1015_new_york_to_.php">my blog post</a>.

Published in: Design, Business

Control (Annotated)

  1. Sat, 13 Oct 2007 AIGA Next Denver, CO Annotated Version Khoi Vinh Subtraction.com
  2. About Me
  3. Today’s Subject
  4. Khoi Vinh Subtraction.com Why is interactive design different from print design?
  5. Khoi Vinh Subtraction.com The answer lies in control.
  6. But First… What Is Good Design?
  7. Khoi Vinh Narrative Subtraction.com Historically, we’ve defined good design as solutions that also tell good stories.
  8. Khoi Vinh Subtraction.com A handful of examples of narrative in good design…
  9. Khoi Vinh Napoleon’s March to Moscow Charles Joseph Minard Subtraction.com An information graphic that is transformed into great graphic design when narrative is added. Made famous by Edward Tufte.
  10. Khoi Vinh Priester Matches Lucien Bernhard Subtraction.com Good storytelling in graphic design can be highly succinct. In this example, Bernhard lets the audience’s imaginations complete the story. Priester Matches, c. 1905
  11. Khoi Vinh Harper’s Bazaar Alexey Brodovitch Subtraction.com Publication design, of course, has always been about good storytelling. Alexey Brodovitch took this to new heights through supremely elegant juxtaposition of image and text with Harper’s Bazaar.
  12. Khoi Vinh Concert Posters J. Müller-Brockmann Subtraction.com Narrative can also be highly abstract and non- literal. These posters from Josef Müller- Brockmann are so reductive as to be similar to modern painting, and yet they are still powerful storytelling. Tonhalle-Quartett, 1955. Helmhaus Zürich, 1953. Beethoven, 1955. Junifestkonzert, 1957.
  13. Khoi Vinh IBM 1975 Annual Report Paul Rand Subtraction.com Masters like Paul Rand were terrific storytellers — even when the story he was telling was a year in the life of IBM, the world’s most boring company. Paul Rand, IBM Annual Report, 1975
  14. Khoi Vinh Beach Culture David Carson Subtraction.com Narrative is such a strong impulse in graphic design, that in many instances, designers assume authorial roles alongside the actual authors — as David Carson did for Beach Culture Magazine in the Nineties.
  15. Khoi Vinh Principles of Good Storytelling Subtraction.com • A coherent world view • Fine-tuned management of every element • One-way communication of information from the author to the audience
  16. Khoi Vinh What Do These Add up To? Subtraction.com + A coherent world view + Fine-tuned management of every element + One-way communication of information from the author to the audience Control
  17. Khoi Vinh Subtraction.com If narrative is the guiding principle of traditional design, then control is its most important tool.
  18. Khoi Vinh Subtraction.com But the guiding principle of interactive media is not narrative—it’s behavior.
  19. Khoi Vinh Subtraction.com Designing for behavior means transferring some measure of control from author to user.
  20. Khoi Vinh Or, Put Another Way… Subtraction.com Digital media is taking control away from designers.
  21. Khoi Vinh For Many Designers… Subtraction.com Many designers think: “This is blasphemy!”
  22. Khoi Vinh Subtraction.com “Designers must control the communication, because we know what we’re doing.”
  23. Khoi Vinh Subtraction.com “If we give people what they say they want, they’ll never get what we know they need.”
  24. Khoi Vinh “Don’t They Know This Is Bad?” Subtraction.com A notorious example is MySpace, where design values are completely different from any professional publication.
  25. Khoi Vinh Subtraction.com Undesigned sites like MySpace have been on the Internet since day one, and designers have made many attempts to fight back against them.
  26. Khoi Vinh Subtraction.com Over the past decade, users have rejected many of these techniques that designers have used to exert control in digital media…
  27. Khoi Vinh Failed Techniques for Control Subtraction.com Typographic requirements. (Very early on.) This site best viewed with Cooper Black. Please download and install it before viewing.
  28. Khoi Vinh Failed Techniques for Control Subtraction.com Rendering text as images instead of as HTML.
  29. Khoi Vinh Failed Techniques for Control Subtraction.com Resizing browser windows or launching daughter windows.
  30. Khoi Vinh Subtraction.com Linking a site’s functionality exclusively to a proprietary technology, e.g., Microsoft Internet Explorer or even sometimes Adobe Flash.
  31. Khoi Vinh Failed Techniques for Control Subtraction.com Counting on users to ‘learn how to use a site over time.’
  32. Khoi Vinh Subtraction.com “If user control trumps all, aren’t we saying that design has no value?”
  33. Khoi Vinh Subtraction.com No, actually. But to understand why, we have to look at behaviors.
  34. Behaviors
  35. Khoi Vinh Given a Page of Text… Subtraction.com What can you do with print? • Read it • Mark it • Clip it out • Photocopy it
  36. Khoi Vinh Content and Presentation Are Wedded Subtraction.com In each case, it’s difficult to separate the printed text from its presentation. The design is baked in. The designer retains control.
  37. Khoi Vinh Subtraction.com Given a block of text on the Web, what can you do with it?
  38. Khoi Vinh Subtraction.com • Enlarge it
  39. Khoi Vinh Subtraction.com • Click on it to go somewhere else
  40. Khoi Vinh Subtraction.com • Roll-over it to reveal other behaviors
  41. Khoi Vinh Subtraction.com • Re-render it in a different typeface
  42. Khoi Vinh Subtraction.com • Read it back via screen reader
  43. Khoi Vinh Subtraction.com • Comment on it
  44. Khoi Vinh Subtraction.com • Read it via RSS aggregator, completely stripped of its presentation layer
  45. Khoi Vinh Subtraction.com • Quote it liberally.
  46. Khoi Vinh Subtraction.com • Edit it (in Wiki form)
  47. Khoi Vinh Let’s Split Up Subtraction.com In digital media, presentation and content are separable. Design is not baked in. The designer has seemingly lost control.
  48. Khoi Vinh Subtraction.com That’s not necessarily the case. What we’re interpreting as a loss of control is actually a multiplicity of states.
  49. Khoi Vinh Subtraction.com The challenge has changed. There are more states to design. But also: the user demands a certain amount of control over these various states.
  50. Khoi Vinh Subtraction.com The designer still has a job to do. How does the content behave in each of its possible states? What is the overall experience of the user?
  51. What Are We Designing?
  52. Khoi Vinh Subtraction.com Digital media is as different from print as a speech is different from a conversation.
  53. Khoi Vinh What They Have in Common Subtraction.com They’re both exchanges of information between people. But one is a controlled environment and the other is uncontrolled.
  54. Khoi Vinh Compare and Contrast Subtraction.com Print (Speech) Interactive (Conversation) Environmental and Knowable Mix of knowable and Behavioral Factors unknowable Kinds of Essentially one kind Potentially many different Audience kinds Experiences The audience receives the The audience takes part in experience the experience
  55. Khoi Vinh Subtraction.com In fact, what we’re talking about here is the difference between documents and conversations. More on this later.
  56. Khoi Vinh Subtraction.com Digital media looks like writing, but it’s actually conversation.
  57. Khoi Vinh Instant Messaging & Bulletin Boards = Conversation Subtraction.com
  58. Khoi Vinh Email Looks Like a Document—But It’s Really Conversation Subtraction.com
  59. Khoi Vinh Blogs Subtraction.com Sometimes documentary, almost always conversational.
  60. Khoi Vinh Del.icio.us Is Conversation Subtraction.com Meta-sites enable conversation through links, tagging, micro-comments
  61. Khoi Vinh Traditional Documents Too Subtraction.com Traditional journalism becomes a framework for conversation.
  62. Khoi Vinh Social Context Subtraction.com The tension between print and digital is emblematic of a long-running pattern of media evolution. There is often a struggle between documents and conversations. “Glut: Mastering Information Through the Ages” By Alex Wright
  63. Khoi Vinh Subtraction.com Writing transformed ancient peoples from tribal organizations into governments. Conver- Documents sations
  64. Khoi Vinh Subtraction.com In Medieval Europe, the failure of governments and the rise of illiteracy renewed folkloric traditions. Conver- Documents sations
  65. Khoi Vinh Subtraction.com Gutenberg’s press pitted mass communication against folkloric traditions. Conver- Documents sations
  66. Khoi Vinh Subtraction.com The PC transformed ‘cathedrals’ of information systems into ‘bazaars’ of personal computing Conver- Documents sations Ref. Richard Stallman
  67. Khoi Vinh But They Need to Co-Exist Subtraction.com This push and pull is essential to media evolution. Documents and conversations are not mutually exclusive. They are inherently dependent upon one another.
  68. Khoi Vinh Subtraction.com Good narrative gives rise to good conversations.
  69. What’s Next
  70. Khoi Vinh Subtraction.com Yes. People are looking for traditional design values online.
  71. Khoi Vinh From MySpace to Facebook Subtraction.com It’s no accident that the shift is on in favor of a more highly designed environment like Facebook
  72. Khoi Vinh Blueprint CSS Subtraction.com There’s a tremendous interest in grid-based layouts online at the moment, including this CSS framework for grids Developed by Olav Frihagen Bjørkøy
  73. Khoi Vinh Technological Formalization of Traditional Design Subtraction.com And this proposed specification for grid layouts to the CSS standard http://dev.w3.org/csswg/css3-grid/overview.html
  74. Khoi Vinh Technologists Seek Typography Subtraction.com “Fonts & Encodings” by Yannis Haralambous Contents include: • The History and Classifications of Latin Typefaces
  75. Khoi Vinh Downloadable Typefaces Subtraction.com Recent revisions to WebKit (Safari) allow for downloadable TrueType fonts, so designers can in theory specify any typeface.
  76. Khoi Vinh The Trend in Tools Is for More Control Subtraction.com As our tools progress, they give us incrementally more power to control the presentation of our interfaces. Print Fidelity Flash CSS 3.0 Tables Fireworks/ CSS 2.0 Dreamweaver HTML CSS 1.0 HTML 1.0 1990 1995 2000 2005 2010
  77. Khoi Vinh Good News Subtraction.com Principles of good storytelling still apply—with adjustment.
  78. Khoi Vinh People Want Traditional Design Values, But… Subtraction.com People are looking for narrative design to be expressed in a language that’s native to digital media.
  79. Khoi Vinh Subtraction.com Users want to retain control over their own experiences.
  80. Khoi Vinh Subtraction.com Users also want their experiences to be guided and clear.
  81. Khoi Vinh Subtraction.com There’s a compromise between user control and designer intention. We just haven’t reached the sweet spot yet.
  82. Khoi Vinh Subtraction.com As our tools enable more control, the expectation for greater control will increase—for users and designers.
  83. End

×