INTRODUCTION
À un moment donné de leur carrière, presque tous les concepteurs devront concevoir un ensemble de bannières publicitaires. Inspiré par quelqu’un qui m’a dit qu’ils avaient fait leur toute première bannière publicitaire, j’ai pensé qu’il serait bon d’examiner ce sous-genre du design car j’ai conçu des milliers de bannières publicitaires et j’en ai réalisé des milliers d’autres au fil des ans.
Dans cet article, je n’aborderai pas les questions telles que les types de pages sur lesquelles les annonces apparaissent ou les taux de clics, car les concepteurs ne peuvent pas les modifier. Je regarderai exclusivement le métier de concevoir des bannières pour les rendre plus attrayantes (et, espérons-le, plus cliquables).
Les bannières publicitaires doivent indiquer la page à laquelle elles se connectent
LE PAYSAGE DES bannières publicitaires
Les trois bannières publicitaires en ligne les plus courantes sont le MPU (Messaging Plus Units), le classement et le gratte-ciel, ce que j’appelle la sainte trinité des bannières publicitaires. Ils apparaissent partout sur le Web lorsque les formes s’adaptent à la largeur de la page Web (classements) ou dans une colonne individuelle (MPU et gratte-ciel). Les classements sont placés avec un MPU ou un gratte-ciel, mais les trois n’apparaissent jamais ensemble.
Les bannières publicitaires font généralement partie d’une campagne existante, de sorte que leurs ingrédients peuvent être fournis par le client, c’est-à-dire logo (s), images, direction de la copie. La clé est de combiner ces ingrédients d’une manière intéressante pour l’utilisateur du site Web dans les 2 secondes environ qu’il passe à scanner l’annonce (encore moins s’il analyse l’annonce en périphérie). Il est crucial d’attirer leur attention avec une image / un message convaincant et de rendre évident ce que vous aimeriez qu’ils fassent ensuite. Si vous plissez les yeux et qu’il n’y a pas de point focal évident dans l’annonce, il est peu probable que cela fonctionne.
Je pense fermement que les bannières doivent clairement indiquer ce sur quoi l’utilisateur Web clique. De cette façon, l’utilisateur arrive sur une page qui ressemble à l’annonce qui l’y a envoyé. Si ce n’était pas le cas, ils seraient naturellement déçus ou rebutés si cela ne ressemblait en rien à ce à quoi ils s’attendaient.
Par conséquent, je regarde généralement d’abord la page de destination lors de la conception de bannières publicitaires et je travaille en arrière à partir de là. Ensuite, il s’agit d’établir la bonne hiérarchie des différents ingrédients de l’annonce (par exemple, logo d’abord mais petit, titre suivant mais dominant, etc.). Après cela, ajoutez un appel à l’action approprié (CTA) qui se lie à la copie et énonce l’action / la réponse souhaitée. Une fois les hiérarchies de la messagerie triées, elles peuvent être appliquées aux trois tailles de bannières publicitaires individuellement.
Les éléments sont en concurrence les uns avec les autres dans la plupart des UPP en raison de la forme carrée
UPP (300×250)
Le MPU (Messaging Plus Unit) est généralement placé dans la colonne de droite la plus étroite de la page et, par conséquent, il est de format à peu près carré et de taille plus petite afin d’apparaître au-dessus du pli. Le format carré pose un problème de composition car l’œil humain aime les images légèrement plus horizontales (format paysage) ou plus profondes (format portrait).
Je pense que le mélange de logo, d’image, de titre et de CTA dans les UPA ne laisse souvent pas beaucoup de place à l’un des quatre pour former un focus de l’annonce. Cela se voit facilement dans les MPU HP et X-Factor ci-dessus où tous les éléments se battent pour attirer l’attention de l’internaute. Dans les deux cas, l’arrière-plan est simplement utilisé comme une tablette sur laquelle placer des éléments.
En revanche, la MPU CSI ci-dessus a utilisé l’image d’arrière-plan pour rassembler les éléments en les faisant émerger de l’ombre. Le pistolet encerclé, la carte de preuve jaune et les mains sur les pieds émergent également de l’ombre pour donner un ton et fournir d’autres informations visuelles à l’œil si la copie n’est pas lue.
Les titres sont l’élément central des classements
CLASSEMENTS (728×90)
La forme horizontale longue du classement peut conduire à des conceptions qui utilisent ses éléments comme une série de morceaux égaux comme dans l’exemple HP ci-dessus. Cependant, j’ai constaté que les classements ont plus d’impact si le titre est beaucoup plus grand que dans les deux autres bannières publicitaires. Cela est clairement démontré dans l’annonce X-Factor ci-dessus où même si vous scannez l’annonce rapidement, la clé à retenir est « L’avez-vous? »
Étant donné que les classements sont généralement placés tout en haut de la page, l’accent mis sur les titres se prête à la psychologie préexistante de la façon dont nous traitons les pages Web – un souvenir résiduel de la lecture des journaux et des magazines.
À mesure que les résolutions d’affichage augmentent en taille, les largeurs de pages Web rendent les 728×90 précédents de plus en plus redondants (conçus à l’origine pour une résolution de 1024 × 768). À la suite de cela, CBS Interactive se déplace pour remplacer tous les 728×90 de son réseau de sites par des 970×66 (appelés super leader). Ces nouvelles annonces sont moins intrusives pour l’utilisateur d’un site et s’adaptent mieux aux différentes pages qui ont toutes une largeur de 970 pixels. La longueur supplémentaire et la profondeur moins profonde d’un superleader se prêtent encore plus à une itération axée sur les titres d’une campagne.
Le pli coupe les gratte-ciel en deux jusqu’à ce que l’utilisateur défile vers le bas
Le gratte-ciel long et élancé a de petits titres et de grandes images
GRATTE-ciel (160×600)
Alors que les MPU et les classements sont généralement placés sur une page au-dessus du pli, le gratte–ciel est coupé en deux par le pli de la page (généralement environ 600 px vers le bas – voir le diagramme ci-dessus). Par conséquent, les informations clés telles que le logo, le titre et le CTA devraient figurer dans la moitié supérieure. L’étroitesse du gratte-ciel signifie également que leurs titres ont tendance à être petits.
D’après mon expérience, j’ai constaté que les gratte-ciel ont tendance à être placés sur des pages lourdes d’informations et légères d’images. C’est idéal pour les gratte-ciel car ils ont beaucoup plus de place pour l’image que les MPU et les classements.
Dans les trois exemples de 160×600 au-dessus des gratte-ciel a été conçu en tenant de plus en plus compte du pli de gauche à droite. Dans le gratte-ciel HP, tous les éléments ci-dessus ont reçu une importance égale et, par conséquent, il n’y a pas de concentration pour l’œil. L’annonce X-Factor a les présentateurs plus grands que dans les autres itérations de la campagne, mais le petit titre est devenu submergé par tous les autres éléments – les informations clés sont toutes en dessous du pli et rendent le fond de l’annonce lourd. Dans le gratte-ciel CSI, l’image plus grande rassemble les éléments tandis que le deuxième logo a causé un peu de surpeuplement en haut.
Comparez cette version 728×90 de l’annonce avec la 300×250 ci-dessous (voir l’annonce animée ici)
L’animation permet de diviser les éléments au fil du temps
ANIMATION
Il va de soi que l’ajout d’animation à une bannière publicitaire attirera l’attention sur elle. Une version Flash d’une bannière permet également de décomposer ces éléments au fil du temps. Dans l’Ally 728 × 90 ci-dessus, montrer le crayon complet est moins convaincant que la version 300 × 250 où l’œil attend de voir ce qui se passe ensuite.
Dernièrement, je vois beaucoup plus de boutons de relecture sur les publicités animées – sans doute parce que l’annonce a déjà commencé à être lue lorsque la page commence à se charger. Les versions statiques des annonces sont redevenues plus pertinentes car elles sont chargées en Jpeg par défaut dans des environnements où Flash ne joue pas, tels que les tablettes et les smartphones.
L’animation seule ne suffit pas à faire une bonne annonce. Il doit encore y avoir quelque chose de convaincant dans l’annonce, sinon elle vire à être comme toutes ces annonces de pointage de crédit, de régime alimentaire et de remortgage bon marché. J’avais à l’origine transformé les deux annonces Ally ci-dessus en GIF animés pour ce post, mais mon œil les a automatiquement filtrés car je (et probablement la plupart des gens sur le Web) suis tellement habitué à ignorer les annonces animées empilées les unes sur les autres.
CONSEILS DE CONCEPTION DE BANNIÈRES PUBLICITAIRES
Depuis que j’ai fait tant de bannières publicitaires, voici quelques conseils que j’ai repris au fil des ans. Excuses si elles semblent évidentes, je les dis parce que je les vois constamment non appliquées:
Copier
• Évitez toute copie en majuscules car cela rend la lecture difficile pour l’utilisateur
• Les titres et la copie du corps doivent avoir des tailles différentes pour faciliter la numérisation du lecteur
• Les titres et / ou la copie du corps ne doivent pas dépasser trois lignes
• préservez les hiérarchies des messages et tout le texte doit être aligné de manière cohérente (gauche, droite, centre)
• Envisagez d’utiliser une typographie intéressante comme imagerie afin d’économiser de l’espace en ayant un élément de moins
Call-to-Action (CTA)
• Devrait être court et au point comme « Go Now » ou « Check It Out »
• Doit être au-dessus du pli pour les unités 160×600 et 300×600 (à peu près au milieu de l’unité)
• Doit être en majuscules au début de chaque mot pour faciliter la numérisation
Boutons
• Doit être de couleurs contrastées sans paraître voyantes
• Doit être positionné vers la fin de la copie et / ou en bas à droite
• Doit être de taille uniforme tout au long d’un ensemble de bannières publicitaires
• Obtenez apparemment plus de clics que de liens texte uniquement dans les bannières publicitaires (même si ces dernières semblent plus élégantes)
Divers
• Ajoutez une bordure grise de 1px sur les annonces avec un fond blanc – il peut être placé sur une page blanche
• Pour l’approbation du premier tour, je transforme parfois les cadres Photoshop individuels en GIF animé
• Avant la soumission finale, je me lève et plisse les yeux sur l’annonce pour vérifier si elle peut être facilement numérisée
• Comme pour tout design, gagnez du temps en esquissant toujours les cadres de l’annonce
Une peau de page rassemble les bannières publicitaires en enveloppant ou en encadrant la page
CONCLUSION
Étant donné que les utilisateurs Web sont tellement habitués à voir des bannières publicitaires (et des publicités en général), de nombreux changements sont à venir. Bien que la sainte trinité de MPU, le classement et le gratte-ciel dominent le paysage des bannières publicitaires, j’ai vu d’autres tailles devenir plus courantes, telles que les interstitiels 640 × 480 (à mesure que la vidéo devient plus prédominante) et les publicités « Demi-Page » 300 × 600 qui ont un MPU plus profond pour dominer la colonne de droite. Pour une liste complète des unités les plus récentes susceptibles de peupler Internet à l’avenir, consultez la page de l’IAB sur le sujet en cliquant ici.
Pour une expérience de marque plus complète et harmonieuse, les skins de page (ou « fonds d’écran ») sont beaucoup plus utilisés sur Internet (en particulier sur IMDB) car ils enveloppent les bannières publicitaires. Nous faisons environ 900 skins par an chez CBS Interactive (téléchargez ce pdf pour en savoir plus). Au fur et à mesure que les skins deviennent de plus en plus nombreux, il y a également une augmentation des reprises de médias enrichis sur mesure qui sont particulièrement demandées dans les appels d’offres (pour en savoir plus à ce sujet, voir mon article ici). Cependant, pour les skins et les reprises de médias enrichis, il est toujours nécessaire que l’expérience publicitaire fonctionne en conjonction avec les bannières publicitaires standard sur la page et l’expérience de l’utilisateur.
ANNEXE
L’histoire des bannières publicitaires : http://en.wikipedia.org/wiki/Web_banner
Normes de l’Interactive Advertising Bureau (IAB):
http://www.iab.net/guidelines/508676/508767/displayguidelines
Le Pli: http://en.wikipedia.org/wiki/Above_the_fold
Rechercher des bannières publicitaires pour des marques spécifiques: http://www.moat.com
Résolution d’affichage de l’écran: http://en.wikipedia.org/wiki/Display_resolution
Création d’annonces DIY: http://www.building43.com/videos/2011/07/19/flite-cloud-based-advertising
Bannières publicitaires d’Adobe: http://tv.adobe.com/watch/cs5-design-premium-feature-tour/interaction-design-101-create-a-simple-banner-ad-with-flash-professional-cs5/
Quelques pages de bannières publicitaires crowdsourcées:
http://jobs.designcrowd.com/bannerad-design-jobs
http://99designs.com/banner-ad-design/contests
http://www.crowdspring.com/banner-ads/
Certains sites de conception de bannières Web bon marché (et surpeuplés):
http://www.justgothere.com/web_banners/web_banner_example/300x250_web_banner_example.htm
http://www.decentbanners.com/portfolio_300x250.html
http://www.banner4five.com/business_banners_300x250
