Principes de conception - Une introduction à la hiérarchie visuelle

À mesure que les technologies et les interfaces utilisateur évoluent, le besoin de compétences en conception visuelle continue de croître. Avec de nouveaux exemples d'une interface utilisateur typique émergeant chaque année, notre compréhension fondamentale de la hiérarchie visuelle, de la perception et de la composition a-t-elle changé ?

Le concept moderne de perception visuelle est enraciné non seulement dans la science mais aussi dans la psychologie. Par conséquent, indépendamment des interfaces utilisateur en constante évolution, la façon dont nous voyons et percevons les informations visuelles restera la même. Considérant cela, est-il possible pour le design d'interaction contemporain d'améliorer les fondements de la composition graphique et de la hiérarchie visuelle ?

Les règles fondamentales de la perception visuelle sont essentielles pour toute conception visuelle, car elles indiquent comment les informations avec une signification intégrée peuvent être transmises aussi rapidement que possible. Cependant, comme le design visuel est un cousin proche du design graphique, ces normes ont été établies pour les médias imprimés et doivent encore être redéfinies pour le numérique.

Quelque chose comme une «école numérique du Bauhaus» qui pourrait potentiellement établir de nouveaux principes de conception ne s'est pas encore formé. Comme les gens vivent une interface utilisateur d'une manière totalement différente de l'impression, les règles de hiérarchie visuelle et de composition ne sont pas seulement datées, elles s'effondrent simplement dans une interface utilisateur.

Pour la plupart, les concepteurs ont encore tendance à traiter l'écran comme un objet statique et bidimensionnel, et le défi pour les concepteurs interactifs est d'innover au-delà de la simple application de formats d'impression à leurs projets de médias numériques. Mais avant que de nouvelles conceptions puissent progresser, une compréhension fondamentale de la hiérarchie visuelle, de la perception et de la composition doit être revisitée.

Hiérarchie visuelle : une nouvelle compréhension de la composition visuelle pour les interfaces interactives

Qu'est-ce que la hiérarchie visuelle et pourquoi est-elle importante ? La hiérarchie visuelle est la disposition du contenu dans une composition afin de communiquer efficacement des informations et de transmettre du sens. La hiérarchie visuelle dirige d'abord les spectateurs vers les informations les plus importantes, puis vers le contenu secondaire.

Établis par l'utilisation appropriée de la taille, de la couleur, de la forme, de la distance, de la proportion et de l'orientation, le sens, le concept et l'ambiance d'une composition sont transmis par l'utilisation créative d'éléments graphiques qui déterminent la hiérarchie visuelle.

La hiérarchie visuelle est essentielle pour chaque type de conception visuelle, qu'il s'agisse d'une page de destination qui doit guider l'œil du visiteur ou de la navigation d'une interface utilisateur mobile. La compréhension de chaque élément par l'utilisateur dépend des autres éléments de la composition et de leur contexte. Les éléments de composition sont traités en conséquence afin de former des relations visuelles et d'établir ainsi une hiérarchie visuelle dans une conception.

Couleur dans la hiérarchie visuelle

De nombreuses règles de la hiérarchie visuelle peuvent sembler assez simples, voire banales, mais elles constituent une base essentielle pour une bonne conception visuelle. Par exemple, la couleur est l'élément créatif le plus percutant dans la conception visuelle.

Considérez les connotations immédiates d'une croix rouge par rapport à une monochrome. Presque universellement, la croix rouge signifie neutralité et protection. Tel est le potentiel de communication immédiate avec l'utilisation de la couleur. La couleur est également souvent utilisée pour identifier les groupes, comme lorsqu'une croix rouge parmi trois monochromes se démarque d'une manière ou d'une autre comme plus significative.

Les couleurs vives et riches ressortent plus que les couleurs douces et ont donc un plus grand impact visuel. Dans une interface, la couleur peut être utilisée pour présenter un sens de la structure et indiquer les interactions disponibles. Une seule couleur dans une interface monochrome peut distinguer une sélection et même suggérer ce qui se trouve au-delà d'un bouton sur lequel l'utilisateur survole.

La couleur est également semée de sens et d'émotion qui peuvent transmettre des informations explicites au subconscient du spectateur. Dans le domaine de l'image de marque, de nombreuses recherches psychologiques ont été menées sur la couleur, car elle crée une réponse viscérale chez les consommateurs avant qu'ils n'aient une interaction significative avec une marque. Par exemple, les bleus sont souvent perçus comme fiables, sécurisants et apaisants, tandis que les rouges sont stimulants et sont connus pour augmenter le rythme cardiaque des gens. Cependant, les couleurs peuvent avoir une signification différente selon la culture.

Un bon exemple d'une utilisation significative et structurelle de la couleur dans la conception Web est le site The Names for Change. Le site communique immédiatement sa structure par l'utilisation de la couleur ; l'organisation est dispersée par défaut mais peut être réorganisée par thème et/ou couleur.

Cependant, les tons choisis permettent de surmonter une des difficultés potentielles pour le sens du site. La collecte de fonds pour des articles quotidiens tels que des chaussettes ou des tampons n'est pas assez excitante pour se vendre, de sorte que le ton graphique radical du site augmente la valeur perceptuelle des articles quotidiens tout en établissant la structure organisationnelle sous-jacente nécessaire.

Taille dans la hiérarchie visuelle

Imaginons une illustration d'un grand oiseau assis à côté de trois plus petits. Sans aucune autre information, ce simple graphique communique immédiatement la relation entre ses éléments : un parent et des enfants, qui communiquent collectivement une famille.

Dans la conception graphique traditionnelle, une stratégie typique consiste à faire en sorte que les éléments les plus importants soient les plus grands, puis à réduire la taille des éléments de manière hiérarchique. La taille établit une hiérarchie visuelle car les éléments les plus grands attirent l'attention en premier et semblent donc être les plus importants.

Différentes tailles de police sont également souvent utilisées dans les corps de texte pour indiquer des différences significatives, telles que les en-têtes, les sections et les guillemets. Le contenu secondaire, comme les légendes des images, est généralement plus petit afin de ne pas entrer en concurrence avec le corps principal du texte.

Considérez certaines des interfaces visuelles les plus utilisées, telles qu'Instagram. Rien sur l'écran ne rivalise avec les images et les vidéos - elles occupent plus de 60 % de la plupart des écrans. Le but de l'interface utilisateur est immédiat.

Un exemple renversant la structure typique de la hiérarchie visuelle dans la conception Web est le site de portefeuille du studio d'art/design Ro/Lu. Leur site inhabituel n'est peut-être pas le plus intuitif, mais il remet en question l'arrangement visuel du portefeuille créatif en ligne typique. En raison de la randomisation intentionnelle de leurs projets variés, un projet différent apparaît comme dominant à chaque fois qu'un visiteur vient sur le site, ce qui rend chaque visite unique et intéressante.

Le travail n'est pas organisé hiérarchiquement dans les portefeuilles de la plupart des studios de design créatif car chaque projet est unique et considéré comme tout aussi important. La conception du site Ro/Lu crée une composition dynamique avec différents niveaux d'intérêt à chaque visite et encourage les téléspectateurs à explorer le vaste portefeuille du studio. Par conséquent, la nature éclectique et interdisciplinaire du studio de design est représentée par l'affichage aléatoire du contenu.

Alignement dans la hiérarchie visuelle

L'alignement dans la hiérarchie visuelle communique un sens de l'ordre en connectant les éléments dans l'espace. Comme pour les chapitres d'un roman non linéaire, imaginez un carré hors ligne dans une composition graphique. Lorsqu'un seul élément brise une structure établie, il se démarque de la composition et prend ainsi un sens par rapport au reste.

