- Forms
- Explaining the process
- Community driven
Each article at alistapart.com receives a large header and author line followed by an introductory text written especially for the front page.
An article lists is a great means of communicating for inspiration. It allows the user to quickly scan a list of articles that appeals or is interesting to him or her.
When designing a good article list, there are several things you should take into consideration. Consider these design tips wisely, as overdoing them may trap you into committing some of the common design mistakes listed later in this pattern.
The main purpose of the article list is to lure users to click on a story – so let them find one that they find interesting! One of your proudest objectives as a designer should be to get out of the way and let the user perform his or her task. The interface you design should afford scanning.
Too many ornaments and other unnecessary design elements hinder scanning. They have no other purpose than making the designer show off.
Pagination is overrated due to two reasons:
Long lists are not bad – as long as you can scan it easily and without effort.
Category labels set the scene of what the user can expect. They communicate what the title of the article sometimes can’t and by that helps set the context of the title.
An article with the title “Chanel goes crazy” can have several different meanings. If the article is about Chanel’s last economic quarter, the title possibly conveys a rising crisis for the company, however if the article is about Chanel’s new designer collection, the meaning of the title is totally different.
In this way, the category label help set the user’s expectations for what is to be found behind the link. By labeling the story with either “Fashion” or “Financial news”, the correct meaning of the title is set in stone.
In the example below, the category label “Movies” let us know that the interview with “Alexander Olch” is about his new movie and the category label “Literature” lets us know that the picture with roller-skates is not actually about the rollerskating sport.
Especially on news sites articles about a subject does not come alone. News is published in fragments as they come in. To accommodate for this, many news sites not only displays the main article on the front page, but also lists related article to the subject in the near vicinity (most often below).
There are many aspects of a story which each turn different people on. If the main story will not catch the attention of a specific reader, then the chances that one of the prior articles about the same subject are good.
Also, the list of articles on the same subject works as a great starting point for exploring the full story, and thus provides a good opportunity to increase the pages per visit.
At the Danish television company, TV2, the main article is followed by the a list of the next 3 articles from the same category.
If an article is well commented, we tell ourselves that it must be a more interesting read than articles with less comments. This effect is called social proof. We judge the popularity of something by the actions of others.
If you have a high comment activity on your site, listing comment count can help people stick around: “this must be an interesting site as people keep on commenting”. If your site have little to no comments on articles, you will communicate the opposite by showing comment count on article lists.
Everything is about the context. Always! Consider what kind of articles you are presenting. The author is relevant to an article teaser if it is opinionated – just like comment count is relevant to an article teaser if there are lots of them.
If you want to attract attention to articles you believe will interest a lot of people, or that you put a lot of work into (the first is way more important), it can be a good idea to find a way to highlight the article.
One kind of highlighting is with an attached label in bright colors, another is changing the background color of the article list item. A third option is to find a prominent position for the article: e.g. at the top of the list with a larger thumbnail image.
Remember to call out for action! Much have been said about the old-school “click here” call out, but whoever used it was on to half of the truth. The bad thing about “click here” is that it does not set expectations: “what is going to happen when I click on it?”. The good thing about “click here” is that it tells people what they should do. It calls out for action and does not require the user to think.
To get the call out right, you need to set expectations. If the user is taken to watch a video, then have a link saying “watch the video”. If you print out the first paragraph of text, then have a link that says “read more”.
You can also include call-outs in other parts of the teaser than just the text link. On video teasers a “play” icon placed over a thumbnail picture work great.
CNN.com has a great combination of video stories and regular text stories in this front page article list.
The visual hierarchy between the elements of an article teaser is important. For scanning purposes, the shorter heading affords better scanning than the subheading does. When the visible difference between the header and the subheader is too little, the user has to spend unnecessary energy on decoding which is which.
Make sure that the user can click on any part of the article teaser to go to the article itself: title, image, description, comment count, and call out. People are used to being able to click anywhere to go where they want.
If your site does not have much comment activity, you will communicate that you have a boring site with unengaged users if you list comment count for a bunch of articles with no comments.
For an article list to work, you must provide a series of information for it to be useful. Like always, everything depends on the context. If your articles are opinionated and more editorial than they are a news story, then the author is an important part. If you have different types of content on your site (news stories, quizzes, battles, etc.), then you would want to label your articles accordingly so that you set expectations.
Regardless of the context, there seems to be some details that are always important:
A series of details occur often, but are not present in all lists.
One a website delivering editorial content, the article teaser is one of the most important design elements besides the design of the article itself. The article teaser is part of an article list, and its main purpose to lure visitors to keep on browsing.
The most pure form of article lists is seen on magazine and news websites, but the convention is also relevant to all other sites trying to tease another click out of the visitor.
It should be no surprise that you should put yourself in the shoes of the user. An article that will create many hits or in general be public with your audience is not necessarily the ones you spend the most time on, or the ones that you find interesting. Constantly evaluate an article’s value from the reader’s perspective when deciding to highlight it or not.
Put yourself in the users’ shoes when you decide on what data you want to present to them. Do you want to have different kinds of article list items – for instance one for galleries, one for blog posts, one for events, and one feature articles? It might make sense. Think about how you can make it easier for the user and stop forcing the user to think like you.
Each blog post at branded07.com receives a large space on the front page each with a descriptive image and flowing graphics.
Thumbnails and a headline tease video clips at the New York times video website
At the chich.se front page, each featured article receives a newspaper-like box that somehow resembles that of a newsletter. Notice how the three different image formats are combines successfully.
At fairspot.com, the top story is shown with a wide landscape picture overlaid with a grey bar that highlights its title. The three next stories are each shown with images in portrait format which nicely contrasts the layout of the main story.
UI-Patterns.com is the work of Anders Toxboe – a Danish web developer seeking to categorize what has before seemed like ad hoc approaches to developing web applications.
Want to be a part of the UI-Patterns.com family? Contribute!
© Copyright 2012 - Anders Toxboe, UI-Patterns.com
