NPR Design Research: Story Page Legibility

The following is from a recent design research effort to improve the reading experience of story pages on NPR.org.

Transcript

1. Research Project Story Page Legibility
2. “71% of all sessions 
 land on story pages” - Dan Frohlich via HipChat on 9/11/14
3. Primary Focus • Improve reading experience of a plain text story • Improve reading experience of a story that has images
4. Legibility is a measure of how easy it is for the reader to distinguish
 one letter or character in text from another.
5. Reading Tools Pocket, Readability, Safari Reader
6. Pocket Paragraph Specs Chaparral Pro 21px/31.5px 640px Width 31.5px Margins Roughly 70-75 characters per line
7. Readability Paragraph Specs Sentinel 21px/36.39px 787.53px Width 49.9px Margins Roughly 70-75 characters per line
8. Safari Reader Paragraph Specs Georgia 17px/27px 660px Width 27px Margins Roughly 85-90 characters per line
9. Online News New York Times, Washington Post, The Atlantic, Medium
10. New York Times Paragraph Specs Georgia 16px/23px 540px Width 16px Margins Roughly 68-72 characters per line
11. Medium Paragraph Specs Freight Text Pro 22px/33px 700px Width 30px Margins 0.16px Letterspacing Roughly 75 characters per line
12. Small Breakpoint New York Times, Safari Reader, Medium
13. New York Times Paragraph Specs Georgia 16px/23px 288px Width 16px Margins Roughly 35-40 characters per line
14. Safari Reader Paragraph Specs Helvetica Neue 17px/24px 286px Width 17px + 28px Margins Roughly 35-40 characters per line
15. Medium Paragraph Specs Freight Text Pro 20px/28px 286px Width 25+ 30px Margins 0.16px Letterspacing Roughly 28-35 characters per line
16. NPR Helvetica 16px/24px 480-690px Width 20.8px Margins Max: Roughly 80-90 characters per line Min: Roughly 60 characters per line
18. Recommendations • Serif fonts with adequate margins and sizing are preferred for body copy with high resolution screens • The line-height and margins in between paragraphs should match • A max-width should be defined on content areas for ideal typesetting and legibility
19. Where does the first paragraph start?
20. Where does the first paragraph start?
21. Recommendations Rebalancing is needed on a story page’s: • Headline • Audio control • Featured image • Initial paragraph
22. 1000-1200px
23. 1201-1760px
24. Tablet
25. Recommendations • Desktop left & right margins should continue to have a healthy amount of space • Mobile left & right margins should take advantage of the entire viewport for optimal line lengths and font sizes • Tablet left & right margins should mirror mobile and the max-width should be equal in portrait & landscape modes • 35-40 Characters per line at small breakpoint • 70-75 Characters per line at medium & large breakpoint
26. Recommendations • We should simplify story page elements at a medium breakpoint range of 768-1200px • Internal links and pull quotes will be less disruptive to the reading experience when positioned on the right hand side • A responsive ad unit located at the bottom of the wide multimedia layout could be shared with an ongoing effort for Tumblr sites