UX Magazine

Defining and Informing the Complex Field of User Experience (UX)
Article No. 600 December 30, 2010

The News Feed

:
The ideal model for presenting news and information online

The organization of corporate news and information websites is remarkably consistent, and has been for some time. You can picture it now: a top or left navigation menu of broad categories, with the rest of the page organized into a multi-column clutter of headlines, blurbs, images, promotions, and ads. It has come to be called the “magazine” style because of its similarity to the layout of physical newspapers and magazines.

However, users are increasingly getting news and information from other sources. One type of source is a personal aggregation platform, such as Facebook, Twitter, Digg, an RSS reader, and so forth. These sources require more flexible and automated layouts, in contrast with the carefully editorialized layouts of corporate news websites.

In addition, more and more users are getting news and information on their mobile devices—a platform where the magazine-style, multi-column layout isn’t possible due to screen size limitations.

The predominant model for both the personal aggregation platforms and for mobile devices is the news feed. The magazine and newspaper layout was the mental model during the transition from printed to digital content. However, the news feed is native to the digital format, and is much more ideal for presenting digital content.

Defining the News Feed

I define the news feed broadly as a single-column display of content objects, such as articles, article snippets, blog posts, tweets, or links. These objects are serial, in reverse chronological order, and without sorting options. Prioritization is indicated by placement within the feed, and sometimes by visual weight. Usually the feed is accompanied by some filtering or supporting information in a sidebar, and perhaps a few featured content objects.

Why It Works

The news feed has several attributes that make it ideal for digital content presentation:

  1. It fits with online user behaviors and browsing styles
  2. It is an efficient, practical design solution
  3. It has cross-platform versatility
1. It fits with online user behaviors and browsing styles

Users are impatient, and they want simplicity. I've seen this in user testing we've done at Lunch.com, where I work, as well as in past focus groups and user research projects. News feeds are simple. They're perfect for the lazy, impatient scanner. They require no diagonal scanning, and there are no ads to avoid, nor any confusion about what to look at first. News feeds allow for a dead simple, downward, vertical eye movement.

This contrasts with corporate news websites, such as NYTimes.com. When you go there, what do you see first? What's prioritized? Where do you start? The layout is complicated and you find your eye jumping and shifting all over the page. Now go to Facebook. The layout is simple—you start at the top of the page and move down. It's easy, and perfect for the impatient mindset of the average Web user.

2. It is an efficient, practical design solution

For sites where the user is personally aggregating content from multiple sources, such as Twitter, Facebook, Digg, RSS readers, or email inboxes, the news feed model is a very practical way to solve that design problem. The content aggregated by different users can vary widely, and the presentation needs to be flexible enough to accommodate these variations. So how can a single interface work for someone who’s following 500 people, as well as for the new user who is only following a couple friends? The same way the email inbox is organized—in order of recentness.

It’s also easy and fast to add new stories. Compared with the magazine style, where adding one story requires the publisher to shuffle around the rest of the content to make room, the news feed is easy. Just add a new story to the top and everything shifts down.

3. It has cross-platform versatility

This is crucial, and may be the most important reason that news feeds are the best way to present digital content. There is every indication that information consumers will continue to become more splintered across a wider array of device resolutions, interfaces, product types, and so on. Refactoring content for each new device has a continually diminishing ROI; each version will reach a smaller and smaller percentage of the audience.

News feeds are simple, so they expand and collapse gracefully, regardless of form factor. For interfaces on computer monitors, such as websites in a browser, an article can have a larger snippet with a byline, thumbnail image, share links, a blurb from the article, and so forth. For the mobile device, the snippet can be condensed to just a title and thumbnail.

Clearly, devices have different methods of interaction (touchscreen vs. mouse-based) and lend themselves to different user behaviors (iPad users are more consumption-oriented than laptop users, who are more interactive). So, variation from device to device is certainly required, and advisable. However, the less that has to be reinvented, the easier it will be to manage various sites and apps, and the more familiar users will become with a site’s structure.

Examples of This Change Already Taking Place

News and information websites are not stubbornly set in their ways, and seem to be experimenting quite a bit with simpler, feed-like displays:

  • The Reuters website utilizes a two-column layout, one column with the latest news and the other one with featured stories. It’s a very simple, scannable, and versatile design.
  • With its latest redesign, CNN launched NewsPulse, which presents news stories in a single column display with filtering options.
  • NYTimes has a product called the TimesSkimmer, which presents the day’s top stories and allows the user to change their method of page organization.

The Digital Content Ecosystem

I’ve heard the argument that news feeds work great on personal aggregation sites and mobile devices where there is no other efficient display method, but sites such as CNN or NYTimes.com have dramatically different content, user needs, and business needs. How can you make a comparison between the two, and why should the design of one affect the other?

