Prioritizing Web Usability Nielsen and Loranger Chapter 7: Typography: Readability and Legibility Paul Ammann SWE 432 Design and Implementation of Software for the Web

10/24/20152 Overview Body Text: The Ten Point Rule Relative Specifications Choosing Fonts Mixing Fonts and Colors Text Images Moving Text Web Pages != Printed Pages

10/24/20153 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)Pixar –Dianon Corporation (2003) Note Poor Display of PDFDianon Corporation (2003) Usability vs. Other Drivers

10/24/20154 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

10/24/20155 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)Wired –Note (Updated) Instructions: Social Security AdministrationSocial Security Administration –Newer Browsers Offer Better Control Currently Still Desirable To Provide Additional Control Make It Look Right In Multiple Environments

10/24/20156 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!

10/24/20157 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: CendantCendant –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 DaughertyGary Daugherty –Avoid Busy Backgrounds Users Struggle Or Ignore When Overloaded

10/24/20158 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