1 / 20

Web Page Design

Web Page Design . J. Richard Stevens. Basic Online Journalism Design. Layout grids Page dimensions Usability. Journalism and Usability. News Web sites are not generally highly regarded for design Tend to be cluttered, and a variety of ad models. Basic Grid Design.

valentine-mcfarland
Download Presentation

Web Page Design

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Page Design J. Richard Stevens

  2. Basic Online Journalism Design • Layout grids • Page dimensions • Usability

  3. Journalism and Usability • News Web sites are not generally highly regarded for design • Tend to be cluttered, and a variety of ad models

  4. Basic Grid Design

  5. Basic Grid Design as Adapted to Various Sites See the home pages of these sites to see how the basic design has been adapted. • The New York Times • MSNBC • ESPN

  6. Principles of Design • Unity • Contrast • Hierarchy • Consistency

  7. Text Formatting Considerations • Fonts • Alignment • Line length

  8. Text Techniques to Avoid • Avoid line-to-line hyphenation • Avoid use of underlining except for links • Avoid italicized text

  9. Eye Track EyeTrack • Joint venture by • The Poynter Institute • Estlow Center for Journalism and New Media • Eyetools 2 Methods • Eyetrack • Heatmap • Links:http://www.slideshare.net/SaraQuinnPoynter/poynter-eyetrack-tablet-presentation-sxsw

  10. Where Users Look Viewing Pattern

  11. Where Users Look Viewing Zones

  12. Traditional Journalism site • Readers most often view the top headlines and logo

  13. The Impact of Blurbs • Blurbs pull the readers down the page and keep them in this area longer

  14. Headline Viewing • Online news readers concentrate viewing on the left-hand side of headlines (the first 1-2 inches). • The first few words of a headline are critical in drawing user attention

  15. Headline Viewing

  16. Article Designs • When readers encountered a story with an introductory paragraph, 95 percent of them read all or part of the introductory paragraph. • Those who spent time carefully reading the introductory paragraph of a story on article-level pages typically spent little time with the full story. Those who gave the intro paragraphs little time usually spent even less time with the story text. • Shorter paragraphs encouraged testers to continue reading.

  17. Article Designs • Story text in one-column format was read more extensively than story text presented in a "newspaper-like" multiple-column format. • Subheads in online stories had little affect on how much of the first or top portion of the story was read when the reader's interest was strongest. However, subheads increased reading for "skimmers" and for those whose attention in a story was beginning to wane. • When readers got to an article-level page, they seemed to be there to view the text. Overall, participants' eyes fixated on the story or other text elements before the accompanying image.

  18. Blurbs • Blurbs encourage scrolling • Blurbs boost reading • Clicks per user unaffected by blurbs • Left-third blurbs most viewed

  19. Headlines • Smaller headlines lead to more scrolling • “Hot” words catch attention of skimmers • Large headlines make pages “too easy” Smaller headlines make reader work harder and invest.

  20. Font Size • Smaller font size results in more careful reading • Disparity leads to fall off in reading of smaller text.

More Related