prioritizing web usability nielsen and loranger chapter 7 typography readability and legibility l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Prioritizing Web Usability Nielsen and Loranger Chapter 7: Typography: Readability and Legibility PowerPoint Presentation
Download Presentation
Prioritizing Web Usability Nielsen and Loranger Chapter 7: Typography: Readability and Legibility

Loading in 2 Seconds...

play fullscreen
1 / 8

Prioritizing Web Usability Nielsen and Loranger Chapter 7: Typography: Readability and Legibility - PowerPoint PPT Presentation


  • 308 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Prioritizing Web Usability Nielsen and Loranger Chapter 7: Typography: Readability and Legibility' - EllenMixel


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
prioritizing web usability nielsen and loranger chapter 7 typography readability and legibility

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