Une composition rigide peut sembler stagnante et visuellement inintéressante à moins qu'un élément ne se détache de la grille visuelle, c'est-à-dire d'un sens de l'ordre. Le désalignement, ou "casser la grille", est une opportunité de donner plus de poids visuel à un élément graphique. Ce concept est fondamental pour la hiérarchie visuelle dans le design.

Selon un principe de la conception visuelle traditionnelle, les éléments placés au centre d'un cadre semblent être plus significatifs. Par exemple, le contenu principal ou les éléments d'interface peuvent être placés au centre, tandis que la navigation, les menus et les autres contenus secondaires sont souvent placés sur les côtés.

Mais les designers pionniers aiment défier le statu quo. Lorsque la conception interactive applique les principes fondamentaux de la hiérarchie visuelle, puis repousse les limites dans des compositions visuelles innovantes, de nouvelles expériences intéressantes sont créées. En utilisant un alignement différent, de nouvelles associations et significations sont créées entre les éléments.

Par exemple, le projet DNA est un site qui utilise une série de hiérarchies disjointes pour communiquer la construction créative de l'album du musicien. La structure du site est complexe, tout comme la construction de l'album.

Tout d'abord, les visiteurs sont invités à écouter la musique en cliquant sur les pistes de l'album, qui sont traditionnellement alignées dans un format d'album. Cependant, en permettant aux visiteurs de réaligner les éléments d'ADN du site, le concept de l'album est communiqué, non seulement comme une série de pistes, mais comme une construction non linéaire d'éléments fragmentés dans le temps.

Formes dans la hiérarchie visuelle

En ce qui concerne les formes, considérons à quel point la simple forme de cœur communique immédiatement son utilisation potentielle de « j'aime » dans la plupart des interfaces utilisateur de réseaux sociaux. Pour établir l'importance ou les groupes, considérez un cœur parmi quatre cercles. Les formes géométriques sont comme les couleurs en ce sens que les formes portent certaines connotations qui donnent aux éléments une personnalité ou une signification.

Dans la conception interactive, les formes géométriques sont essentielles pour une communication efficace car elles transmettent un sens plus rapidement et universellement que le texte. Au lieu de texte, les icônes (symboles), qui sont souvent de simples formes géométriques, sont devenues l'analogue de la plupart des systèmes de navigation et des interfaces utilisateur.

L'objectif d'aimer une image, de télécharger un fichier, de passer un coup de fil ou de consulter un message est transmis simplement et directement par des icônes (formes géométriques). Cette forme de communication visuelle efficace devient de plus en plus importante dans un marché mondial où les produits numériques desservent souvent de vastes publics internationaux en plusieurs langues.

Pour mettre en évidence les différents modes d'interaction entre les médias imprimés et numériques traditionnels, considérez la différence entre la recherche dans un journal réel pour la section Arts et l'utilisation de l'icône de recherche dans la plupart des applications. Jusqu'à récemment, la plupart des sites Web de journaux présentaient leurs pages de la même manière que s'ils étaient imprimés, et l'expérience de passer au crible le contenu était maladroite et désorientante.

Rompant avec les mises en page Web traditionnelles, le site Web Signes du Quotidien utilise des formes basiques de carrés et de cercles de manière subtile pour présenter une hiérarchie visuelle unique qui guide les visiteurs à travers le contenu. Le menu est au centre de la page, et lorsque les visiteurs cliquent dessus, quatre points colorés représentant les quatre sections du site apparaissent. Les visiteurs font ensuite glisser l'un des points dans le carré pour accéder à cette section.

Mouvement dans la hiérarchie visuelle

Un élément en mouvement aura un poids visuel plus important dans un groupe d'éléments stagnants, et le mouvement dans la hiérarchie visuelle est un principe impossible à utiliser en version imprimée mais qui peut certainement être inclus dans la boîte à outils du concepteur visuel.

