Hiérarchie visuelle pour les débutants

La hiérarchie visuelle est l'organisation des objets dans un ordre spécifique pour attirer l'attention sur les zones prévues.

Couramment utilisée dans la conception UX, la hiérarchie visuelle permet au lecteur de naviguer plus facilement et aide à diriger son attention là où vous le souhaitez.

Une mauvaise utilisation ou un manque de hiérarchie visuelle peut laisser les visiteurs du site Web confus et perdus.

La hiérarchie visuelle est répandue dans les affiches et les publicités pour aider à attirer l'attention sur les éléments voulus.

Ce blog fournira aux débutants les bases de la hiérarchie visuelle.

Hiérarchie visuelle décomposée

Décomposer la hiérarchie visuelle en morceaux plus simples aide à expliquer comment les concepteurs abordent le concept de conception.

Trois sont trois rôles principaux dans la hiérarchie visuelle, dont deux sont fortement liés.

Taille

Changer la taille des objets peut aider à attirer l'attention sur eux ou à s'en détourner.

Il est essentiel de laisser la taille la plus grande pour les informations les plus importantes que vous souhaitez exprimer. L'utilisation d'un trop grand nombre d'éléments de taille similaire enlèvera cet effet, car rien ne se démarque autant.

La mise à l'échelle des tailles est essentielle pour montrer comment elle se compare aux autres objets. La création d'un sens de l'équilibre aide à la mise à l'échelle pour souligner la façon dont votre plus grand objet se compare aux plus petits.

Si vous avez des informations qui ne sont pas importantes, les avoir dans une petite taille les gardera à l'écart et les laissera là où les utilisateurs les verront en dernier.

Couleurs & Contraste

Les couleurs plus vives attirent mieux l'attention que les autres. Cet effet augmente lorsque vous combinez des couleurs vives avec des arrière-plans plus sombres. Le résultat fait ressortir davantage vos informations et attire facilement l'attention.

La couleur et le contraste sont deux éléments de la hiérarchie visuelle, mais ils fonctionnent tous les deux parfaitement pour capter l'attention.

Une façon d'utiliser cette méthode consiste à changer la couleur d'un texte en le mettant en surbrillance avec une couleur flashy ; il attirera l'attention avant tout autre texte de couleur terne.

Plus le contraste est grand, plus l'attention est captée. L'ajout de différences de couleur drastiques telles qu'un arrière-plan sombre avec une police rouge vif attirera l'attention de l'utilisateur et en fera la première chose qu'il remarquera sur n'importe quelle image ou page Web.

Lorsque vous créez des couleurs contrastées pour attirer l'attention, il est préférable de les réduire au minimum. Trop d'objets contrastés confondent le lecteur et créent un effet indésirable et rebutant.

Une autre façon d'utiliser les couleurs consiste à choisir des palettes similaires pour créer une corrélation entre des objets spécifiques.

Il est préférable de réserver cette tactique uniquement aux éléments les plus nécessaires sur une page, car c'est là que vous voulez que toute l'attention soit dirigée en premier.

Une bonne conception UX comprend beaucoup de contraste, la plupart des esthétiques utilisant un fort contraste pour créer des œuvres époustouflantes.

Les modèles F & Z

Lorsqu'il s'agit de fournir des informations principalement par le biais de texte, il existe deux principaux modèles qui tirent le mieux parti de la façon dont nous traitons les informations visuelles.

Ces modèles fonctionnent pour la plupart des langues, mais fonctionnent très bien pour l'anglais car les mots sont lus de gauche à droite et de haut en bas.

Le motif F

Le motif F est le choix parfait pour les conceptions contenant beaucoup de texte. Le dessin suit la lettre qui porte son nom, en partant du haut à gauche et en se déplaçant vers la droite.

Après quoi, le spectateur parcourt le dos à la recherche de sous-titres ou de titres.

Le motif est alternativement nommé motif E, bien que le motif F soit plus emblématique.

Pour utiliser le modèle F, vous devez placer toutes les informations vitales sur le côté gauche dans de petits titres pour attirer l'attention.

Cette conception est superbe pour éliminer l'ennui associé à la lecture de texte sur de gros blocs de paragraphes.

Les utilisateurs peuvent scanner les titres pour repérer les titres ou les puces accrocheurs, car ils servent à attirer l'attention.

Le motif en Z

Alors que le modèle F convient aux sites Web contenant beaucoup de texte, le modèle Z est différent.

Le motif en Z est parfait pour les sites Web ou les publicités qui ne comportent pas plusieurs paragraphes de texte.

La conception commence par avoir les informations les plus prioritaires en haut à gauche, puis se répartit en importance en haut à droite, en bas à gauche et en bas à droite.

Les utilisateurs navigueront facilement dans le motif en Z, car il s'agit d'une conception fréquemment utilisée et simple à comprendre.

La section en haut à gauche est généralement réservée à un logo, car ce sera la première chose que les gens remarqueront. En haut à droite se trouve un appel à l'action positionné après que les utilisateurs ont vu le logo de l'entreprise. L'appel à l'action dans cette situation est généralement une invite d'inscription.

Le milieu de la conception comprend généralement une image pour remplir la partie vide.

