What s the Bite? Why is this Important? Banner 101

Transcription

1 A Guide to Display Advertising What s the Bite? Why is this Important? Display ads are fundamental to advertising - we ve all heard of them, but what are they, exactly? The definition of display is to exhibit or make something visible, and display ads are doing just that with our brands. They are one of the best ways to increase visibility, engagement and reach a wide audience at a low cost. But, how do we ensure that our display ads are standing out above the rest? We ll explore the latest technologies, industry considerations, best practices, and close out with some great examples to leave you inspired. Banner 101 Simply put, a display advertisement - commonly known as a banner ad - is a form of advertisement on the web. Banner ads generally have one of two purposes - they either engage with a call to action (CTA) driving users to do something, or they inform within the banner itself. AT&T launched the very first banner ad in % of people clicked on this ad. How s that for a CTR?! We ve come a long way since then. Today we work with three types of banner ads: static, animated, and rich media. A static banner is the simplest, with no animation or interactivity, but the goal is still to get people to click. The file size is typically smaller and the ad itself is not interruptive, but it can also be argued that a static banner gets lost on a page and lacks user engagement. An animated banner begins to incorporate movement and the ability to a convey a larger depth of information. As the banner runs though a number of frames with rotating images, animating text, etc., the ad can more easily tell a story and grab attention. A rich media banner is a highly interactive ad that may include video, audio, games or other elements that may entice a user to engage in and interact with the content of the ad. 2 While this type of ad may also include animation, the interactivity is what defines a banner as rich media. While most rich media banners were built using Adobe Flash in the past, HTML5 is now the more compatible and accepted option. Even though healthcare ads often have many in-ad functions that seem like rich media (i.e., overlays, terms and conditions buttons, auto-scrolling ISI), these functions only require our media partners to buy animated ad slots, not rich media slots. Saatchi & Saatchi Wellness 1

2 A Guide to Display Advertising What the fuck is HTML5? How is it different from Flash? All rich media banners were previously done in Flash because that was the only option. Now, almost anything that can be done in Flash can also be done in HTML5. Although there are a few limitations with HTML5, such as file size and using custom fonts, the many pros outweigh the cons. At it s core, HTML5 is made up of three components. HTML (the structure), CSS (the styling & presentation layer) and JavaScript (the brains controlling action and behavior) all work together to form HTML5 code. Combined, these components provide a lot of freedom to execute creative ideas. 3 Why the switch? What s in it for me? To view Flash content, it s required to have the Flash Player software installed on your computer. Software has to be regularly updated - both by the software company and the end user - and is prone to vulnerabilities and security flaws that would allow viruses on your computer. HTML5 is code that runs within a web browser so additional software is not required. This means that HTML5 is safer. Because of these safety concerns, popular browsers are either disabling Flash or pausing Flash banners by default, lessening the effectiveness of a Flash banner. This also requires the banner to include a static backup, typically the final frame, that will display if the full ad cannot. On the other hand, an HTML5 banner works on all (modern) platforms, all (modern) browsers, and all (modern) devices, giving your campaign the widest reach. If someone is using an older browser that does not support HTML5, they will see a static fall back ad instead. Advertising in a Multi-Screen World You can have ads in any browser, ads in apps, ads on watches, really, ads everywhere. Mobile ads display in browsers just like they do on desktop. They may be seen at the top and bottom of websites, or within a website article itself. Keep in mind that the user may accidentally tap them. To mitigate this, it s suggested that only part of the banner be hot (tappable). Be sure to explore available interactions such as touch, tilt and shake. Another opportunity is to use click-to-call or text functionality as a part of the ad. Being on a mobile device, whether it s a phone, tablet, or watch, means you can also leverage location and dynamic content to make the display ad highly relevant. Saatchi & Saatchi Wellness 2

