ݺߣ

ݺߣShare a Scribd company logo

Control (Annotated)

?
?
Khoi Vinh
Khoi Vinh

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

1 of 86
Sat, 13 Oct 2007 AIGA Next Denver, CO Annotated Version Khoi Vinh Subtraction.com
About Me
Control (Annotated)
Control (Annotated)
Control (Annotated)
Todays 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, weve de?ned good design as solutions that also tell good stories.
Khoi Vinh Subtraction.com A handful of examples of narrative in good design
Khoi Vinh Napoleons 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.
Khoi Vinh Priester Matches Lucien Bernhard Subtraction.com Good storytelling in graphic design can be highly succinct. In this example, Bernhard lets the audiences imaginations complete the story. Priester Matches, c. 1905
Khoi Vinh Harpers 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 Harpers Bazaar.
Khoi Vinh Concert Posters J. Mller-Brockmann Subtraction.com Narrative can also be highly abstract and non- literal. These posters from Josef Mller- Brockmann are so reductive as to be similar to modern painting, and yet they are still powerful storytelling. Tonhalle-Quartett, 1955. Helmhaus Zrich, 1953. Beethoven, 1955. Junifestkonzert, 1957.
Khoi Vinh IBM 1975 Annual Report Paul Rand Subtraction.com Masters like Paul Rand were terri?c storytellers even when the story he was telling was a year in the life of IBM, the worlds most boring company. Paul Rand, IBM Annual Report, 1975
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.
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
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
Khoi Vinh Subtraction.com If narrative is the guiding principle of traditional design, then control is its most important tool.
Khoi Vinh Subtraction.com But the guiding principle of interactive media is not narrativeits behavior.
Khoi Vinh Subtraction.com Designing for behavior means transferring some measure of control from author to user.
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 were doing.
Khoi Vinh Subtraction.com If we give people what they say they want, theyll never get what we know they need.
Khoi Vinh Dont They Know This Is Bad? Subtraction.com A notorious example is MySpace, where design values are completely different from any professional publication.
Khoi Vinh Subtraction.com Undesigned sites like MySpace have been on the Internet since day one, and designers have made many attempts to ?ght back against them.
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
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.
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 daughter windows.
Khoi Vinh Subtraction.com Linking a sites functionality exclusively to a proprietary technology, e.g., Microsoft Internet Explorer or even sometimes Adobe Flash.
Khoi Vinh Failed Techniques for Control Subtraction.com Counting on users to learn how to use a site over time.
Khoi Vinh Subtraction.com If user control trumps all, arent we saying that design has no value?
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 with print? ? Read it ? Mark it ? Clip it out ? Photocopy it
Khoi Vinh Content and Presentation Are Wedded Subtraction.com In each case, its dif?cult to separate the printed text from its presentation. The design is baked in. The designer retains control.
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 Lets Split Up Subtraction.com In digital media, presentation and content are separable. Design is not baked in. The designer has seemingly lost control.
Khoi Vinh Subtraction.com Thats not necessarily the case. What were interpreting as a loss of control is actually a multiplicity of states.
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.
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?
What Are We Designing?
Khoi Vinh Subtraction.com Digital media is as different from print as a speech is different from a conversation.
Khoi Vinh What They Have in Common Subtraction.com Theyre both exchanges of information between people. But one is a controlled environment and the other is uncontrolled.
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
Khoi Vinh Subtraction.com In fact, what were talking about here is the difference between documents and conversations. More on this later.
Khoi Vinh Subtraction.com Digital media looks like writing, but its actually conversation.
Khoi Vinh Instant Messaging & Bulletin Boards = Conversation Subtraction.com
Khoi Vinh Email Looks Like a DocumentBut Its 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-comments
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 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
Khoi Vinh Subtraction.com Writing transformed ancient peoples from tribal organizations into governments. Conver- Documents sations
Khoi Vinh Subtraction.com In Medieval Europe, the failure of governments and the rise of illiteracy renewed folkloric traditions. Conver- Documents sations
Khoi Vinh Subtraction.com Gutenbergs press pitted mass communication against folkloric traditions. Conver- Documents sations
Khoi Vinh Subtraction.com The PC transformed cathedrals of information systems into bazaars of personal computing Conver- Documents sations Ref. Richard Stallman
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.
Khoi Vinh Subtraction.com Good narrative gives rise to good conversations.
Whats Next
Khoi Vinh Subtraction.com Yes. People are looking for traditional design values online.
Khoi Vinh From MySpace to Facebook Subtraction.com Its no accident that the shift is on in favor of a more highly designed environment like Facebook
Khoi Vinh Blueprint CSS Subtraction.com Theres a tremendous interest in grid-based layouts online at the moment, including this CSS framework for grids Developed by Olav Frihagen Bj?rk?y
Khoi Vinh Technological Formalization of Traditional Design Subtraction.com And this proposed speci?cation for grid layouts to the CSS standard http://dev.w3.org/csswg/css3-grid/overview.html
Khoi Vinh Technologists Seek Typography Subtraction.com Fonts & Encodings by Yannis Haralambous Contents include: ? The History and Classi?cations of Latin Typefaces
Khoi Vinh Downloadable Typefaces Subtraction.com Recent revisions to WebKit (Safari) allow for downloadable TrueType fonts, so designers can in theory specify any typeface.
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
Khoi Vinh Good News Subtraction.com Principles of good storytelling still applywith adjustment.
Khoi Vinh People Want Traditional Design Values, But Subtraction.com People are looking for narrative design to be expressed in a language thats native to digital media.
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 Theres a compromise between user control and designer intention. We just havent reached the sweet spot yet.
Khoi Vinh Subtraction.com As our tools enable more control, the expectation for greater control will increasefor users and designers.
End

