Que regarder dans vos examens de conception préliminaires

Le texte d'espace réservé peut dérouter vos visiteurs. Une mauvaise police peut masquer le message de votre page. Lorsque tant de petits détails sont réunis pour former une conception de page de destination post-clic réussie, en négliger un seul peut vous coûter des conversions.

C'est pourquoi il est nécessaire, avant de finaliser votre landing page post-clic, de procéder à une revue de conception préliminaire.

La revue de conception préliminaire

La conception d'une page de destination post-clic nécessite la coordination de toute une équipe de créatifs. Les concepteurs UX, les rédacteurs, les chefs de projet et les développeurs ont tous un rôle à jouer dans le processus. (Découvrez comment la solution de collaboration Instapage peut accélérer ce processus.)

Souvent, avant même qu'un wireframe basse fidélité ne soit dessiné, les équipes de conception répondent à ces questions sur chaque élément de la page.

1. Pourquoi faisons-nous cela / Quel problème essayons-nous de résoudre ?

Disons, par exemple, que vous concevez des supports pour votre page de destination post-clic. À la première étape, vous voulez identifier le « pourquoi » derrière votre décision. Regardez votre page de destination post-clic. Pourquoi avez-vous ajouté des médias ?

Est-ce pour montrer aux prospects à quoi ressemble votre produit ? Est-ce pour expliquer le fonctionnement de votre service ? Utilisez la réponse pour déterminer quel type de média permettrait le mieux d'atteindre votre objectif.

Une photo de héros peut aider les visiteurs à imaginer une vie meilleure avec votre produit. Si votre problème est « Notre service est nouveau et les gens ne le comprennent pas », une vidéo explicative peut montrer exactement comment cela fonctionne.

N'oubliez jamais : rien sur votre page de destination post-clic ne doit être conçu sans but. Chaque élément contribue au taux de conversion.

2. Pour qui le faisons-nous ?

Votre préférence pour une police de titre en particulier ? Oublie. Cette image de stock que vous pensez est « de pointe » ? Jetez-le. Le cœur de votre conception doit tourner autour de ce que vos visiteurs préfèrent.

Pour qui créez-vous cette page ? Quel message résonnera avec eux ? Un bon pas vers une compréhension complète de vos prospects est de créer des acheteurs personas.

Ces représentations basées sur la recherche de vos segments de clientèle cibles vous donneront une idée des données démographiques et des comportements (et plus encore) que vous pouvez utiliser pour baser la conception de votre page de destination post-clic.

Construisez-les à l'aide de données qualitatives issues d'enquêtes clients et de données quantitatives issues d'outils d'analyse. Avant d'avoir une idée de qui vous vendez, vous ne pouvez pas commencer à élaborer une stratégie pour leur vendre.

3. Comment saurons-nous que nous avons réussi ?

Si vous allez implémenter un élément de conception particulier, vous devriez avoir un moyen de mesurer si cet élément a atteint votre objectif.

Si vous pensez qu'une page avec une copie plus longue décrira le mieux votre service, vous pouvez mesurer son succès avec la profondeur de défilement et le taux de conversion.

Si vous pensez qu'une vidéo fonctionnerait mieux qu'une copie longue, vous pouvez utiliser les lectures comme mesure et taux de conversion pour déterminer son succès par rapport à une page contenant beaucoup de texte.

Assurez-vous d'avoir identifié au préalable une métrique capable de mesurer avec précision le succès de vos éléments de conception. Sinon, vous ne saurez pas ce qui contribue à votre taux de conversion. Et si vous ne savez pas ce qui contribue à votre taux de conversion, vous ne pourrez pas l'améliorer.

Éléments à évaluer dans la revue de conception préliminaire

« Traitez chaque composant comme s'il pouvait être présenté à un concours de design », explique le designer de Microsoft Claudio Guglieri. "Si vous faites attention à chaque composant, le tout sera plus que la somme de ses parties."

Chacun de vos composants de page de destination post-clic pourrait-il remporter un prix de conception ? Avant d'envoyer vos wireframes en développement, il est important de vous en assurer. Il est désormais crucial de détecter les erreurs pour éviter des erreurs coûteuses après la publication.

