SlideShare a Scribd company logo
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)
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 tell good stories.
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




                                                   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
                                                 audience’s
                                                 imaginations
                                                 complete the story.




                     Priester Matches, c. 1905
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.
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.
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
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
narrative—it’s 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 we’re doing.”
Khoi Vinh
                          Subtraction.com




“If we give people what they
 say they want, they’ll never
 get what we know they
 need.”
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.
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.
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 site’s 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,
 aren’t 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, it’s difficult 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
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.
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.
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




They’re 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 we’re talking about here is the
difference between documents and
conversations.
More on this later.
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-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




Gutenberg’s 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.
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 in favor of a
more highly designed environment like
Facebook
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
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
Khoi Vinh
Technologists Seek Typography   Subtraction.com




“Fonts & Encodings” by
Yannis Haralambous
Contents include:
 • The History and
   Classifications 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 apply—with adjustment.
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.
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 intention. We just
haven’t reached the sweet
spot yet.
Khoi Vinh
                          Subtraction.com




As our tools enable more
control, the expectation for
greater control will
increase—for users and
designers.
End

More Related Content

Similar to Control (Annotated)

From Print to Digital Design
From Print to Digital DesignFrom Print to Digital Design
From Print to Digital DesignAndrew Duck
 
Creative art. concept art. advanced art12
Creative art. concept art. advanced art12Creative art. concept art. advanced art12
Creative art. concept art. advanced art12Kulu Studio
 
JESS3 Featured in Computer Arts for foursquare I Voted
JESS3 Featured in Computer Arts for foursquare I VotedJESS3 Featured in Computer Arts for foursquare I Voted
JESS3 Featured in Computer Arts for foursquare I VotedJESS3
 
Agency Lunches are going to cost more.
Agency Lunches are going to cost more.Agency Lunches are going to cost more.
Agency Lunches are going to cost more.Gautam Ramdurai
 
The internal brand narrative needs villians as much as heroes.
The internal brand narrative needs villians as much as heroes.The internal brand narrative needs villians as much as heroes.
The internal brand narrative needs villians as much as heroes.Verbal Identity
 
Digital Marketing Cases: presentation for BBDO Moscow Digital Wordshop
Digital Marketing Cases: presentation for BBDO Moscow Digital WordshopDigital Marketing Cases: presentation for BBDO Moscow Digital Wordshop
Digital Marketing Cases: presentation for BBDO Moscow Digital WordshopZigurds Zakis
 
#CannesLions 2014: Day 2 Recap #OgilvyCannes
#CannesLions 2014: Day 2 Recap #OgilvyCannes #CannesLions 2014: Day 2 Recap #OgilvyCannes
#CannesLions 2014: Day 2 Recap #OgilvyCannes Ogilvy
 
Designing for hyper-connectivity
Designing for hyper-connectivityDesigning for hyper-connectivity
Designing for hyper-connectivityJames Box
 
Multi Platform For TV peeps
Multi Platform For TV peepsMulti Platform For TV peeps
Multi Platform For TV peepsDescience Ltd
 
Designing for Web 2.0: The Visual Ecosystem
Designing for Web 2.0: The Visual EcosystemDesigning for Web 2.0: The Visual Ecosystem
Designing for Web 2.0: The Visual EcosystemLuke Wroblewski
 

Similar to Control (Annotated) (13)

Kick Ass Stylin' Tips
Kick Ass Stylin' TipsKick Ass Stylin' Tips
Kick Ass Stylin' Tips
 
From Print to Digital Design
From Print to Digital DesignFrom Print to Digital Design
From Print to Digital Design
 
Creative art. concept art. advanced art12
Creative art. concept art. advanced art12Creative art. concept art. advanced art12
Creative art. concept art. advanced art12
 
JESS3 Featured in Computer Arts for foursquare I Voted
JESS3 Featured in Computer Arts for foursquare I VotedJESS3 Featured in Computer Arts for foursquare I Voted
JESS3 Featured in Computer Arts for foursquare I Voted
 
Agency Lunches are going to cost more.
Agency Lunches are going to cost more.Agency Lunches are going to cost more.
Agency Lunches are going to cost more.
 
The internal brand narrative needs villians as much as heroes.
The internal brand narrative needs villians as much as heroes.The internal brand narrative needs villians as much as heroes.
The internal brand narrative needs villians as much as heroes.
 
Digital Marketing Cases: presentation for BBDO Moscow Digital Wordshop
Digital Marketing Cases: presentation for BBDO Moscow Digital WordshopDigital Marketing Cases: presentation for BBDO Moscow Digital Wordshop
Digital Marketing Cases: presentation for BBDO Moscow Digital Wordshop
 
#CannesLions 2014: Day 2 Recap #OgilvyCannes
#CannesLions 2014: Day 2 Recap #OgilvyCannes #CannesLions 2014: Day 2 Recap #OgilvyCannes
#CannesLions 2014: Day 2 Recap #OgilvyCannes
 
Designing structure ia
Designing structure iaDesigning structure ia
Designing structure ia
 
Designing for hyper-connectivity
Designing for hyper-connectivityDesigning for hyper-connectivity
Designing for hyper-connectivity
 
Multi Platform For TV peeps
Multi Platform For TV peepsMulti Platform For TV peeps
Multi Platform For TV peeps
 
Designing for Web 2.0: The Visual Ecosystem
Designing for Web 2.0: The Visual EcosystemDesigning for Web 2.0: The Visual Ecosystem
Designing for Web 2.0: The Visual Ecosystem
 
Baker
BakerBaker
Baker
 

Recently uploaded

Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 

Recently uploaded (19)

Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 

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