Share
La hiérarchie visuelle est l’un des principes les plus importants d’une conception Web efficace. Cet article examinera les raisons pour lesquelles il est crucial de développer une hiérarchie visuelle sur le Web, la théorie qui la sous-tend et comment vous pouvez utiliser des exercices très basiques dans vos propres conceptions pour mettre ces principes en pratique.
À la base, le design est avant tout une question de communication visuelle: pour être un designer efficace, vous devez être capable de communiquer clairement vos idées aux téléspectateurs, sinon ils perdront leur attention. Les gens sont inconstants cependant; Si vous leur fournissez un bloc d'informations massif, il est probable que 99 personnes sur 100 ne se donneront pas la peine de les lire. Pourquoi? Parce que la plupart des gens sont fondamentalement des penseurs visuels et non des processeurs de données.
Pour comprendre pourquoi cela est vrai, il est important de comprendre un peu la façon dont nous voyons les choses. Les gens ne sont pas ce que vous appelleriez des "spectateurs de l'égalité des chances". Plutôt que de prendre en compte les informations visuelles et de les traiter de manière uniforme, les gens organisent ce qu'ils voient en termes de "relations visuelles". Considérons l’image suivante de deux cercles ordinaires:
Les chances sont, vous ne voyez pas "deux cercles"; Au lieu de cela, vous avez vu "un cercle noir et un cercle rouge plus petit".
La raison est assez simple: lorsqu'on lui présente quelque chose d'aussi simple que deux cercles, une personne ne verra pas que deux cercles ordinaires, elle trouvera le moyen de différencier entre les deux. Un cercle peut être plus grand, ou plus petit, ou coloré, ou toute autre variété de différences. Ces différences nous permettent de distinguer les objets et de leur donner des significations uniques.
Regardons maintenant une image plus complexe:
La complexité ajoutée renforce en réalité notre désir de "classer" les objets en termes de relations. Les similitudes et les différences deviennent le cadre à travers lequel nous visualisons les formes. Les différences d'échelle suggèrent qu'un objet est plus proche de nous qu'un autre ou que l'un est plus dominant que l'autre; Les variations de couleur peuvent suggérer qu'un objet possède une personnalité unique qui le distingue de l'autre objet. Beaucoup d’informations peuvent être livrées en une seule image en utilisant des outils très rudimentaires.
? Comprendre que les gens vont voir nos designs en termes de relations est crucial pour devenir un designer plus efficace.
Reprenons cet exemple pour la conception de sites Web; Parce que la conception Web consiste uniquement à communiquer des informations visuelles, il est essentiel de comprendre que les gens verront nos conceptions sous forme de relations afin de devenir un concepteur plus efficace. En tant que concepteurs de sites Web, il peut sembler suffisant de simplement diffuser des informations. En tant que concepteurs Web, notre tâche consiste à décomposer ces informations brutes en de délicieux petits morceaux d'informations visuellement pertinentes qui sont faciles à regarder et, plus important encore, efficaces pour communiquer le message. derrière une page web.
Il y a une centaine d'explications pour lesquelles les gens voient en termes de relations; Si vous deviez le retrouver anthropologiquement, vous pourriez en conclure qu'une mentalité de chasseurs-cueilleurs a forcé les humains à reconnaître à un moment donné que voir des relations est une compétence de survie..
Voir, même l'homme préhistorique avait un respect sain pour le contraste visuel.
Une explication plus pratique est peut-être que c'est simplement la façon dont notre cerveau catégorise l'information: grouper des éléments visuels similaires et les organiser en motifs significatifs est aussi inhérent à notre nature humaine que manger ou boire. Quoi qu’il en soit, le fait est que même sous sa forme la plus élémentaire, une information organisée avec une hiérarchie à l’esprit sera toujours plus efficace pour communiquer que une information non organisée..
Considérez l'image suivante de deux blocs de texte:
Dans l'exemple ci-dessus, nous voyons la forme la plus rudimentaire d'un système de hiérarchie visuel appliqué au texte. Les informations contenues dans chacun des deux exemples ne sont pas différentes, mais la manière dont elles ont été divisées change radicalement la façon dont le lecteur la verra et la prendra en compte. Lorsque nous parlons de hiérarchie visuelle en termes de typographie, nous entendons par là. . La proximité, l'échelle et la similarité de la mise en forme du texte permettent au lecteur d'organiser l'exemple inférieur en titres et en paragraphes. La hiérarchie donne aux titres plus de signification que les autres informations et facilite la numérisation..
Bon, c'est donc tout ce qu'il y a de plus fondamental, non? Jetons un coup d’œil à quelques exemples plus profonds de la façon dont vous pouvez appliquer cela très de base principe à certains très sophistiqué dessins:
Comprendre que la hiérarchie visuelle est importante est très bien, mais comment un concepteur la crée-t-elle réellement? Les "outils" que nous allons examiner sont aussi simples que les outils d'un menuisier - marteau, clou, scie, etc. - c'est ce que vous en faites qui compte.!
Les objets plus gros demandent plus d'attention. L'utilisation de la taille en tant qu'outil hiérarchique est un moyen efficace de guider l'œil du spectateur vers une partie particulière de la page. La taille étant l’une des formes d’organisation les plus puissantes, il est important de mettre en corrélation Taille avec importance dans un design. Les éléments les plus importants devraient être les plus importants dans la plupart des cas; les plus petits éléments devraient être les moins importants.
L'utilisation de caractères BIG et gras ajoute un niveau d'ordre à cette conception par ailleurs chaotique. L'œil doit naturellement passer des éléments les plus grands aux éléments les plus petits.
La couleur est un outil intéressant car elle peut servir à la fois d’outil d’organisation et d’outil de personnalité. Les couleurs vives et contrastées sur un élément particulier d’un site Web doivent retenir l’attention (comme les boutons, les messages d’erreur ou les hyperliens). Lorsqu'il est utilisé comme personnalité outil, la couleur peut aller au-delà dans des types de hiérarchie plus sophistiqués; L'utilisation de couleurs réconfortantes peut apporter un attrait émotionnel à une page. La couleur peut affecter tout, de la marque d'un site Web (par exemple: CocaCola Red) au symbolisme (par exemple, des couleurs froides et modérées). Les applications avancées de couleur peuvent même être utilisées pour "classer" les informations dans une hiérarchie, comme dans l'exemple suivant:
Le site Spectra Viewer utilise des couleurs pour représenter différentes catégories d'actualités. Il est donc facile de trouver un type particulier d'informations en fonction de la clé de couleur..
Le contraste montre relativement important. Des changements dramatiques dans la taille du texte ou la couleur donneront le message que quelque chose est différent et nécessite une attention particulière. Le passage d'une couleur d'arrière-plan claire à une couleur d'arrière-plan sombre peut rapidement séparer le contenu principal d'une page du pied de page..
Le contraste entre la section d'en-tête claire et aérée et le pied de page sombre et terrestre crée une hiérarchie distincte d'informations..
L'alignement crée de l'ordre entre les éléments. Cela peut être aussi simple que la différence entre une "colonne de contenu" et une "colonne de barre latérale", mais l'alignement peut également revêtir des rôles hiérarchiques plus complexes. Considérez, par exemple, le pouvoir des informations placées dans le coin supérieur droit d'une page Web. Étant donné que les utilisateurs s'attendent généralement à ce que les informations contenues dans cette partie de l'écran soient associées à des profils, comptes, paniers d'achat, etc., cela donne à toutes les localités de cette zone le sens du mot "officiel". L'alignement peut également susciter de l'intérêt s'il est utilisé de manière unique, comme dans les exemples suivants:
Le modèle utilise un système d'alignement horizontal unique pour séparer la marque et la navigation du contenu d'un article de blog..
Le modèle Flex utilise une présentation inspirée de la grille pour développer un intérêt visuel, ainsi qu'une hiérarchie visuelle basée sur la taxonomie..
La répétition attribue une signification relative aux éléments; Si tout le texte du "paragraphe" est gris, lorsqu'un utilisateur voit un nouveau bloc de texte gris, il peut supposer qu'il s'agit d'un autre paragraphe de base; lorsque le même utilisateur rencontre un lien bleu ou un titre noir, il peut supposer en toute sécurité qu'il est différent et unique du texte gris.
Le site Virgin crée des éléments répétitifs tels que du texte de paragraphe, puis interrompt la répétition lorsqu'il veut attirer l'attention (comme le texte de citation rouge)..
La proximité sépare les éléments les uns des autres et crée des sous-hiérarchies. Dans une page, il peut y avoir des widgets séparés les uns des autres par un espace; dans ces widgets, il existe une nouvelle hiérarchie de titres, sous-titres et contenus. La proximité est également le moyen le plus rapide d’associer un contenu similaire. Dans l'exemple suivant, il est facile de trouver certains types de contenu simplement en fonction de leur proximité..
Les sites Tuts + le font vraiment très bien (pour ne pas nous vanter!). La colonne "contenu" de gauche est clairement séparée à proximité de l'espace du widget de la barre latérale. De plus, les métadonnées d'un article de blog particulier sont placées à proximité immédiate de cet article et par rapport à d'autres articles, renforçant ainsi le sentiment d'appartenance..
Le fait de tasser des éléments dans un espace le fait paraître "lourd" et encombré; Lorsque les éléments sont trop espacés, ils risquent de perdre les relations entre eux. Lorsqu'une page est conçue "parfaitement bien", l'œil reconnaîtra facilement quand les éléments sont liés et quand ils ne le sont pas..
En espaçant les éléments et en laissant beaucoup d'espace sur la page, cette conception permet aux utilisateurs de se déplacer plus facilement et de rechercher les petites boîtes de contenu très compactes..
Peut-être l'outil le plus ouvert de la boîte à outils des hiérarchiques, le style peut être utilisé pour communiquer une forme de hiérarchie qui englobe et transcende les autres outils. Par exemple: un fond gris plat se "sentira" différemment d'un fond texturé en asphalte. Ce style ou cette personnalité donnée par le concepteur va naturellement jouer un rôle dans la création de relations visuelles différentes..
Il est à noter que le style est également l'un des outils les plus dangereux qu'un concepteur puisse utiliser. Tout comme un menuisier coupant son doigt sur une scie à ruban, un designer peut facilement induire les gens en erreur en mettant trop l'accent sur certains éléments à travers le style. Imaginez un élément de site très texturé et conçu qui demande tant d'attention qu'il distrait au lieu d'informer. Cette même idée s’étend aux polices de caractères, aux boutons, aux onglets et à d’autres éléments. Soyez attentif à l'impact sur une conception globale lorsque vous choisissez d'ajouter du style et du lustre à un élément.
Le site de Jeff Finley fait un excellent travail en combinant un grand nombre des outils dont nous avons discuté ici, mais son utilisation d'éléments stylisés à l'origine par rapport au fourrage d'interface utilisateur standard donne tout le sens de la conception de la hiérarchie intentionnelle. Jeff réussit à ajouter juste assez de style pour que son site se sente personnel sans en faire trop..
Une bonne hiérarchie visuelle ne concerne pas les graphiques sauvages et fous ni les derniers filtres Photoshop, mais l'organisation des informations de manière utilisable, accessible et logique pour le visiteur du site au quotidien..
Comme je viens de le suggérer dans la dernière section, il est important de noter que la hiérarchie peut être utilisée à la fois pour le bien et pour le mal. Pensez à toutes les publicités Flash ennuyeuses, fenêtres popup, bannières à paillettes, etc. auxquelles le Web a été victime au cours des années! Bien que ces annonces parviennent à attirer l'attention, elles échouent en fin de compte pour le propriétaire du site et le spectateur en brisant la hiérarchie visuelle au sein d'un site. De même, si un concepteur construit une hiérarchie visuelle telle que certaines informations essentielles sont quasiment impossibles à trouver, le concepteur aura échoué dans sa tâche. Une bonne hiérarchie visuelle ne concerne pas les graphiques sauvages et fous ni les derniers filtres Photoshop, mais l'organisation des informations de manière utilisable, accessible et logique pour le visiteur du site au quotidien..
?Les concepteurs peuvent créer une normalité à partir du chaos; ils peuvent clairement communiquer leurs idées en organisant et en manipulant des mots et des images.?-Jeffery Veen, L'Art et la Science du Web Design
Jeffrey Veen a écrit ces mots en 2001, mais ils détiennent encore beaucoup de pouvoir aujourd'hui où la "surcharge d'informations" semble être monnaie courante. En tant que personnes, nous avons toujours eu un sens aigu de l'organisation visuelle. Cependant, en tant que société, nous sommes confrontés à un véritable tsunami d'informations visuelles au cours des deux dernières décennies. de ce fait, les gens sont aujourd'hui extrêmement sensibles à la hiérarchie visuelle. C'est particulièrement le cas sur le Web, où des études ont prouvé que les internautes habitués ont appris à "analyser" le contenu de manière naturelle. rechercher automatiquement des informations qui correspondent à leurs intérêts et jeter / ignorer des informations qui ne le font pas.
Pour cette raison, devenir un maître de la hiérarchie visuelle n'est pas facultatif, c'est obligatoire. Alors que les plates-formes de navigation sur Internet typiques s'étendent des écrans traditionnels aux téléphones, tablettes et même aux téléviseurs, il est de plus en plus important d'utiliser des systèmes visuels clairs et puissants pour communiquer avec les internautes..
Pour conclure, je voudrais terminer par un exercice très simple. À titre d'exemple, nous utiliserons un site Web fréquent ou un projet sur lequel vous avez travaillé récemment; L'exercice va comme ceci:
Dans la plupart des cas, la réponse inclura des nuances de "non". Cela s'explique par de nombreuses raisons - demandes des clients, concepteurs inexpérimentés, conception par comité - ou une centaine d'autres raisons que vous avez probablement déjà lues. Heck, dans certains cas, le concepteur peut vouloir induire le spectateur en erreur (considérons un site "gratuit" qui tente de guider les utilisateurs vers du contenu payant). Quelle que soit la raison, comprendre la hiérarchie visuelle et essayer de l'interpréter est un moyen d'améliorer la façon dont vous concevez la conception Web sous un jour totalement différent. Espérons que cela aidera à informer votre propre travail aussi!
Accentsconagua