Design d’Interactions #08 – Le diagramme de Gutenberg

Régulièrement, je mets en avant certains principes et thématiques en rapport avec le design d’interactions. Il se peut que cette fiche soit amenée à évoluer, au fur et à mesure de mon apprentissage et de l’évolution de ma sensibilité. 

Qu’est-ce que le diagramme de Gutenberg en Design d’Interactions (IxD) ?

Il s’agit d’un diagramme décrivant la trajectoire générale suivie par le regard lors de l’observation d’informations homogènes, réparties uniformément. On parle également de règle de Gutenberg et de modèle de traitement Z.

Une trajectoire du regard

Le diagramme de Gutenberg divise le support de présentation que quatre quadrants :

  • la zone optique principale dans la partie supérieure gauche,
  • la zone terminale dans la partie inférieure droite,
  • la zone passive forte dans la partie supérieure droite,
  • la zone passive faible dans la partie inférieure gauche.

D’après ce diagramme, les lecteurs occidentaux partent naturellement de la zone optique principale et parcourent le support de gauche à droite et de haut en bas jusqu’à la zone terminale. Chaque balayage du regard commence le long d’un axe d’orientation, c’est-à-dire une ligne horizontale créée par des éléments alignés, des lignes de texte ou des segments explicites et se poursuit de gauche à droite. Les zones passives situées en-dehors de cette trajectoire reçoivent une attention réduire, sauf si elles sont mises en valeur visuellement. la tendance à suivre cette trajectoire de lecture est attribuée au principe de gravité de la lecture, soit l’habitude de lire de gauche à droite et de haut en bas.

Le principe de gravité en lecture guide l’œil du coin supérieur gauche au coin inférieur droit du support de présentation. Si la présentation est homogène, le diagramme de Gutenberg permet d’obtenir des compositions plus faciles à lire et à comprendre. Dans le cas contraire, il n’a pas lieu de s’appliquer et peut même étriquer inutilement la composition.

Favoriser la lecture et la compréhension

Les designs qui suivent ce diagramme sont en harmonie avec cette habitude et renvoient volontairement les lectures à un axe d’orientation logique qui favorise la vitesse de lecture et la compréhension. Ainsi, un affichage respectant le diagramme de Gutenberg va placer les éléments importants dans la partie supérieure gauche de l’écran (titre), dans la partie centrale (image) et dans la partie supérieure droite (contacts). Il existe beaucoup de designs basés (directement ou indirectement) sur le diagramme de Gutenberg, mais peu de preuves empirique de l’effet positif de cette théorie sur la vitesse de lecture ou la compréhension.

La composition de ces deux pages illustre l’application du diagramme de Gutenberg. La première page est constituée de texte uniquement et suppose donc que les lecteurs vont partir du coin supérieur gauche et progresser jusqu’au coin inférieur droit. La citation en exergue insérée entre ces deux zones renforce la force de gravité de la lecture. L’image de la deuxième page en fait autant et n’aurait pas le même effet si elle apparaissait dans la partie supérieur droite ou la partie inférieure gauche de la page.

Une lecture soumise à d’autres influences

Le diagramme de Gutenberg n’est probablement qu’une prédiction sur le déplacement du regard pour les textes denses, les informations homogènes et réparties uniformément et les pages ou écrans vides. Dans tous les autres cas, le regard est dirigé par le poids des éléments du design, leur disposition et leur composition. Par exemple, si un journal papier présente un titre et une photo très imposants au centre de la couverture, cette partie du support sera la zone optique principale. La connaissance des informations et de leur support influence également le regard : une personne qui a l’habitude d’une présentation cohérente et constante des informations dans son journal est plus susceptible d’avoir l’œil attiré par les zones qui changent souvent (titres d’articles) que par les zones constantes (titre du journal).

Cette maquette du Wall Street Journal guide le regard sans pour autant suivre le diagramme de Gutenberg. D’autre part, des lecteurs réguliers ont tendance à aller directement vers la section qui les intéresse et à ignorer les autres éléments de la page.

Quelles applications en design d’interactions ?

Le designer d’interactions s’appuiera sur le diagramme de Gutenberg pour disposer des éléments homogènes et répartis uniformément, ou encore dans les compositions utilisant beaucoup de texte. Autrement, il faudra utiliser le poids et la composition des éléments pour guider le regard.

Si vous avez des ouvrages, des articles et des outils en rapport avec cette thématique, n’hésitez pas à les partager dans les commentaires !

Rémi L.

Bibliographie :
Lidwell, W., Holden, K., Butler, J., & Butler, J. (2011). Principes universels du design. Eyrolles.
Wheildon, C. (1995). Type & Layout: How Typography and Design Can Get Your Message Across or Get in the Way (Vol. 199). M. Warwick (Ed.). Strathmoor Press.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *