Quelle est la disposition du motif en Z et quand l'utiliser ?

Publié: 2017-01-27

Les pages de destination post-clic, comme les pages Web, doivent toujours suivre une sorte de hiérarchie visuelle organisée. Il y a de fortes chances que vous le sachiez déjà, mais il convient de le répéter. Tout ce que vous pouvez faire pour influencer vos téléspectateurs à se concentrer sur ce que vous voulez qu'ils remarquent est à peu près le nom du jeu.

Un bon concepteur comprend comment les utilisateurs voient et traitent les informations en ligne. Cette connaissance éclaire leurs décisions de conception et les amène à placer les éléments les plus essentiels de manière à se faire remarquer. Si tout semble correct, la conception incitera les visiteurs à prendre les mesures souhaitées.

Un bon concepteur comprend comment les utilisateurs voient et traitent les informations en ligne.

Cliquez pour tweeter

L'un des principaux moyens par lesquels les concepteurs influencent les utilisateurs et attirent l'attention sur les éléments les plus importants d'une page est de concevoir la page à l'aide du Z-Pattern.

Qu'est-ce que le motif en Z ?

Un motif en Z trace la route parcourue par l'œil humain lorsqu'il lit - de gauche à droite, de haut en bas :

  • Tout d'abord, les gens scannent du haut à gauche vers le haut à droite, formant une ligne horizontale imaginaire
  • Ensuite, en bas et à gauche de la page visible, créant une ligne diagonale imaginaire
  • Enfin, retraversez à droite en formant une deuxième ligne horizontale

Lorsque les yeux des spectateurs se déplacent selon ce motif, cela forme une forme imaginaire en « Z » :

Cette image montre aux spécialistes du marketing comment créer des pages de destination post-clic en utilisant la conception Z-Pattern pour augmenter les conversions.

Il est important de noter que les conceptions de motif en Z ne sont pas nécessairement conformes à une forme en Z traditionnelle et que le nombre d'angles en Z le long du motif peut varier.

Comment le Z-Pattern s'applique aux pages de destination post-clic

La création d'une page Web avec le Z-Layout aide à créer une hiérarchie visuelle que les gens sont susceptibles de suivre, ce qui en fait une option de mise en page parfaite pour les conceptions de pages de destination post-clic.

Mais pourquoi concevoir une page avec le Z-Pattern au lieu du F-Pattern ?

Alors que le F-Layout a tendance à être plus approprié pour les pages denses en contenu, le Z-Layout est principalement destiné aux pages avec une copie minimale. Essentiellement, le Z-Pattern est mieux adapté aux pages où la simplicité est une priorité et où le principal point à retenir est le CTA.

Concevoir avec le Z-Layout à l'esprit :

  • La ligne horizontale supérieure doit inclure les principaux composants sur lesquels vous souhaitez que les téléspectateurs se concentrent en premier
  • La ligne diagonale doit comporter toutes les informations qui s'accumulent jusqu'à votre incitation à l'action
  • La ligne horizontale inférieure doit mettre en évidence le CTA à un moment donné le long du motif

La création de votre page de destination post-clic selon une mise en page Z-Pattern peut entraîner davantage de conversions, car vous pouvez contrôler l' endroit où les yeux du spectateur se déplacent.

Apprenons-en un peu plus sur la conception Z-Pattern en examinant quelques exemples de pages de destination post-clic.

N'oubliez pas que pour les pages de destination post-clic plus courtes, nous avons affiché la page entière. Cependant, pour les pages plus longues, nous n'affichons qu'au-dessus du pli. Vous devrez peut-être cliquer sur chaque page de destination post-clic pour voir certains des points dont nous discutons. De plus, certains exemples répertoriés peuvent être des tests A/B de leur page avec une version alternative à celle affichée ci-dessous.

Une page de destination post-clic qui ignore le Z-Pattern

La page de destination post-clic de Traffic Light Media ci-dessous ne suit pas le Z-Pattern. Cependant, il fournit un flux intentionnel en étant une page propre et organisée qui persuade les yeux des téléspectateurs de suivre un chemin prévu au milieu de la page jusqu'au bouton CTA :

Cette image montre aux spécialistes du marketing comment créer une hiérarchie visuelle à l'aide de la disposition Z-Pattern pour augmenter les conversions.

Ils sont intelligents pour tester A/B la page avec la variation ci-dessous. Cette fois, ils suivent la disposition Z-Pattern :

Cette image montre aux spécialistes du marketing comment Traffic Light Media utilise la mise en page Z-Pattern pour que les visiteurs restent concentrés sur la conversion.

En voyant cette variation, le Z-Path est le suivant :

  1. Le titre blanc attire d'abord l'attention sur l'arrière-plan plus sombre, même si le logo de l'entreprise est répertorié plus haut sur la page.
  2. À partir de là, le chemin parcourt le titre du formulaire, car celui-ci se trouve juste à côté du titre de la page et contraste bien avec son fond blanc. C'est le premier angle Z-Pattern.
  3. Ensuite, la conception du motif se poursuit en diagonale vers le côté gauche de la page jusqu'à la copie jaune « découvrir une opportunité ».
  4. En suivant le chemin, l'attention est attirée sur le côté droit et concentrée sur le bouton CTA orange.

