Advertisement
  1. Web Design
  2. Design Theory

Comprendre la hiérarchie visuelle dans la conception Web

by
Read Time:11 minsLanguages:
This post is part of a series called Web Design Theory.
Designing for the New Fold: Web Design Post Monitorism

French (Français) translation by Jeane Jade (you can also view the original English article)

La hiérarchie visuelle est l'un des plus importants principes de conception de sites web efficaces. Cet article examine pourquoi l'élaboration d'une hiérarchie visuelle est un élément crucial sur le web, la théorie derrière cela, et comment vous pouvez utiliser des exercices dans vos propres dessins à mettre ces principes en pratique.

Design = Communication

En son centre, le design est tout au sujet de la communication visuelle: Pour être efficace, un designer, vous devez être capable de communiquer clairement vos idées pour les téléspectateurs ou encore de perdre leur attention. Les gens sont inconstants, si vous leur donnez un énorme bloc de l'information, les chances sont que 99 personnes sur 100 ne vais pas la peine de le lire. Pourquoi? Parce que la plupart des gens sont fondamentalement les penseurs visuels, pas de traitement de données.

Pour comprendre pourquoi cela est vrai, il est important de comprendre un peu plus sur la façon dont nous voyons les choses. Les gens ne sont pas ce que vous appelez "l'égalité des chances de voir-ers". Plutôt que de prendre dans visual information et à la traiter de manière homogène, les gens organisent ce qu'ils voient en termes de "relations visuelles". Permettez-nous de considérer l'image suivante de l'ordinaire deux cercles:

visual hierarchy in web designvisual hierarchy in web designvisual hierarchy in web design

Les Chances sont, vous ne voyez pas "deux cercles"; au Lieu de cela, vous avez vu "un cercle noir et un plus petit cercle rouge".

La raison est assez simple: Lorsqu'il est présenté avec quelque chose d'aussi simple que de deux cercles, une personne ne sera pas seulement de voir deux ordinaire cercles, ils vont trouver un moyen de différencier les deux. Un cercle peut être plus grand, ou plus petit, ou de couleur, ou toute autre variété de différences. Ces différences nous permettent de faire la distinction entre les objets et leur donner sens unique.

Regardons maintenant de plus en plus complexe de l'image:

visual hierarchy in web designvisual hierarchy in web designvisual hierarchy in web design

La complexité supplémentaire en fait renforce notre désir de "classer" les objets en termes de relations. Les similitudes et les différences deviennent le cadre que nous considérons les formes à travers. Les différences dans l'échelle suggèrent qu'un objet est plus proche de nous qu'un autre ou que l'un est plus dominante que l'autre; les Variations de couleur peuvent suggérer qu'un objet est titulaire d'une personnalité unique qui le distingue de l'autre objet. Beaucoup d'informations peuvent être livrés en une seule image en utilisant des outils très rudimentaires.

...De comprendre que les gens vont voir nos modèles en termes de relations est cruciale pour rendre plus efficace le concepteur.

Prenons l'exemple de retour à la conception web; Parce que la conception web est tout au sujet de la communication de l'information visuelle, la compréhension que les gens vont voir nos modèles en termes de relations est cruciale pour rendre plus efficace le concepteur. Alors qu'il pourrait sembler comme il suffit à plat de l'information, en tant que concepteurs de site web, notre tâche est de briser ces données brutes en délicieux petits morceaux de visuellement les informations pertinentes qui sont faciles sur les yeux, et, plus important encore, efficaces pour communiquer le message derrière une page web.

L'Aube de la Hiérarchie

Il y a une centaine d'explications pour expliquer pourquoi les gens voir en termes de relations, Si vous étiez à le faire remonter anthropologiquement, vous pourriez conclure qu'un chasseur-cueilleur mentalité forcé les humains à un moment de reconnaître que le fait de voir les relations est une technique de survie.

visual hierarchy in web designvisual hierarchy in web designvisual hierarchy in web design

Voir, même l'homme préhistorique avait un respect sain pour le contraste visuel.

Peut-être plus pratique de l'explication, c'est que c'est simplement la façon dont notre cerveau classer l'information: le regroupement similaire d'éléments visuels et de l'organiser de véritables modèles est inhérente à notre nature humaine que de manger ou de boire. De toute façon, le fait est que, même dans sa forme la plus élémentaire, de l'information qui est organisé avec une hiérarchie dans l'esprit sera toujours plus efficace que la communication non-syndiqués de l'information.

