D'abord sur des tablettes de pierre, des rouleaux de papyrus et du papier, puis sur des écrans d'ordinateur et des tablettes - à mesure que la technologie de représentation d'une page évolue, il reste au concepteur la tâche d'organiser le contenu avec soin. Mais quelle est la meilleure façon de le faire ? En bref : à l'aide de la hiérarchie visuelle.
Qu'est-ce que la hiérarchie visuelle ?
–
La hiérarchie visuelle est la disposition des éléments graphiques dans un design par ordre d'importance. L'importance visuelle définit l'importance d'un élément dans la hiérarchie de conception et indique au spectateur dans quel ordre se concentrer sur quoi.
Il s'agit d'une question de plus en plus importante car les frameworks réactifs mettent les concepteurs au défi de penser à de nombreuses pages différentes à la fois. Face à de longs textes et à de courtes durées d'attention, les concepteurs ont développé 6 règles de base qui attirent l'attention du lecteur sur les informations les plus importantes.
Ce6 règles de base de la hiérarchie visuellevous aidera avec tout dedépliantsbisapplicationsconcevoir et garantir au lecteur une expérience de lecture positive.
1. Modèle de lecture
–
Toutes les cultures lisent de haut en bas et la plupart lisent de gauche à droite. Et bien que cela soit important pour la conception de pages, les concepteurs savent que la tâche est beaucoup plus compliquée.
Des études récentes ont montré qu'avant de lire, les gens parcourent d'abord une page pour savoir si elle les intéresse. Le motif dans lequel la page est numérisée est généralement l'une des deux formes, le "F" ou le "Z" et vous pouvez en tirer parti dans votre conception.
F-Muster
F-Musterse produisent sur des pages traditionnelles contenant beaucoup de texte, telles que des articles ou des billets de blog. Un lecteur parcourt la page de haut en bas à gauche, à la recherche de mots-clés intéressants dans des titres alignés à gauche ou des phrases d'introduction, puis continue à lire vers la droite lorsqu'il trouve quelque chose d'intéressant. Le résultat ressemble un peu à un F (ou à un E ou quelque chose avec encore plus de barres horizontales, mais nous sommes restés avec le F).
Comment pouvez-vous utiliser cela? Alignez à gauche vos informations importantes et utilisez des titres courts et accrocheurs, des puces et d'autres accroches pour diviser les sections.
Z-Muster
Z-Musterpeuvent être trouvés sur toutes les autres pages telles que les publicités ou les sites Web où les informations ne sont pas nécessairement présentées dans des rubriques. Le regard du lecteur parcourt d'abord le haut de la page, là où l'information est susceptible de se trouver, puis descend en diagonale vers le coin opposé, puis fait exactement la même chose en bas de la page.
concepteur de sites Webconstruisent souvent leurs pages pour s'adapter à ce comportement, en plaçant les informations les plus importantes dans les coins et en alignant les autres informations importantes le long des marges supérieure et inférieure et des diagonales de connexion.
Dans la conception duConstruire Conférence 2010les éléments importants consistent enLogo(en haut à gauche), le bouton "S'inscrire maintenant" (en haut à droite) et la liste des orateurs (en bas) et sont tous délibérément placés aux points idéaux du motif en Z.
2. La taille compte
–
C'est facile:Les gens lisent d'abord les choses plus importantes.Si dans la publicité pour çaJeune VicSi votre regard s'égare vers "performance" avant même de lire "cracking", vous devriez prendre rendez-vous immédiatement avec un psychologue perceptif : vous pourriez probablement gagner beaucoup d'argent en subissant divers tests comme une anomalie rare.
Ce qui est intéressant, c'est que cette tendance est suffisamment forte pour défier la règle descendante. Dans l'image ci-dessus, "craquer" éclipse "le temps d'agir" car il est à la fois plus grand et à gauche (la règle de gauche à droite est donc utile ici).
Mais dans la page ci-dessous de laRapport annuel : Campagne des droits de l'homme 2012(conçu parMédias de la colonne cinq), nous lisons les gros caractères "Fighting for Equality on the Campaign Trail" avant le texte "Election 2012" juste au-dessus.
« Élection 2012 » est l'élément d'information le plus essentiel : il nous indique le thème général sous lequel s'inscrit l'information. Mais le concepteur a décidé que le titre de l'article serait plus intéressant pour le lecteur, alors il l'a dimensionné pour qu'il soit lu en premier.
3. Espace et texture
–
Une autre façon d'attirer l'attention est deContenu assez d'espace pour respireradmettre. Lorsqu'il y a suffisamment d'espace blanc autour d'un bouton ou que les lignes d'un texte sont largement espacées, ces éléments deviennent plus visibles pour le lecteur.
Comme vous pouvez le voir dans l'image ci-dessous (partie du site Web deDessiner pour cliquer), le suivi peut être une alternative élégante ou un ajout à la taille. Ici, l'argumentaire de vente "Notre agence vous accompagne..." est écrit dans une très petite police mais entouré de beaucoup d'espace blanc pour indiquer l'importance. En dessous, les mots "LE COMPRENDRE", "LE RÉALISER" et "LE PARTAGER" sont mis en valeur en étant séparés par l'espace qui les entoure.
Lorsque l'on parle de "texture" dans le contexte de la hiérarchie visuelle, on ne fait pas référence aux effets de texture picturale. Au lieu de cela, ce type de texture fait référence à la disposition ou au modèle général de l'espace, du texte et d'autres détails sur une page. Cet exemple deRose pétantillustre très 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 la deuxième image, les deux mots sont à peu près équivalents, grâce au rectangle noir mettant en évidence "badminton" et lui donnant son propre espace.
Dans la troisième image, un gribouillis en arrière-plan perturbe l'espace de "Sports" mais pas celui de "Badminton", ce qui fait finalement que "Badminton" est le plus élevé dans la hiérarchie. Une telle évolution est difficile à prévoir, c'est pourquoi les concepteurs l'attribuent souvent à une "texture".
4. Poids et appariement de la police
–
Le choix de la police est extrêmement important pour créer une hiérarchie visuelle.Les caractéristiques les plus importantes d'une police de caractères comprennent le poids - l'épaisseur des traits qui composent les lettres - et le style, comme les empattements et les sans empattements. D'autres modifications telles que l'italique peuvent également jouer un rôle.
Découvrez la hiérarchie des mots dans la conception Web pourL'usine à théinfluencé par la police : "Les thés parfaits pour vous garder au chaud" occupe le devant de la scène, mais les différences de poids et les italiques se combinent avec le placement des mots pour créer une expérience de lecture plus dynamique et moins linéaire. "Voir notre sélection" - l'appel à l'action - est plus mis en évidence que le texte au-dessus 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. Leur donner à tous la même taille et la même force assurerait l'égalité, mais leur donnerait également un aspect monotone. Différentes polices sont un moyen d'éviter cela, comme avec leCouverture de magazine pour Trendiplus bas.
Ici, les cinq teasers au bord de la page se classent de manière égale dans la hiérarchie, mais ajoutent de la variété avec deux polices bien appariées – un serif de poids moyen et un sans-serif léger mais grand.
5. Couleur et teinte
–
Voici une autre évidence :Les couleurs vives se démarquent des couleurs sourdes ou des nuances de gris, tandis que les nuances plus claires apparaissent plus « distantes » et se situent donc en dessous des nuances plus audacieuses et plus sombres dans la hiérarchie. Le site pourOù ils sontcontraste une image jaune vif et colorée avec une grille en noir et blanc pour créer un effet impressionnant :
Le site deMusées Guggenheimutilise la couleur pour mettre en évidence des informations importantes telles que la sélection de l'emplacement, une liste des expositions en cours et des liens vers les expositions en vedette.
Le site Web du Whitney Museum, quant à lui, utilise une police, un poids et une couleur (noir) uniques pour créer une hiérarchie à l'aide de la teinte (qui fait référence à l'ajout de blanc à une couleur de base, ce qui la rend plus claire). Cory Arcangel sur Pop Culture est clairement en dessous de New on Whitney Stories dans la hiérarchie visuelle; non seulement parce qu'il est placé plus bas, mais aussi parce qu'il est plus lumineux, ce qui le rend moins visible sur le fond blanc.
La couleur est particulièrement importante dans la conception d'applications, où un petit écran limite votre capacité à utiliser d'autres stratégies telles que différentes tailles et un espacement large des lignes. Dans l'application deApprovisionnement industriel GraingerLe bouton "Passer à la caisse" est coloré en rouge, ce qui le fait ressortir sur chaque page. La barre "Affinez vos résultats de recherche", en revanche, est grise et donc à peu près au même niveau que d'autres éléments tels que la barre de recherche et les liens de produits dans la hiérarchie.
6ème orientation
–
Les mises en page sont généralement conçues le long d'une grille de lignes verticales et horizontales, à la fois parce que c'est si courant et parce que c'est le format le plus lisible. Dans un tel système, une nouvelle façon de hiérarchiser émerge : s'écarter de la grille.
Le texte placé le long d'une courbe ou d'une diagonale contrastera automatiquement avec le texte qui suit la grille et attirera l'attention. Cela a longtemps été une stratégie puissante dans la publicité, comme leConception de givreà un arrêt, que l'on peut voir ci-dessous.
