Design View | Articles and opinion on design professionalism, technique and culture by Andy Rutledge

News Redux

July 17, 2011

Digital news is broken. Actually, news itself is broken. Almost all news organizations have abandoned reporting in favor of editorial; have cultivated reader opinion in place of responsibility; and have traded ethical standards for misdirection and whatever consensus defines as forgivable. And this is before you even lay eyes on what passes for news design on a monitor or device screen these days.

In digital media—websites in particular—news outlets seldom if ever treat content with any sort of dignity and most news sites are wedded to a broken profit model that compels them to present a nearly unusable mishmash of pink noise…which they call content.

In an effort to disguise and mitigate the fact that they have little idea how to publish digital content properly—often sneakily called “differentiation”—some news outlets release apps for digital devices. These apps typically (but not always) do a better job of presenting content and facilitating navigation, but they’re a band aid on a festering abdominal wound. Digital media is simply digital media; if you do it right you publish once and it works anywhere. If you’re using an app to deliver content, you’re doing it wrong.

Instead of working with a handful of redundant, mitigating formats (websites, mobile sites, apps, etc…) for content delivery to popular devices, news organizations should simply deliver it correctly in the first place, one time; using html, css, JavaScript, …oh, and design. The employment of content design would be quite refreshing, actually.

News Today

Some news sites are done better and some worse, but The New York Times presents a rather typical example of terribly-designed news. As they are somewhat well known in the news industry, I’ll use their site as the redux example in this article (know, however, that it is news in general that I’m talking about).

The New York Times politics page

The Times politics page. I think the object of the game must be to fit as much “content” onto the page as possible in an effort to overwhelm the reader, tricking them into believing that the NY Times is just bursting with a mindbogglingly-bottomless array of important information. If only the reader could learn to ignore 60% of what’s here, she might have a chance at a pleasant experience. Please stop helping. What you’ve got here is not content, but noise.

It is hard to believe that the Times, or any other similar publication, actually cares about the news when they treat it with this sort of indignity. Worse, the design makes it quite hard and often frustrating to simply scan the news and find stories that one might be interested in. As a news reader, I want to be able to scan headlines and logically find news I’m interested in reading. And by logically, I mean according to clear, usable, undistracted organization and filtering.

Using the New York Times as an example, let’s look at what helps make for a confusing and complex experience.

bad navigation

Main navigation:

bad main navigation

What you need is not a link to every mildly-distinctive item on the site, but usable categorization and filtering. What you need are scanable headlines, not loads of ancillary text and images. Here are some fairly decent examples, but even they are wildly inconsistent and lose their way on crucial pages:

MSNBC MSNBC 2 CNN CNN 2

 

Actually, the Times’ search results page is an excellent example of usable news design:

NYT search results

In all seriousness, one could craft the entire body of section-level pages like this and it’d be wonderful. Article pages would, of course, require full content, but this is excellent, usable news headline presentation.

Mobile Presentation

Mobile presentation of a news web page should be contextual to the device and screen size/resolution, but it should not require anything more than a media query fetching different CSS and perhaps some additional scripting so as to simply restyle the content experience (along with the elimination or addition of content according to the context).

NYT on the iphone

In all fairness to our example New York Times, they have a mobile version of their website, as well as a handful of apps. The apps, as mentioned before, are largely apologetic and superfluous. The mobile site, while a far better presentation, is still miles behind what is appropriate and usable.

NYT site and mobile site

The mobile version maintains the noisy and distracting extra content that typically accompanies a listing blurb for each story. This is a mistake. It requires that the reader either wade through 100 things when 5 would do or it requires that the user attempt to filter out the cacophony of distraction surrounding each story. What we need in such a tiny interface are HEADLINES. That’s it! Headlines can be scanned. Headlines should be able to tell us what we need to know in order to decide if the story is something we’re interested in reading.

My suggestion for a category page on iPhone

Above: My suggestion for how to present a category page.

News Redux

In working to more appropriately re-imagine digital news, I believe we must first address some fundamental failings of modern news. Among the ideas that need to be addressed are:

Regarding content strategy and mechanism, today’s “news” is rife with irrelevancies and distractions. Part of this is due to the news industry’s abandonment of actual journalism, but much of it is due to thoughtless promotional strategy and pathetic pandering. I suggest that digital news acquire a responsible and more usable approach. For instance:

Given these standards we’re able to achieve a highly useable and, I suggest, more attractive presentation for digital news. Here’s my example for what this might look like.

New York Times redux by Andy Rutledge

View these pages as in-browser comps »

Here, news is scanable and lovingly presented, giving it the dignity that valuable information deserves. Moreover, opinion and editorial is clearly distinct and separated from news. Given that the New York Times is largely an opinion publication, rather than work to eliminate opinion and editorial from the offering, the individual editorial writers should be promoted as exclusive, valuable properties found only at the New York Times. I’m guessing that the Times should bank on people wanting to read the columns of popular, sought-after opinion authors.

Since news is accessed only via subscription, most of the ads can be eliminated from the pages. Story pages could still have one or two tastefully-presented ads, but preservation of the content is what will keep readers happy, engaged, and willing to continue paying their subscriptions…just like in olden times.

New York Times redux (story page) by Andy Rutledge

View these pages as in-browser comps »

 

NYT search redux

Above: Search should be more usable than is currently employed on most news sites.

New York Times redux on iPads, by Andy Rutledge

Given the more usable presentation, there would be little need for tablet device visual alterations. Though some modified, device-specific functionality would likely be nice. Phone-sized screen presentation is what I suggested earlier in this article; contextual to the limited screen space (and limited attention).

So compare the basic web experience of the current Times politics page with my quick & dirty redux:

New York Times redux comparison
Closing thoughts

As with all of my previous redux efforts, this one is not a specific suggestion for how to precisely redesign a specific site. It’s just an exercise to discuss and examine specific issues via quickly-conceived, hastily-constructed visual comps.

Even so, these examples should help clarify for designers (and maybe even media outlets?) how when context is taken into account, users are taken into account, intelligent business models are used, content is treated with dignity, and very basic development strategy is employed, something as crucial as quality news can be delivered in far better fashion than is typically done.

As you can see, I have barely even scratched the surface here. How about you start thinking about better presentations for news online and bring that to your work and maybe even to some further articles.

You can follow me on twitter

Archives

Archive

Practice