Prioritizing Web Usability
Nielsen and Loranger
Chapter 7:
Typography: Readability and Legibility
Paul Ammann
http://cs.gmu.edu/~pammann/
SWE 432
Design and Implementation of Software for the Web
Overview
•
•
•
•
•
•
Body Text: The Ten Point Rule
Relative Specifications
Choosing Fonts
Mixing Fonts and Colors
Text Images
Moving Text
Web Pages != Printed Pages
7/1/2016
2
Readability and Legibility
• Good Visual Design
– vs.
• Branding, Personal Preferences, Aesthetics, or Ego
• Problems
– Text Too Small of Fuzzy
– Text Not Easily Resizable
– Text Color Provides Inadequate Contrast With Background
• Text Overshadowed By Surrounding Design Elements
• Examples:
– Pixar (Note small white text)
– Dianon Corporation (2003) Note Poor Display of PDF
Usability vs. Other Drivers
7/1/2016
3
Body Text: The Ten Point Rule
• Recommended Text Sizes
– 10 to 12 for General Audiences, Teenagers, Young Adults
– 12 to 14 for Senior Citizens or Young Children
• When Faced With Space Issues
– Try to Cut the Text or Move to HyperLink
• Plan for Differences in Hardware
– Designers Often Use High End Equipment
– Users Often Use Old, Outdated Equipment
Less Text Is Generally Better
7/1/2016
4
Relative Specifications
• Recommend Relative Font Sizes
– Example: Headline at 140% of Body Text vs. 14 Pt Font
– Reason:
• If User Enlarges Text, Everything Expands
• If Designers Use Absolute Sizes, User is Stuck
• Providing for Resize
– Good Example:Wired (Note The 4 A’s)
– Note (Updated) Instructions: Social Security Administration
– Newer Browsers Offer Better Control
• Currently Still Desirable To Provide Additional Control
Make It Look Right In Multiple Environments
7/1/2016
5
Choosing Fonts
• All Fonts Are Not Created Equal
• Serif vs. Sans-Serif
–
–
–
–
Difference Is Cross Lines At Tips of Letters
In Print: Serif is 10% Faster to Read
On a Screen: Results Are Exactly the Opposite!
By 2025, Screen Resolution Should Catch Up!
• Small Set of Fonts Standard on Most Browers
– Arial, Arial Black, Comic Sans MS, Courier New,
Georgia, Impact, Times New Roman, Trebuchet MS,
Verdana
• When In Doubt, Use Verdana
– Georgia is Best Serif Font for Online Reading
Fonts Matter!
7/1/2016
6
Mixing Fonts and Colors
• Limit Number of Fonts
– Use Variations for Emphasis
– Same Rules Apply to Color
– Recommend < 3 Fonts, < 4 Colors
• Don’t SHOUT at users!
– Bad Example: Cendant
– All Caps is About 10% Slower Than Mixed Case
• Text and Background Contrast
– Black Text on White Is Easiest To Read (Note These Slides!)
– Avoid Similar Colors: Gary Daugherty
– Avoid Busy Backgrounds
Users Struggle Or Ignore When Overloaded
7/1/2016
7
Text Images
• Appropriate For Snippets Such As Buttons
– Not For Large Blocks
• Reasons
– Graphics Text Causes File Bloat
• Yes, We Still Care
– Graphics Text Not Searchable
• No Spider Will Ever Find Your Text
– Graphics Text Not Selectable
• How Annoying Is This?
– Graphics Text Doesn’t Scale Well
– Screen Readers Can’t Read Graphics Text
• Moving Text: Don’t Do It!
Stick With Normal Text
7/1/2016
8