Bien que les réponses aux trois questions précédentes varient d'une entreprise à l'autre, ce n'est pas le cas des meilleures pratiques pour les éléments de page de destination post-clic. Assurez-vous que votre page ne drainera pas votre taux de conversion une fois qu'elle sera en ligne en évaluant les éléments suivants :

Disposition

Pendant des milliers d'années, nous avons lu à l'aide d'un système de grille. Aujourd'hui, les colonnes et les lignes guident notre regard sur le Web comme ils le faisaient avant l'aube d'Internet, dans les magazines, les livres et les journaux.

«Ce sont les systèmes qui ont été plus ou moins directement transférés sur le Web, et ils fonctionnent», explique Alex Bigman. « Parole de sage : de nombreux designers ont tenté d'éviter la grille au nom de la « créativité » ; beaucoup de ces sites Web ne sont pas lus.

La recherche le confirme. Une étude de Microsoft et du MIT a révélé que lorsque deux groupes de sujets étaient présentés avec des mises en page différentes, l'une traditionnelle et l'autre non traditionnelle, leurs réponses étaient les suivantes :

• Le groupe non traditionnel a surestimé le temps qu'il a fallu pour lire la pièce et a parfois affiché un mécontentement physique à l'égard de la mise en page sous la forme d'un froncement de sourcils.

• Le groupe traditionnel a sous-estimé le temps qu'il leur a fallu pour lire l'article et a signalé une plus grande concentration lors de la lecture.

De la même manière, les conventions de mise en page ne doivent pas être évitées ; les conventions de conception ne devraient pas l'être non plus. La loi de Jakob Nielsen sur l'expérience de l'utilisateur Web stipule que les internautes passent la plupart de leur temps sur d' autres sites Web. C'est sur ces autres sites Web qu'ils ont formé leurs attentes sur le fonctionnement du Web.

Par exemple, les utilisateurs en sont venus à reconnaître le texte souligné comme un lien hypertexte. Les logos sont le plus souvent situés dans le coin supérieur gauche de la page, et cliquer dessus redirige généralement l'utilisateur vers la page d'accueil (cependant, cela ne devrait pas être sur votre page de destination post-clic). La familiarité d'un système a un impact considérable sur la satisfaction des utilisateurs, déclare Nielsen :

Plus les attentes des utilisateurs s'avèrent justes, plus ils se sentiront maîtres du système et plus ils l'apprécieront. Et plus le système brise les attentes des utilisateurs, plus ils se sentiront en insécurité.

Au-delà des conventions de conception, la hiérarchie visuelle dirige le regard des visiteurs vers le contenu le plus important d'une page. En en créant un avec des techniques ancrées dans la psychologie de la Gestalt, vous pouvez utiliser le formatage pour faire ressortir vos informations les plus importantes.

• Taille : Plus il est grand, plus il attirera l'attention.

• Position : les gens consultent les pages de haut en bas, de gauche à droite. Par conséquent, les éléments en haut à gauche seront affichés plus souvent que ceux en bas à droite.

• Couleur : les couleurs qui contrastent avec le reste de la page attireront l'attention.

• Densité : l' ajout de plusieurs éléments à un petit espace augmentera l'attention que cette zone attirera.

• Valeur : Un objet plus sombre apparaîtra plus visible qu'un objet plus clair. Les mots en gras sont plus accrocheurs, par exemple.

Les éléments qui transmettent vos informations les plus importantes - les titres, les avantages, les supports d'information et votre bouton CTA - doivent être formatés avec les caractéristiques ci-dessus pour attirer l'attention du lecteur.

Taper

La capacité de conversion de votre page dépend fortement du type et de sa mise en forme. Une police judicieusement choisie peut renforcer la confiance et la lisibilité, tandis qu'une police mal choisie peut avoir un impact négatif sur les deux. Sois sûr que:

La police de votre page de destination post-clic est cohérente avec la police de votre site Web

