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.
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.
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).
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.