3 A Guide to Display Advertising But most important for mobile is to keep speed and file size in mind. If the file is too large and loading slowly, the user may move on before the ad is fully loaded. As more devices types come out, more ad formats will too. Watch Out: Responsive Design is Taking Over Ads Too As with the web, there s no longer such thing as designing for 1 or 2 screens. Content must be designed for all screens, from tiny watches to large tablets and soon, big screen TVs. And just like responsive web design allows for content to be resized and presented differently based on screen size, responsive ads resize to fit the space available. 4 This, combined with HTML5 being available on all devices, means your ad can reach more and more people. Right now only Google AdSense supports responsive ads, but look out for other ad networks to start incorporating this soon. Pharmaceutical Industry Considerations There are a couple of ways to handle regulatory mandatories. For ISI, there are a few combinations: the ISI can always be visible or appear only on the final frame, and it can either be static or auto scrolling. Terms and Conditions and Study Descriptions can either appear as a link that opens a small overlay on top of the banner or link out to the appropriate section on your website. Links to the Prescribing Information and Medication Guide should open their respective PDFs. In case a device doesn t support HTML5, such as an older browser, pharmaceutical banners require a static backup that is unbranded, since the ISI will not be interactive. And as always, your regulatory committee will make the final decision on all of these elements. Saatchi & Saatchi Wellness 3

4 A Guide to Display Advertising OK, I m on board. Where should I start? The first thing to think about when we design and test a banner ad is we re looking straight at it. Website visitors are there for the site s content and may ignore your ad. To help your ad stand out, see design tips below and always work with your UX and Tech teams for additional guidance. ART Keep the animation engaging and eye catching, but not telling a story that must be followed frame by frame to be understood - it s not a slideshow. For expandable ads, the goal is to get people to click to expand the ad to get your message. What s the best way to do that? Think of it is as designing click bait. For non-expandable ads, the goal is to get people to click through to a web page. What s enticing? Successful banner campaigns tend to use captivating, eye catching visuals and copy as the focal point of the ad, while the logo tends to be the smallest element Use a clearly defined frame - full bleed color with a subtle border, or a 1px gray border for white backgrounds Fonts Do: make the headline and body copy different sizes 5 Do: consider legibility before using cursive, decorative or extremely thin fonts, or all uppercase copy Don t: use smaller than a 10pt font (if needed, a footnote can be 8pt) 5 Do: use a web safe font when using live/dynamic text Make sure your animated ad has a replay button either permanently in place or on the last frame We design some ads with AdChoices links; the logo is usually in a corner so keep placement in mind when doing layouts COPY Keep copy short and to the point - how can you showcase your brand in the least amount of words? CTA BUTTON Should be a standout focal point on the banner Place it after copy in tasteful, contrasting colors Should be in a consistent location throughout the ad (even during animations), and if possible, across ad sizes (for example, always in the lower right) Use copy that clearly tells the user what will happen next, and why they should follow through - Download Your Card or Learn More instead of Click Here 6 FINAL FRAME Your final frame should act as a summary screen for viewers who may have missed any animation A good rule of thumb is that your final frame should be able to stand alone as a static ad TIMING To calculate timing for each frame, assume readers need at least 1 second to read 3 words. Saatchi & Saatchi Wellness 4

5 A Guide to Display Advertising Ads That Inform These ads are all about brand awareness and education. With a lower commitment CTA, the goal is to entice the user to want to find out more about the product or brand. EXAMPLES Now, lets take a look at some of these guidelines in action. We ll show you some great ads that inform, ads that drive and some that are just plain fun. Ads That Drive These ads communicate exatly what they want the user to do next, and they do it fast. They generally have a higher commitment CTA button, enticing and driving the user to purchase a product, or download a coupon, etc. Ads That are Fun While not always informing or driving as strongly as the previous categories, these ads do think outside the box. They can still feature a strong CTA, but the main purpose is to keep the viewer engaged and interacting with the content of the ad. Saatchi & Saatchi Wellness 5

6 A Guide to Display Advertising ADS THAT INFORM Saatchi & Saatchi Wellness 6

7 Rich Media - Auvi-Q This text message concept brings a contemporary feel to the ad and plays on an interaction that is already familiar to mobile phone users. It s a novel idea to pull the user into a lot of content. The key is to entice the user to make that first click to expand the ad and start the animation. If it s not clicked, the important messaging within the ad will never show. Once clicked, the ad animates on it s own so all the user has to do is watch.

8 Informative, Quick to the Point - Nokia Lumia This Nokia ad quickly gets to the point. There is a swift but very simple animation on the products, and then the text fades in to complete the final frame. If the animation was missed, the final frame contains all of the information the user would need to find out more.

