The Internet Advertising Bureau publishes a standard for online ad sizes, but there have been some changes recently. And Google’s followed that by adding new ad formats to its popular Doubleclick for Publishers ad server. So it’s time for even experienced online news publishers to take a fresh look at their ad templates.

First, let me affirm my opposition to advertising that blocks editorial content, either on a website or in print. As a reader, I always despised front-page spadea print ads that blocked my first glance at the headlines of the day. Same goes for online. It’s one thing for an ad to expand and cover editorial content if I click on it. (If anything, that’s better than being sent off to another page or website with a click, IMHO.) But can’t endorse of suggest any ad format that blocks editorial content without a readers’ consent. So we won’t be talking about pop-up or takeover ads today.

Incorporating standard ad sizes in your website design is important because it makes it easier for larger advertisers (who typically run campaigns across multiple sites, and spend a lot of money doing so) to place an order on your site. If an advertiser has to create an ad especially for your site’s design, that increases the effect cost of advertising on your site to that customer. You can’t expect that unless you’re an established, major player in your market. And even if you are, it’s good business to try to keep costs down for your customers.

The IAB used to support dozens of ad sizes and formats, but in recent years, has cut down the number of its recommended units to four main “core standard ad units”:

• 300-pixels-wide x 250-pixels-tall Medium Rectangle
• 180 x 150 Rectangle
• 728 x 90 Leaderboard
• 160 x 600 Wide Skyscraper

(Yes, Internet old-timers, the 468×60 “full banner” has gone to the great server in the sky, along with the Netscape browser, Usenet and the Whole Internet Catalog.)

As it eliminates old standards, the IAB is implementing new ones. Six “Rising Stars” ad units are under consideration for official endorsement by the end of the summer. They are more interactive ad units, often incorporating Flash or advanced HTML to expand or move ad space upon user interaction, such as a click or mouseover.

• Billboard – a 970×250 Flash banner that may be collapsed by clicking a “close ad” icon.
• Filmstrip – a 300×3000 banner that is visible through a 300×600 space on a website. The filmstrip scrolls through the banner space, based on reader clicks or hovering the mouse over the banner.
• Portrait – a 270×1050 space for the right side of pages, with defined spaces for branding, and defined areas for image galleries, video players, polls and social media interactivity.
• Pushdown – a 970×90 banner at the top of the page that when clicked or moused-over expands to 415 pixels deep with advertiser content, pushing down site content.
• Sidekick – a on-page wide vertical banner that when clicked expands to the right with ad content, pushing page content to the left, where it can be accessed via a horizontal scroll in the browser.
• Slider – a banner anchored to bottom of browser window that, when clicked slides the publisher page to one side and brings in advertiser’s page.

Google’s free Doubleclick for Publishers ad server, popular among start-up and smaller Web publishers, recently added support for expandable and pushdown Flash ads, though a publisher would need to create a customer ad unit size within DFP to accommodate one of the specific “Rising Stars” formats. But the native support for expandable and pushdown ads is new to DFP, opening support for these ad formats to many more publishers.

As you consider which ad formats to support in your website’s design, also think about how you can place ads so that they will be seen and considered by a large percentage of your audience.

There’s no point in offering ads on your website if they lack the visibility that your customers need, just as there’s no point in offering news so buried that no one in your audience reads it. Google has offered some now-famous “heat maps” based on eye-tracking research that reveal the hot spots for ads on many typical webpage designs. (I’m still looking for similar research that incorporates the new rising stars formats, so if anyone has access to some that can be shared, please send that link.)

Finally, if you’re one of those new or aspiring publishers who also needs a quick overview of banner ad pricing terminology, check out the Wikipedia entry for CPM, as well as the links to other ad pricing alternatives, at the bottom of that page.

Ultimately, selling advertising on a website ought to be one medium through which you, as a publisher, help a customer address its needs by providing additional, relevant and welcomed information to your audience. Smart use of standard formats and responsible placement within page design can help you achieve that goal, instead of stinking up your site design with awkward or inappropriate ads that serve neither your audience nor your advertisers.

I found out checking my Twitter feed on my iPhone. I suspect that many people first heard the same way, though tweets, mobile alerts, text messages and Facebook posts. The news was 15 minutes old on Twitter before I saw the first TV network break in to report that President Obama was about to make a statement, then soon after confirming that bin Laden, the man behind the 9/11 terrorist attacks, was dead.

