Control (Annotated)

Slide 1: Sat, 13 Oct 2007 AIGA Next Denver, CO Annotated Version Khoi Vinh Subtraction.com

Slide 2: About Me

Slide 6: Today’s Subject

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

Slide 8: Khoi Vinh Subtraction.com The answer lies in control.

Slide 9: But First… What Is Good Design?

Slide 10: Khoi Vinh Narrative Subtraction.com Historically, we’ve defined good design as solutions that also tell good stories.

Slide 11: Khoi Vinh Subtraction.com A handful of examples of narrative in good design…

Slide 12: 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.

Slide 13: 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

Slide 14: 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.

Slide 15: 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.

Slide 16: 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

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

Slide 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

Slide 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

Slide 20: Khoi Vinh Subtraction.com If narrative is the guiding principle of traditional design, then control is its most important tool.

Slide 21: Khoi Vinh Subtraction.com But the guiding principle of interactive media is not narrative—it’s behavior.

Slide 22: Khoi Vinh Subtraction.com Designing for behavior means transferring some measure of control from author to user.

Slide 23: Khoi Vinh Or, Put Another Way… Subtraction.com Digital media is taking control away from designers.

Slide 24: Khoi Vinh For Many Designers… Subtraction.com Many designers think: “This is blasphemy!”

Slide 25: Khoi Vinh Subtraction.com “Designers must control the communication, because we know what we’re doing.”

Slide 26: Khoi Vinh Subtraction.com “If we give people what they say they want, they’ll never get what we know they need.”

Slide 27: 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.

Slide 28: 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.

Slide 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…

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

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

Slide 32: Khoi Vinh Failed Techniques for Control Subtraction.com Resizing browser windows or launching daughter windows.

Slide 33: Khoi Vinh Subtraction.com Linking a site’s functionality exclusively to a proprietary technology, e.g., Microsoft Internet Explorer or even sometimes Adobe Flash.

Slide 34: Khoi Vinh Failed Techniques for Control Subtraction.com Counting on users to ‘learn how to use a site over time.’

Slide 35: Khoi Vinh Subtraction.com “If user control trumps all, aren’t we saying that design has no value?”

Slide 36: Khoi Vinh Subtraction.com No, actually. But to understand why, we have to look at behaviors.

Slide 37: Behaviors

Slide 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

Slide 39: 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.

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

Slide 41: Khoi Vinh Subtraction.com • Enlarge it

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

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

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

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

Slide 46: Khoi Vinh Subtraction.com • Comment on it

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

Slide 48: Khoi Vinh Subtraction.com • Quote it liberally.

Slide 49: Khoi Vinh Subtraction.com • Edit it (in Wiki form)

Slide 50: 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.

Slide 51: 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.

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

Slide 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?

Slide 54: What Are We Designing?

Slide 55: Khoi Vinh Subtraction.com Digital media is as different from print as a speech is different from a conversation.

Slide 56: 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.

Slide 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

Slide 58: Khoi Vinh Subtraction.com In fact, what we’re talking about here is the difference between documents and conversations. More on this later.

Slide 59: Khoi Vinh Subtraction.com Digital media looks like writing, but it’s actually conversation.

Slide 60: Khoi Vinh Instant Messaging & Bulletin Boards = Conversation Subtraction.com

Slide 61: Khoi Vinh Email Looks Like a Document—But It’s Really Conversation Subtraction.com

Slide 62: Khoi Vinh Blogs Subtraction.com Sometimes documentary, almost always conversational.

Slide 63: Khoi Vinh Del.icio.us Is Conversation Subtraction.com Meta-sites enable conversation through links, tagging, micro-comments

Slide 64: Khoi Vinh Traditional Documents Too Subtraction.com Traditional journalism becomes a framework for conversation.

Slide 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

Slide 66: Khoi Vinh Subtraction.com Writing transformed ancient peoples from tribal organizations into governments. Conver- Documents sations

Slide 67: Khoi Vinh Subtraction.com In Medieval Europe, the failure of governments and the rise of illiteracy renewed folkloric traditions. Conver- Documents sations

Slide 68: Khoi Vinh Subtraction.com Gutenberg’s press pitted mass communication against folkloric traditions. Conver- Documents sations

Slide 69: Khoi Vinh Subtraction.com The PC transformed ‘cathedrals’ of information systems into ‘bazaars’ of personal computing Conver- Documents sations Ref. Richard Stallman

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

Slide 71: Khoi Vinh Subtraction.com Good narrative gives rise to good conversations.

Slide 72: What’s Next

Slide 73: Khoi Vinh Subtraction.com Yes. People are looking for traditional design values online.

Slide 74: 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

Slide 75: 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

Slide 76: 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

Slide 77: Khoi Vinh Technologists Seek Typography Subtraction.com “Fonts & Encodings” by Yannis Haralambous Contents include: • The History and Classifications of Latin Typefaces

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

Slide 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

Slide 80: Khoi Vinh Good News Subtraction.com Principles of good storytelling still apply—with adjustment.

Slide 81: 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.

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

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

Slide 84: Khoi Vinh Subtraction.com There’s a compromise between user control and designer intention. We just haven’t reached the sweet spot yet.

Slide 85: Khoi Vinh Subtraction.com As our tools enable more control, the expectation for greater control will increase—for users and designers.

Slide 86: End