Design Pattern of the Week: Fisheye 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.

Many applications have lists of content, including email messages, local listings, and news stories. Scroll-and-select devices facilitate changes to the visual presentation based on cursor position, much like rollovers.

A "fisheye" ad appears with focus (highlighting) on a phone, generally within a list. The term "fisheye" comes from a type of camera lens that works similar to the human eye, with more detail in the center of the image and less detail in the edges. A fisheye user interface has the items in focus grow and items out of focus shrink, possibly having the size be an inverse function of distance from focus. Thus a true fisheye interface for a list would have one item in the middle of the screen, with four or five lines of data, a two-line item listing above and below, and all other item listings as one line. This type of interface is best used for situations in which the user needs to get an overview of the data as well as focusing on specifics.

However, the technique can be used less rigorously for advertising, allowing sponsored items to grow and provide more data.

Design

A fisheye ad, illustrated in Figure 6.8, should be based on the highlighting scheme for a list. It needs to feel like a natural extension of the list, and the context of the list must be maintained. For these reasons, the advertisement should be:

• twice as tall as other items in the list
• centered vertically on the middle of the list item, with half of the preceding list item and half of the succeeding list item visible
• the same horizontal width as the highlighting for the underlying list

Figure 6.8. A fisheye ad is a space-efficient method of highlighting premium results. Premium listings get extra space when highlighted, including special formatting and optional graphics.

The content of the ad can be text-based or graphic-based, but must maintain key parts of the underlying list item.

In general, highlighting can cause a one-line abbreviation of content to expand into two or more lines of text or graphics, either moving content on the screen further down, or appearing over other content. The "appear over" approach is likely better. Having parts of the screen move outside the control of the user causes confusion (and irritation) due to the unpredictable movement of content.

If the first item in the list has a fisheye ad, move the content below the ad down by one line upon screen display. When the user scrolls off of the first item, revert to normal display. Do not change back to the shifted content even if the user scrolls back up to the first item.

Consider whether the target of an item highlighted by a fisheye should be different than the standard items. The answer varies with situation.

Applicable Devices and Platforms

Web with scripting and application platforms on scroll and select devices.

When Used

A fisheye advertisement must somehow highlight a specific item in a list, usually a search result. This is akin to yellow pages advertisements in-line.

To make the advertisement special, no more than approximately 20% of the listed items should have an ad. In a static environment like paper yellow pages, this means limiting the number of ads sold. Listings such as movies, particularly with dynamic filters, provide a more interesting environment in which to sell.

Rationale

A fisheye ad provides space-efficient but highly visible advertising to premium listings, opening up streams of revenue for an application without costing user experience.