30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Web Design
  2. Conversion
Webdesign

Comment devenir un designer centré conversion

by
Length:MediumLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

French (Français) translation by Henri Lotin (you can also view the original English article)

Ainsi vous voulez être un designer de gabarits de page de garde ? Vous pouvez penser que c'est assez simple - après tout, les modèles de page de garde ne sont juste qu'une seule page. C'est beaucoup plus facile que de concevoir un site web entier. Mais les règles de design changent un peu lors de la génération de pages de gardes axées sur la conversion.

Qu'est-ce qu'une landing page ?

Avant d’entrer dans les principes de design derrière les pages de garde, ayons certaines définitions en tête :

Une page de garde est une page web autonome, spécifique à une campagne. Son intention est d’emmener vos visiteurs à réaliser une opération unique. Ce n’est pas votre site Web, et ce n’est certainement pas votre page d’accueil.

Les sites Web sont des stations de marque centrales et s'adressent aux gens qui organiquement trouvent votre site, ou qui ont besoin de référence ou de regarder dans le mode de recherche de leur cycle d’achat. Ils ne sont pas adaptés pour les campagnes marketing.

Les campagnes marketing sont basées sur un seul but - achetez ceci, abonnez-vous à cela - et en tant que tel ont besoin d’une expérience plus ciblée. La principale raison d'utiliser une page de garde vs. une page d’accueil pour cibler de tout trafic de campagne (PPC, email, social) est à cause de ce qu’on appelle le ratio d'attention.

Le ratio d'attention est le rapport des points d’interaction (liens) sur une page, le nombre d’actions prévues sur cette page (qui est toujours 1 pour une campagne). Sur une page d’accueil, il est généralement autour de 40/1, ce qui signifie qu’il y a 39 actions distrayantes et 1 action souhaitée.

Une page de garde ciblée a en revanche un ratio de 1/1 d’attention. Pour cette raison, les marqueteurs intelligents utilisent une page de garde de promotion spécifique et dédiée pour chaque campagne qu'ils lancent.

Qu'est-ce que cela signifie pour moi en tant que designer ?

Révolu le temps où il était acceptable de concevoir une belle expérience web, de déposer le pinceau et de vous en aller avec un chèque dans votre poche.

Conversion est l’un des mots les plus chauds sur le web dès maintenant. Chaque page web, que vous concevez est maintenant une partie du « contenu imputable ». Par cela que je veux dire que son but, son impact et son succès peuvent être et sont mesurés. Si il ne contribue pas à la conversion des visiteurs en clients, c'est qu'il n'a pas été conçu correctement.

Le design n’est pas le seul facteur dans les taux de conversion élevé. Le texte joue un rôle énorme. Mais la plus grande rédaction du monde ne sera pas utile si votre visiteur est distrait, offensé – nous le savons tous, le mauvais design peut être carrément injurieux – ou confus.

En combinant quelques principes de design simples et une psychologie de base, vous pouvez changer complètement votre mise au point pour le design d’expérience web qui ravissent et convertissent.

J’appelle cela design centré conversion. CCD pour faire court.

Il s’agit d’un cours accéléré en CCD, donc j’aborderai les 7 principes, pour vous mettre au jus sur certains fondamentaux en psychologie, puis vous montrer quelques modèles de belles et convertissantes pages garde qui les placent dans la pratique afin que vous puissiez apprendre par l’exemple.

Prêt à devenir un designer de centré conversion ?

Les 7 principes du design centré conversion

Les principes sont simples. Apprenez-les, pratiquez-les et vous verrez vos taux de conversion s’envoler.

Principe 1 : Encapsulation

Emballer les choses est une pratique intelligente. Cela fonctionne pour votre tête à des températures froides, pour des pommes de terre au chaud, et ça rend Noël plus amusant. Alors, prenez la chose la plus importante sur votre page (votre objectif de conversion) et enveloppez-la dans quelque chose qui démontre qu’elle est digne de l’attention de votre visiteur.

Principe 2 : Contraste

Tant de marqueteurs parlent de couleur de bouton. Il s’agit d’une erreur. Un bon designer centré conversion sait que la couleur de bouton est non pertinente. C’est le contraste qui compte. Si vous avez une page aux teintes principalement vertes, un bouton rouge va sauter aux yeux de vos visiteurs. Ne vous préoccupez pas de savoir qu’ils semblent en colère ; vos clients potentiels ne sont pas des taureaux.