More Related Content

Control (Annotated)

  • 1. Sat, 13 Oct 2007 AIGA Next Denver, CO Annotated Version Khoi Vinh Subtraction.com
  • 7. Khoi Vinh Subtraction.com Why is interactive design different from print design?
  • 8. Khoi Vinh Subtraction.com The answer lies in control.
  • 9. But First What Is Good Design?
  • 10. Khoi Vinh Narrative Subtraction.com Historically, weve de?ned good design as solutions that also tell good stories.
  • 11. Khoi Vinh Subtraction.com A handful of examples of narrative in good design
  • 12. Khoi Vinh Napoleons 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.
  • 13. Khoi Vinh Priester Matches Lucien Bernhard Subtraction.com Good storytelling in graphic design can be highly succinct. In this example, Bernhard lets the audiences imaginations complete the story. Priester Matches, c. 1905
  • 14. Khoi Vinh Harpers 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 Harpers Bazaar.
  • 15. Khoi Vinh Concert Posters J. Mller-Brockmann Subtraction.com Narrative can also be highly abstract and non- literal. These posters from Josef Mller- Brockmann are so reductive as to be similar to modern painting, and yet they are still powerful storytelling. Tonhalle-Quartett, 1955. Helmhaus Zrich, 1953. Beethoven, 1955. Junifestkonzert, 1957.
  • 16. Khoi Vinh IBM 1975 Annual Report Paul Rand Subtraction.com Masters like Paul Rand were terri?c storytellers even when the story he was telling was a year in the life of IBM, the worlds most boring company. Paul Rand, IBM Annual Report, 1975
  • 17. 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.
  • 18. 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
  • 19. 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
  • 20. Khoi Vinh Subtraction.com If narrative is the guiding principle of traditional design, then control is its most important tool.
  • 21. Khoi Vinh Subtraction.com But the guiding principle of interactive media is not narrativeits behavior.
  • 22. Khoi Vinh Subtraction.com Designing for behavior means transferring some measure of control from author to user.
  • 23. Khoi Vinh Or, Put Another Way Subtraction.com Digital media is taking control away from designers.
  • 24. Khoi Vinh For Many Designers Subtraction.com Many designers think: This is blasphemy!
  • 25. Khoi Vinh Subtraction.com Designers must control the communication, because we know what were doing.
  • 26. Khoi Vinh Subtraction.com If we give people what they say they want, theyll never get what we know they need.
  • 27. Khoi Vinh Dont They Know This Is Bad? Subtraction.com A notorious example is MySpace, where design values are completely different from any professional publication.
  • 28. Khoi Vinh Subtraction.com Undesigned sites like MySpace have been on the Internet since day one, and designers have made many attempts to ?ght back against them.
  • 29. 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
  • 30. 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.
  • 31. Khoi Vinh Failed Techniques for Control Subtraction.com Rendering text as images instead of as HTML.
  • 32. Khoi Vinh Failed Techniques for Control Subtraction.com Resizing browser windows or launching daughter windows.
  • 33. Khoi Vinh Subtraction.com Linking a sites functionality exclusively to a proprietary technology, e.g., Microsoft Internet Explorer or even sometimes Adobe Flash.
  • 34. Khoi Vinh Failed Techniques for Control Subtraction.com Counting on users to learn how to use a site over time.
  • 35. Khoi Vinh Subtraction.com If user control trumps all, arent we saying that design has no value?
  • 36. Khoi Vinh Subtraction.com No, actually. But to understand why, we have to look at behaviors.
  • 38. Khoi Vinh Given a Page of Text Subtraction.com What can you do with print? ? Read it ? Mark it ? Clip it out ? Photocopy it
  • 39. Khoi Vinh Content and Presentation Are Wedded Subtraction.com In each case, its dif?cult to separate the printed text from its presentation. The design is baked in. The designer retains control.
  • 40. Khoi Vinh Subtraction.com Given a block of text on the Web, what can you do with it?
  • 41. Khoi Vinh Subtraction.com ? Enlarge it
  • 42. Khoi Vinh Subtraction.com ? Click on it to go somewhere else
  • 43. Khoi Vinh Subtraction.com ? Roll-over it to reveal other behaviors
  • 44. Khoi Vinh Subtraction.com ? Re-render it in a different typeface
  • 45. Khoi Vinh Subtraction.com ? Read it back via screen reader
  • 46. Khoi Vinh Subtraction.com ? Comment on it
  • 47. Khoi Vinh Subtraction.com ? Read it via RSS aggregator, completely stripped of its presentation layer
  • 48. Khoi Vinh Subtraction.com ? Quote it liberally.
  • 49. Khoi Vinh Subtraction.com ? Edit it (in Wiki form)
  • 50. Khoi Vinh Lets Split Up Subtraction.com In digital media, presentation and content are separable. Design is not baked in. The designer has seemingly lost control.
  • 51. Khoi Vinh Subtraction.com Thats not necessarily the case. What were interpreting as a loss of control is actually a multiplicity of states.
  • 52. 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.
  • 53. 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?
  • 54. What Are We Designing?
  • 55. Khoi Vinh Subtraction.com Digital media is as different from print as a speech is different from a conversation.
  • 56. Khoi Vinh What They Have in Common Subtraction.com Theyre both exchanges of information between people. But one is a controlled environment and the other is uncontrolled.
  • 57. 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
  • 58. Khoi Vinh Subtraction.com In fact, what were talking about here is the difference between documents and conversations. More on this later.
  • 59. Khoi Vinh Subtraction.com Digital media looks like writing, but its actually conversation.
  • 60. Khoi Vinh Instant Messaging & Bulletin Boards = Conversation Subtraction.com
  • 61. Khoi Vinh Email Looks Like a DocumentBut Its Really Conversation Subtraction.com
  • 62. Khoi Vinh Blogs Subtraction.com Sometimes documentary, almost always conversational.
  • 63. Khoi Vinh Del.icio.us Is Conversation Subtraction.com Meta-sites enable conversation through links, tagging, micro-comments
  • 64. Khoi Vinh Traditional Documents Too Subtraction.com Traditional journalism becomes a framework for conversation.
  • 65. 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
  • 66. Khoi Vinh Subtraction.com Writing transformed ancient peoples from tribal organizations into governments. Conver- Documents sations
  • 67. Khoi Vinh Subtraction.com In Medieval Europe, the failure of governments and the rise of illiteracy renewed folkloric traditions. Conver- Documents sations
  • 68. Khoi Vinh Subtraction.com Gutenbergs press pitted mass communication against folkloric traditions. Conver- Documents sations
  • 69. Khoi Vinh Subtraction.com The PC transformed cathedrals of information systems into bazaars of personal computing Conver- Documents sations Ref. Richard Stallman
  • 70. 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.
  • 71. Khoi Vinh Subtraction.com Good narrative gives rise to good conversations.
  • 73. Khoi Vinh Subtraction.com Yes. People are looking for traditional design values online.
  • 74. Khoi Vinh From MySpace to Facebook Subtraction.com Its no accident that the shift is on in favor of a more highly designed environment like Facebook
  • 75. Khoi Vinh Blueprint CSS Subtraction.com Theres a tremendous interest in grid-based layouts online at the moment, including this CSS framework for grids Developed by Olav Frihagen Bj?rk?y
  • 76. Khoi Vinh Technological Formalization of Traditional Design Subtraction.com And this proposed speci?cation for grid layouts to the CSS standard http://dev.w3.org/csswg/css3-grid/overview.html
  • 77. Khoi Vinh Technologists Seek Typography Subtraction.com Fonts & Encodings by Yannis Haralambous Contents include: ? The History and Classi?cations of Latin Typefaces
  • 78. Khoi Vinh Downloadable Typefaces Subtraction.com Recent revisions to WebKit (Safari) allow for downloadable TrueType fonts, so designers can in theory specify any typeface.
  • 79. 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
  • 80. Khoi Vinh Good News Subtraction.com Principles of good storytelling still applywith adjustment.
  • 81. Khoi Vinh People Want Traditional Design Values, But Subtraction.com People are looking for narrative design to be expressed in a language thats native to digital media.
  • 82. Khoi Vinh Subtraction.com Users want to retain control over their own experiences.
  • 83. Khoi Vinh Subtraction.com Users also want their experiences to be guided and clear.
  • 84. Khoi Vinh Subtraction.com Theres a compromise between user control and designer intention. We just havent reached the sweet spot yet.
  • 85. Khoi Vinh Subtraction.com As our tools enable more control, the expectation for greater control will increasefor users and designers.
  • 86. End