Comment Peggy Olson concevrait pour l'interactif

À l'ère de Mad Men, les spécialistes du marketing savaient exactement comment leur travail serait consommé. Le public cible verrait l'annonce à la télévision, l'entendrait à la radio, la verrait dans un magazine ou sur un panneau d'affichage, et peut-être arriverait-elle dans la boîte aux lettres (escargot). Si vous avez planifié une annonce imprimée ou un envoi postal, vous connaissiez la taille exacte de l'immobilier pour lequel vous conceviez et vous avez optimisé votre annonce pour qu'elle s'adapte à cet espace. Le consommateur verrait ce contenu exactement comme vous l'aviez imaginé lorsque vous l'avez conçu.

Si Peggy Olson concevait une publicité aujourd'hui, elle devrait tenir compte du contexte dans lequel cette publicité serait vue et de la manière dont son public cible interagirait avec elle. Il n'y aurait aucune garantie que son travail serait vu de la façon dont elle l'avait imaginé, elle aurait donc besoin d'optimiser sa mise en page et sa conception afin qu'elle ait un impact, peu importe la façon dont elle était vue. Elle devait s'assurer que l'appel à l'action (CTA) était clair, concis et déchiffrable, même sur un écran de trois pouces.

Concevoir des pages Web, des pages de destination et des e-mails est aujourd'hui beaucoup plus compliqué qu'à l'époque de Mad Men. Aujourd'hui, vous avez la dimension supplémentaire des éléments interactifs et ne savez pas sur quel appareil le contenu sera visualisé. Une mise en page qui semble parfaite sur un écran d'ordinateur pleine grandeur peut être un gâchis complet lorsqu'elle est visualisée sur une tablette ou un téléphone intelligent. Un CTA peu clair ou placé au mauvais endroit peut tuer votre taux d'engagement.

Trois bonnes pratiques clés en matière de conception interactive

La plupart des consommateurs d'aujourd'hui ont la capacité d'attention d'un moucheron. Vous avez environ deux secondes pour les accrocher lorsqu'ils accèdent à votre contenu avant qu'ils ne décident de cliquer ou non sur quelque chose de plus intéressant. Il est impératif que vous compreniez ces trois concepts lorsque vous concevez un e-mail, une page de destination ou une page Web :

1. Comment la mise en page affecte l'engagement : découvrez comment mettre en page des éléments sur une page pour un engagement maximal
2. Comment le contenu affecte l'engagement : sachez ce qui m'obligera à interagir avec votre contenu
3. Quelle est l'importance du temps : vous avez deux secondes pour attirer mon attention

Cela semble simple, non ? Si c'était aussi simple, je n'écrirais pas ça ! Je ne peux pas vous dire combien de contenus je rencontre quotidiennement qui me frustrent au point de simplement appuyer sur le bouton Retour. Je parle de grandes entreprises avec des poches profondes, mais aucun sens du design.

Alors soyons pratiques. Lisez la suite pour quelques conseils très simples qui vous aideront à optimiser vos mises en page pour l'engagement sur n'importe quelle plate-forme.

Comment l'œil parcourt une page

La première chose que vous devez comprendre est la façon dont l'œil humain suit un élément de contenu. Lorsque j'étudiais la publicité à l'université, on nous a dit que l'œil suivait une page sous la forme d'un Z majuscule, commençant en haut à gauche. Je suis sûr que cette théorie a été conçue par une étude dans laquelle un sujet de test examinait des éléments de contenu tandis qu'un type en blouse blanche essayait de dessiner le motif des mouvements des yeux sur un morceau de papier. C'était bien avant la technologie de carte thermique désormais largement disponible qui est utilisée pour voir comment les gens suivent les pages consultées en ligne. Et, attention, les gens scannent les imprimés légèrement différemment du contenu en ligne.

Le consensus de nos jours est que l'œil suit un motif en F majuscule lors de la visualisation d'un contenu en ligne, commençant toujours en haut à gauche. Votre œil suit normalement horizontalement la barre supérieure du F d'abord, puis la deuxième barre du F, et enfin de haut en bas la tige verticale du F.

