Best Practices for Designing a Social News Website

How do you get your daily news these days? Well… you may be visiting your favorite sites and blogs, but that’s inefficient since those blogs may not have any updates. Perhaps you subscribe to them using RSS, which delivers all the new articles straight to you, but in this case you’ll have to sort through all the new stuff to find what’s interesting to you. Another option today would be to visit a social news site.

Social news sites are link aggregators, which means their main function is to collect and share interesting links. This may be done through user submissions, or it may be done automatically by the system. The aggregation aspect is only part of it though because these sites also sort the links. Again, this may be done through user voting or some mechanical algorithm (although in this case, can we really call it a “social” news site?). The end result is the same however: the most interesting links rise to the top. This particular feature makes social news sites a great alternative to RSS.

In this article I’ll showcase some of the current top social news sites, will identify trends and patterns in their designs and suggest some best practices to follow when designing such sites. Let’s begin by looking at four popular social news sites and see how their designs compare.

Digg

Digg is the most popular social news site and features a usable design that is often adapted by many of its competitors. Digg uses a two column layout: a list of stories on the left, and extra stuff on the right, such as the top 10 stories box. At the top, Digg shows a list of story categories, and right under them the sorting controls. So a user may select a category, say… “Technology”, and then sort it by “Upcoming” to see all the latest submissions.

Propeller

Propeller is a good example of a site which follows the Digg layout fairly closely. It’s a two column layout with a list of stories on the left and secondary content on the right, such as the most recent tweets about Propeller or a list of most commented stories.

Unlike Digg, Propeller uses horizontal line separators between each of the stories, as well as a zebra striped background to make the list easier to scan. This may help, although I must note that zebra striping is traditionally used to ease reading on multiple column tables, especially those with many columns. This is because you want to read a piece of data in a column that’s far away from the original label on the left and using the zebra stripe as a guide helps you move the eye across without losing track of the row. In the context of Propeller, which has essentially only one data column, the effect of the zebra striping is questionable.

Reddit

Reddit is an example of a different design to that of Digg. Reddit has a heavy focus on content, particularly the headlines. The focus is so strong that everything apart from the headlines is minimized and moved away to let the stories take the front seat. This minimalist design allows for very fast information consumption as the visitor can quickly scan a lot of headlines to find a story interesting to them. Because Reddit has no description fields, each story takes up less space, so more stories can be shown on the screen.

Reddit also has a unique element at the very top of the front page: a random upcoming story. Like on other social news sites, the latest Reddit stories are kept in the “upcoming” section. Because this section gets less traffic than the front page, some interesting stories may be lost. To remedy this, Reddit shows random upcoming stories on the front page to give them a brief moment of exposure that could potentially help propel them to the top.

Newsvine

Newsvine takes a different approach in its design. Unlike other social news sites which look like a list of headlines, Newsvine uses the magazine/newspaper look. Stories are accompanied by a large photo and description and in some cases the content of the story can also be found on its details/comments page.

One interesting element of Newsvine is the impact heatmap:

The chart shows two stripes: the most voted stories and the most discussed stories. Each show a set of blocks, all of different colors and sizes. Bigger blocks mean there are either more comments on them or more votes, depending on the chart they’re in. The color indicates the age of the story — green being fresh, and red being old. This visualization allows for a unique way to browse the content on Newsvine.

Now let’s have a look at some of the common interface elements present on social news websites:

Vote boxes

All social news sites have some method of voting on articles, with the exception of sites which use automated sorting algorithms to work out ranks. This makes the vote area very important. You want it to stick out enough to ensure people don’t miss it, but at the same time you need to make it fade in well enough into the design of the interface to ensure it’s not distracting when scanning lists of headlines.

Here are a few examples of popular news sites’ vote boxes:

Each box consists of up to four elements: the rank of the submission, the sum of the votes, a link to vote the story up and a link to vote the story down. Most sites don’t show the rank and just display the sum of the scores – that is, both positive and negative votes added up. Talking about votes, most social news sites have a way to vote a story down as well as up, although some choose to only have the one up button. In cases where only the up button is shown, a link to “bury” (or down vote) a story is usually provided elsewhere.

Story details

Each story has more than just a headline to go with it. Stories generally display their date, the user who posted them, a brief description, a link to the comments section and perhaps even a picture.

Here are a few examples of popular news sites’ submission details area:

The vote box is often located on the left. This allows it to remain in a consistent location for each story. The comments link, as well as any other extras such as “share this story” are placed below the description (if present) or headline. By making the details text around the headline gray the details fade away and give focus to the headlines, thus making scanning the list of stories much easier as our eyes can quickly jump from one to the next.

Most social news sites display the time as relative – e.g. 10 hours ago. This makes sense because people want to see how fresh a story is and are not particularly interested in the exact date and time when it was posted.

You’ll also notice that some sites display the domain where the submission link leads to by the side of its headline, usually after it in brackets. This is helpful because it allows visitors to judge what sort of content they should expect. For example, if they see ‘youtube.com’ as the source, they’ll know it is a video. Prominent sources such as ‘nytimes.com’ can also be an indicator of the quality and length of the story. While the user will be able to see the source whilst hovering over a link, displaying it at all times helps when quickly scanning the headlines.

Pagination

Social news sites have thousands, or in some cases millions, of user submitted links. Showing all of these links at once is of course impossible; you have to show a small set at a time to allow the users to digest it. The links are usually split up into pages using pagination. Pagination is the method of splitting up content into several pages and providing a set of links you usually see at the bottom or top of a page that allows you to go to the next or previous page, or choose a page number you want manually.

Here are a few examples of popular news sites’ pagination:

There are of course alternatives to pagination. Reddit only shows the next and previous page links:

This method makes navigating simpler in that you don’t have to think about what page you want or need to locate the “next” link – there are only two links, so most of the time you would just want the next page. Having said this, it does make it a little confusing at times since it’s difficult to tell what page you’re on.

Slashdot loads more stories on demand. Just click the “More” button and more stories are loaded below using AJAX:

Loading things with AJAX will mean that there is no “first page” though, just stories at the top, and stories at the bottom.

Whichever pagination you choose, there are a few things you should keep in mind to make sure you make this interface element usable. The click areas should be large – don’t just provide a list of links, but add a CSS padding attribute to each link to make it easier to click on. Identify the current page clearly with custom styling – your users need to know where they are right now. Finally, provide “previous” and “next” links. Most of the time your visitors will want to browse stories on the next page, so by making these links you’re taking away any thinking involved in locating that next page.

Comments

The final item I’ll examine is comments. Comments are an important element of social news sites because they allow discussions to arise around each story. The website where the story link points to may not have comments functionality, so the comments section of social news sites serves as the discussion platform.

Here’s what the comments look like on Digg:

Comments can be voted on, just like individual stories. The voting controls are located on the right of each comment, as a thumbs up or thumbs down. The highest rated comments float to the top of the list, which means that higher quality discussion would always be at the top, and any worthless comments would be voted down.

There is another feature which Digg provides to make comments better: threading. Each comment can start a thread of its own if you reply to it. These threads are ‘collapsed’, but you can open it up by using the little replies link at the bottom of the thread comment. All the replies are then stored under the parent comment and can also be voted up or down. This allows for interesting replies to spawn their own discussions.

Here’s what the Reddit comments look like:

Similar features here: voting and threading. The vote controls are placed on the left of each comment and look like arrows, up and down. Reddit allows for deep threading, which means that replies to a comment can also hold their own sets of replies related just to them. Indeed, this creates a tree of comments as many individual comments spawn branches and sub-branches of replies.

Finally, let’s see the Newsvine comments:

Newsvine goes with the same structure as Digg — each comment being able to host a set of replies, but the replies themselves can’t host further replies. This keeps the view clean but the discussion becomes a little more rigid, Whether that’s a good thing or not depends on the amount of freedom you want to see in your discussions.

The visual appearance is slightly different. Instead of just adding a left margin to each comment, Newsvine comments are wrapped in boxes. Replies are also wrapped in boxes and are placed inside of the parent box. This provides a clear relationship indicator. Newsvine also only allows voting on the parent comments.

I think that the two elements, comment voting and comment threading, are essential ingredients that you need to facilitate good discussions on social news sites. The voting acts like a filter to remove any low value or spammy comments from the top, and even remove them altogether (some sites hide comments with negative scores); and the threading allows the discussion to veer off into different areas of interest. More discussion areas means more things to talk about and more comments — something that a rigid one layer structure won’t be able to provide.

Written exclusively for WDD by Dmitry Fadeyev. He runs a blog on usability called Usability Post.

Do you currently use social news sites to get your daily dose of news, and if not, why not? Are there things you would improve, or features you would add to such sites?

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.