Qu'est-ce que le diagramme de Gutenberg ?
Il existe des principes psychologiques en design qui illustrent comment les gens consomment l'information.
Le diagramme de Gutenberg (aussi appelé "Z-Pattern") stipule que les yeux des utilisateurs se déplacent selon un parcours en forme de Z, de la zone supérieure gauche à la zone inférieure droite.
L'un de ces principes est le diagramme de Gutenberg, qui est divisé en 4 zones :
1) Zone optique primaire
La partie supérieure gauche de la page est le principal centre d'intérêt de l'utilisateur.
C'est là que les yeux se concentreront automatiquement, que l'utilisateur cherche quelque chose, qu'il veuille lire ou qu'il fasse simplement un balayage rapide de la page.
2) Zone de ralenti forte
La deuxième étape de l'habitude de lecture consiste à se déplacer vers la partie supérieure droite de la page, que l'on peut considérer comme une suite de la partie gauche, mais moins importante.
Il ne faut pas interrompre l'expérience de lecture créée à partir du point de départ.
Cela signifie que si vous avez un appel à l'action, l'utilisateur s'arrêtera à ce point et agira.
3) Zone de suivi faible
La partie inférieure gauche est la partie aveugle du diagramme de Gutenberg, bien que lisible pour l'utilisateur, il n'accorde que peu d'importance au contenu de cette zone.
4) Zone optique finale
Lorsque l'utilisateur atteint la partie inférieure droite, il y a une pause dans le processus de lecture et l'utilisateur doit effectuer une action.
C'est l'endroit idéal pour insérer des appels à l'action tels que des boutons, des liens, des formulaires, etc.
Exemple du Diagramme de Gutenberg
Pourquoi ce principe est-il si important ?
En comprenant les habitudes de lecture des utilisateurs qui visitent votre site web, vous pouvez placer le contenu le plus important dans les zones où il sera le plus efficace.
Il est donc bon de placer votre CTA à la fin de ce parcours (zone optique finale) pour inciter les utilisateurs à agir.
FAQ : L'essentiel à retenir du diagramme de Gutenberg
🖨️ Diagramme de Gutenberg, c'est quoi ?
Le diagramme de Gutenberg (aussi appelé "Z-Pattern") stipule que les yeux des utilisateurs se déplacent selon un parcours en forme de Z, de la zone supérieure gauche à la zone inférieure droite.
🎯 Quels sont les quatre quadrants du diagramme de Gutenberg ?
Le diagramme de Gutenberg est divisé en 4 zones : 1) Zone optique primaire, la partie supérieure gauche de la page. 2) Zone de ralenti forte, la partie supérieure droite de la page. 3) Zone de suivi faible, la partie inférieure gauche. 4) Zone optique finale, la partie inférieur gauche.
💡 Pourquoi le diagramme de Gutenberg est-il si important ?
En comprenant ce principe de design, vous pouvez placer le contenu le plus important dans les zones où il sera le plus efficace. C"est-à-dire la zone optique finale) pour inciter les utilisateurs à agir.