Usability: Not my problem?




                 David Carson



        DBENWOODS.COM
Good Design = Usability


   In traditional design:




   usability = legibility


        DBENWOODS.COM
The revolutionary technical discoveries... have been only slowly
followed by man’s ability to make use of his new opportun...
The revolutionary technical discoveries... have been only slowly
followed by man’s ability to make use of his new opportun...
●   Typography is shaped by functional
    requirements
●   The aim of typographic layout is
    communication (for which ...
The history of design has been the history of
understanding how people read symbols,
enhancing legibility and message.



...
Selected innovations in legibility – 100BCE




                 http://jontangerine.com/log/2008/06/the-paragraph-in-web-...
Selected innovations in legibility – 1482




                  A History of Graphic Design, Philip B Meggs - P92


      ...
Selected innovations in legibility – 1757




                                        A History of Graphic Design, Philip ...
Increasing literacy, increasing access to technology – 19th, early 20th Century




                                      ...
Increasing web literacy, increasing access to technology – 21st Century




                                              ...
Polyglot Bible (1569-72); multilingual website (last week)




                                                           ...
Design and usability have a long co-history


●   But, the web has changed what usability means for designers
    ●   Trad...
Designing for usability adds value




  DBENWOODS.COM
Artists make themselves happy




                                Artist




        DBENWOODS.COM
Traditional designers focus on making Clients happy




                                  Value add


              Design...
For usable design, you need to focus on making the end-user happy!




                                     e add
        ...
Discussing Value


●   Designers must achieve increased value for
    their clients
●   Discussions of taste, aesthetic ar...
Good Design leads to Good Usability


●   Limit font choices: no more than 2 or 3; use
    complimentary fonts
●   Use con...
Design Patterns; Style guides for interaction design




    Punctuation, leading,
    point size, folios, layouts,
    et...
Typical Book Pattern


●   Cover
    ●   Table of Contents
    ●   Forward
    ●   Chapters
        –   Header
        –  ...
There is plenty of room for creativity within existing conventions




                              Multiple images from ...
There is a strong parallel in the growth and
maturation of traditional design, and the growth
and maturation of interactiv...
Resources


●   Typography and Design
    ●   The New Typogaphy, Jan Tschichold
    ●   A History of Graphic Design, Phili...
Usability: Not my problem?




                                       Click to add text
                        David Cars...
Good Design = Usability


   In traditional design:




   usability = legibility


        DBENWOODS.COM       2
Click to add title


           The revolutionary technical discoveries... have been only slowly
           followed by ma...
Click to add title


           The revolutionary technical discoveries... have been only slowly
           followed by ma...
Click to add title


        ●   Typography is shaped by functional
            requirements
        ●   The aim of typogr...
Click to add title




    The history of design has been the history of
    understanding how people read symbols,
    en...
Selected innovations in legibility – 100BCE




                         http://jontangerine.com/log/2008/06/the-paragraph...
Selected innovations in legibility – 1482




                         A History of Graphic Design, Philip B Meggs - P92

...
Selected innovations in legibility – 1757




                                               A History of Graphic Design, ...
Increasing literacy, increasing access to technology – 19th, early 20th Century




                                      ...
Increasing web literacy, increasing access to technology – 21st Century




                                              ...
Polyglot Bible (1569-72); multilingual website (last week)




                                                           ...
Design and usability have a long co-history


●   But, the web has changed what usability means for designers
    ●   Trad...
Click to add title




    Designing for usability adds value




         DBENWOODS.COM                   14
Artists make themselves happy




                                Artist




        DBENWOODS.COM                    15
Traditional designers focus on making Clients happy




                                  Value add


              Design...
For usable design, you need to focus on making the end-user happy!




                                       dd
         ...
Discussing Value


●   Designers must achieve increased value for
    their clients
●   Discussions of taste, aesthetic ar...
Good Design leads to Good Usability


●   Limit font choices: no more than 2 or 3; use
    complimentary fonts
●   Use con...
Design Patterns; Style guides for interaction design




           Punctuation, leading,
           point size, folios, l...
Typical Book Pattern


●   Cover
    ●   Table of Contents
    ●   Forward
    ●   Chapters
        –   Header
        –  ...
There is plenty of room for creativity within existing conventions


 ●   Click to add an outline




                    ...
Click to add title




    There is a strong parallel in the growth and
    maturation of traditional design, and the grow...
Resources


●   Typography and Design
    ●   The New Typogaphy, Jan Tschichold
    ●   A History of Graphic Design, Phili...
Upcoming SlideShare
Loading in …5
×

Usability Preso March2010a With Notes

596 views

Published on

Ben Woods talks about Usability at Tri-C's Web Work Web Wisdom Series, March 23, 2010.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
596
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Usability Preso March2010a With Notes

  1. 1. Usability: Not my problem? David Carson DBENWOODS.COM
  2. 2. Good Design = Usability In traditional design: usability = legibility DBENWOODS.COM
  3. 3. The revolutionary technical discoveries... have been only slowly followed by man’s ability to make use of his new opportunities and develop them into a new pattern of life. “Civilization” and the too-rapid penetration of all classes by these new technical discoveries have led to complete cultural chaos, caused by the failure of of the affected generation to draw the right conclusions for a new way of life from the new facts. DBENWOODS.COM
  4. 4. The revolutionary technical discoveries... have been only slowly followed by man’s ability to make use of his new opportunities and develop them into a new pattern of life. “Civilization” and the too-rapid penetration of all classes by these new technical discoveries have led to complete cultural chaos, caused by the failure of of the affected generation to draw the right conclusions for a new way of life from the new facts. Jan Tschichold, The New Typography, 1928 DBENWOODS.COM
  5. 5. ● Typography is shaped by functional requirements ● The aim of typographic layout is communication (for which it is the graphic medium). Communication must appear in the shortest, simplest, most penetrating form Jan Tschichold, Elementary Typography, 1925 DBENWOODS.COM
  6. 6. The history of design has been the history of understanding how people read symbols, enhancing legibility and message. DBENWOODS.COM
  7. 7. Selected innovations in legibility – 100BCE http://jontangerine.com/log/2008/06/the-paragraph-in-web-typography-and-design DBENWOODS.COM
  8. 8. Selected innovations in legibility – 1482 A History of Graphic Design, Philip B Meggs - P92 DBENWOODS.COM
  9. 9. Selected innovations in legibility – 1757 A History of Graphic Design, Philip B Meggs - P121 DBENWOODS.COM
  10. 10. Increasing literacy, increasing access to technology – 19th, early 20th Century 1907 1854 http://www.freemasons- A History of Graphic Design, Philip B http://www.flickr.com/photos/designbyok/378432295 freemasonry.com/beresiner18.html Meggs - P138 /sizes/o/ DBENWOODS.COM
  11. 11. Increasing web literacy, increasing access to technology – 21st Century www.fabricland.co.uk http://lowlowtireprices.com/lowlowtireprice http://www.elegantwebstudio.com/ s_006.htm Myspace page – user information obscured DBENWOODS.COM
  12. 12. Polyglot Bible (1569-72); multilingual website (last week) bbc.co.uk A History of Graphic Design, Philip B Meggs - P89 DBENWOODS.COM
  13. 13. Design and usability have a long co-history ● But, the web has changed what usability means for designers ● Traditional design is geared towards one mode of interaction – linear ● Interaction design is multidirectional, customizable, portable ● Designers must not only be concerned with legibility, or communication – but also task completion ● Task completion leads to provable and increasing value ● The web is no longer brochure-ware, but an environment for interaction DBENWOODS.COM
  14. 14. Designing for usability adds value DBENWOODS.COM
  15. 15. Artists make themselves happy Artist DBENWOODS.COM
  16. 16. Traditional designers focus on making Clients happy Value add Designer Client(s) DBENWOODS.COM
  17. 17. For usable design, you need to focus on making the end-user happy! e add V alu dd ea Valu Value add Valu e Va add Designer lu Va e ad Client(s) lue d ad d Users DBENWOODS.COM
  18. 18. Discussing Value ● Designers must achieve increased value for their clients ● Discussions of taste, aesthetic are highly subjective ● Discussions about usability, user research, and testing are less subjective and can be directly related to an organization's bottom line. DBENWOODS.COM
  19. 19. Good Design leads to Good Usability ● Limit font choices: no more than 2 or 3; use complimentary fonts ● Use conventions to your advantage ● Links: Blue and underlined ● Navigation: Top or left ● Icons: Use standardized icons, coupled with text ● Indicate when opening native files ● Deliver on expectations; users should know what to expect DBENWOODS.COM
  20. 20. Design Patterns; Style guides for interaction design Punctuation, leading, point size, folios, layouts, etc welie.com DBENWOODS.COM
  21. 21. Typical Book Pattern ● Cover ● Table of Contents ● Forward ● Chapters – Header – Copy Block – Folio ● Appendix ● Index ● Colophon DBENWOODS.COM
  22. 22. There is plenty of room for creativity within existing conventions Multiple images from amazon.com DBENWOODS.COM
  23. 23. There is a strong parallel in the growth and maturation of traditional design, and the growth and maturation of interactive design. DBENWOODS.COM
  24. 24. Resources ● Typography and Design ● The New Typogaphy, Jan Tschichold ● A History of Graphic Design, Philip Meggs ● Design Patterns ● Welie.com ● developer.yahoo.com/ypatterns/ DBENWOODS.COM
  25. 25. Usability: Not my problem? Click to add text David Carson DBENWOODS.COM 1 This is a well known piece of work by David Carson, and it certainly demonstrates a concept. It is true that we can bend the rules of legibility and usability to affect interesting design. But today, we will discuss the traditions of usability and designs.
  26. 26. Good Design = Usability In traditional design: usability = legibility DBENWOODS.COM 2
  27. 27. Click to add title The revolutionary technical discoveries... have been only slowly followed by man’s ability to make use of his new opportunities and develop them into a new pattern of life. “Civilization” and the too-rapid penetration of all classes by these new technical discoveries have led to complete cultural chaos, caused by the failure of of the affected generation to draw the right conclusions for a new way of life from the new facts. DBENWOODS.COM 3 You would be forgiven for thinking that this quote is in reference to the web, or Facebook, or Twitter. It could have been written in the last 15 years...
  28. 28. Click to add title The revolutionary technical discoveries... have been only slowly followed by man’s ability to make use of his new opportunities and develop them into a new pattern of life. “Civilization” and the too-rapid penetration of all classes by these new technical discoveries have led to complete cultural chaos, caused by the failure of of the affected generation to draw the right conclusions for a new way of life from the new facts. Jan Tschichold, The New Typography, 1928 DBENWOODS.COM 4 But it wasn't, this is from the opening paragraphs of Tschichold's 'The New Typography', issued in 1928, and arguably one of the most important books on desin to come from the 20th century. The point is that designers have long had a relationship with technology, and a role in making technological progress accessible to people, and just as much, technology has affected the design profession.
  29. 29. Click to add title ● Typography is shaped by functional requirements ● The aim of typographic layout is communication (for which it is the graphic medium). Communication must appear in the shortest, simplest, most penetrating form Jan Tschichold, Elementary Typography, 1925 DBENWOODS.COM 5 Additional quotes from Tschichold – from even earlier. 80-some years later, web designers still discuss functional requirements.
  30. 30. Click to add title The history of design has been the history of understanding how people read symbols, enhancing legibility and message. DBENWOODS.COM 6
  31. 31. Selected innovations in legibility – 100BCE http://jontangerine.com/log/2008/06/the-paragraph-in-web-typography-and-design DBENWOODS.COM 7 This is a piece of Jewish text from 100 BCE, and you will note the horizontal line indicated with the 'a' – this is an early method for indicating a new collection of thoughts – a paragraph.
  32. 32. Selected innovations in legibility – 1482 A History of Graphic Design, Philip B Meggs - P92 DBENWOODS.COM 8 In this wood block print we see the symbol for paragraphs. We moved from the faint horizontal line to this the 'pilcrow'. In some texts this would be illuminated with red ink to make it more apparent.
  33. 33. Selected innovations in legibility – 1757 A History of Graphic Design, Philip B Meggs - P121 DBENWOODS.COM 9 And here we see the modern way of denoting a paragraph – simpler, unobtrusive, leading to more effective reading.
  34. 34. Increasing literacy, increasing access to technology – 19th, early 20th Century 1907 1854 http://www.freemasons- A History of Graphic Design, Philip B http://www.flickr.com/photos/designbyok/378432295 freemasonry.com/beresiner18.html Meggs - P138 /sizes/o/ DBENWOODS.COM 10 The story of how technology, design, and usability/legibility continues – in the 1800's industrialization was taking off in the Western world. At the same time, literacy rates increased. And so the capacity for production of information products (at the time largely limited to printed materials) – exploded at the same time that demand increased. And so we see much experimentation... pushing the boundaries of legibility.
  35. 35. Increasing web literacy, increasing access to technology – 21st Century www.fabricland.co.uk http://lowlowtireprices.com/lowlowtireprice http://www.elegantwebstudio.com/ s_006.htm Myspace page – user information obscured DBENWOODS.COM 11 And we see the same type of thing happening online. The difference is it is even cheaper, changes are happening much faster, and there are even more people participating. As this happens, we see the rules of legibility (usability) being stretched or ignored as people turn to using these tools for self expression. This is especially apparent as we look to technological advancements online that have truly brought publishing and interactions to the masses – services like Geocities, which gave free, ad supported web space, and now Blogs, Myspace, Facebook which allow common users the ability to create, with no technical ability or design training.
  36. 36. Polyglot Bible (1569-72); multilingual website (last week) bbc.co.uk A History of Graphic Design, Philip B Meggs - P89 DBENWOODS.COM 12 Over 400 years separate these 2 attempts to share information across multiple languages.
  37. 37. Design and usability have a long co-history ● But, the web has changed what usability means for designers ● Traditional design is geared towards one mode of interaction – linear ● Interaction design is multidirectional, customizable, portable ● Designers must not only be concerned with legibility, or communication – but also task completion ● Task completion leads to provable and increasing value ● The web is no longer brochure-ware, but an environment for interaction DBENWOODS.COM 13
  38. 38. Click to add title Designing for usability adds value DBENWOODS.COM 14
  39. 39. Artists make themselves happy Artist DBENWOODS.COM 15
  40. 40. Traditional designers focus on making Clients happy Value add Designer Client(s) DBENWOODS.COM 16
  41. 41. For usable design, you need to focus on making the end-user happy! dd ea Valu dd ea Valu Value add Valu e Va add Designer lue Va ad Client(s) lue d ad d Users DBENWOODS.COM 17
  42. 42. Discussing Value ● Designers must achieve increased value for their clients ● Discussions of taste, aesthetic are highly subjective ● Discussions about usability, user research, and testing are less subjective and can be directly related to an organization's bottom line. DBENWOODS.COM 18
  43. 43. Good Design leads to Good Usability ● Limit font choices: no more than 2 or 3; use complimentary fonts ● Use conventions to your advantage ● Links: Blue and underlined ● Navigation: Top or left ● Icons: Use standardized icons, coupled with text ● Indicate when opening native files ● Deliver on expectations; users should know what to expect DBENWOODS.COM 19
  44. 44. Design Patterns; Style guides for interaction design Punctuation, leading, point size, folios, layouts, etc welie.com DBENWOODS.COM 20 On the left, traditional graphic design has style guides, and on the right, we see design patterns and usability standards. I would submit that these new developments are do not limit creativity, but instead allow designers to focus their energies on new problems – not reinventing solutions to old ones.
  45. 45. Typical Book Pattern ● Cover ● Table of Contents ● Forward ● Chapters – Header – Copy Block – Folio ● Appendix ● Index ● Colophon DBENWOODS.COM 21
  46. 46. There is plenty of room for creativity within existing conventions ● Click to add an outline Multiple images from amazon.com DBENWOODS.COM 22
  47. 47. Click to add title There is a strong parallel in the growth and maturation of traditional design, and the growth and maturation of interactive design. DBENWOODS.COM 23
  48. 48. Resources ● Typography and Design ● The New Typogaphy, Jan Tschichold ● A History of Graphic Design, Philip Meggs ● Design Patterns ● Welie.com ● developer.yahoo.com/ypatterns/ DBENWOODS.COM 24

×