Considérer l'image suivante de deux blocs de texte:

visual hierarchy in web designvisual hierarchy in web designvisual hierarchy in web design

Dans l'exemple ci-dessus, nous voyons le plus rudimentaire, d'une hiérarchie visuelle du système de l'appliquer à un texte. Les informations contenues dans chacun des deux exemples n'est pas différent, mais la façon dont il a été rompu de façon spectaculaire modifie la façon dont le lecteur va la voir et la prendre en. Lorsque nous parlons de la hiérarchie visuelle en termes de typographie, c'est ce que nous voulons dire. La proximité, l'échelle et la similitude de la mise en forme du texte permet au lecteur d'organiser le moindre exemple dans les titres et les paragraphes. La hiérarchie donne les titres de plus de sens que les autres informations, et le rend plus facile à analyser.

Bon, c'est tout assez basique, non? Nous allons prendre un plongeon dans certains plus profonde des exemples de la façon dont vous pouvez appliquer ce principe de base, pour certains très sophistiquées:

Le Hierarchist la boîte à outils du

Comprendre que la hiérarchie visuelle est important, c'est très bien, mais comment un concepteur de le créer? Les "outils" que nous allons voir sont simples comme charpentier de la palette d'outils - marteau, clou, vis, etc - C'est ce que vous faites avec eux, c'est ce qui compte!

Taille

Les objets qui sont plus grands, demande plus d'attention. À l'aide de la taille comme un hiérarchique de l'outil est un moyen efficace de guider un œil du spectateur à une partie spécifique de la page. Parce que la taille est l'une des formes les plus puissantes de l'organisation, il est important de corréler la taille de l'importance dans le processus de conception. Les plus grands éléments doivent être le plus important dans la plupart des cas; les éléments les plus petits doivent être le moins important.

visual hierarchy in web designvisual hierarchy in web designvisual hierarchy in web design

L'utilisation de GROS, en gras ajoute un niveau de l'ordre à cette conception chaotique. L'œil doit naturellement se déplacer à partir d'éléments de grande taille vers le bas pour les éléments les plus petits.

Couleur

