Article page design: using bold ads and interactive elements

How did you get here?

Not here as in “Earth” – we’ll leave that question for smarter minds – “here” as in this very web page.

Most likely, you came here via a link; maybe it was through an RSS feed or a tweet from one of your friends.

Article pages, such as this one, are often the most popular entry point for an online publication, yet the concepts governing article page design have remained stagnant since the late 90’s.

By modernizing their article page design, publishers can increase the satisfaction of advertisers while creating a better user experience and maybe even see a bump in revenue.

THE DEATH OF THE PAGE VIEW

Until now, a single metric has cast its shadow over every clunky article page design: the page view.

The page view is indiscriminate. It ignores the level of interaction experienced by the user and it is often the metric that is used as the basis for the online advertising model.

“What we’ve found is that [the page view] tends to produce lazy answers, like clicking though a bunch of different slides refreshing a banner ad that nobody really sees,” said MSNBC.com Foundry Director Craig Saila.

Salia is one of the brains behind MSNBC’s award-winning Elkhart Project, a series of stories profiling the town of Elkhart, Indiana. The community was particularly devastated by recent economic conditions, and is often visited by President Barack Obama for stump speeches.

MSNBC used the project to test some cutting-edge story-telling features that it has been researching, including a new article page that focused less of creating more page views, and more on increasing interaction and time spent on site.

“We wanted to create a platform that enabled video to be the core of a story with the text element on the side and really make it an experience,” says Saila.

At the bottom of Elkhart’s experimental story page, there is a navigation module that allows users to skip to different parts of the story featuring different forms of interactive media. The navigation can be hidden or moved depending on user preference, and also serves as an indication that there is more content on the page.

 Saila says his metrics show a wide variety of uses for the bottom navigation. Some people move it, some use it, and others get rid of it – “which suggests that it is doing its job.”

“For the people that want to use it, it’s there, for the people that don’t, they can just hide it away,” says Saila, noting that the increase in options leads to more time spent by readers navigating the site.

But perhaps the Elkhart Project’s most innovative experiment is the dynamic loading of the page using AJAX, a combination of Javascript and XML that loads new content without having to refresh the page. If you have ever posted a comment on your friend’s Facebook wall or updated your Twitter account, you have seen AJAX in action.

“We wanted to let users know that there was different content available, but not have it load until they have expressed interest,” he says.

As users scroll down, different types of content are appended to the article. By scrolling, readers are expressing more interest, and are therefore served deeper, more interactive content such as videos and slideshows without having to reload the page.

“For the user that just wants that quick headline hit, we aren’t penalizing them and making them download all of those different videos,” says Saila.

The dynamic loading also helps ease the strain on MSNBC’s servers by only serving content that is being consumed.

Currently, MSNBC is gathering feedback and plans to unroll the new article page to different parts of the site.

BLOWING UP ARTICLE PAGE ADVERTISING

A few months ago, a satirical graphic was passed around the Web that decried the “innovation” in web design for media sites.

In the image, there is a wireframe of a rudimentary article page on the left with the heading “Online journalism a few years ago.” On the right there is another article page wireframe that features such modern news staples as a top ten slideshow, lots of blocky ads and other gimmicks to drive page views.

The message was clear: the modern article page is nothing more than a dumping ground for social media widgets and distracting advertising.

Current advertising standards are all based around standards developed in the mid-90’s, leaving today’s templates strangled by the practices of ten years ago. For example, a popular ad unit on the web is the 728 pixels x 90 pixels “leaderboard,” often placed in a site’s header.

Ten years ago, most Web sites were 800 pixels wide, so the ad unit fit in nicely with the designs of the time. Now, web pages are often as wide as 1000 pixels.

“The problem is that you have this real wide page and you cant run the text the full width, so what do you do with the remaining space?” says Alan Jacobson, President and CEO of Brass Tacks Design.

To help solve the problem, Brass Tacks, a design firm that consults newspapers, recommends filling up the remainder space with advertising. Many of the company’s mockups feature ads that take up half of the visible screen.

“The best example I can think of is in print,” says Jacobson, “where you have these full color ads and the ads and the editorial live very happily together … but we don’t do that online.”

“So often advertising is just slotted into a particular hole,” says Salia, “you cut a square out of a page design and put an ad there.” For this reason, MSNBC’s prototype page is programmed to change dynamically based on detected ad buys.

“People have abandoned online advertising too quickly,” Jacobson says of the recent attention turned to alternative revenue models such as paid content. “It’s just been done so poorly and that’s why it hasn’t worked.”

MOVING FORWARD

Given the gap between available technology and the current standards of article page design, all of the factors are in place for a leap forward in the way stories are consumed on the Web.

In his research, Saila described two types of news consumers: the “average user” and what Saila refers to as “news explorers,” those who burrow through interactive elements in a story.

The good news for publishers is the behavior for the “news explorer” demographic has historically trickled down to the “average user.” More interactive article pages may seem experimental now, but in time, will soon cater to the average user and that effect may have drastic effect on a site’s metrics.

And that increased engagement can lead to better ad sales.

“Our sales staff has been getting some excellent feedback from large name clients,” says Saila.