Article page Edit
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.
Discussion
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 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.
-
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.
This document is in version 1 and was last updated on Dec 31, 2008 by Anders. Edit this pattern.