Gardez à l'esprit que ces mouvements oculaires sont subjectifs et que tous les utilisateurs ne numériseront pas les pages de la même manière. L'essentiel à retenir est de garder vos téléspectateurs concentrés sur le chemin que vous voulez qu'ils suivent et de les persuader de se convertir sur votre CTA.

Examinons maintenant quelques pages de destination post-clic qui suivent la disposition Z-Pattern.

pages de destination post-clic qui suivent le Z-Pattern

LifeLock

Cette image montre aux spécialistes du marketing comment LifeLock a conçu leur page de destination post-clic avec le Z-Pattern pour que les visiteurs restent concentrés sur la conversion.

Cette page post-clic LifeLock suit le Z-Pattern mais ne se termine pas par un CTA :

  1. Le visiteur commencera probablement par le titre, car sa police est plus grande que le reste de la copie et contraste bien avec l'arrière-plan sombre.
  2. En balayant vers la droite, le spectateur se concentrera ensuite sur le visage de l'homme, qui est le premier Z-Angle.
  3. Ensuite, le regard se déplacera en diagonale vers le bouton CTA rouge vif au deuxième point tournant.
  4. Enfin, l'accent se tournera vers l'image du téléphone intelligent.

Tout comme les conceptions Z-Pattern ne doivent pas former un «Z» traditionnel, il est important de reconnaître que les CTA ne sont pas nécessaires aux angles Z-Pattern. C'est juste mieux si les CTA sont situés dans les virages car c'est là que les yeux des téléspectateurs se retrouveront.

Appel au feu

Cette image montre aux spécialistes du marketing comment CallFire utilise la conception de la page de destination post-clic Z-Pattern pour que les visiteurs restent concentrés sur la conversion.

Cette page post-clic CallFire est un autre exemple qui ne forme pas un Z traditionnel, mais le modèle est toujours évident :

  1. Les téléspectateurs commenceront par le titre de la page, car il est plus grand que le reste de la copie.
  2. À partir de là, les visiteurs numériseront vers le bas et vers la droite en passant par l'image, en se concentrant sur le formulaire et le bouton CTA - créant le premier Z-Angle.
  3. Ensuite, les téléspectateurs se déplacent vers la gauche vers la vidéo - créant le deuxième Z-Angle.
  4. Enfin, les yeux des spectateurs continueront à travers la page vers l'iconographie et les trois étapes.

Oracle

Cette image montre aux spécialistes du marketing comment Oracle utilise la disposition Z-Pattern sur sa page de destination post-clic pour que les visiteurs restent concentrés sur la conversion.

La page d'Oracle est un autre exemple qui ne suit pas un Z traditionnel, mais le chemin mène au CTA à la fin :

  1. Les visiteurs de la page commenceront probablement par le titre car il s'agit de la plus grande police de la page et est facile à lire avec tout l'espace blanc qui l'entoure.
  2. Ensuite, ils se déplaceront horizontalement vers l'image de droite.
  3. À partir de là, l'œil humain descendra naturellement vers le côté gauche du graphique.
  4. Enfin, les yeux des téléspectateurs numériseront la partie inférieure de la page jusqu'au CTA où se termine le Z-Layout.

Fleetmatics

Cette image montre aux spécialistes du marketing comment Fleetmatics utilise une page de destination post-clic avec de nombreux angles en Z pour former un motif en Z.

Cette page de destination post-clic Fleetmatics comprend un CTA à plusieurs angles Z :

  1. Il y a de fortes chances que le titre et le sous-titre en haut à gauche captent d'abord l'attention des téléspectateurs.
  2. À partir de là, les visiteurs numériseront vers la droite pour voir la vidéo d'arrière-plan.
  3. En créant la première diagonale de la forme en Z, les visiteurs sont susceptibles de balayer vers la gauche vers le premier bouton CTA orange.
  4. Ensuite, le regard de l'utilisateur passera à travers les badges des clients, passant de la copie à puces au deuxième bouton CTA orange.
  5. Enfin, le Z-Layout continue vers la gauche vers l'image et vers le troisième bouton CTA.

Le motif se poursuit plus bas sur la page en créant plus d'angles Z. Et, en incluant un CTA à plusieurs reprises, les téléspectateurs auront du mal à les ignorer et seront persuadés de cliquer et de convertir.

Concevez votre prochaine page avec la mise en page Z-Pattern

Chacune des marques décrites ci-dessus fait un excellent travail en plaçant ses éléments de page de destination post-clic le long d'une disposition en Z-Pattern. En cours de route, ils influencent efficacement le regard du spectateur et le dirigent vers le CTA.

Avec ces exemples à l'esprit, et pour que vos visiteurs se concentrent davantage sur la conversion, concevez votre prochaine page de destination post-clic avec Instapage. Inscrivez-vous dès aujourd'hui pour une démo Instapage Enterprise.