9 Rich Media - Humira Ad expands on click This rich media ad expands on click and presents the user with a simple interaction that pulls the user into the message. The artwork remains the same until the final frame where the key messaging and CTA appear.

10 Simple Interactions - Lipton Lipton s banner is interactive but still simple. Users can choose to interact with the ad as little or as much as they d like by typing in different letters of the alphabet. When they do, a short animation is played for each letter. If users choose not to interact and no action is taken, the final frame will display after a certain amount of time has passed. This approach works well for an awareness campaign. Frame 1 S T A U Final Frame

11 ADS THAT DRIVE A Guide to Display Advertising

12 A Clear Seller - Fitbit There s a lot to like about this Fitbit ad. The product image, logo and CTA remain static for the duration of the ad. The text animates, but stays consistent at the same time - 2 lines, 3-4 words - very simple and each frame can stand alone. The final frame reveals the product name and price; the necessities of the ad. And best of all, there is a subtle replay icon in the top right corner.

13 Simple & Effective - HUMIRA The animation here is simple, but effective and eye-catching without being overdone. Even if the user missed the changing text, the photo change gives them a hint as to what it was. The final frame has a memorable tagline with an actionable CTA that stands out in color. Even with ISI included, the message is still clear, simple and actionable. This final frame can also successfully stand alone as a static ad. If the animation is missed or unavailable, the user still gets enough information to know what to do next.

14 CTA Button - RELPAX Visit RELPAX.com is a better CTA than Click here because it tells visitors exactly where they re going. Also, since clicking only applies to devices that use a mouse, a descriptive CTA is more mobile and tap friendly. Sometimes, a simple approach can work just as hard, if not harder than a complex execution, and be just as effective.

15 Simple (and Cute) Animation - NexGard Who can say no to a dog? In this NexGard example, there is a lot of great consistency between frames. Many of the design elements stay in place while the text animates in and out. At the end there is a friendly final frame with the main selling point and a bright CTA to find out more.

16 BOLD! - Nike Nike grabs attention with this bright and bold ad. The consistent logo, background and product name provide a simple frame for the animation and CTA. The button has clear, descriptive language so the user knows what happens next.

17 Easy to Read Animations - Auvi-Q The copy builds with each frame to tell a simple story. While the text is changing, the rest of the banner stays the same, focusing your attention on the message. There is also a persistent CTA that remains in the same location for the duration of the ad.

18 Clean & Simple - Weebly The white space in this weebly ad keeps the design simple but lets the content POP. The bright blue weebly logo and the CTA button stand out well against a clean background.

19 A Guide to Display Advertising ADS THAT ARE FUN! Saatchi & Saatchi Wellness 19

20 Fun For No Reason - Pringles Click Frame 1 Frame 2 Frame 7 Frame 24 Frame 25 Frame 30 Frame 64 Frame 95 The concept is simple on this banner - keep the user clicking. The phrase changes with every click and forms a short storyline, keeping you clicking through to the end for a great payoff! Who made it through 95 frames, Shruti or Lauren?

21 Complex Interactive - Ikea This Ikea banner can be dragged to any size on the screen. Once resized, the space will fill with Ikea products plus a link to Ikea s website. This approach really pulls users into the ad and allows them to spend time with the brand.

22 Complex Interactive - Volkswagen This VW ad is fun AND drives (no pun intended). The puzzle drives engagement and, once solved, the final frame appears with a clear CTA. As a bonus, the logo and super simple messaging remain consistent throughout the ad.

23 A Guide to Display Advertising References what-is-it About the Authors Shruti Goins is a User Experience Designer at Saatchi & Saatchi Wellness. With a Masters in Human-Centered Design and Engineering, she has a passion for delighting users with seamless interaction design. When not working in the office, she can be found knitting in front of the TV. Lauren Wallimann is a User Experience Designer at Saatchi & Saatchi Wellness, helping brands put their best digital foot forward. When not nerding out over all things web, Lauren can be found with a good book or watching The Big Bang Theory on repeat design-tips-for-more-clickable-banner-ads/ 6. Resources Post-Flash Banner Design Best Practices Google s HTML5 Workshop Video Rich Media Gallery by Google Yahoo Gemini AdSpecs Guide to Ad Sizes Saatchi & Saatchi Wellness 23