Principes de hiérarchie visuelle pour les concepteurs

Les principes de hiérarchie visuelle destinés aux concepteurs sont un concept de conception utilisé pour guider la façon dont les yeux du spectateur se déplacent à travers une conception et déterminer quels éléments sont les plus importants ou visuellement attrayants.

Au début, il y avait des tablettes de pierre, des rouleaux de papyrus et du papier. Viennent ensuite les écrans d’ordinateurs et les tablettes électroniques. À mesure que la technologie d’affichage des pages évolue, les concepteurs disposent d’un moyen clair d’organiser le contenu. Mais quel est le meilleur ? En bref , hiérarchie visuelle.

Voici la définition de la hiérarchie visuelle : La hiérarchie visuelle est l'arrangement éléments graphiques dans la conception par ordre d'importance de chaque élément. Le poids visuel détermine importance de l'élément dans la hiérarchie du design, indiquant au spectateur sur quoi se concentrer et dans quel ordre.

Ressources pour les concepteurs. 50 gratuits

Cela devient un problème de plus en plus important à mesure que les frameworks réactifs obligent les concepteurs à penser à plusieurs pages différentes à la fois. Face à un texte dense et à une capacité d'attention limitée, les concepteurs ont développé 6 principes pour diriger l'œil du lecteur vers les informations les plus importantes.

Ces 6 principes de hiérarchie visuelle vous aideront à tout concevoir, des brochures aux applications, garantissant ainsi à l'utilisateur final une expérience de lecture positive pour les concepteurs.

Toutes les cultures se lisent de haut en bas et la plupart des cultures se lisent de gauche à droite. Mais même si cette connaissance est importante pour conception de pages, les designers savent que la tâche est bien plus difficile.

Des études récentes ont montré que les gens parcourent d'abord une page pour voir s'ils y sont intéressés avant de la lire. Les modèles de numérisation ont tendance à prendre l'une des deux formes suivantes, « F » et « Z », et vous pouvez en tirer parti dans votre conception.

Modèles F. Principes de hiérarchie visuelle

Modèles F s'appliquent aux pages de texte traditionnelles telles que les articles ou les billets de blog. Le lecteur scanne le côté gauche page recherche des mots-clés intéressants dans les titres alignés à gauche ou dans les phrases thématiques initiales, puis s'arrête et lit (à droite) lorsqu'il tombe sur quelque chose d'intéressant. Le résultat ressemble à un F (ou un E, ou quelque chose avec encore plus de rayures horizontales ; mais le terme « F » est resté).

Comment pouvez-vous utiliser cela ? Alignez les informations importantes sur la gauche et utilisez des titres courts et en gras, des puces et d'autres éléments similaires qui attirent l'attention pour diviser les blocs de paragraphe.

Modèle Z. Principes de hiérarchie visuelle

Motifs en Z s'appliquent à d'autres types de pages, telles que des publicités ou des sites Web, où les informations ne sont pas nécessairement présentées sous forme de paragraphes blocs. Le lecteur parcourt d'abord le haut de la page, là où les informations importantes sont susceptibles de se trouver, puis se déplace vers le coin opposé en diagonale et fait de même au bas de la page.

Les concepteurs Web conçoivent généralement leurs pages pour correspondre explicitement à ce comportement, en plaçant les informations les plus importantes dans les coins et en orientant les autres informations importantes le long des barres supérieure et inférieure et en reliant la diagonale.

Dans le ci-dessous Dans la conception de l'assemblée de la conférence 2010, les éléments importants sont le logo (en haut à gauche), un bouton « s'inscrire maintenant » (en haut à droite) et une liste d'orateurs (en bas), qui sont stratégiquement placés dans de jolis endroits en forme de Z.

2. La taille compte. Principes de hiérarchie visuelle
_

C'est assez simple : les gens lisent d'abord les grandes choses. Si vos yeux sont attirés par "la performance" avant de vous "diviser" dans la publicité ci-dessous pour le Young Vic, vous devriez contacter immédiatement un psychologue perceptuel : vous pourriez probablement gagner beaucoup d'argent en vous faisant tester comme une anomalie rare.

Ce qui est intéressant, c’est que cette tendance est en réalité suffisamment forte pour rejeter la règle descendante. Dans l'image ci-dessus, "hack" remplace "time to act" car il est plus grand et vers la gauche (la règle de gauche à droite est donc utile).

Mais sur la page suivante du rapport annuel : Campagne pour les droits de l'homme 2012 (développé dans la cinquième rubrique des médias), nous lisons en gros police « La lutte pour l'égalité en campagne » avant le texte juste au-dessus « Élection 2012 ». Principes de hiérarchie visuelle

« Élection 2012 » est l'ordre d'information le plus élevé : il nous indique le thème général auquel se rapportent les informations ci-dessous. Mais le concepteur a décidé que le titre de l'article était plus intéressant pour les lecteurs et l'a donc évalué pour qu'il soit lu en premier.

3. Espace et texture. Principes de hiérarchie visuelle

Une autre façon d'attirer l'attention est donner au contenu suffisamment d'espace pour respirer . S’il y a un espace négatif important autour du bouton ou si les lignes du bloc de texte sont largement suivies, ces éléments seront plus facilement visibles pour les lecteurs.

Comme vous pouvez le voir dans l'image ci-dessous (qui fait partie du site DrawtoClick), l'espacement peut être une alternative élégante ou un complément à l'utilisation de la taille. Ici, l'argument de vente « Notre agence vouscompagne... » est écrit en très petits caractères, mais il est entouré de nombreux espaces blancs, indiquant son importance. Ci-dessous, les expressions « Le Compendre », « Le Réaliser » et « Le Partager » reçoivent une accentuation supplémentaire, étant détachées de l'espace environnant.

Lorsque les gens parlent de « texture » en relation avec la hiérarchie visuelle, ils ne parlent pas des effets graphiques de texture. Ce type de « texture » fait plutôt référence à la disposition ou à la structure globale de l’espace, du texte et d’autres détails sur une page. Cet exemple de Bright Pink illustre bien le concept :

Dans la première image, le mot « Sport » est plus haut dans la hiérarchie que « badminton » car il est plus grand, plus gros et plus audacieux. Dans l'image 2, les deux mots sont à peu près équivalents, grâce au rectangle noir qui fait ressortir le mot « badminton » et le met dans son propre espace.

Dans la troisième image, le gribouillage de fond interrompt l'espace « Sports » mais pas l'espace « badminton », et entraîne donc un renversement où « badminton » est le plus haut dans la hiérarchie. Cette évolution est difficile à prévoir, c'est pourquoi les concepteurs l'associent souvent à un sens holistique de la « texture ».

4. Poids et appariement de la police. Principes de hiérarchie visuelle

La sélection des polices est essentielle pour établir une hiérarchie visuelle. Parmi les attributs les plus importants d’une police figurent le poids, la largeur des traits qui composent ses lettres et le style, tel que serif et sans serif. D'autres modifications, comme l'italique, peuvent également jouer un rôle.

Remarquez comment casque influence l'ordre de la hiérarchie des mots dans la conception Web ci-dessous pour The Tea Factory : "des thés parfaits pour vous aider à vous réchauffer" est le nom du jeu, mais les différences dans l'épaisseur de la police et l'italique, en plus du placement des mots, créent une image plus expérience de lecture dynamique et moins linéaire. "://azbyka.com.ua/foto/tea-factory.jpg" />

Dans certains cas, l’objectif est de présenter diverses informations tout aussi urgentes. Fixer tout le monde à la même taille et au même poids garantira l’équivalence, mais donnera également un aspect monotone. La différenciation des polices est un moyen d'éviter cela, comme la couverture du magazine Trendi ci-dessous. Principes de hiérarchie visuelle

Préparation d'une brochure pour l'impression.

Ici, les cinq teasers autour de la périphérie de la page sont identiques en termes de hiérarchie, mais obtiennent de la variété en changeant deux polices bien associées : l'une avec un empattement de poids moyen et l'autre avec un sans-serif léger mais haut.

5. Couleur et nuance. 

Voici une autre évidence : les couleurs vives se démarquent des couleurs sourdes ou des nuances de gris, tandis que les nuances plus claires semblent plus « lointaines » et se situent donc plus bas dans la hiérarchie que les nuances plus riches et plus sombres. Le site Web Where Are They oppose une lumière vive et un rétroéclairage coloré avec un effet de grille noir et blanc à l'effet de luminosité :

Le site Web du Guggenheim utilise la couleur pour mettre en valeur des informations importantes telles que le choix du lieu, une liste des expositions en cours de visualisation et des liens vers des expositions spéciales. Principes de hiérarchie visuelle

Meilleure police pour les emballages personnalisés

Le site Web du Whitney Museum, quant à lui, établit une hiérarchie au sein d'une police, d'une épaisseur et d'un ton (noir) en utilisant la teinte (ce qui signifie ajouter du blanc au ton de base, le rendant plus clair). « Cory Archangel on Pop Culture » se situe clairement en dessous de « New on Whitney Stories » dans la hiérarchie visuelle, non seulement parce qu'il est plus bas, mais aussi parce que sa teinte est plus claire, ce qui le rend moins visible sur le fond blanc. Principes de hiérarchie visuelle

La couleur a une signification particulière dans conception mobile les applications où la petite taille de l'écran limite votre capacité à utiliser d'autres stratégies telles que la variation de taille et le grand espacement. Dans l'application Grainger Industrial Supply, le bouton « Procéder au paiement » est de couleur rouge, ce qui le fait ressortir sur toutes les pages où il apparaît. Le panneau Affiner les résultats de recherche, en revanche, est gris, ce qui le rend à peu près équivalent dans la hiérarchie à d'autres éléments tels que la barre de recherche et les liens vers des produits.

6. Orientation pour les designers.

Les mises en page sont généralement conçues pour suivre une grille de lignes verticales et horizontales, à la fois par convention et parce qu'il s'agit du format le plus lisible. Dans un tel système, il existe une nouvelle manière d’établir une hiérarchie : briser la grille.

Le texte positionné le long d’une courbe ou d’une diagonale se démarque automatiquement du texte environnant bloqué par la grille, occupant ainsi le devant de la scène. Cela constitue depuis longtemps une stratégie publicitaire efficace, comme par exemple pour l'affiche d'arrêt de bus de Frost Design.