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

1. Usability: Not my problem?
David Carson
DBENWOODS.COM

2. Good Design = Usability
In traditional design:
usability = legibility
DBENWOODS.COM

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. 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. ● 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. The history of design has been the history of
understanding how people read symbols,
enhancing legibility and message.
DBENWOODS.COM

7. Selected innovations in legibility – 100BCE
http://jontangerine.com/log/2008/06/the-paragraph-in-web-typography-and-design
DBENWOODS.COM

8. Selected innovations in legibility – 1482
A History of Graphic Design, Philip B Meggs - P92
DBENWOODS.COM

9. Selected innovations in legibility – 1757
A History of Graphic Design, Philip B Meggs - P121
DBENWOODS.COM

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. 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. Polyglot Bible (1569-72); multilingual website (last week)
bbc.co.uk
A History of Graphic Design, Philip B Meggs - P89
DBENWOODS.COM

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. Designing for usability adds value
DBENWOODS.COM

15. Artists make themselves happy
Artist
DBENWOODS.COM

16. Traditional designers focus on making Clients happy
Value add
Designer
Client(s)
DBENWOODS.COM

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. 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. 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. Design Patterns; Style guides for interaction design
Punctuation, leading,
point size, folios, layouts,
etc
welie.com
DBENWOODS.COM

21. Typical Book Pattern
● Cover
● Table of Contents
● Forward
● Chapters
– Header
– Copy Block
– Folio
● Appendix
● Index
● Colophon
DBENWOODS.COM

22. There is plenty of room for creativity within existing conventions
Multiple images from amazon.com
DBENWOODS.COM

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. 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. 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. Good Design = Usability
In traditional design:
usability = legibility
DBENWOODS.COM 2

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Click to add title
Designing for usability adds value
DBENWOODS.COM 14

39. Artists make themselves happy
Artist
DBENWOODS.COM 15

40. Traditional designers focus on making Clients happy
Value add
Designer
Client(s)
DBENWOODS.COM 16

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. 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. 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. 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. Typical Book Pattern
● Cover
● Table of Contents
● Forward
● Chapters
– Header
– Copy Block
– Folio
● Appendix
● Index
● Colophon
DBENWOODS.COM 21

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