Search the site
What we do
Little Springs Design is a mobile product, research, design, and usability testing consultancy. We help wireless operators, associations, manufacturers, and application & website providers with product and UI design, patterns, training, research and strategy.
Contact us today.
Downloads
Sign up to get a free copy of our Mobile Widgets Whitepaper or almost-monthly newsletter. Or buy mobile Java or web design guidelines.
Recent blog entries
Blog topics
Blog archives
Design pattern of the week: interstitial ads
This post is part of a series on mobile user interface design patterns, excerpted from Designing the Mobile User Experience, John Wiley & Sons, 2007. The first set of patterns will address advertising on the mobile.
Interstitial advertisements appear between screens within a mobile application. They are, in essence, a dialog box painted on top of the content of one screen before the replacement screen is displayed. They are excellent for branding. Click-through rates will tend to be low, since the user is being interrupted while attempting to achieve a goal, but studies show that retention is high.
Design
Implementation of an interstitial ad varies with platform capabilities. An ad usually has some sort of call to action, usually in the form of a link to a web site. Ensure that the advertising site is as well-designed as your application, or all advertising will fail.
Interstitials should be used sparingly. Display an ad only the first time the user accesses a piece of content, not every time. Display an ad between every four or five messages, photos, or news stories, not between every pair.
| Platform | Implementation | Rationale |
|---|---|---|
| Web - no scripting | Avoid interstitials. | An interstitial ad must be displayed on a separate page, with separate HTTP/WAP requests and significant rendering. This can introduce a delay of half a minute or more. Use a banner instead. |
| Web - with scripting | Create page with ad image embedded, using approximately 60% of the screen. Focus is on the image. When the user clicks the image, the associated link is followed. When the user scrolls off the image, set the CSS style for the ad to hidden using scripting. | At the bottom of all the advertising site web pages should be a link to return to the original, sponsored, site.
Mobile browsers have only one window available, so a pop-up window doesn't work. Using CSS allows in line display of the ad with the ability to dismiss it quickly, without any additional requests to the network. The image should provide enough of the surrounding page to ensure that users know it is a "pop-up" ad and not visiting the wrong page. |
| Applications - Nokia style softkeys or stylus | When the user clicks on something that triggers an ad, display the next screen with the ad in a floating window. Include a dismiss button and a Link button in the ad, as well as commands within the Options menu.
Display the ad as a dialog box, with contrasting color from the balance of the screen. Include two buttons in the dialog box: "Skip" (takes the user to the originally intended content) and If the user takes no action within five seconds, dismiss the ad and proceed to the application content. Save the application's state so the user can return to the same point with no loss of information or navigation. Dismiss the ad in 5 seconds if the user has not interacted with the application during that time. |
Buttons on the screen can be easier to access than commands in the options menu if the device has a Select button. Replicating the commands in the Options menu supports both mental models and both device implementations.
The main goal is to interfere with the user's task as little as possible while ensuring advertising content is viewed. Prominent "Skip" controls enable this. The cost of visiting the ad should be as low as possible without interfering with the main goal. Buttons provide rapid ad link availability, with some customization to engage in more of a dialog. Saving the application state helps ensure the user is not punished for allowing the ad to take over the only window on the device. |
| Applications - standard softkeys | The same as the Nokia implementation, but with no commands in the Options menu and no buttons. Instead, the left softkey should be labeled "Skip" and the right "Link" or something similar. | Softkeys are very quickly accessed and require no scrolling or cursor manipulation. |
| MMS | Require user to respond with single letter or word, or simply send content message five to ten seconds later. |
The ad content itself should follow standard best practices. It should engage the user and be relevant to the market. The amount of information should be limited to roughly what a highway billboard would support.
When Used
Interstitials are good for branding purposes, such as "Sponsored by Coke", as well as advertising with minor interactivity.
Avoid using interstitials when the user is paying high per-megabyte data charges. This can be inferred based on type of application: if the application already uses relatively high bandwidth, a few extra images will not be relevant. On the other hand, an application that synchronizes a few data fields but largely works offline may be used by people with costly data plans.
Rationale
Well-designed interstitials give a good view of the advertising content, and get out of the user's way quickly. This is a compromise between both.
By restricting the frequency of advertisement, the user can not simply take the habit of a second keypress to get to content quickly, as that keypress will do something different depending on whether an ad or actual content is displayed.
No Comments »
No comments yet.
RSS feed for comments on this post.