Le bas à gauche et à droite comprend tout le texte ou les informations que vous souhaitez montrer à votre visiteur.

Comprendre la typographie

La hiérarchie typographique est facile à comprendre et s'applique à toute conception impliquant beaucoup de texte, qui est la grande majorité. Il peut être divisé en trois parties, l'ordre étant le titre, les sous-titres et enfin votre texte.

Vos titres contiennent des informations essentielles, sont placés en haut de votre design et constituent le contenu le plus visible.

Vos sous-titres permettent de trier tout votre texte et de mettre de l'ordre dans l'encombrement des paragraphes. Gardez toujours vos sous-titres plus petits que vos titres, car ils ne doivent pas entrer en concurrence en priorité.

Les sous-titres offrent une navigation simple aux utilisateurs pour trouver des informations spécifiques.

Votre dernier élément est votre texte, qui comprend généralement des paragraphes. La taille de la police doit être petite mais maintenir la lisibilité. Les deux sections précédentes permettent aux utilisateurs de naviguer plus facilement dans vos textes denses.

L'importance de l'espacement

Pour les sites Web contenant un minimum d'informations, laisser une abondance d'espace autour des informations importantes attirera l'attention sur le centre où se trouve tout l'espace.

Ce concept devrait également s'appliquer à toutes vos autres conceptions, ajouter trop d'informations vous laissera avec une expérience utilisateur désagréable.

Entourer le contenu d'espace offre une conception UX simple et facile à suivre.

Entailler trop d'informations et laisser peu d'espace autour des zones vous laissera avec un design qui semble écrasant et laissera les gens perplexes. Lorsque les utilisateurs sont confus, ils ont toujours la possibilité de quitter votre site Web, assurez-vous de ne présenter que les informations importantes.

Utilisation de l'alignement

Il est important d'aligner vos conceptions, car le fait d'avoir du texte positionné de manière aléatoire créera une image mouvementée à regarder.

Les conceptions de modèle F et de modèle Z incarnent toutes deux l'utilisation de l'alignement. Les conceptions de motif en F utilisent un alignement à gauche, tandis que les conceptions de motif en Z utilisent des alignements à gauche et à droite et des alignements au centre.

Lorsque vous créez une conception visuelle avec du texte comme objectif, il est préférable de l'aligner à gauche.

Pour les conceptions strictement visuelles avec une orientation simpliste, l'alignement de tous les éléments au centre tend à créer une conception attrayante.

Utiliser des grilles

Lors de la création de conceptions, les grilles sont une méthode courante pour faciliter le processus de création. L'utilisation de la règle des tiers permet d'ajouter de l'équilibre à vos conceptions.

Pour utiliser la règle des tiers, ajoutez une grille à votre dessin et laissez-la reposer sur deux lignes horizontales et verticales. Le résultat offre un design agréable et agréable pour les yeux.

Les objets plus proches du centre attireront l'attention, tandis que ceux qui sont éloignés attireront l'attention en dernier.

Proximité et Relation

Lorsque les éléments sont plus proches les uns des autres, votre lecteur supposera qu'ils sont liés.

Cela peut vous aider à organiser de nombreuses informations et à les rendre plus faciles à comprendre pour votre spectateur.

Regrouper des images avec du texte signifie qu'elles sont toutes les deux liées et que les lecteurs associeront les deux ensemble. Avoir une image et le texte éloignés laissera le lecteur supposer que les deux éléments ne sont pas liés et n'ont rien à voir l'un avec l'autre.

Polices et hiérarchie visuelle

Changer la taille de votre police avec des polices plus grandes réservées aux informations importantes aidera à attirer l'attention sur elles.

Pour une affiche, les noms doivent être l'une des polices les plus grandes, tandis que les éléments tels qu'une adresse doivent être écrits dans une petite police.

Passer de la taille de la police à l'utilisation de différents types de polices aidera à attirer l'attention de l'utilisateur. Utilisez une police différente pour les titres, les sous-titres et le texte d'information. Cette méthode de conception vous aidera à donner à votre travail l'éclat dont il a besoin pour attirer et maintenir l'attention du lecteur.

Conseils de hiérarchie visuelle

Avant de commencer à créer votre design, prendre quelques notes peut vous aider à organiser votre design et même vous aider à créer des designs plus esthétiques.

Notez les informations les plus importantes que vous devez prioriser et les méthodes que vous utiliserez pour le faire.

Essayez également d'imaginer le parcours du lecteur et essayez d'améliorer la conception UX, et supprimez tous les détails encombrants.

Le retour sur investissement d'une bonne conception UX vaut toujours le travail supplémentaire, alors ne sous-estimez pas son importance.

Emballer

La hiérarchie visuelle consiste à dicter l'ordre dans lequel vous souhaitez que l'attention de votre lecteur aille ; vous voulez que les informations vitales soient vues en premier, suivies de tout le reste.

L'utilisation du contraste peut créer des couleurs éclatantes et devenir la première chose que les lecteurs remarquent dans un design.

Savoir quelles informations vous voulez voir en premier par les lecteurs vous permettra d'utiliser tous les éléments de la hiérarchie visuelle pour fournir aux autres un bon design UX.