Interface utilisateur (UI)

Diagramme de Gutenberg : un game-changer ?

Maxime Mroue Web Designer et UX Designer
Le diagramme de Gutenberg, c'est quoi ?

Sommaire :

<category-tag-red>Qu'est-ce que le diagramme de Gutenberg ?<category-tag-red>

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 :

Les 4 zones du Diagramme de Gutenberg

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.

<category-tag-gold>Exemple du Diagramme de Gutenberg<category-tag-gold>

Exemple du Diagramme de Gutemberg avec Evernote

<category-tag-red>Pourquoi ce principe est-il si important ?<category-tag-red>

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.

Service de création de site internet

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.
À Propos :

"J’aide les entreprises à enfin libérer le véritable potentiel de leur site web grâce à la psychologie humaine et une expérience utilisateur mémorable."

Icone LinkedInIcone Twitter
Plus d'articles de la catégorie 
Interface utilisateur (UI)
Tout voir

Une approche unique en création de site internet qui combine UX/UI Design performant, psychologie humaine avancée pour une expérience web mémorable.

Désinscription à tout moment. Jamais de spam.
Votre demande a bien été prise en compte, bienvenue dans le Verse !
Oups !
La soumission du formulaire a échoué.