Problem
Ads are required... for business needs etc.
Solution
Many sites, applications, and even entire mobile services are ad sponsored. These ads must be neither hidden away, nor so prominent they damage the user experience. They are a key, necessary function of the product, and must be integrated correctly and well or the product will go out of business.
Must not be confused with the content.
Must be always the same place on every screen in the app/site/process.
that lots of products are ad supported; without doing this right, the app/site will go out of business.
Should be able to hide, cancel, skip without making the mistake of clicking the ad.
Variations
In context (with the content of the page, so it scrolls) usually at the top and bottom of a particular page.
Fixed in the viewport. Especially for multi-tier apps, where payment removes it. Rest of app scrolls but this is locked to the bottom of the viewport for reveal menus, where the menu overlaps it when open. Often at top for fixed menus or when closed reveal menus would interfere with display.
Interaction Details
Can click it. Should load so that it doesn't ruin the primary process.
Provide a way (when the business model works like this) to buy the app to remove ads, in context with the ad, such as text immediately adjacent to the ad.
Presentation Details
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, the sizes and other specifications published by the Mobile Marketing Association will work (See http://www.mmaglobal.com/mobileadvertising.pdf for details).
NON-FLOAT IMAGE
Only for very large devices, especially tablet-sized devices, will other sizes be used. These will often be provided by others (such as ad services) or the smaller common desktop sizes can be used instead.
The ad must be displayed in a manner that clearly differentiates is from the actual page content. There are three basic ways to accomplish this:
- Place the ad on a shaded, tinted or colored background. Usually, the background should extend the full width of the page.
- Separate the ad from the rest of the content with rules, which must run full width, or a closed box larger than the ad.
- 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.
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... Don't do it badly!!!...
Make sure banners have sizes specified and accounted for in the page layout. Especially for web, it must not suddenly load well after the rest of the page, then push other content down...
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.
Avoid saying "advertising" -- should be able to communicate this with design. If not, fix the design, don't just waste space with labels...
Should almost never animate. Will distract from the rest of the experience. If absolutely required, do so very carefully...
Do not use custom sizes for any banners. Advertisers will not go to the effort of making new sizes, and all services require abiding by their guidelines, so your revenue base will be severely limited.