Il y avait d’abord des tablettes de pierre, des rouleaux de papyrus et du papier. Viennent ensuite les écrans d’ordinateurs et les tablettes électroniques. Au fur et à mesure que la technologie évolue, c’est toujours le travail du concepteur d’organiser clairement le contenu. Mais quelle est la meilleure façon ? Finalement, la hiérarchie visuelle.
en voici un définition de la hiérarchie visuelle: La hiérarchie visuelle est la disposition des éléments graphiques dans un dessin par ordre d’importance de chaque élément. Le poids visuel définit l’importance d’un élément dans la hiérarchie d’un design, en communiquant aux yeux du spectateur sur quoi se concentrer et dans quel ordre.
C’est une question de plus en plus importante, car les frameworks réactifs obligent les concepteurs à penser à de nombreuses pages différentes à la fois. Confrontés à des textes denses et à de courtes durées d’attention, les concepteurs ont développé 6 principes pour guider les yeux du lecteur vers les informations les plus importantes.
Celles-ci principes de la hiérarchie visuelle Ils vous aideront à tout concevoir, des brochures aux applications, garantissant une expérience de lecture positive pour l’utilisateur final.
Toutes les cultures lisent de haut en bas et la plupart des cultures lisent de gauche à droite. Mais bien que ces connaissances soient importantes pour la conception, les concepteurs savent que la tâche est beaucoup plus complexe.
Des études récentes ont montré que les gens scannent d’abord une page pour avoir une idée de leur intérêt, avant de s’engager à la lire. Les modèles de numérisation ont tendance à prendre l’une des deux formes, « F » et « Z », et vous pouvez en tirer parti dans votre conception.
Modèles F
Les Modèles F sont généralement appliqués aux pages Web traditionnelles contenant beaucoup de texte, telles que des articles ou des articles de blog. Un lecteur parcourt le côté gauche de la page, à la recherche de mots-clés intéressants dans des titres alignés à gauche ou des phrases d’ouverture de sujet, puis s’arrête et lit (vers la droite) lorsqu’il arrive à quelque chose d’intéressant. Le résultat ressemble à un F (ou E, ou quelque chose avec plus de barres horizontales, mais le terme « F » est resté).
Comment pouvez-vous utiliser cela? Alignez les informations importantes à gauche et utilisez des titres courts et en gras, des puces et d’autres éléments qui attirent l’attention pour diviser les blocs de paragraphes.
Motifs en Z
Les Motifs en Z elles s’appliquent à d’autres types de compositions, telles que des publicités ou des sites Web, où l’information n’est pas nécessairement présentée en blocs de paragraphes. L’œil du lecteur parcourt d’abord le haut de la page, là où les informations importantes sont susceptibles d’être trouvées, puis se dirige vers le coin diagonalement opposé et fait de même au bas de la page.
Les concepteurs Web construisent généralement leurs pages pour s’adapter 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 diagonale à travers elles.
Dans la conception ci-dessous pour la conférence Build 2010, les éléments importants incluent le logo (en haut à gauche), le bouton « s’inscrire maintenant » (en haut à droite) et la liste des conférenciers (en bas), tous stratégiquement situés aux points clés du Motif Z.
Celui-ci est assez simple : les gens lisent d’abord les choses plus importantes.
Si votre attention est attirée sur la « performance » avant le « craquage » dans l’annonce ci-dessous, vous devez contacter immédiatement un psychologue perspicace : vous pouvez probablement gagner beaucoup d’argent en vous faisant tester en tant que personne atteinte d’une anomalie rare.
Ce qui est intéressant, c’est que cette tendance est suffisamment forte pour passer outre la règle descendante. Dans l’image ci-dessus, « craquer » remplace « le temps d’agir » car il est plus grand et à gauche (la règle de gauche à droite aide donc).
Mais sur la page suivante du Rapport annuel : Campagne des droits de l’homme 2012, nous lisons les gros caractères « Lutter pour l’égalité sur la piste de la campagne » avant le texte juste au-dessus, « Élection 2012 ».
« Élection 2012. » est l’ordre d’information le plus élevé : il nous indique le sujet général auquel appartiennent les informations suivantes. Mais le concepteur a décidé que l’en-tête de l’article était plus intéressant pour les lecteurs et l’a dimensionné pour qu’il soit lu en premier.
Une autre façon d’attirer l’attention est donner au contenu amplement d’espace pour respirer. S’il reste un espace négatif substantiel autour d’un bouton, ou si les lignes d’un bloc de texte sont fortement suivies, ces éléments seront plus visibles pour les lecteurs.
Comme vous pouvez le voir dans l’image ci-dessous (qui fait partie du site Web DrawtoClick), l’espacement peut être une alternative ou un ajout élégant à l’utilisation de la taille. Ici l’argument de vente, « Notre agence vous accompagne… », est en tout petit caractère, mais il est entouré d’un excès d’espace blanc qui signale son importance. Ensuite, les phrases « Le Compendre », « Le Réaliser » et « Le Partager » sont renforcées par leur éloignement de l’espace environnant.
Lorsque les gens parlent de « texture » en ce qui concerne la hiérarchie visuelle, ils ne font pas référence aux effets de texture picturale. Au contraire, ce type de « texture » fait référence à l’arrangement ou au motif général de l’espace, du texte et d’autres détails dans une composition. Cet exemple de Bright Pink illustre très bien le concept :
Dans la première image, le mot « Sports » est plus haut dans la hiérarchie que « badminton » car il est plus grand, plus gros et plus audacieux. Dans la deuxième image, les deux mots sont presque équivalents, grâce à un rectangle noir mettant en évidence « badminton » et le plaçant dans son propre espace.
Dans la troisième image, un gribouillis d’arrière-plan interrompt la case « Sports » mais pas la case « badminton », entraînant ainsi une inversion où « badminton » est le plus élevé dans la hiérarchie. Une telle progression est difficile à prévoir, c’est pourquoi les concepteurs l’attribuent souvent à un sens holistique de la « texture ».
La sélection de la police Il est essentiel d’établir le hiérarchie visuelle. Parmi les attributs les plus importants d’une police de caractères figurent le poids (la largeur des traits qui composent vos lettres) et le style, tels que serif et sans serif. D’autres modifications comme l’italique peuvent également jouer un rôle.
Notez comment la police de caractères affecte l’ordre hiérarchique des mots dans la conception Web suivante pour The Tea Factory : « les thés parfaits pour vous garder au chaud » est le point central, mais les différences de poids et d’italique, en plus du placement des mots, produisent un une expérience de lecture plus dynamique et moins linéaire. « Voir notre sélection », l’appel à l’action, est mis en évidence plus fortement que le texte précédent en raison de la taille et de l’espacement.
Dans certains cas, l’objectif est de présenter une variété d’informations comme tout aussi urgentes. Mettre tout à la même taille et au même poids permettrait d’obtenir une équivalence, mais cela la rendrait également monotone. La différenciation des polices de caractères est un moyen de contourner ce problème, comme sur la couverture du magazine Trendi ci-dessous.
Ici, les cinq teasers autour de la périphérie de la page sont tous identiques dans la hiérarchie, mais ils obtiennent de la variété en alternant entre deux polices de caractères bien assorties : une avec empattement de poids moyen et l’autre légère mais haute sans empattement.
Voici une autre évidence : les couleurs vives se démarquent des couleurs sourdes ou des niveaux de gris, tandis que les nuances plus claires semblent plus «éloignées» et tombent donc plus bas dans la hiérarchie que les nuances plus riches et plus sombres. Le site Web Where They At contraste le surligneur jaune et l’éclairage coloré contre une grille noire et blanche pour un effet accrocheur :
Le site Web du Guggenheim utilise la couleur pour accentuer des informations importantes telles que le choix de l’emplacement, la liste des expositions en cours et des liens vers des expositions spéciales.
Le site Web du Whitney Museum, quant à lui, établit une hiérarchie au sein d’une police, d’un poids et d’un ton (noir) uniques grâce à l’utilisation de la teinte (qui consiste à ajouter du blanc à un ton de base, ce qui le rend plus clair). “Cory Arcangel on Pop Culture” está claramente por debajo de “New on Whitney Stories” en la jerarquía visual, no solo porque se coloca más abajo sino porque su tinte es más claro, lo que lo hace menos llamativo a la vista contra el fondo blanc.
La couleur revêt une importance particulière dans la conception d’applications mobiles, où une petite taille d’écran limite votre capacité à utiliser d’autres stratégies telles que la différenciation de taille et l’espace étendu. Dans l’application Grainger Industrial Supply, le bouton « passer à la caisse » est rouge, ce qui le distingue de toutes les pages sur lesquelles il apparaît. La barre « Affinez vos résultats de recherche », en revanche, est grise, ce qui la rend plus ou moins équivalente dans la hiérarchie avec d’autres éléments comme la barre de recherche et les liens de produits.
De nombreux types de mise en page, comme les pages Web, sont souvent créés selon une grille de lignes verticales et horizontales, à la fois par convention et parce que c’est le format le plus lisible. Dans un tel système, une nouvelle façon d’établir la hiérarchie émerge : briser la grille
Le texte disposé en courbe ou en diagonale se détachera automatiquement du texte de la grille environnante, occupant le devant de la scène. Cela a longtemps été une stratégie efficace dans des publicités comme le panneau d’arrêt de bus suivant de Frost Design.
tu as aimé ce que tu as lu? Partage-le avec tes amis.
Plus d’articles pour les créateurs :