How to Design a Winning Newsfeed

We are all familiar with the common news feed; they can be found on sites like Twitter, Facebook, New York Times, Huffington Post, and Buzzfeed. This article explains what they are, when to use them, why they are useful, and examples of good news feed design.

What are News Feeds?

News feeds are a frequent feature on sites with time-sensitive content. They typically show items in reverse chronological order - that means that the most recent items sit at the top, and the oldest items fall beneath the fold as newer ones replace them. Items on a news feed can come from one or many sources, so we need to be cautious when designing them to make sure that the user know’s what they are viewing.

When do we use News Feeds in Design?

News feeds work well on blogs, news outlets, social media sites, and notification screens. It’s possible to use news feeds both on public pages (the ‘What’s New’ section on Mashable) and on private pages (your FacebookNewsfeed)

Why use a News Feed?

News feeds don’t require much effort to understand; newest items appear on the top, and the user doesn’t need to organize anything.

Simple.

They are most effective in places where people seek the most up to date information. For example, your Twitter feed can be used to keep on top of live events as they unfold, you might check the news on BBC to see what’s happening in the world each morning, or you visit your favorite blogregularly to see if there are any new and intriguing topics.

News feeds are also useful for organizations because they make publishing and distributing content a breeze. Visitors to a site will see brand-new content quickly and with a microscopic amount of effort. And of course, the publishing process can be fully automated by pushing new content to the top whenever it is released.

The Anatomy of a Feed Item

Many design elements can make up a feed. A successful designer will pick and choose the elements that are most relevant to the context of the feed.

There are design elements can include information that helps the user understand what they are looking at: a title, an extract of the full content (for long form content) or the full content if it is short enough, and an image of the content.

newsfeed design elements

Information that helps the user know the source of the content: Author name/source name and profile picture/company logo.

source name and company logo

Information that tells the user about the recency of an item: Relative time (2 hours ago) or absolute time (9/12/2016).

absolute time example

Elements that make the item actionable: A link to the source, a ‘more’ link, ‘like, comment, share’, or expandable content (such as Twitter images).

source like comment and share

Design Considerations for News Feeds

Here are a few more design considerations for building effective news feeds.

List items in ascending order with newest items first.

newest items first on newsfeeds

Offer a way to refresh the feed on the page or automatically update the feed as new content becomes available.

allow user to refresh feed

Offer sub-streams when the main feed has many content types. Allow the user to filter or navigate to a sub-stream at will.

sub-stream filtering

Show entire content when possible, include a ‘more’ link when content is too large.

show more for large content

Make items actionable with links and interactivity and make content shareable and social.

make newsfeed items social

When a page is dedicated to a news feed, consider using infinite scrolling (like your Facebook feed)

infinite scrolling for older items

Hopefully, this article provided some insight into the anatomy of a good news feed. Remember to consider the context of where the newsfeed will appear and who will be using it in order to decide which design elements should be included in your feed. Good luck!


nicholas tenhue profile

Nicholas Tenhue is a user experience expert who currently serves as UX Manager at Orion Health. An alumnus of Microsoft Ventures, Nicholas also manages theuxblog.com, and hosts The UX Blog Podcast.