• Advertising

Problem

You must place advertising into an application, site or other service.

Advertising is heavily used, in all aspects of mobile from SMS all the way to being integrated with the device OS.

Solution

Many sites, applications, and even entire mobile services are ad sponsored. If required to place advertising into a product, you must not try to hide them away, nor make them so prominent they damage the user experience. Generally, advertising is key to the business, and must be made as a necessary function of the product. Integrate advertising correctly, and well, or the product will go out of business.

Advertising in mobile must be:

• Clearly differentiated from the content.
• Clear, readable, legible and interactable.
• In the same place, and used in the same way, on each screen and in each state.
• Unobtrusive enough to not interfere with the interaction of the actual product.
• Easily actionable, so users can take advantage of the offer.

Variations

While numerous graphic variations are possible, you really only need to consider two key methods:

• Ads may be loaded within the content of the page, so they scroll with the page. These are usually near the top and bottom of any particular page, associated with the masthead/title and any links or functions in the footer. For very large pages, there may be additional advertising at key breaks in the middle of the page as well.

• Ads may, alternatively, be docked, or fixed in the viewport. This is an especially useful solution for applications with multi-tier access, where payment removes the whole layer. The rest of the screen scrolls as normal, but this element is locked to the edge of the viewport, much like a Fixed Menu.

Advertising in text, such as information appended to an SMS, is not discussed here but the basic principles still apply.

Interaction Details

Your advertising should always be selectable, so the user may get more information or purchase the product. Make sure this link loads in such a way that it does not interfere with the existing process, such as by opening in a new browser window, or launching the application store.

For tiered services, which an ad is displayed for low-price or free access, you should provide a link immediately adjacent to the ad which allows the user to upgrade to the paid, ad-free version.

When designing for scroll-and-select devices, avoid placing advertising so the user must scroll past it to get to the actual functions or content.

Presentation Details

You must become familiar with the standards of advertising. Banners should always display in standard sizes. Ad providers can then use existing ad units, and do not need excessive productions details, as they can follow standards published elsewhere. In most cases, you can just follow the sizes and other specifications published by the Mobile Marketing Association (See http://www.mmaglobal.com/mobileadvertising.pdf for details).

Only for very large devices, especially tablet-sized devices, will you need to use other sizes. These will often be provided by others (such as ad services) or the smaller common desktop sizes can be used instead. Of course, the MMA tries to stay on top of trends, so will continue to expand their offerings over time.

Display the ad in a manner that clearly differentiates is from the actual page content. There are three basic ways to accomplish this:

1. Place the ad on a shaded, tinted or colored background. Usually, the background should extend the full width of the page.
2. Separate the ad from the rest of the content with rules, which must run full width, or a closed box larger than the ad.
3. If the ad is slightly smaller than the screen width (by using one size smaller than the suggested size for the screen) use different alignment than the content. If content is left aligned, right align or center the advertising.

When your ad is in a docked area, it should usually be docked at the bottom, and is considered to be one layer above the content. Revealable Menus will overlaps the advertising when open. The ad may be placed at the top when fixed menus are used, or when closed reveal menus would interfere with display. Advertising may be seen as a strip immediately above a Fixed Menu, and this can work, but can become cluttered, and runs the risk of accidental activation.

Advertising may be integrated with the content, such as in a list of results. The advertising should not be counted as a line item, so will not be numbered or included in result totals, and should use the guidelines covered in the rest of this pattern to visually differentiate from the rest of the content. Typical uses of this are to have the first and last items in a page of results be sponsored.

When you display advertising in a list of other items, consider the available space and do not overload with content. While three sponsored links above a list may be acceptable in a desktop, or large tablet, it may be totally unsuitable on a small handset. The small viewport can also be used to add additional ad spaces; an extra ad can be provided in the middle of the same list. Interrupting about every 1-1/2 screens can provide a useful break to the scrolling.

The ability to select the ad should be clear. Provide a link or button in the ad, whenever possible. If there is insufficient room, use the current interactive standard method to indicate a link, such as underlined text or a border on the image.

Antipatterns

Mobile is generally so task focused that failures in advertising -- that make it too obvious or confuse it with the content -- may cause immediate loss of customers. Even casual activities like gaming generally draw the focus of the user, so an overly-intrusive ad will result in dissatisfaction. Follow the guidelines here (and at the MMA).

When conducting user research, be sure to include real ads and do not carefully pick them to match the design. Borrow from competing sites if needed, but get realistic advertising or your test will be invalid.

Do not make ads too large, so the content is difficult to read. This is especially key for small screens using docked advertising space. If this could be a problem, then switch to the in-line style.

There is almost never a reason to place a text label such as "advertising" next to the banners. This should be able to be communicated with design. If not, fix the design, instead of wasting space with labels.

You should almost never animate advertising. This will distract from the core content of the application or other process. If absolutely required, use animation very carefully, and sparingly.

Make sure advertising in scrollable areas does not induce "false bottom" errors, and make the user believe the end of the page content has been reached prematurely.

Do not use custom sizes for any banners. Advertisers will generally not go to the effort of making new sizes. All services you sign up for require abiding by their guidelines, so your revenue base will be severely limited.

Next: Page-Wrapup

Discuss & Add

Please do not change content above this like, as it's a perfect match with the printed book. Everything else you want to add goes down here.

Examples

If you want to add examples (and we occasionally do also) add them here.

Developer Tools

Saw these guys present at MoDevEast in December 2011. https://developer.millennialmedia.com/Application/index.php?env=prod#developerHome Yes, some is just selling their platform, but they also have some good general tips, and regular reports on the state of the market that are useful for anyone.

Make a new section

Just like this. If, for example, you want to argue about the differences between, say, Tidwell's Vertical Stack, and our general concept of the List, then add a section to discuss. If we're successful, we'll get to make a new edition and will take all these discussions into account.