La cohérence de la marque est un puissant facteur d'influence des décisions d'achat. Si les visiteurs fidèles ne reconnaissent pas la page de destination post-clic comme appartenant à votre entreprise, ils peuvent ne pas croire que c'est le cas. Restez fidèle à la marque avec les polices Adobe Typekit et Google Fonts.

Votre police est lisible dans toutes les tailles

L'expert en utilisabilité D Bnonn Tennant recommande 16px car c'est proche de ce que l'on voit dans les livres (écran à gauche, page du livre à droite) :

Utilisez du texte sans empattement dans le corps du texte, car des études ont montré que l'empattement est plus difficile à lire dans les petites tailles en ligne. Un bon moyen d'assurer la lisibilité est de s'assurer que votre police peut passer le test « il1 » :

Vous gardez différentes polices au minimum

Les polices décoratives peuvent attirer l'attention et ajouter une touche de personnalité à votre page de destination post-clic. Cependant, si vous en utilisez trop, votre page de destination post-clic ressemblera à une lettre de rançon en ligne :

Ne vous en tenez pas à plus de deux polices différentes sur votre page de destination post-clic, sinon vous risquez de diluer la puissance de votre marque, de faire paraître votre page désorganisée et de nuire à la lisibilité.

Vos lignes de texte sont d'une longueur équilibrée

N'oubliez pas que les gens sont habitués à lire à l'aide d'une grille. Si vos lignes de texte ne tiennent pas compte de cette grille et s'étendent sur toute la page, elles repousseront les limites de la durée d'attention des visiteurs. En même temps, s'ils sont trop courts, l'œil du lecteur devra revenir trop souvent en arrière, ce qui cassera leur rythme.

Inconsciemment, sauter à une nouvelle ligne dynamise le lecteur. Mais cette énergie s'estompe au fur et à mesure que la ligne s'allonge. Pour cette raison, l'équipe du cabinet de conseil en ergonomie, le Baymard Institute, recommande une longueur de ligne comprise entre 50 et 75 caractères.

Votre interligne améliore la lisibilité

L'espace vertical entre vos lignes doit trouver un équilibre entre grand et petit. Trop petit et une ligne commencera à se fondre avec celle en dessous ; trop grand et l'œil de votre visiteur se perd d'une ligne à l'autre.

Le concepteur de polices Matthew Butterick affirme que, pour une lisibilité maximale, l'espacement entre chaque ligne doit être un pourcentage de la taille de la police - 120 % à 140 % pour être exact.

Le texte s'adapte aux modèles de lecture sur le Web

Sur les pages contenant beaucoup de texte, les lecteurs ont tendance à traiter une page selon un modèle qui ressemble à un « F ». Sur les pages contenant des images, ce motif ressemble plus à un « Z ».

Assurez-vous qu'à l'aide de la hiérarchie visuelle, votre texte communique vos informations les plus précieuses d'une manière qui s'adapte au style de lecture des visiteurs.

Les titres, les sous-titres, les puces et les lettres en gras attirent tous les yeux des visiteurs sur l'écran lorsqu'ils parcourent la page.

Vous ne cassez pas la marge de gauche

Lorsque nous lisons, la marge de gauche est « chez nous » pour nos yeux. Les lignes de texte peuvent se terminer à de nombreux endroits différents, mais la marge de gauche est l'endroit où nos yeux rebondissent une fois que nous l'avons terminée.

C'est pour cette raison que vous devez toujours aligner votre corps de texte à gauche (les titres peuvent être centrés) et vous ne devez jamais casser la marge de gauche avec des éléments tels que des photos.

Sinon, vous ferez votre page de destination post-clic
beaucoup plus
difficile pour vos visiteurs
lire.

Couleur