Qu'est-ce que le mouvement peut communiquer d'autre qu'une traduction littérale de lui-même ? Le mouvement est souvent utilisé dans une interface utilisateur comme un indice avec lequel un élément peut interagir. L'utilisation du mouvement peut-elle être poussée plus loin et utilisée comme moyen de communiquer quelque chose d'unique ? Si la hiérarchie visuelle ne concerne pas seulement l'efficacité de la communication, mais aussi le sens intégré, comment le mouvement pourrait-il être utilisé comme outil de communication visuelle essentiel ?

Pour le site I Remember, l'interface principale (qui est animée) se démarque immédiatement car elle invite à l'interaction. Bien que le mouvement et l'interface soient des outils de navigation fonctionnels, les concepteurs visuels ont utilisé la perte potentielle de ces éléments pour communiquer la mission sous-jacente du site Web : la maladie d'Alzheimer. Tout comme les souvenirs qui s'effacent des patients pour lesquels l'organisation recueille des fonds, le site Web disparaît lentement dans le néant sans interaction active.

Le son dans la hiérarchie de l'information

Le son est un autre outil impossible à utiliser dans la presse écrite, mais encore à développer dans les principes de la hiérarchie. Puisque le son est entièrement non visuel, il n'y a pas de règles auxquelles se référer. Mais le son peut aussi être un outil de conception qui communique efficacement le contenu, ainsi que l'ambiance ou le sens. Les éléments de conception qui portent certains sons peuvent être regroupés les uns par rapport aux autres, et ceux qui sont les plus audacieux peuvent sembler être les plus importants ou peuvent signifier une séparation du groupe.

La qualité d'un son attaché à un élément doit rapidement identifier, caractériser ou aider à structurer le contenu. Comment un son qui contraste avec son élément visuel associé peut-il transmettre une nouvelle signification ?

Les sons eux-mêmes peuvent être si complexes qu'ils établissent toute une ambiance ou le message d'un design avant que quoi que ce soit de visuel ne soit perçu. Tout comme une toile de fond colorée crée une ambiance, un son peut s'asseoir en arrière-plan ou fournir des commentaires dans une interface utilisateur, comme répondre à la pression d'un bouton sur un mobile. Le principe de la technique est basique, mais la créativité avec laquelle elle peut être employée est là où la magie peut se produire.

En raison de son importance dans le travail créatif du collectif, le site internet créé pour l'exposition du groupe d'artistes allemand ZERO au Guggenheim utilise le son comme toile de fond atmosphérique, mais aussi comme forme de retour lors de la navigation sur le site. Des sonneries audacieuses établissent les pièces qui représentent les débuts d'un thème, tandis que les projets tertiaires cliquent en arrière-plan.

Le concept de hiérarchie visuelle

La hiérarchie visuelle est un concept simple, et comprendre la théorie est en fait plus facile que la capacité pratique d'un designer à exécuter une composition bien structurée. Néanmoins, être inventif dans un nouveau média tout en conservant un bon design est un défi.

De nouveaux médiums apparaissent tout le temps et les situations difficiles ne s'apaiseront pas, bien au contraire. Aujourd'hui, plus de 200 tailles d'écran différentes sont utilisées. Et ce ne sont que les éléments bidimensionnels. Tout d'abord, c'était Internet, les navigateurs de bureau, puis les mobiles et les tablettes, et maintenant nous nous dirigeons vers de nouveaux territoires avec des technologies telles que la télévision interactive, l'IoT, les appareils portables, la réalité virtuelle et augmentée.

Un design qui repousse vraiment les limites des médias numériques en est encore à ses balbutiements. Espérons que les principes de hiérarchie visuelle et de bonne conception suivront l'évolution rapide de la technologie afin que notre expérience des médias numériques reste pleine de sens et de plaisir.

Pour en savoir plus sur le blog Toptal Design :

• Boostez votre UX avec une hiérarchie visuelle claire
• Design Foundations - Un guide de la hiérarchie visuelle (avec infographie)
• Principes de conception : introduction à la hiérarchie
• Meilleures pratiques de conception d'interface utilisateur pour une meilleure scannabilité
• Boostez votre UX avec ces principes de conception d'interaction réussis