Problem summary

The user wants to comfortably read a multi-paragraph text and possibly know more about the topic.

Example

The Norwegian newspapers online website is notoriously known for its ugly design, yet extremely usable and effective. This article about Hamas in the middle east is themed with a live map geographically explaining where things are going on, related middle east photo galleries, and other Hamas related stories.

Usage

• Use when your website offers textual content of multiple paragraphs about a specific topic.
• Use when you want to let the user read more about the article’s topic after the article has been read.

Solution

Present the text of an article in a format that is easy to read and scan on a screen. That means presenting the text in a fairly narrow width resulting in more lines that what would appear on paper. One solution might be to present the textual content in multiple columns like many newspapers do, but the solution most often seen is to use one narrow column.

Topics still not covered:

• Read more links
• Relevant widgets
• Attached galleries
• Enlargeable photos
• Paged articles (for increasing pageviews)
• Share links
• Printer-friendly page

Rationale

By providing the user not only with the article’s text, but also more relevant information, the user can easily learn more about the topic the article deals with and thus generate more pageviews.

Sources

• http://www.poynterextra.org/eyetrack2004/articlepages.htm
• http://www.welie.com/patterns/showPattern.php?patternID=article-page

More example images of the 'Article page' pattern

• 

  The Danish newspaper, BT, cleverly uses the sidebars to display related content. By concentrating on using widgets to further explain the topic, the article seems like its part of a larger theme. In this case the article is about the U.S. election 2008 and includes a widget about the results of the election.

• 

  Articles at fashionista.com is well laid out with the article text and article headers being the only text in serif fonts. This helps bring focus to what is editorial content on the site, and gives the article an extra scent of being a good story.

• 

  The article itself on subdued.net is stripped from meta-data about the article, which instead is shown in a sidebar. The grungy and dirty borders further highlight what is more important on the page.

• 

  The design of the paged article at concentric-studio.com is uses sans-serif fonts and combines very large font sizes for the article header with moderately sized body text. Very elegant!

View more example screenshots

1 Comment

• 1
  

  opzdhwkw

  27 Apr, 2013

  http://nikelebron33.com/mens-louis-vuitton-sunglasses-aaa-p-65047.html
  http://nikelebron33.com/mens-2013-bayern-munich-jersey-p-16625.html
  http://nikelebron33.com/mens-oakley-sunglasses-aaa-p-69652.html
  http://nikelebron33.com/mens-ferragamo-belts-aaa-p-34842.html
  http://nikelebron33.com/mens-gucci-belts-p-45330.html
  http://nikelebron33.com/womens-nike-air-max-90-p-27017.html
  http://nikelebron33.com/womens-louis-vuitton-purses-p-76329.html
  http://nikelebron33.com/mens-gucci-belts-aaa-p-36335.html
  http://nikelebron33.com/mens-franklin-marshall-shorts-p-15790.html
  http://nikelebron33.com/womens-chanel-hairpin-p-51506.html
  http://nikelebron33.com/mens-armani-belts-aaa-p-40535.html
  http://nikelebron33.com/mens-gucci-t-shirts-polo-p-5812.html
  http://nikelebron33.com/womens-tiffany-bracelet-p-33178.html
  http://nikelebron33.com/mens-nike-air-jordan-retro-3-p-82524.html
  http://nikelebron33.com/mens-ed-hardy-sunglasses-p-61706.html
  http://nikelebron33.com/snapback-mlb-caps-p-532.html
  http://nikelebron33.com/womens-tiffany-bracelet-p-33118.html
  http://nikelebron33.com/mens-armani-polarizer-sunglasses-p-63738.html
  http://nikelebron33.com/mens-gucci-sunglasses-p-59562.html
  http://nikelebron33.com/mens-ymcmb-t-shirts-p-9661.html
  http://nikelebron33.com/mens-timberland-shoes-high-p-22845.html
  http://nikelebron33.com/mens-chanel-sunglasses-p-62102.html
  http://nikelebron33.com/womens-louis-vuitton-purses-p-76465.html
  http://nikelebron33.com/mens-gucci-belts-aaa-p-36864.html
  http://nikelebron33.com/mens-prada-polarizer-sunglasses-p-63828.html
  http://nikelebron33.com/mens-oakley-sunglasses-aaa-p-69398.html
  http://nikelebron33.com/snapback-mitchellness-caps-p-2400.html
  http://nikelebron33.com/mens-2013-manchester-united-jersey-p-16286.html
  http://nikelebron33.com/mens-2013-ac-milan-jersey-p-16389.html
  http://nikelebron33.com/mens-rayban-sunglasses-p-58891.html

Post a comment