Principe 3 : Indices de direction

Dans certaines cultures, c'est considéré impoli de pointer du doigt. Pas dans le royaume de la conversion. Lorsque quelqu'un arrive sur votre page de garde, votre design doit pointer vers le but que vous voulez qu’ils atteignent. Utilisez les flèches et la triangulation pour créer des points focaux. Avec la photographie, utilisez la ligne de mire pour attirer l’attention sur votre appel à l’Action (CTA).

Principe 4 : Espace vierge

Celui-ci est simple. N'entassez pas les choses ensemble. Le manque d’espace négatif est un design offensant. En laissant les yeux des individus respirer (ils peuvent faire cela ?) vous créez une expérience plus agréable qui vous donnera quelques secondes précieuces supplémentaires pour communiquer votre message de campagne.

Principe 5 : Urgence et rareté

C’est le premier principe axé sur la psychologie. Créater de l'urgence ou de la pénurie est principalement un exercice écrit, mais c’est à vous de présenter l’information à l’aide du bon design. La proximité avec l’objectif de conversion de la page de garde est la clé quand il s’agit de signaler la rareté. En vous assurant que votre visiteur comprenne qu'il a une echeance, vous pouvez rendre ce clic un peu plus susceptible.

Expedia a fait un excellent travail ici en se servant d’encapsulation pour mettre en surbrillance l’instruction de rareté (« seulement 3 billets laissés à ce prix là ! ») dans l’image ci-dessous.

Principe 6 : Essayez avant d’acheter

Avez vous jamais « goûté » un grain de raisin dans un supermarché ? C'est un aperçu de la qualité, et cela aide les gens à prendre des décisions d’achat éclairées. Exemples dans le domaine digital comprennent un chapitre d’un livre électronique ou un diaporama visuel qui couvre certains des faits saillants d’un rapport de l’industrie, cours en ligne ou un teaser/trailer vidéo pour un événement à venir. Amazon a vraiment établi la norme avec leurs extraits de livre « Regarder à l’intérieur ».

En ouvrant votre produit à un examen minutieux avant l’achat, vous semblez fiables et crédibles. Cela augmente la confiance, et peut être un facteur important dans le boost des conversions.

En tant que designer centré conversion, vous devriez trouver des façons créatives de présenter ces aperçus.

Principe 7 : Preuve sociale

Les éléments de confiance sont une partie essentielle de toute page de garde. Ils soutiennen vos déclarations et lorsque faits correctement, parlent à vos visiteurs du point de vue d’un consommateur aux vues similaires. Les témoignages sont l’approche la plus populaire. Comme pour le principe 5, c’est avant tout un élément écrit, mais vous pouvez utiliser des aspects du design intelligent de contenu - dans une hiérarchie particulière - pour encourager les gens à les lire en fait.

Ajoutez un entête explicatif au-dessus des témoignages (ou deslogos client etc.) peut augmenter la puissance de la preuve sociale.

Design axé sur la conversion en action ; 5 gabarits de page de garde

Armé de vos outils de vos nouveaux outils de design, examinons cinq gabarits de pages de garde Unbounce pour vous inspirer lorsque vous créez vos propres gabarits.

1. Lockwood : Immobilier

  • Encapsulation L’objectif de conversion est le formulaire, ainsi il est positionné avant et au centre et encapsulé dans un conteneur qui permet au contenu critique de s'y relier visuellement.
  • Contraste Le CTA se démarque clairement sur la page avec une couleur contrastante vibrante.
  • Signaux directionnels Il y a une flèche placée à la fin de la zone de contenu principale qui dirige votre regard vers le CTA et l’utilisation de la même couleur orange relie les deux éléments.
  • Espace négatif comme vous vous déplacez vers le bas de la page, vos yeux peuvent descendre librement à travers les blocs de contenu. Une photographie aérée et spacieuse et une palette minimaliste se combinent pour en faire une expérience agréable.
  • Rareté La déclaration d'après laquelle il reste seulement 3 unités se positionne juste en dessous du CTA comme un rappel à vous dépêcher. Si vous souhaitez être plus agressif ici, vous pouvez essayer une *grincement de dents* etoile scintillante - n’oubliez pas de rester chic. Ce serait un super test A/B.
  • Preuve sociale La preuve preuve sociale idoine est utilisée ici, en se concentrant sur les récompenses de design, plutôt que sur un témoignage qui aurait un impact très limité.