(And if you’d really been paying attention, you might have read earlier in the day this Twitter user live-blogging the attack in Pakistan that killed bin Laden.)

I hadn’t planned, obviously, to write about bin Laden for today. (Nor had any of the journalists around the world who were tearing up old budgets and remaking their pages late last night.) But I had planned to write what I fear will become a recurring nag to online journalists to pay closer attention to how their work comes across on mobile devices.

Given how I – and millions others, I suspect – first heard the news last night, that advice seems all the more relevant to me now. So now we join our regularly scheduled post. Mobile must not be left an afterthought in a news organization; it must become the first thought. It’s the first thought already for our audience – the way that more and more people are first hearing about breaking news, or even non-breaking viral news, online.

And yet, news organizations continue to make the mistakes I complained about last year, and the year before that.

If there’s one item of advice I wish that all news organizations would be embrace, it would be this: Please, if you tweet a link to a story on your website, and I click that link on my mobile device, do not then redirect me to your mobile home page, instead of sending me to the article you tweeted.

Home page redirection is the lazy programmer’s way of ensuring that mobile users see your optimized site. Stop it, please. Stop it now. Any programmer worth employing ought to be able to create a device-sniffing script that redirects readers to the mobile version of the specific article instead.

Beyond that, most of the frustrations I have as a mobile user stem from an apparent belief in some news organizations that “mobile = text.” While I encourage news organizations to remember the millions of would-be readers out there with feature phones, we’re long past the era when anyone could assume that “mobile = ” any one thing. Mobile’s as diverse as the Internet itself now, and designers and editors must be ready to craft presentations that meet individual readers’ needs, regardless of the device that they are using.

With no visuals available as the news broke, the bin Laden story could be told to mobile users using nothing but text. (That lack of visuals put television at a disadvantage as it waited nearly an hour for the President to speak Sunday night. My children started timing the loop of stock bin Laden footage one network played in between its various talking heads.)

That’s hardly the case with all news stories of course. Consider Friday’s royal wedding in England. And before anyone sneers that the wedding wasn’t ‘news,’ lemme say that if a billion people around the world are watching a live event at the same time, that event is worth covering. Just put the event in appropriate context – in this case, as a cultural celebration that will might end up having a significant effect on the global fashion industry, the wedding industry and the tourism industry. And that millions of people around the world enjoyed as at an excuse for some fun parties.

That now said, if you’re going to tweet a story about a photo of someone’s dress, and I get a mobile version of that story, the story better include the photo of the dress. Yet many websites, as a formatting matter, automatically strip photos and video embeds from their mobile stories.

Ultimately, it doesn’t matter wether the photo is of an evening gown or a battle scene, images are a part of journalism and ought to be a part of journalism on the mobile Web, as well. Even the cheapest feature phones today have the ability to show a photo. Employ smart programming that gives your editors the ability to deliver newsworthy photos to feature phone users, more liberal use of photos to smart phone users and photo-rich displays to tablet users.

At the same time, let’s also use the need to better optimize the news reading experience for mobile users as an excuse to kill some of the bad design habits that have infected some news organizations. My current pet peeve is stories that present lists as multi-page galleries when the items in the lists don’t need a visual presentation.

Galleries for a list of the top 10 news photos of year use that format well. Galleries of the 10 most useless college majors, not so much.

It’s annoying enough to click through all those panels (with the interstitial ads) on a laptop Web browser. Try doing it on a phone. Yuck.

Let’s fess up. Those types of presentations are designed more to pad page views and ad impressions than to effectively communicate information to an audience. That’s not journalism. It’s spamming.

I asked on my personal Twitter feed if anyone knew of an ombudsman or readers’ rep who had addressed online design issues in defense of readers’ interests. I didn’t get any responses. If you have a link to one such piece, send it my way, or drop it into the comments.

Let’s quit hiding behind the excuse that we need to make money with our news websites. Instead, let’s recognize that the way to make money, in news or any other industry, is to find and meet the needs of audience and customers. It’s not to annoy them, harass them or frustrate them. Pageview-inflating galleries, lazy mobile “optimization” and one-size-fits-all design might help the bottom line in the short-term by inflating revenue or cutting costs. But ours is an industry that’s too long put off long-term thinking in favor of real and imagined short-term crises.

