attachment-5282bd8ee4b0b04b540ec9eb

One of the trickier things about designing rich media ads is fitting content and messaging into the small real-estate of a display ad. All too often the outcome is a very barebones ad that begs users to click through to receive any actual information.

To get past the click through barrier, you can make an ad interactive. But the challenge then becomes actually getting users to engage with said interactive ad. And just because an ad is interactive, it may not be seen as safe to click on. If users don't want to click off to a different site, they wont click at all unless they're confident their not about to be disrupted.

That's where navigation systems come in.

Using a familiar UI pattern tells users, "This ad is safe to play with." When applied correctly, using common navigation UI patterns can boost both the amount of content or storytelling within the ad, and also the user's willingness to engage at all.

Here are 5 of the most common and effective.

The Carousel

This is a simple way to expose multiple peices of content to a user. The linear flow from frame to frame can be used to tell a story, or inform a user with a series of peices of information before presenting a call to action.

Carousels also reduce friction to extended interaction by requiring very minimal mouse movement to scroll through a lot of content.

The Gallery

A sibling to the carousel, galleries give some indication of what content is to come through small thumbnails. Great for simple, graphical frames, or to expose users to how much content is available to browse within the ad unit.

The Tab Set

Using a tab set provides a very familiar navigation pattern for users to follow. Tabs benefit over Galleries and Carousels in that they're easy to label with text. This can be a benefit—for example, tabs titled "Videos" tend to perform well—or a deterrant. A poor word choice for a tab title, or too many tabs, can result in a cluttered ad with wasted content.

The Slide-Over

Having a panel slide in to offer more information can be a clean and simple way to double your ad real-estate. Make sure the panel has some kind of obvious icon that shows it expands. 

A more complex version of a slide-over is an accordian navigation, which uses multiple sliding panels that allow users to expand the content anywhere in the stack.

I'm not sure if this has an official name, so I called it the slide-over. If you know, please leave it in the comments!

The Grid

Perhaps not as popular as other navigation styles in this list, the grid offers. The grid creates a novel visual effect of sliding between different elements of content in all directions. Like the gallery, thumbnails can intrigue users to explore the ad.

Hotspots

Using hotspots can be a fun way to create an interactive experience on top of a product shot or inforgraphic. They keep the presentation of the ad clean and visually-driven, while offering more information on click or mouse-over. Don't under-estimate this navigation styles like this which play to the user's enjoyment of discovery.