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. Sat, 13 Oct 2007
AIGA Next
Denver, CO
Annotated Version
Khoi Vinh
Subtraction.com

2. About Me

6. Today’s Subject

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, we’ve defined
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
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.

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

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.

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.

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

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
narrative—it’s 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 we’re doing.”

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

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.

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.

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 site’s 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,
aren’t we saying that design
has no value?”

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

37. 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, it’s difficult 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
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.

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.

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
They’re 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 we’re 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 it’s actually
conversation.

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

61. Khoi Vinh
Email Looks Like a Document—But It’s 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
Gutenberg’s 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.

72. What’s Next

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

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

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

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

77. Khoi Vinh
Technologists Seek Typography Subtraction.com
“Fonts & Encodings” by
Yannis Haralambous
Contents include:
• The History and
Classifications 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 apply—with adjustment.

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.

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
There’s a compromise
between user control and
designer intention. We just
haven’t reached the sweet
spot yet.

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

86. End