At some point, if you fail to meet your audience and customers’ needs, you fail. We don’t have to end up that way. But we will if we don’t start doing a better job of doing things such as creating better mobile news designs.

Here’s hoping more of us learn this lesson, so I don’t have to write this piece again next year.

Mike Shatzkin on the Idea Logical blog said

“Curation is a term that has always referred to the careful selection and pruning of aggregates, such as for a museum or an art exhibition. But the concept in the digital content world means the selection and presentation of these disparate items to help a browser or consumer navigate and select from them. Aggregation without curation is, normally, not very helpful. Curation creates the brand.”

There have been some forays into news site curation. LJWorld created a Kansas Legislature page in 2005 that aggregated links to general news coverage of the state Legislature. But they took the next step of selecting and organizing stories by specific issues like Death Penalty, Concealed Weapons and Sunday Liquor Sales. The page served as a “one-stop shopping” resource by anticipating the kinds of information someone interested in the Legislature might want by including such resources as bios of legislators, legislative calendars and bill finders, and copies of the State of the Union addresses going back several years. LJWorld still has an aggregated page of Legislative coverage, but it is not longer curated – it is just a list of links to news stories.

Losing the topic focus switched the LJWorld’s page from curation to aggregation because an essential step in curation is organization, as they did with the issues, not just listing. Just as a well-curated museum has the Early Asian art area separate from the Surrealist collection, so should news sites provide some subject organization within large news topics.

Curation can also entail finding and providing resources from all over, not just aggregating your own content.

The New York Times Topic Pages are an example of this kind of curation. They have thousands of subject / event / personality specific pages which provide an overview article on the topic, links to all the NYT past coverage (with a searchable database specific to those articles), and, here’s where the curation comes in, sections on “Headlines from around the web” (a listing of articles found using the NYTimes’ news aggregation program Blogrunner which has been sent to selected sites) and “A list of resources from around the Web as selected by researchers and editors of The New York Times.”

We were interested in observing how this kind of curated content was used by people on an information seeking quest. We conducted eyetracking sessions with 37 undergraduate students at the University of Minnesota. The students were told that they were going to write a research report for a class and were given a selection of 10 New York Times Topic Pages from which they could choose the topic of their report: the U.S. Dollar, Earthquakes, the U.S. Federal Budget, Foreclosures, Mortgages and the Markets, Piracy at Sea, Stem Cells, Tornadoes, and Unemployment.

The students sat at a Tobii Technology eye tracking device in our research lab and were told to go to the Topic page of their choice and do whatever they wanted (read, click). After 10 minutes we stopped the session. All of the participants answered a short online questionnaire about the website and their information seeking experience after their eye tracking session.

In analyzing the eyetrack videos we designated each section of the Topic Pages (e.g., “Summary,” “Multimedia,” “Navigator,” etc.) and we coded the participant’s “attention” on the page using a construct describing the “Path to a Click” by researchers at Yahoo which characterizes activity on a site by the frequency and duration of a person’s attention to a particular part of the page. These levels are:

1. Saw: when the participant’s gaze passed across a section
2. Noticed: when a section the participant “saw,” then glanced away from, was returned to
3. Parsed: when the participant “fixated” on a section, clearly taking in the text / image

Other things we analyzed in reviewing the videos were:

• the sections that contained URLs that were clicked by the participants to figure out whether the placement of the content influenced their clicking behaviors
• the content of the items that were clicked (headline only, headline plus abstract, headline plus image, etc.)

Among the findings are the following:

ATTENTION TO DIFFERENT PARTS OF THE PAGE. The percent indicates the number of participants.

• Most parsed sections (areas where most attention and time was spent)
  • Summary (100%)
  • Articles about (70.4%)
  • Multimedia (58%)
• Most unparsed sections (virtually no attention paid)
  • top-right search box and top global navigation (both 97.4%)
  • Related Topics (83.3%)
  • left-column advertisement (80.3%)
• Zones in which the most links were clicked: (based on a 3×3 grid placed on the Topic Page)
  • left column middle row
  • middle column top row
  • left column bottom row
• Statistically, contents in the left column were seen, parsed, and clicked the most (Note: the left column was where the archived stories were displayed)

WHAT WAS CLICKED
Among the 37 students, a total of 138 items were clicked (an average of 3.7 clicks per participant) Of those items that were clicked:

• 42% were headline only
• 24.6% were a headline and story abstract
• 14.4% were a headline, abstract and photo

Of all the items clicked 85.5% were story links. Of the other items clicked, 65% of them were from the “Related Topics” box.

In the post-eyetracking survey, participants were asked a number of questions about the features of the page and their importance to them.

• 72% of the participants rated the Navigator (links to other websites) as Useful or Very Useful. Very Useful or Useful ratings of the other key areas of content on the page: Articles from the archive (67%), Headlines from around the Web (59%), Overview of the topic (64%).
• Of the existing or potential functions on the page that could aid a researcher, the following is the ranking by those considered “somewhat important” or “very important”:
  • 100% Bookmark or save an article (81% said “very important”)
  • 70% See article ratings from others
  • 64% Rate an article
  • 56% Sort articles by your rating
• When asked what it was about an item they clicked on that prompted them to click (multiple responses were possible):
  • 81% cited information in the headline
  • 27% cited a photo
  • 21% cited information the abstract
• The preference for display of stories is, by far, most recent to oldest. Articles rated highest by others or most read / emailed articles about the topic was preferred over oldest to most recent stories.
• Students indicated their preference for finding information (if they did not access something like the NYTimes topic page) as major search engines (59.4%), the school library website (35,1%), and online encyclopedias (5.5%).
• Compared to their alternate sources of information, 52.8% of the participants perceived NYT Topic Pages as being equally credible, 37.8% perceived NYT Topic Pages as more credible, and 9.4% perceived NYT Topic Pages as less credible.
• Compared to their alternate sources of information, 54% perceived the information on the NYT Topic Pages as having about the same level of completeness, 30% saw it as more complete, and 16% saw it as less complete.

Students were asked an open-ended question about what they thought of the organization of the NY Times Topic page they used. Here is an analysis of their comments:

• 49% mentioned the site was well organized and made it easy to find information
• 40% mentioned something about the site being busy / visually cluttered
• 35% mentioned the appealing design of the site

Some of the comments might serve as suggestions for other news sites looking into creating similarly aggregated / curated topic pages:

• One student said, “Without a search option, it was kind of hard to find an article that would benefit my ‘research paper’ just from looking at headlines.” Of course there was a search option for the story archive, but it is below the scroll towards the bottom of the page and, apparently, easily overlooked.
• “It was hard to distinguish between articles and opinion pieces.” This should be an important curatorial distinction.
• “Have a way to mark an article you’ve already read.” A followed link is just a slightly lighter color; maybe clicked story links could be made more distinct or could “grey out” for easy recognition.

Honing “curatorial” skills in news organizations is one area that holds potential for creating high value resources for both casual and more motivated information seekers. However, there remain many questions about how best to design and organize these pages rich in both internal and external information. It is a research area we intend to continue to pursue and we welcome your feedback about this study and suggestions for future studies.

If you would like to see “hot spot” images from the study go to: http://picasaweb.google.com/norapaul/EyetrackingHotSpotsNYTTopicsPageProject#. The areas that are red indicate the longest “fixation”, green the next longest, and yellow after that. Areas of the page with no color were not viewed by the participant.

Why we did the study

One of the great strengths of the Web is the ability to keep news updated and to alert readers immediately to stories they need to know about. This is also one of the biggest organizational changes the Web has brought to newsrooms. Shifting from daily to constant deadlines has caused a rethinking of work flow, editing, and reporting responsibilities.

But questions remain about the best way to ensure that these updated or breaking news items are presented on the page for greatest visibility. Judging from the wide variety of design techniques newsrooms use to designate breaking news, there is no consensus on the best approach.

In May 2007 the top 102 US newspapers’ websites were analyzed to catalog the different ways “breaking” news was being displayed. We looked at labels used to indicate news was updated or new and the design techniques for differentiating “breaking” news from other news items on the homepage.

Labeling: Thirty-four of the online news sites examined had no designation of “breaking” news. Of the 68 sites that did:

• 31% used some version of “Breaking”
• 30% used some version of “Latest”
• 14% used some version of “Update”
• 25% used miscellaneous labels including “Developing News”, “News Flash”, “News Bulletin”, “News Alert”, “Up to the Minute.”

Design: The methods used to designate, design-wise, the “freshest” news items on the page varied, and were often combined.