2. Lasano : Santé & bien-être

  • Encapsulation de formulaire ? Vérifiée.
  • CTA contrasté ? Vérifié.
  • Espace vierge ? Vérifié.
  • Preuve sociale ? Vérifiée.
  • Indices directionnels Ici vous remarquerez deux formes d'indice directionnel. Le premier utilise la ligne de la femme du site pour diriger votre regard de gauche à droite. Il aurait encore été mieux si elle regardait vers le bas et vers la droite, mais cela pourrait également lui donner l’air triste, qui serait en contradiction avec le thème du gabarit. Deuxièmement, il y a une déclaration secondaire sous le formulaire qui se termine par un petite flèche de rappel. Les petites choses n’ont pas toujours un grand impact, mais lorsque vous avez plusieurs petites choses travaillant de concert elles le peuvent.

3. Yuli : Demo de logiciel

  • Encapsulation de formulaire ? Vérifiée.
  • CTA contrasté ? Vérifié.
  • Espace vierge ? Vérifié.
  • Indices directionnels La partie supérieure de la page est où tout le contenu principal se déploie, ainsi une flèche - avec une requête - est placée à l’endroit où le contenu a été lu, pointant vers le CTA. Notez également, comment il crée une sorte de triangle en réservant la couleur orange pour les éléments qui font référence à l’objet de la page : « demo gratuite » « Joignez-vous à nous pour une démonstration gratuite, » « réserver ma démo maintenant. »
  • Preuve sociale Une vidéo est utilisée cette fois pour un niveau plus élevé de sophistication. Dans un A/B test que j'ai mené sur la page d'accueil du site Unbounce.com, j’ai trouvé qu’en remplaçant les témoignages texte par une version vidéo, le taux de conversion a augmenté de 25 %. Ici, il y a un combo de vidéo et de texte. Notez également que le gabarit utilise la hiérarchie de design d’information pour introduire les éléments de preuve sociale (la vidéo ainsi que les logos client en dessous), avec un titre descriptif.

4. Wanderlust : Voyage

  • CTA contrasté ? Vérifié.
  • Espace vierge ? Vérifié.
  • Preuve sociale ? Vérifiée.
  • Encapsulation Elle est légèrement différente sur une page de garde à génération de clics qu’il n’y a pas de formulaire, mais le CTA est toujours positionné avec d’autres informations essentielles dans un cadre englobant dans l’en-tête de page. L’élément de pied de page utilise également le contraste des couleurs pour encapsuler la « déclaration d’argument de fermeture » avec un CTA répété.
  • Indices directionnels C'est un peu exagéré mais la Tour Eiffel se connecte au CTA. Et elle indique plutôt habilement qu’en cliquant sur le CTA, vous vous retrouverez à Paris, vous tenant sous la tour. Si romantique. Dans un autre sens, les photos circulaires en vedette poussent votre œil à travers la page vers le CTA de fermeture.

5. Polaire : Caritatif

  • Espace vierge ? Vérifié.
  • Preuve sociale ? Vérifiée.
  • CTA contrasté Comme dans tous ces exemples, le CTA se démarque du reste du design. Notez également que l’objectif de la campagne (pour lever des fonds par le biais de dons) est mis en évidence en utilisant la couleur orange dans le thermomètre de la cible. Cela établit une connexion entre les objectifs émotionnel et physique (conversion) de la page.
  • Urgence & rareté La combinaison de l’objectif de don et les déclarations émotionnelles « le temps s’épuise pour l’ours polaire » et « Je prédis que nous pourrions voir des étés sans glace au pôle Nord en une décennie » crée aussi bien l’urgence que le sentiment imminent de rareté.

En résumé

Être un designer centré conversion est la prochaine évolution du design dans les entreprises, et armé de l’apprentissage d’aujourd'hui vous rendrez vos patron/clients très heureux lorsque leur taux de conversion augmenteront.

Ainsi, lorsque vous concevez votre gabarits de pages de garde pour Themeforest, confrontez-les aux sept principes du CCD et voyez comment ils s'emboîtent.

Lectures supplémentaires

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.