La couleur est un outil intéressant car il peut fonctionner à la fois comme un outil d'organisation ainsi qu'un outil de personnalité. Gras, des couleurs contrastées sur un élément particulier d'un site web demande de l'attention (comme avec des boutons ou des messages d'erreur ou des liens hypertextes). Lorsqu'il est utilisé comme un outil de personnalité, la couleur peut s'étendre au-delà en plus sophistiqués types de hiérarchie; à l'Aide de lush, réconfortant les couleurs peuvent apporter un appel émotionnel à la une de la page. La couleur peut avoir un impact sur tout à partir d'un des sites de la marque (ex: coca-cola en Rouge) au symbolisme (ie: cool, couleurs sobres). Les applications avancées de la couleur peut même être utilisé pour "classer" les informations dans une hiérarchie, comme dans l'exemple suivant:

visual hierarchy in web designvisual hierarchy in web designvisual hierarchy in web design

Les Spectres de la Visionneuse site utilise des couleurs pour représenter les différentes catégories d'actualités, de sorte qu'il est facile de trouver un type particulier d'information basé sur la touche de couleur.

Le contraste

Le contraste montre par rapport important. Des changements spectaculaires dans le texte de taille ou de couleur donnent un message que quelque chose est différent et nécessite une attention particulière. Modification d'une lumière de couleur de fond d'une sombre couleur d'arrière-plan peut rapidement séparé, le contenu de base d'une page dans le pied de page.

visual hierarchy in web designvisual hierarchy in web designvisual hierarchy in web design

Le contraste entre la lumière, aérée section d'en-tête sombre et terreuse du pied de page crée une hiérarchie distincte de l'information.

L'alignement

L'alignement crée l'ordre entre les éléments. Il peut être aussi simple que la différence entre une colonne « contenue » et une « colonne de barre latérale », mais l’alignement peut également prendre des rôles hiérarchiques plus complexes. Considérons, par exemple, le pouvoir de l'information placée dans le coin supérieur droit d'une page web. Parce que les utilisateurs généraux s'attendre à de l'information dans cette partie de l'écran pour être associé avec des profils, des comptes, des caddies, etc., elle donne tout, des lieux dans ce domaine un sens de la "officielle". L'alignement peut également provoquer des intérêts si elle est utilisée de manière unique, comme dans les exemples suivants:

visual hierarchy in web designvisual hierarchy in web designvisual hierarchy in web design

Les Trucs Modèle utilise un alignement horizontal du système de séparer de la marque et de la navigation de contenu de blog post.

Le Flex Modèle utilise une grille inspirée de mise en page de développer visuellement intérêt ainsi que d'une taxonomie piloté par la hiérarchie visuelle.

La répétition

La répétition attribue sens relatif à des éléments; Si tous les "paragraphe" le texte est gris, lorsqu'un utilisateur voit un nouveau bloc de texte en gris, il peut supposer que c'est une autre base de paragraphe; quand ce même utilisateur rencontre un lien en bleu ou noir, d'un titre, il peut sans risque supposer qu'il est différent et unique à partir du texte en gris.

visual hierarchy in web designvisual hierarchy in web designvisual hierarchy in web design

La Vierge site crée éléments répétitifs comme un paragraphe de texte, puis les pauses de la répétition quand il veut attirer l'attention (comme le rouge de citer un texte).

Proximité

La proximité sépare les éléments les uns des autres et crée des sous-hiérarchies. Au sein d'une page, il peut y avoir des widgets qui sont séparés les uns des autres par l'espace, à l'intérieur de ces widgets, il y est une nouvelle hiérarchie de titre, sous-titre et le contenu. La proximité est aussi le moyen le plus rapide pour associer un contenu similaire. Dans l'exemple suivant, il est facile de trouver certains types de contenu, simplement en fonction de leur proximité les uns avec les autres.

visual hierarchy in web designvisual hierarchy in web designvisual hierarchy in web design

Les Tuts+ sites font ça très bien (pas de sonner notre propre klaxon!). La gauche "contenu" de la colonne est clairement séparée de la proximité de la sidebar widget de l'espace. En outre, les méta-données dans un billet de blog particulier est placé à proximité de ce post, et encore d'autres postes, à renforcer un sentiment "d'appartenance".

La densité et de l'Espace

Densément emballage d'éléments dans un espace donne l'impression de "lourd" et encombré; Lorsque les éléments sont espacés de trop, ils risquent de perdre les relations de l'un à l'autre. Lorsqu'une page est conçue "sur mesure", l'œil reconnaît facilement lorsque les éléments sont liés et quand ils ne le sont pas.

visual hierarchy in web designvisual hierarchy in web designvisual hierarchy in web design

Par l'espacement des éléments et en gardant beaucoup d'espace sur la page, ce qui rend plus facile pour les gens à errer autour et trouver le petit, dense boîtes de contenu.

Le Style et la Texture

Peut-être le plus ouvert de l'outil dans le Hierarchists boîte à outils, le style peut être utilisé pour donner une forme de hiérarchie que les deux englobe et transcende les autres outils. Par exemple: un plat fond gris sera "sentir" différent de l'asphalte fond texturé.Ce style ou la personnalité donnée par le concepteur va naturellement jouer un rôle dans la façon dont les différentes relations visuelles sont faites.

Il est important de mentionner que le style est également l'un des outils les plus dangereux qu'un designer peut utiliser. Tout comme un charpentier coupe son doigt sur une bande-vu, un concepteur peut facilement induire les gens en erreur en mettant davantage l'accent sur certains éléments par le biais de style. Imaginez un très texturée, fortement conçu élément du site qui demande autant d'attention qu'elle détourne au lieu d'informer. Cette même idée s'applique aux polices de caractères, les boutons, les onglets, et d'autres éléments. Être attentif à l'impact sur une conception globale lorsque vous choisissez d'ajouter plus de style et de polonais à un élément.

visual hierarchy in web designvisual hierarchy in web designvisual hierarchy in web design

Jeff Finley du site fait un excellent travail de combiner une grande partie des outils que nous avons discuté ici, mais son utilisation d'origine, de style des éléments sur l'INTERFACE standard de fourrage sont ce qui donne à l'ensemble de la conception du sens de l'intention de la hiérarchie. Jeff parvient à ajouter juste assez de style pour faire son site, se sentent personnelle sans aller à la mer.

Échec De La Hiérarchie

Bon hiérarchie visuelle n'est pas sauvage et fou les graphiques ou le plus récent filtres photoshop, c'est à propos de l'organisation de l'information dans un sens, c'est utilisable, accessible, et de la logique à la vie quotidienne des visiteurs du site.

Comme je l'ai proposé dans la section précédente, il est important de noter que la hiérarchie peut être utilisé à la fois le bien et le mal. Pensez à tous les ennuyeux Flash des publicités, des fenêtres popup, paillettes bannières, etc. que le web a été en proie au fil des ans! Bien que ces annonces réussir dans l'accaparement de l'attention, ils ont fini par échouer le propriétaire du site et le spectateur par la rupture de la hiérarchie visuelle au sein d'un site. De même, si un concepteur construit une hiérarchie visuelle, de sorte que certaines des informations clés sont presque impossible à trouver, le concepteur aura failli à sa tâche. Bon hiérarchie visuelle n'est pas sauvage et fou les graphiques ou le plus récent filtres photoshop, c'est à propos de l'organisation de l'information dans un sens, c'est utilisable, accessible, et de la logique à la vie quotidienne des visiteurs du site.

Pourquoi la Hiérarchie est Particulièrement Pertinente pour les Web Designers

“Les concepteurs peuvent créer de la normalité du chaos; ils peuvent communiquer clairement des idées par le biais de l'organisation et de la manipulation des mots et des images.”—Jeffery Veen, l'Art et La Science de la Conception Web

Jeffrey Veen a écrit ces mots en 2001, mais ils ont encore beaucoup de pouvoir aujourd'hui où la "surcharge d'information" semble être monnaie courante. En tant que personnes, nous avons toujours eu un grand sens de l'organisation visuelle. Cependant, en tant que société, nous avons été inondés avec une véritable tsunami de l'information visuelle au cours des deux dernières décennies; en conséquence, les gens de nos jours sont hyper-sensibles à la hiérarchie visuelle. C'est particulièrement le cas sur le web où des études ont prouvé que la pratique régulière internautes ont appris à "scanner" le contenu de façon innée; automatiquement la recherche de l'information pertinente à leurs intérêts et à jeter/abstraction faite des informations qui ne l'est pas.

De ce fait, devenir un maître de la hiérarchie visuelle n'est pas en option, il est obligatoire. Comme typique de la navigation web plates-formes de développement à partir du moniteur traditionnel pour les téléphones, tablettes, et même les téléviseurs, il devient de plus en plus important que nous utilisions solide, clair et des systèmes visuels pour communiquer avec les internautes.

Un Exercice à l'Essai de la Hiérarchie Visuelle

Pour conclure, je voudrais terminer avec un exercice très simple. Comme exemple, nous allons utiliser un site web que vous fréquentez, ou un projet que vous avez travaillé récemment; L'exercice qui va comme ceci:

  1. Énumérer les principaux points d'information que les visiteurs sont susceptibles d'obtenir.
  2. Affecter des valeurs (de 1 à 10) en fonction de leur importance pour le visiteur moyen.
  3. Maintenant, regardez la conception réelle de nouveau.
  4. Affecter des valeurs (de 1 à 10) selon l'importance visuelle comme vous le voyez dans le live de conception.
  5. Considérer: l'importance correspondre avec le réel conçu importance?

Dans la plupart des cas, la réponse doit inclure les nuances de "non". Il y a beaucoup de raisons à cela, la demande de ses clients, inexpérimenté, concepteurs, conception par le comité ou une centaine d'autres raisons que vous avez probablement lu. Heck, dans certains cas, le concepteur peut vouloir induire en erreur le spectateur (envisager un "gratuit" site qui tente de guider les utilisateurs à des contenus payants). Quelle que soit la raison, la compréhension de la hiérarchie visuelle et d'essayer de l'interpréter, il est un moyen d'améliorer la façon dont vous voyez conception de sites web dans une toute nouvelle lumière. J'espère que ça va aider à informer votre propre travail ainsi!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.