The reason it matters is that they are both within the same digital content ecosystem. The behavior of a user scanning Twitter and Facebook impacts their behavior when they visit other content websites. If I’m accustomed to using the CNN app on my mobile device, it’s going to impact my expectations and browsing style when I visit their website on my laptop. Regardless of how usable a site is in a vacuum, when the user is rapidly jumping from site to site, or from their mobile device to their laptop, all their browsing experiences are deeply interrelated.

However, I am not suggesting that sites like NYTimes.com abandon their current layout and replace it with a single-column news feed. Their content is much too complicated to have such a simple display. However, as users consume more and more information on personal aggregation websites and on mobile devices, all content providers must evolve to meet these new user expectations and browsing styles, and come to think of the news feed as the default model for presenting digital content.

ABOUT THE AUTHOR(S)

User Profile

Andrew Turrell lives in Los Angeles and is Director of User Experience at RED Interactive Agency. He is also an adjunct professor of Interaction Design at the University of Baltimore M.S. in Interaction Design and Information Architecture program. Follow Andrew on Twitter: @andrewturrell, or check out his LinkedIn profile.

Add new comment

Comments

27
29

spider repellent, What browser are you using?

23
30

Hmm is anyone else encountering problems with the pictures on this blog loading? I'm trying to find out if its a problem on my end or if it's the blog. Any responses would be greatly appreciated.

26
29

Ok I see now. Unfortunately I read only up to the examples and just had the "defining the news feed" and anti-multicolumn (magazine) stuff from the above section which read to me like "single column is the way" whereas e.g., Reuter's from your example is a multicolumn experience but has the single line title links as a means of merging scanability and volume.

29
23

In response to Carlos's excellent comment, I have a couple thoughts.

First of all, I want to clarify that I am not suggesting that all news websites convert their layouts to single-column news feeds, and I said as much in the last paragraph of the article. Obviously many sites have featured stories, weather reports, stock market summaries and countless other pieces of content that can't and shouldn't be displayed as part of a feed.

What I am saying is that content consumers are increasingly getting their content from feeds, and are becoming accustomed to that method of browsing. As a result, I believe that news sites should make use of more feed-like elements.

I mentioned Reuters.com as a site that is going in the right direction. It has a simple 3-column layout that is simply organized and is very conducive to rapid vertical scanning. The left column is a list of recent articles, partially organized by categories. However, a large portion of the page is still reserved for featured content, stock market summaries and so forth. I think this is an example of a complex news and information website evolving toward a news feeds-like layout.

Tech news sites like Techcrunch.com take the newsfeed layout even further, blurring the line between a blog and a news website.

A interesting point you bring up is about the 'luxuriating dimension to the reading experience', as you put it. What I've heard in focus groups and other sources is that a large percentage of users are not sitting quietly for an extended period reading a single news site. They're getting their news in many short bursts throughout the day, constanting jumping from one site to the next, to email, to their phone and so forth. For this type of user, I believe being efficient and presenting content simply is most important. To what degree do you think a luxuriating experience is relevant to this type of user, and how does it vary depending on the specific user, site and platform? I'd love to hear your thoughts.

Thanks for your feedback!

24
22

I disagree totally with the single column prejudice. Yes it's ok for small screen mobile devices. But to reduce everything to the constraints of the narrowest browser is not a good direction. If his were really a superior information browsing experience they would have printed newspapers on toilet paper rolls. It's a far more efficient scanning experience to use a multicolumn approach with headlines and teaser text is space affords. Identifying the user agent to display single column or in other ways allowing the option is preferable to enforcing the single column read across all devices.

Eyescanning in the context of a screen like NYT is measured in milliseconds. Laziness doesn't have much time to intervene. Even for Americans. As someone who does a ton of reading in both formats, I find the tunnel-with-endless-scrolling experience to be no less work than sweeping with less physical scrolling.

There is a luxuriating dimension to the reading experience where more content exposure, images and information design create a richer and more diversely communicative scanning experience has quality factors that are not only more experientially rich than the ticker tape of text, but serve various types of info ergonomics. People often raise page content density as a rationale for a variety of arguments that are really non sequitors. Notwithstanding the validity of seeking to be efficient and economical, leveraging white space and such, people are able to identify word shapes and zones of gravity of focus in remarkably dense content displays. Of course we can, otherwise we would have been extinct long ago. I also have conducted tests of mind bogglingly dense directory pages and not only are users able to find their navigation options quickly, but they report that the content volume felt about right. This is of course the case where design and best practices for labeling and typography were at play. Certainly of there is ambiguity, poor clustering and design people will be confused. But if best practices are firing on all cylinders dense multicolumn page layouts are not worth sacrificing for the pseudo panacea of the single column browsing model.