Choisir les bonnes couleurs pour votre page de destination post-clic a moins à voir avec la signification psychologique des couleurs, et plus avec la façon dont elles attirent le regard. Avec deux à trois couleurs (simple c'est mieux, selon les études) choisies dans la roue chromatique, vous pouvez créer un schéma qui attire l'attention sur les éléments impliqués dans la conversion : votre formulaire et le bouton CTA.

Jeu de couleurs complémentaire

Des schémas complémentaires sont créés en choisissant des couleurs opposées sur la roue chromatique. Cette opposition crée un contraste entre les éléments de ce schéma.

Schéma de couleurs analogue

Un schéma de couleurs analogue est créé avec des voisins sur la roue chromatique. Cela ne créera pas le même niveau de contraste qu'un schéma complémentaire, mais il sera visuellement facile à digérer.

Schémas de couleurs monochromes

Une palette de couleurs monochromatiques est créée avec des teintes, des tons et des nuances de la même teinte sur la roue chromatique. Parce que les différences entre les couleurs dans un schéma monochromatique sont subtiles, elles sont souvent associées à une seule couleur complémentaire pour faire apparaître des éléments tels que la forme et le bouton CTA.

Votre palette de couleurs reflète-t-elle votre marque ?

En regardant ces diagrammes, vous vous demandez peut-être comment choisir une base, un accent et une couleur d'arrière-plan. La réponse? Commencez par les couleurs de votre marque.

• Utilisez les couleurs de votre logo comme point de départ pour créer une palette de couleurs qui renforce la cohérence de la marque.

• Ensuite, créez une couleur de base en déterminant sur quoi votre logo s'affiche.

• Enfin, choisissez une couleur d'arrière-plan et d'accent (couleur de votre bouton CTA) qui se contrastent pour attirer un maximum d'attention.

Découvrez ici si vous avez choisi les bonnes couleurs.

Menu de navigation, pied de page

Ce sont peut-être les éléments de conception les plus faciles à cocher sur votre liste. Regardez en haut de la structure filaire de votre page de destination post-clic. Quelqu'un a-t-il dessiné un menu de navigation ? Si c'est le cas, supprimez-le.

Maintenant, regardez en bas. Un pied de page avec de nombreux liens annexes a-t-il été esquissé ? Si c'est le cas, supprimez-les.

Le taux de conversion de votre page de destination post-clic doit être de 1:1, ce qui signifie qu'il ne doit y avoir qu'un seul élément cliquable sur votre page de destination post-clic : votre bouton CTA. Des études renforcent l'idée que les liens sortants diminuent le taux de conversion, alors gardez vos visiteurs concentrés en les excluant.

Images

Les médias peuvent être un puissant moyen de persuasion sur votre page de destination post-clic lorsqu'ils sont utilisés correctement. Certaines images que vous voudrez envisager de présenter :

• Des images de produits qui donnent à vos visiteurs une idée de ce à quoi ressemble votre offre ou de son fonctionnement.

• Des infographies qui transmettent des informations d'une manière visuellement facile à digérer. Les graphiques et les tableaux sont parfaits pour aider les gens à comparer des ensembles de données.

• Des photos de héros qui aident le visiteur à imaginer comment sa vie s'améliorerait avec votre offre.

• Des logos d'entreprise qui mettent en valeur les marques de confiance avec lesquelles vous avez travaillé ou des publications bien connues dans lesquelles vous avez figuré.

• Des badges de sécurité qui permettent aux visiteurs de savoir qu'ils sont en sécurité sur votre page.

• Des badges d'autorité qui mettent en évidence les récompenses que votre entreprise a remportées.

Lorsque vous examinez la conception de votre page de destination post-clic, assurez-vous que ces images ont un sens dans votre mise en page. Les badges de sécurité sont plus efficaces à côté d'un formulaire. Les photos de héros devraient se voir attribuer un bien immobilier de premier ordre sur votre page, tout comme les badges d'autorité. L'emplacement de l'image est tout aussi important que ce qu'elle communique.

Conception de formulaire

Comme il s'agit souvent de la principale source de friction sur une page de destination post-clic, votre formulaire doit être conçu avec un soin particulier. Quand ce n'est pas le cas, de mauvaises étiquettes peuvent dérouter les visiteurs et des champs inutiles peuvent les effrayer.

Lors de votre revue de conception préliminaire, consultez les meilleures pratiques du groupe Nielsen Norman pour la conception de formulaires lors de l'évaluation de la vôtre :

Sollicite-t-il uniquement les informations dont vous avez absolument besoin ?

Vos équipes marketing et commerciales doivent être d'accord sur la définition d'un lead qualifié à différentes étapes du parcours de l'acheteur. Cette définition doit inclure les informations que vous devez saisir auprès des prospects à chaque étape.

Assurez-vous que votre formulaire ne demande que les informations que vous avez jugées nécessaires pour vous assurer que les prospects correspondent à votre entreprise. Avec chaque champ de formulaire que vous supprimez, vos chances de conversion augmentent. Il suffit de demander à l'équipe de Marketo :

Vos champs sont-ils présentés dans un format à une seule colonne ?

Au lieu de les disposer horizontalement ou dans un format à deux colonnes, assurez-vous que vos champs de formulaire sont présentés dans une seule colonne. Deux colonnes interrompront la progression vers le bas de votre visiteur au fur et à mesure qu'il remplit chaque champ (une exception peut être faite concernant les champs connexes comme la ville/le code postal).

Les champs et les libellés similaires sont-ils regroupés ?

Les champs tels que le prénom et le nom, la ville et le code postal, la carte de crédit et le CVV doivent être proches les uns des autres, tout comme les informations d'identification telles que les étiquettes. Ces étiquettes doivent se trouver au-dessus de chaque champ plutôt qu'à l'intérieur, car des recherches ont montré que la disparition du texte d'espace réservé peut potentiellement frustrer et dérouter les visiteurs.

Pouvez-vous combiner ou modifier des champs de formulaire pour réduire les frictions ?

Si votre formulaire utilise une liste déroulante avec moins de trois options de réponse, envisagez de la convertir en quelque chose de plus facile à remplir, comme un ensemble de boutons radio :

Si vous concevez un formulaire de page de compression qui demande le prénom et le nom de famille, envisagez de combiner les champs ou même de supprimer le nom de famille (certaines pages ne demandent même pas de nom du tout).

Pour rendre les choses encore plus faciles, envisagez de proposer le remplissage automatique social pour permettre aux visiteurs de convertir en un clic.

Conception de bouton

Souvent, les visiteurs de la page de destination post-clic tiennent pour acquis qu'ils savent exactement où ils doivent cliquer pour réclamer une offre. C'est le résultat d'une bonne conception des boutons - et c'est aussi ce que vous devriez viser.

Les prospects réfléchissent déjà à déterminer votre fiabilité et la valeur de votre offre. Ne les forcez pas à travailler plus fort pour déterminer comment le réclamer. Évitez de masquer par inadvertance votre bouton avec le mauvais design en vérifiant les points suivants :

Votre bouton ressemble-t-il à un bouton ?

Regardez les boutons de votre clavier. Ce sont ceux que vos prospects sont habitués à pousser dans le monde réel. Le vôtre devrait ressembler.

Comment similaire? Cela dépend de votre public.

Boutons skeuomorphes

Pour les publics qui ne sont pas aussi avertis sur Internet, les techniques de conception skeuomorphes peuvent aider à rendre un bouton identifiable. Le skeuomorphisme est un style de conception qui imite la composition des objets dans le monde réel. Voici un exemple de calculatrice numérique créée avec une conception skeuomorphique :

Les effets tridimensionnels tels que l'ombrage font que les boutons semblent pousser. C'est ce à quoi nous sommes habitués depuis les premiers jours d'Internet :

Ainsi, si, lors de la création de vos acheteurs personas, vous découvrez que votre audience ne passe pas beaucoup de temps en ligne, ce type de bouton pourrait être celui que vous incluez sur votre page de destination post-clic. En voici un très stylisé :

Si vous vous attendez à ce que vos visiteurs soient des internautes plus expérimentés, ils n'auront peut-être pas besoin d'indices comme des ombres pour identifier un bouton. Vous pourriez être en mesure d'employer l'utilisation de…

Boutons plats

Le flat design est une technique qui ne tourne pas autour de la recréation d'objets dans le monde numérique. C'est une approche plus minimaliste.

Les boutons créés avec cette technique ne reposent pas sur des ombres et des reflets durs pour se rendre identifiables. Voici à nouveau une calculatrice, conçue uniquement avec des techniques plates :

Voici un bouton plat sur une page de compression :

Des recherches ont cependant montré que cette technique peut dérouter et frustrer même les internautes chevronnés en excluant les indicateurs de cliquabilité comme les effets 3D. Kate Meyer explique :

Les utilisateurs sont obligés d'explorer les pages pour déterminer ce qui est cliquable. Ils s'arrêtent fréquemment dans leurs activités pour survoler des éléments en espérant des signifiants de cliquabilité dynamiques, ou cliquent expérimentalement pour découvrir des liens potentiels.

Ce comportement - cliquer au hasard pour trouver un bouton ou un lien - est parfois gratifiant. Parfois, ce que les visiteurs cliquent est en fait un bouton cliquable, et parfois ce n'est pas le cas. Meyer développe :

Même si les utilisateurs sont pour la plupart capables de se frayer un chemin à travers les interfaces avec ce comportement exploratoire, ils sont toujours obligés de faire un travail supplémentaire et sont distraits de leurs objectifs principaux sans en tirer aucun avantage tangible.

En conséquence, de nombreux concepteurs de pages de destination post-clic créent des boutons qui atteignent un équilibre entre plat et skeuomorphe.

Appartement 2.0

Cet équilibre est connu sous le nom de design « Flat 2.0 », « semi-plat » ou « presque plat ». Voici un bouton semi-plat :

La technique utilise des ombres et des reflets pour indiquer la possibilité de cliquer, mais d'une manière beaucoup plus subtile. Lorsque vous choisissez entre plat, semi-plat et skeuomorphe, pensez toujours à votre utilisateur, dit Meyer :

Ne prenez pas de décisions de conception qui sacrifient la convivialité pour la tendance. N'oubliez pas que, à moins que vous ne conceviez que pour d'autres concepteurs, vous n'êtes pas l'utilisateur. Vos préférences et votre capacité à interpréter les signifiants de cliquabilité ne sont pas les mêmes que celles de vos utilisateurs, car vous savez à quoi chaque élément de votre propre conception est destiné.

Votre bouton attire l'attention ?

Pour attirer l'attention sur votre bouton CTA, remplissez-le avec une couleur qui a été utilisée avec parcimonie (ou pas du tout) sur votre page de destination post-clic. En raison de cette étude de cas, on pensait autrefois que le rouge surpassait le vert :

Mais lorsque vous prenez en compte le contexte, vous vous rendez compte que le bouton rouge a probablement battu le vert car il se démarquait parmi plusieurs autres éléments verts de la page (l'icône de l'argent, le logo, la photo).

Si vous créez un schéma de conception en utilisant la théorie des couleurs, votre bouton CTA est votre couleur "d'accent". Il est plus visible lorsqu'il est contrasté avec une teinte sur le côté opposé de la roue chromatique (voir « Couleur » ci-dessus).

Votre bouton est-il assez gros ?

Aujourd'hui, Internet est principalement accessible via des appareils mobiles. Cela signifie que les personnes qui accèdent à votre page de destination post-clic devront pouvoir appuyer sur votre bouton avec leur doigt. Le vôtre est-il assez grand ?

Une étude du MIT montre que le touchpad moyen est compris entre 10 et 14 mm, ce qui fait de 10x10 mm une bonne taille de bouton minimum :

Plus petit, selon les données, et vous augmenterez les chances d'erreur de l'utilisateur :

Enregistrez les conversions avec une revue de conception préliminaire

Si vous relevez les erreurs lors de la revue de conception préliminaire, votre équipe gagnera du temps et vos conversions commerciales après la mise en ligne de votre page de destination post-clic. Avant de le finaliser, assurez-vous de pouvoir répondre à toutes les questions ci-dessus et cochez chaque case de la liste de contrôle de publication Instapage.

Connectez toujours toutes vos annonces à des pages de destination post-clic personnalisées pour réduire votre coût par acquisition de client. Commencez à créer vos pages post-clic dédiées en vous inscrivant à une démo Instapage Enterprise dès aujourd'hui.