Parfois, vous regardez un site qui peut être assez attrayant, mais il manque quelque chose. Ses couleurs, ses graphismes, son alignement parfait et sa copie sont astucieux. Bien que tout soit beau, rien ne se passe vraiment à un niveau supérieur à celui d’autre chose. Cette solution à ce problème est la hiérarchie visuelle.
Les concepteurs sont souvent suffisamment intuitifs pour hiérarchiser clairement les éléments de la page sans même y penser. Parfois, l’absence d’intention dans ce domaine conduit à une conception semblable à celle décrite ci-dessus. Cet article examinera certains des principes de base de la conception en gardant à l’esprit la hiérarchie visuelle des informations.
Principes au travail
La hiérarchie visuelle est si importante parce qu’en la maîtrisant, vous pouvez avoir un contrôle immense sur la façon dont un visiteur lit votre page. Dans un monde idéal, chaque téléspectateur lirait toutes les informations de la page de manière approfondie, vous permettant ainsi de disposer d'un temps et d'une espace infinis pour faire passer votre message. Cependant, en réalité, vous ne disposerez probablement que de quelques secondes pour attirer l'attention de quelqu'un et lui expliquer en quoi consiste le site avant qu'il ne se détourne et s'en aille ailleurs.
En établissant une hiérarchie claire des graphiques et des informations, les lecteurs ne peuvent presque pas s’empêcher de suivre inconsciemment le chemin que vous leur avez tracé. Techniquement, il n'y a pas deux personnes qui liront une page exactement de la même manière, mais vous pouvez créer des tendances fortes pour ce que vous préférez.
Cela se répercute sur de nombreux domaines et méthodes. La hiérarchie visuelle peut être établie par la position, la taille, la couleur et la complexité d'un élément par rapport aux autres éléments de la page.
Pour structurer votre message correctement, vous devez tenir compte de tout, des polices que vous utilisez aux espaces autour d'un objet donné. Soyez toujours conscient de ce qui attire l'attention sur votre page et assurez-vous que c'est intentionnel.
Position
La position est l’un des moyens les plus élémentaires d’établir une hiérarchie. Prenons l'exemple suivant:
En regardant cette image pour la première fois, il est peu probable que vous sachiez exactement ce qui se passait. Vos yeux ont probablement parcouru un petit coin, cherchant un motif distinctif. Maintenant, regardez cet exemple, en utilisant les mêmes lettres.
Du coup, même si le message est toujours déformé par un espace physique et des formes inutiles, il devient beaucoup plus facile à déchiffrer lorsque nous inversons l’ordre. Bien que les deux messages aient incité vos yeux à errer autour de l'image, le second facilitait beaucoup plus la tâche de voir les lettres s'assembler pour former des mots que le premier. C'est parce que vous avez l'habitude de lire de gauche à droite. Lorsqu'il y a un chaos visuel incertain sur une page, la première façon dont votre cerveau souhaite organiser l'information est dans l'ordre que vous avez appris à lire: de gauche à droite, de haut en bas.
Cela ne veut pas vous choquer, il est évident que nous lisons de gauche à droite. Cependant, devenir plus conscient de cette tendance vous aidera à structurer votre contenu de manière appropriée. N'oubliez pas que ce principe s'étend au-delà des mots dans les éléments graphiques d'une page. Si vous proposez à vos utilisateurs une grille d’objets de taille, forme et couleur similaires, ils auront tendance à lire la grille de gauche à droite, sauf indication contraire.
N'est-ce pas ennuyeux?
Vous vous demandez peut-être quelles seraient vos conceptions si vous adhériez fermement au principe de lecture en z ci-dessus. La réponse est incroyablement terne et sans originalité.
Le but est alors de pouvoir aligner les objets sur une page de manière plus attrayante tout en faisant en sorte que le lecteur ignore leur tendance subconsciente à lire en z. Ceci est accompli grâce à l'utilisation des autres principes de la hiérarchie visuelle discutés ci-dessous.
Taille
Dans le monde du design, la taille compte vraiment. En modifiant la taille des éléments sur une page, vous pouvez facilement casser la tendance du motif z.
Malgré le fait que la question écrite soit plus haute que le carré, la taille et l'audace du carré attirent votre attention avant les mots. Jetons un coup d'œil à ce principe pratiquement appliqué à la conception Web.
C'est une page extrêmement simple qui utilise une hiérarchie visuelle claire. La citation au centre de la page est suffisamment grande pour être le premier objet qui attire votre attention. Après cela, le logo en haut à gauche est non seulement l’endroit naturel pour réinitialiser vos tendances en matière de lecture, mais également le deuxième élément de contraste le plus important de la page. Le concepteur a structuré le site pour que, si vous ne passez que quelques secondes sur la page, vous lisiez? Pensez gros. Soyez agile. suivi de? Hobson Dungog + Davis.?
Il s’agit d’une manipulation classique de la hiérarchie visuelle au travail (notez que les espaces blancs jouent également un rôle important). Il aurait été facile de configurer la citation pour qu'elle apparaisse en haut à gauche, suivie du logo, mais la présentation n'aurait pas été aussi intéressante ou flexible.
Couleur
Une utilisation judicieuse de la couleur peut être l’un des moyens les plus intéressants visuellement de différencier les éléments d’une page et d’attirer l’attention là où vous le souhaitez. L'obsession du contraste de votre cerveau oblige vos yeux à se concentrer sur des objets qui se détachent simplement en raison de leur différence de couleur par rapport aux objets environnants. Prenons l'exemple suivant:
Ce concepteur a utilisé plusieurs nuances de couleurs contrastantes et complémentaires pour établir une hiérarchie visuelle dans ce qui serait autrement un bloc de texte monotone. Les sections les plus lumineuses attirent votre attention et facilitent la compréhension de l'essentiel du paragraphe sans prendre le temps de le lire.
Le contexte entre fortement en jeu ici aussi. S'il s'agissait d'une conception imprimée, vous ne penseriez pas que le texte de couleur plus claire soit destiné à attirer votre attention. Cependant, sur le Web, votre cerveau s’attendra à ce que ces zones d’intervention manifestement intentionnelles signifient quelque chose de plus important: dans ce cas, un lien.Et transformer le texte plus clair en liens est exactement ce que ce concepteur a fait. Malgré la mise en forme non traditionnelle représentée par l'absence d'une zone de navigation, vous pouvez rapidement comprendre le fonctionnement du site grâce à l'utilisation, vous l'avez deviné, de la hiérarchie visuelle.
Complexité visuelle
La dernière façon de contrôler la hiérarchie visuelle consiste à utiliser la complexité visuelle et des modèles discernables. Le principe ici est que si vous souhaitez que quelque chose se démarque davantage de la page que des objets qui l’entourent, rendez-le considérablement plus ou moins complexe. Même si les objets ont une taille et une couleur similaires, la complexité accrue ajoutera à l'intérêt visuel.
Ce principe est étroitement lié à des modèles discernables. Comme mentionné précédemment, votre cerveau cherche constamment à donner un sens et à imposer un ordre au chaos de pixels que vous voyez à l'écran. Il s’attachera donc aux domaines qui sont non seulement les plus intéressants en raison de leur complexité, mais également aux éléments sur lesquels il peut imposer un schéma familier.
L'exemple de base ci-dessus peut nous apprendre beaucoup sur la façon dont nous concentrons notre attention. Il y a deux zones de l'image qui ressortent le plus. Les deux formes particulières de la rangée supérieure sont le premier et le plus évident. Non seulement ils sont plus complexes visuellement que les objets qui les entourent, mais ils rappellent aussi quelque chose de familier: une paire d'yeux. Malgré le chaos qui les entoure, ces formes attirent votre attention car les visages font partie des objets les plus familiers, les plus conviviaux et même les plus menaçants que nous rencontrons. Si vous souhaitez définir une zone donnée très haut dans la hiérarchie visuelle, quelle que soit sa position sur une page, vous ne pouvez pas vous tromper avec un visage.
Après avoir abandonné la paire d'yeux, votre prochaine cible probable est constituée des deux triangles répétés dans la rangée du bas. Ici encore, votre cerveau tente d’imposer l’ordre. Il comprend ce domaine un peu plus que les autres en raison de l'élément répété. L'utilisation de la répétition sélective dans vos conceptions est un excellent moyen d'ajouter un intérêt visuel, de connecter des objets distants et de guider le spectateur sur le chemin que vous souhaitez lui donner. Pour utiliser efficacement la répétition, implémentez simplement les variables dont nous venons de parler (taille, couleur et complexité) comme base de l'élément répété.
Conclusion
Le but de cet article était de vous familiariser davantage avec l’utilisation des concepts de hiérarchie visuelle pour contrôler l’importance des objets sur une page et orienter les internautes dans la direction souhaitée. J'espère que j'ai réussi à vous amener à appliquer consciemment une hiérarchie claire et intentionnelle dans chaque élément que vous concevez.
Utilisez les commentaires ci-dessous pour nous dire ce que vous avez pensé de l’article et si vous avez déjà beaucoup réfléchi à votre utilisation des hiérarchies visuelles d’information.