I worked in a dot com newsroom for years. You’ll learn a few things in a newsroom:
- Coffee is an amazing and crucial commodity.
- The success of your product is directly proportional to the quality of its content.
- Advertising is your friend.
Number three is not a typo. When advertising requirements are gathered and understood early on in a product life cycle, you will create a powerful experience for your audience and lucrative one for your advertisers.
Content is Content is Content
Your users rule the experience. Your advertisers pay for the experience that your users rule. And trust me, your internal constituents are not afraid to remind each other. You’ll silently hear things like, “Without our work, people would never come to this site.” And the flip… “What site… the one we advertise on?”
As a user experience professional caught between Scylla and Charybdis (*), you are the voice of reason. Remember that ads have target audiences, messages, and aim to make money in a very similar way to editorial content (just ask Google Adsense). This small titbit will make sales love you and the editorial team, well, scepticism comes naturally to editors. Display advertising is content. Accepting advertising as content and finding appropriate context benefits your audience. However with all types of content, you’ll have to determine an optimal balance as a UX professional. What proportion of ad content is appropriate to display with the editorial content? Don’t ask your users because you will inevitably hear, “I hate ads. I know you need them to pay for your business, but I hate them.” So the approach must be to determine your business and sales needs and integrate them without trampling your user needs.
IAB and Display Ad Sizes
“IAB (Interactive Advertising Bureau) is an association dedicated to helping online, Interactive broadcasting, email, wireless and interactive television media companies increase their revenues” as they put it. They are committees comprised of a few obscure…unknown companies like: AOL, CBS Digital Media, CNET Networks, Inc., CNN.com, Comcast Corporation, Cox Newspapers, Inc., FOX Interactive Media, Google, Inc., MSN (Microsoft Digital Advertising Solutions), NBC Universal Digital Media, New York Times Digital, USATODAY.com, Washington Post / Newsweek Interactive, Weather Channel Interactive (Weather.com), WebMD, Yahoo!, Inc, and many more.
One very powerful guide IAB created is the standards and guidelines for display advertising on the Internet. Looking at this as a scenario:
New York Times, rather than using their designers to create custom size ads, would agree with many media companies (Yahoo, CNN, CBS, etc.) that a 300×250 ad is an acceptable size ad to display. Bausch and Lomb comes along with a campaign and can easily create display ads with its own designers or firm, knowing that they will have the capability of advertising on all of the sites mentioned. All they have to do is stick with 300×250.
Knowing that the IAB makes these decisions on an ongoing basis is important in creating a strong user experience in that a decision could be made to create a new ad size, and you will have to accommodate. The new ad requirement will have to work for the user and advertiser. (This said, the IAB is not known for throwing bizarre sizes into the mix on a consistent basis.)
So now that we have many consistent ad sizes, which ones do we use? IAB handles that as well in creating the “ Universal Ad Package, a set of four ad sizes that all member publishers have agreed to support.” By requiring these four ad sizes, (300 × 250, 180 × 150 , 728 × 90, 160 × 600 ) your layout grid starts to have a more finite set of display options. This still doesn’t answer how to balance ads with the user experience. The answer? How much is the advertiser willing to spend? (Well…be prepared to hear that.)
The Grid and Placement
“The advertiser wants to takeover the whole content area and have it blink uncontrollably,” and other comments like this will be large hurdles to overcome. Balancing the peer (and more than likely executive) pressures of display ad pushers versus your user’s experience could be a nightmare. The impetus to throw a few 300×50 ads on a page when you’re in a pinch is overwhelming, especially when your commission based sales team are tying your hands and placing your feet in concrete. You can’t entirely break free from the see-saw of more ads on a page or less ads on a page. However, consistent page structures can please the crowd.
This is a basic article grid. 1024×768 resolution, one major content well with a global navigation, content sidebar, and advertising slots on top and to the right. This is a common grid for many reasons and among them is code efficiency and money. The right column is usually 300 pixels wide. (Some opt for 336 wide to allow for additional ad options.) This width falls directly in-line with an IAB standard ad size. Not only can it fit a 300×250 but it can also fit a 300×600. A right column of any smaller width might lose your company a considerable amount of sales opportunity, content space, and money.
The right column becomes very important in your ability to serve advertising through an ad management system like DoubleClick. You can serve all multiple ads from one point and control your inventory much much more efficiently than dispersed ads throughout your pages in a disorganized fashion.
Placement of the ads affects the user experience as much as the advertiser experience. And the tricky seesaw? The better the user experience, usually the worse the ad placement is for an advertiser. A great user experience is having the ad in the right column. Ads are easier to ignore in the right column. Advertisers are not keen on this.
It shouldn’t shock you that content in the upper left is incredibly hot. In the case of articles, advertisements that are embedded in the main content area reap serious advertising dollars. However, the ads better have context and not interrupt the user’s experience (interrupting the experience would mean anything that hinders the reading of the first two paragraphs.) Advertisers do benefit from ads in the right column especially when surrounded by non advertising content. However, the preference will always be to place the ad high above the fold (good luck defining the fold).
A Look Under the Hood
How are these thoughts applied in the real world and what impacts do they have? For the sake of this article, we’ll explore 4 travel articles: USA Today, MSNBC, CNN.com, and NYTimes.com.
USA Today
USA Today articles provide a solid user experience while balancing advertiser needs within this article. They use a standard grid with a leaderboard ad at the top and a Big Box ad in the right column. User needs are met through a clean, scanable design that focuses imagery and content in the top left while keeping advertisements clearly separate in the right column. Advertiser needs are basically met through having a column that can hold many IAB standard ads and allowing for placement high on the page. The leaderboard ad at the top is placed under the site wide search and above the global navigation creating a more integrated advertising experience. If the user scrolls to eliminate this ad, they’ll lose site wide functionality. This can be argued as a poor user experience yet becomes one of the seesaw areas you’ll have to balance between user experience and sales needs.
In this particular instance, USA Today chose to put nothing but advertising and internal promotions in the right hand column. This is a very clear user experience (content on the left and ads on the right) but doesn’t provide a strong ability for the ad to sit within the context of the article. Had USA Today placed related editorial content in the right column, more value could be brought to the advertisement. This integration of content must happen in a manner that is clear to the user.
The New York Times
The elegance of the newspaper’s design carries over to the website down to the article level. Simple, clean, and crisp, NYTimes.com manages to pack a ton of information on a page without clutter, in a easily digestible manner, and in a way that ensures the user is satisfied while providing strong value for their advertisers.
To start, they employ a standard grid allowing for a leaderboard on top and big box on the right. The difference with New York Times is in their nuances of placement. Their leaderboard is under all global navigation increasing the context of the ad to the article. Similar to USA Today, if a user scrolls the page down to eliminate the ad, they will also eliminate their access to navigation (1 for the advertiser, 0 for the user). Many of these leaderboards can be interactive and expand upon roll-over. Uninitiated ad expansion can occur often when users move the mouse to click on the global navigation and roll over the ad accidentally. This is a royal pain for a user. Overall, NYTimes.com is good about keeping the uninitiated ads to a minimum.
Their right column is rich with advertising and editorial content. This is a wonderful way to train your audience to scan more than just the left content area. This particular instance does not display a big box ad, however NYTimes.com uses the 300×225 slot to display internal events and product offerings in a very clean manner.
MSNBC
MSNBC does not lean on a strong user experience as much as it does a strong advertising experience. With fully integrated big boxes and contextual advertising displayed in its own separate column, MSNBC provides the triangle for Pavlov’s advertising dogs. The only display option that works against the advertiser and in favor of the user is the leaderboard placement at the very top of the page. This is sometimes called “the gutter.” Out of the line of sight, a user can easily scroll to eliminate the leaderboard and have no impact on their ability to navigate the site.
MSNBC kills their ability to serve multiple advertising sizes in one location when they place the big box ad after the first three paragraphs in the article. If you think this experience is disruptive, imagine serving a 300×600 ad in the same place. Coupled with a user’s inclination to read the first to paragraphs and jump to the next article (articles are written with the most meat up front and users know it) this layout encourages users to stop reading when they get to the advertisement (hence the attempt to discourage this by messaging “Story Continues Below”). However, the likelihood of users scanning this ad greatly increases when the ad disrupts the experience. That said, the ad disrupts the experience… badly.
CNN.com
CNN.com also provides a solid user experience while balancing advertiser needs within this article. They use a big box grid with a leaderboard ad at the top and a sky scraper ad in the right column. Like USA Today, user needs are met through a clean, scanable design that focuses imagery in the top left while keeping advertisements clearly separate in the right column. However, CNN’s grid better integrates content in the right column and offers flexibility in display ad choice (Skyscraper, Big Box, or half page.)
Another interesting design option is the gray shading used behind the right rail ad. This shade helps further define the separation between advertising and editorial content (1 for the user and a big 0 for the advertiser). Similarly, CNN.com attempts to cue the user to editorial content in the right rail by creating strong visual ties using the color red in the grouped headings. Lastly, the leaderboard at the top of the page has a double whammy against the advertiser. The ad is in the gutter. Users can easily scan past the ad to reveal just the global navigation. CNN.com compensated by removing the shade under the leaderboard ad from their previous design. This helps integrate the ad into the overall design better however, this weakens the user’s experience a hair. Am I saying users will stop at the leaderboard in absolute confusion and go no further? No. However, these tiny nuances do add up to create an overall experience.
Even though you’ve seen a few examples of advertisements I still have not answered what the perfect advertising placement is. Yes I am dodging the question. What is the secret formula to balancing sales and editorial needs? As a professional, you have to understand the goals of your business (both editorial and sales), understand the product, who your users are and why they use the product. Couple this knowledge, make sure you introduce ad requirements up front (determine which IAB ad sizes will your company will sell), and enjoy the see-saw.
(*) Scylla and Charybdis are two sea monsters of Greek mythology situated on opposite sides of a narrow channel of water, so close that sailors avoiding Charybdis will pass too close to Scylla and vice versa. – Wikipedia