Qu'est-ce que cela signifie? Cela signifie que votre CTA doit être quelque part dans ce modèle de F majuscule, ou vous devez mettre une moustache sur un bébé. Prenez une décision de conception consciente pour placer votre CTA principal à un endroit où il attirera l'attention du spectateur dans les deux premières secondes.

De vrais désastres de conception

Jetons donc un coup d'œil à un véritable désastre de conception qu'un de mes collègues d'Act-On m'a aidé à créer. Je suis désolé de dire que l'exemple ci-dessous est tiré d'un contenu réel que j'ai rencontré en ligne. J'ai utilisé une société fictive appelée Actomatic pour démontrer les erreurs les plus courantes que les gens commettent et comment les corriger.

Exemple 1 : Ne me faites pas défiler pour voir le CTA

L'occasion manquée la plus courante que je vois est un élément de contenu sans aucun moyen de partager ou des boutons de partage qui sont enterrés au bas de la page sous le pli. Le pli est cette ligne imaginaire au bas de votre écran. (Le terme vient de l'époque où les journaux étaient pliés en deux ; "au-dessus du pli" était un meilleur placement, avec un meilleur lectorat.) Sur un écran d'ordinateur portable de taille moyenne, le pli peut être de 480 pixels à partir du haut de l'écran, mais sur un iPhone, il peut être à 100 pixels du haut. Soyez conscient de cela lorsque vous mettez en page le contenu de votre page.

Si nous parlons d'un blog ou d'un article de plusieurs pages, je me risquerais à deviner que la plupart des gens sont prêts à partager après avoir lu le titre (si c'est bon) et les deux premières phrases d'un contenu, car ils veulent être le premier à sortir de la porte. Les gens aiment partager du contenu frais, pas du contenu qu'ils ont déjà vu partagé cinq fois par leurs pairs.

Je suggère d'avoir des boutons de partage en haut et en bas du contenu, ou des boutons de partage qui flottent à côté du contenu lorsque vous faites défiler.

J'ai travaillé avec une entreprise très connue qui a découvert que lorsqu'ils ajoutaient des boutons de partage en haut d'un article ainsi qu'en bas, le taux de partage augmentait de plus de 400 %.

Exemple 2 : Oh, mes yeux !

Avez-vous déjà atterri sur un élément de contenu qui était si occupé que vous ne saviez pas où chercher ? Peut-être qu'il y avait une vidéo à partager, un formulaire à remplir, une copie, quelques liens ici et là. Si j'atterrissais sur la page ci-dessous, je ne saurais pas par où commencer, donc je ne m'engagerais probablement pas du tout. Cet exemple ne me donne aucune indication sur ce qui est le plus important sur cette page. Vous avez deux secondes ou moins pour attirer mon attention et m'engager, et vous venez de me perdre.

Si vous avez plusieurs CTA, indiquez très clairement l'ordre logique de ces éléments. Épelez-le avec des légendes numérotées si vous le devez. Si je venais sur cette page, je poserais ces questions :

La mise en page semble non planifiée et bâclée avec des espaces blancs aléatoires et des polices étranges. Les CTA sont définitivement en dessous du pli.

Si je donnais des conseils à Actomatic, je commencerais par leur demander ce qu'ils espéraient réaliser avec cette page. Quel est le but ici ? Je suppose que les principaux objectifs ici sont d'amener les gens à s'inscrire au blog, et à regarder et partager une courte vidéo. Si tel est le cas, nous devons apporter quelques modifications.

1. Assurez-vous que le CTA principal est au-dessus du pli. Les boutons de partage et le bouton S'abonner se trouvent sous le pli.
2. Indiquez clairement que vous souhaitez que les visiteurs s'inscrivent au blog ET partagent la vidéo
3. Ajouter des informations sur l'entreprise

Bon, regardons maintenant :

La nouvelle version améliorée a une mise en page légèrement différente, moins de polices, un court texte sur l'entreprise et la vidéo, et une barrière plus faible pour s'abonner au blog. J'ai également ajouté des liens en bas et un bouton Contact. Remarquez comment j'ai optimisé la mise en page pour maximiser la quantité d'informations qu'un lecteur verrait dans les deux premières secondes en suivant la façon dont l'œil parcourt naturellement la page. La théorie du modèle F dit que c'est l'ordre dans lequel le spectateur prendra les éléments de la page :

1. Le logo de l'entreprise
2. Les lignes d'en-tête
3. Les boutons partager et s'abonner
4. La section Explorer en bas

Donnez-moi une raison d'interagir

Maintenant que votre mise en page est triée, vous devez me donner une raison d'interagir avec votre contenu. Si vous souhaitez que je remplisse un formulaire ou que je partage votre contenu, il doit y avoir une raison impérieuse pour que je le fasse. Alors laissez-moi vous demander, qu'est-ce que ça m'apporte ?

Si vous ne connaissez pas la réponse à cette question, vous n'avez pas fait vos devoirs.

La principale raison pour laquelle les gens interagissent avec le contenu est qu'ils en retirent une sorte de satisfaction émotionnelle ou matérielle. Si votre contenu est bon, je le partagerai car il me fait paraître bien informé devant mes pairs. Je reçois un boost d'ego si je suis le premier à découvrir un nouveau widget que vous venez de publier, alors bien sûr je vais partager le fait que j'ai pu le voir en premier.

Peut-être que vous êtes une organisation à but non lucratif et que votre contenu est une histoire de bien-être sur quelqu'un qui a fait quelque chose d'extraordinaire, je partagerai ce contenu car il me fait me sentir bien et charitable. Offrez-moi une chance de gagner un iPad si je remplis un formulaire et je serai beaucoup plus susceptible de vous donner mes informations personnelles.

L'astuce consiste à savoir ce qui pousse votre public à s'engager. Est-ce une récompense émotionnelle, une récompense matérielle ou les deux ? Mettez-vous à leur place et créez une stratégie d'engagement adaptée à votre public.

Rester simple

J'ai récemment pris la parole lors d'une conférence où j'ai présenté une étude de cas d'une campagne de marketing social réussie. Je portais un T-shirt avec ceci imprimé sur le devant : #KeepItSimple. J'essaie de mettre en pratique ce que je prêche.

J'ai travaillé avec des clients qui ont créé un contenu interactif extrêmement compliqué, et d'autres qui l'ont gardé incroyablement simple, et le simple l'emporte presque à chaque fois. Voici comment faire simple :

• Choisissez des polices comme Trebuchet qui sont faciles à lire en ligne.
• Ne mélangez pas trop de polices et de tailles de police sur une page. Taille unique pour les titres, taille unique pour le corps du texte.
• Limitez-vous à un CTA clair si possible.
• Gardez les choses importantes au-dessus du pli.
• Faites en sorte que la barrière à l'entrée soit aussi basse que possible (ne demandez pas le premier-né de quelqu'un si tout ce dont vous avez vraiment besoin est son adresse e-mail)

