Download
1 / 8
80 likes | 397 Views
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
E N D
Prioritizing Web UsabilityNielsen and LorangerChapter 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
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
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
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
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!
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
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
