The Art of Doing HTML5 Ad “Just Right”

We’ve all been impressed by very fancy html5 ad. Too fancy I would say that makes users completely lost along the way. When there is only so much attention users can give to an pop-up ad, getting right to the point but doing it with style is the key. See how Audi A1 html5 swiftly did it.

News

The place for insider news, here promises you first hand scoop, fast and fresh.

The Art of Doing HTML5 Ad “Just Right”

In Opinion September 20, 2012
We’ve all been impressed by very fancy html5 ad. Too fancy I would say that makes users completely lost along the way. When there is only so much attention users can give to an pop-up ad, getting right to the point but doing it with style is the key. See how Audi A1 html5 swiftly did it.

 

5 Tips to do HTML5 Ad “Just Right”

#1 One Task at A Time

Conventional wisdom in advertising still holds true for HTML5 ad. Whether it’s a branding campaign, product launch, product promotion or event promotion, don’t squeeze everything inside an ad. The purpose or message has to be direct and clear to the audience.

For the Audi A1 ad, the task is very clear. The objective is to recruit participants for A1′s big launch party and the task of the ad is to announce and get people sign up for the event. We did just that, only that.

If you want a mobile solution to fulfill more complex tasks, a native app should be considered instead.

 

#2 Clear Call to Action

Clear Call-to-Action messages were spread throughout the A1 HTML5 ad to help audience make sense of the navigation. Beginning from the loading page, which shows A1 in action, the ad is deliberately designed to attract the potential participants selectively, who are most likely to be interested in the car launch party. The sign-up procedure is made easy to follow when they see the “Join Us” button.

 

#3 Device-Optimized UI

Tap. Swipe. Spin. Full advantage of the iPhone’s functionality was taken to create compelling and unique interactive experience. To successfully get more people to sign up, the user interface is as intuitive as how we would have created for an native iPhone app.

 

#4 Attention to Design Elements

Heavily-loaded interactivity and media content may create confusion and the danger in appearing to be generic. So we paid special attention to design details in order to better differentiate the A1 ad. Through various design elements, we can also inject a teensy-weensy sense of humor (too bad we haven’t figured out a way to incorporate humor into functionality.)

 

#5 Ad in a Hurry

Putting ego of creative people aside, how much time do you think a regular person would want to spend on an ad? Especially one that pop up while they are searching for the next movie showtime available or a table for dinner at peak hour? Is it really realistic to think that they will put down whatever they’re doing and read through an interesting and exciting interactive catalogue?

From our experience, the most effective HTML5 ad would be one that doesn’t only carry a clear subject matter, hitting audience right away, but one that’s quick to be completed and let them get back to their business.

In the case of A1, we have created an ad that was eye-catching, straightforward and guided audience to sign up within a matter of seconds.

 

To see for yourself, load up A1 HTML5 banner here on iPhone.



Tags: ,