Votre devoir à la maison

Attendez une minute, vous n'avez jamais dit qu'il y aurait des devoirs à la fin de cet article ! Si je t'avais dit qu'il y aurait des devoirs, aurais-tu lu jusqu'ici ? Euh hein. J'aimerais que vous jetiez un œil critique à l'une de vos pages de destination et que vous vous demandiez s'il y a place à l'amélioration.

• Affichez l'une de vos pages de destination sur un ordinateur portable et sur un appareil mobile. Devez-vous faire défiler pour accéder au CTA ? S'affiche-t-il bien sur un appareil mobile ?
• Demandez à un ami qui ne connaît rien à votre entreprise de consulter l'une de vos pages de destination et demandez-lui de donner un avis franc pendant qu'il la consulte. Demandez-leur de vous dire ce qu'ils remarquent en premier, ce que fait votre entreprise et quel est le CTA principal sur la page.
• Voyez si tous les éléments importants sont dans le modèle F.
• Testez vos pages dans autant de navigateurs possibles sur autant de plates-formes possibles que possible. Safari ne rend pas les éléments comme Chrome. Firefox ne rend pas les éléments comme Internet Explorer (IE). Et différentes versions d'IE peuvent afficher le contenu complètement différemment.

Vous n'avez pas besoin d'avoir un diplôme en mise en page et en conception publicitaire pour y parvenir. Mais vous devez être prêt à regarder votre contenu actuel avec un œil critique.

Cela en vaut la peine.