• 12% tagged individual stories with “New” or “Updated’, usually in a bold color
• 57% put “updated” stories in a box
• 62% timestamped the entire page and / or individual stories

It was clear that no conventions had been established for designating those news items that were freshest or most recently updated.

We designed the study to get at the following questions:

• Did the design choices made to designate updated content affect the user’s recognition of which items were new or updated?
• Would the design aid, or impede, the likelihood that the news user would find, read, and remember news items most recently added to the site?

How we did the study

We worked with the Minneapolis Star Tribune to get daily feeds of their homepage. We inserted into the “live” page a fake “breaking news” story (about a tank truck accident and subsequent chemical spill shutting down a major highway in town.) Each day of the testing, our designer created three test “home pages” using the top three ways updated news is being designated on websites – timestamp, labeled, boxed – to distinguish this “breaking news” story from the others on the page.

Version 1: Timestamped

Version 2: “New” placed next to updated story

Version 3: Updated story headlines in a separate box

Participants: We wanted to study a wide array of online users in this research so we took the eyetracking equipment to two locations in Minneapolis: the student union at the University of Minnesota (where the demographics were largely young, Anglo adults), and the Midtown Global Market Downtown (where the participants represented a wide range of demographics – age, race, education.) In all, 96 participants were tested, divided into each of the three conditions.

After the eyetrack calibration, research participants were asked to go to the homepage and “just look around.” They were told they could look however long they wanted and could click on whatever they wanted. When they indicated they were done, they were asked a couple of questions:

• What are the main stories you recall from the website?
  The response to this question could be checked against the eyetrack video. Was it clear they “saw” the updated story yet did not list it as one of the stories they remembered?
• What was it about these stories that made you remember them?
  The response to this open-response question helped catalog the attributes of the news story that made it memorable.
• Which of the stories on the website was identified as a “news update” // or which of the news stories was the most recently updated?
  This question sought to discover if people, in fact, recognized that there was a story that was designated differently than the others.
• Do you try to find the most current story when you go to a news website?
  This question would allow the researchers to see if there was a difference in response from users who are self-proclaimed “fresh” news seekers from those who are not.
• On a scale of 1 to 5 (with 1 not at all interested and 5 very interested) how interested are you in: Politics, Crime, Traffic Reports, Sports
  This question could help researchers to see if interest in a news topic (in this case traffic) resulted in a higher degree of recall.

Findings

Both the eyetracking videos and the post-exposure survey responses were analyzed and matched – the videos to see whether participants eyes “fixated” on the breaking news visual cue and the survey to see their responses to the post-exposure questions. Here are some of the key findings:

Finding 1: Bigger is Better – or is it? In terms of visual cues, it was clear from the results of the eyetrack sessions that the larger the cue, the more likely it was to be noticed. By visual cue, the percent of participants exposed to that style of display who fixated:

But when participants were asked in the post-exposure survey to say which story on the homepage was the most recent or which was the breaking news item, the participants exposed to the timestamp (35%) and “new” pages (32%) had greater recognition of the freshest news than those exposed to the headline box (20%). Even though 89% of the people exposed to the headline box page clearly looked at it, only 20% of them recalled any breaking news story.

What might this mean? Although the headline box drew more eyes, the headline text size in the box was smaller than the other two display styles. Headline text size may be an important factor in user’s memory of a story. So, although boxing the headlines made that visual element on the page more broadly seen, the small size of the headline type within the box made the recall of the story weaker.

Finding 2: Story Attributes Participants were asked in the post-exposure survey “What was it about the stories you recalled on the page that made you remember them?” Their open responses were analyzed and categorized (for example, if they said “I remembered that story because it happened near where I live.” Or “I drive that highway every day.” the response would have been coded as proximity or familiarity. If they said “I remembered it because of the color photo next to it” it would have been coded as “photo.” Here are the categories and findings:

The attributes of the story and what made people recall them fell into two categories: personal and design. By far (66% vs 24%) it was the personal triggers (interest in the topic, proximity, familiarity, emotional response) rather than design cues (size / position on page, photo, hyperlinked headline) that were given as reasons for recalling the story.

Observations: The old adage “You can lead a horse to water but you can’t make him drink” probably fits here. If there isn’t interest, the design may well not have any impact.

There is a good deal more observations we can make based on this research, look for more results in future OJR columns.