À mesure que les technologies et les interfaces utilisateur changent, le besoin de compétences en conception dans la conception visuelle continue de croître. Avec de nouveaux exemples d'interface utilisateur typique qui émergent 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. Compte tenu de cela, est-il possible pour la conception d'interaction contemporaine 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 le plus rapidement possible. Cependant, comme le design visuel est un proche cousin 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 se réduisent simplement dans une interface utilisateur.

Pour la plupart, designers ont encore tendance à traiter l'écran comme un objet statique et bidimensionnel, et le défi de designers interactifs consiste à innover au-delà de la simple application de formats imprimés à 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 revue.

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-ce important? 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 les spectateurs vers les informations les plus importantes d'abord, puis vers le contenu secondaire.

Établi grâce à l'utilisation appropriée de taille, couleur, forme, distance, proportion et orientation, la signification, le concept et l'ambiance d'une composition sont véhiculés 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 ainsi établir hiérarchie visuelle à travers une conception .

javascript obtenir la date sans heure

Couleur dans la hiérarchie visuelle

Bon nombre des règles de la hiérarchie visuelle peuvent sembler assez simples et même 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 en design visuel.

Considérez les connotations immédiates d'une croix rouge par rapport à une croix 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 apparaît comme plus significative.

Les couleurs vives et riches ressortent plus que les couleurs sourdes et ont donc un impact visuel plus important. Dans une interface, la couleur pourrait être utilisée pour présenter une impression de structure et indiquer les interactions disponibles. Une seule couleur dans une interface monochromatique 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 émotion qui peut transmettre des informations explicites au subconscient d'un spectateur. En branding, de nombreuses recherches psychologiques ont été menées sur la couleur car elle crée un 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ûrs et apaisants, tandis que les rouges sont stimulants et sont connus pour augmenter la fréquence cardiaque des gens. cependant, les couleurs peuvent avoir une signification différente selon la culture.

Un bon exemple d'utilisation structurelle et significative de la couleur dans la conception Web est Les noms du changement site. Le site communique immédiatement sa structure grâce à l'utilisation de la couleur; l'organisation est dispersée par défaut mais peut être réorganisée par sujet et / ou couleur.

Cependant, les tons choisis aident à surmonter l'une des difficultés potentielles pour la signification 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 du quotidien 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 plus d'informations, ce simple graphique communique immédiatement la relation entre ses éléments: un parent et des enfants, qui communiquent collectivement une famille.

qu'est-ce que le framework node js

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

Des tailles de police différentes 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. Les contenus secondaires, tels que les légendes d'images, sont généralement plus petits pour ne pas entrer en concurrence avec le corps principal du texte.

Considérez certaines des interfaces visuelles les plus utilisées, telles que Instagram . Rien à l'écran n'entre en concurrence 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 le typique structure de la hiérarchie visuelle in web design est le site de portfolio pour le studio d'art / design Ro / Lu . Leur site inhabituel n'est peut-être pas le plus intuitif, mais il remet en question la disposition visuelle du portefeuille créatif en ligne typique. En raison de la randomisation intentionnelle de leurs projets variés, un autre 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é de manière hiérarchique 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 reliant les éléments dans l'espace. Comme pour les chapitres d'un roman non linéaire, imaginez un carré se détachant de la ligne dans une composition graphique. Lorsqu'un élément unique brise une structure établie, il se détache 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 «briser la grille», est l'occasion de donner plus de poids visuel à un élément graphique. Ce concept est fondamental pour la hiérarchie visuelle dans la conception.

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 d'autres contenus secondaires sont souvent laissés à l'écart.

Mais pionnier designers aiment contester le statu quo. Quand la conception interactive s'applique 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 faites 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 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 au fil du 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 pour «comme» 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 du texte, les icônes (symboles), qui sont souvent des formes géométriques simples, sont devenues l'analogue de la plupart des systèmes de navigation et des interfaces utilisateur.

angulaire 2 avec noyau asp.net

L’objectif derrière «aimer» une image, télécharger un fichier, passer un appel téléphonique ou vérifier un message est véhiculé 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 servent souvent de vastes publics internationaux dans 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éroutante.

Rompre les mises en page Web traditionnelles, le Signes du Quotidien Le site Web utilise des formes carrées et circulaires de base 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.

nœud js vs performances php

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 qui est impossible à utiliser dans l'impression mais qui peut certainement être inclus dans le concepteur visuel La boîte à outils de.

Que peut communiquer le mouvement 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 un 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 un outil de communication visuelle essentiel?

Pour le Je me souviens du site , 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, designers visuels a utilisé la perte potentielle de ces éléments comme un moyen de communiquer la mission sous-jacente du site Web: la maladie d'Alzheimer. Tout comme les souvenirs qui s'estompent des patients pour lesquels l'organisation lève des fonds, le site Web disparaît lentement dans le néant sans interaction active.

Son dans la hiérarchie de l'information

Le son est un autre outil impossible à utiliser dans la presse écrite, mais qui n'a pas encore été développé dans le cadre des principes de la hiérarchie. Le son étant 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'humeur ou la signification. Les éléments de conception qui véhiculent 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 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 véhiculer une nouvelle signification?

Les sons eux-mêmes peuvent être si complexes qu'ils établissent une ambiance entière ou le message d'un design avant que quelque chose de visuel ne soit perçu. Tout comme une toile de fond colorée crée une ambiance, un son peut rester 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'endroit où la magie peut se produire.

En raison de son importance dans le travail créatif du collectif, le site Web créé pour l'exposition du groupe d'artistes allemand ZERO au Guggenheim utilise le son comme toile de fond atmosphérique et aussi comme forme de rétroaction lors de la navigation sur le site. Les sonneries en gras établissent les morceaux 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 la compréhension de la théorie est en fait plus facile que la capacité pratique d’un concepteur à exécuter une composition bien structurée. Néanmoins, être inventif dans un nouveau support tout en conservant un bon design est un défi.

De nouveaux médiums apparaissent tout le temps et les situations difficiles ne s'atténueront pas, bien au contraire. Aujourd'hui, il y en a plus de 200 différentes tailles d'écran utilisé. Et ce ne sont que les deux dimensions. D'abord, c'était Internet, les navigateurs de bureau, puis les mobiles et les tablettes, et maintenant nous entrons dans de nouveaux territoires avec des technologies telles que la télévision interactive, IoT , vêtements , 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.

• • •

Lectures complémentaires sur le blog ApeeScape 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