Hiérarchie visuelle pour une meilleure UX

La hiérarchie visuelle a un impact considérable sur l’expérience de l’utilisateur. Elle n’affecte pas seulement la première impression du produit, mais aussi la façon dont les utilisateurs l’interprètent et en apprécient les avantages. La plupart des designs sont assez familiers avec la nécessité d’organiser les stimuli visuels, sous peine de fatiguer, d’embrouiller et de submerger les utilisateurs.

Mais quels sont les différents aspects de la hiérarchie visuelle ? Lorsque l’on considère les composants visuels à l’intérieur du produit, quels sont les outils dont disposent les designers pour adapter les composants afin d’établir un ordre d’importance ? Comment pouvons-nous créer un flux qui guide doucement les utilisateurs vers toutes les étapes les plus importantes de votre création ?

Il s’avère que le design de la hiérarchie visuelle ne se limite pas à rendre les choses plus grandes ou plus lumineuses – il touche à la composition et se rapporte à la psychologie humaine dans le cadre de la conception de l’UI. Même si cela peut sembler complexe, n’ayez crainte. Nous avons rassemblé tous les points forts pour vous ici !

L’établissement d’une hiérarchie visuelle entre les éléments de votre design a plus d’un objectif. Elle aide l’utilisateur à comprendre l’importance d’un élément par rapport à un autre, ou à savoir où il doit commencer à lire. Elle aide à comprendre le produit et est cruciale pour une bonne UX – les utilisateurs doivent comprendre ce qu’est chaque élément, et notamment son importance dans le design.

Avec une bonne hiérarchie visuelle dans le design, vous pouvez vous attendre à ce que les utilisateurs aient plus de facilité à assimiler l’information. Au lieu d’avoir un écran composé de nombreux éléments identiques, les utilisateurs auront des points de convergence et un ordre dans lequel ils pourront remarquer et traiter les choses.

Il était utilisé par les journaux et les magazines bien avant d’être appliqué au design numérique, et la plupart des gens le connaissent même s’ils ne savent pas le définir.

Magazine Layout.

Comme on peut le deviner, le design de la hiérarchie visuelle consiste à donner aux éléments une certaine hiérarchie à l’aide de plusieurs indices visuels. Le design peut utiliser ces éléments visuels pour créer un flux à l’écran, de sorte que l’œil de l’utilisateur puisse suivre ce flux vers les parties les plus importantes de l’écran.

En réalité, le design de la hiérarchie visuelle se divise en deux parties : les indices visuels dont disposent les concepteurs et les différentes façons dont ces indices affectent l’expérience de l’utilisateur. Par exemple, le concepteur peut utiliser la taille et la couleur comme indices pour transmettre la hiérarchie – ce qui signifie que le design peut avoir des couleurs vives dans certaines zones pour créer un modèle de lecture comme tactique.

Il est vrai que pour que votre hiérarchie visuelle ait un sens, vous devez commencer à la planifier et à la construire dès le wireframe de votre produit.

Digital hierarchy principles.

Cela signifie que la hiérarchie visuelle ira de pair avec d’autres aspects cruciaux du design, tels que l’architecture de l’information (IA). Même si vous ne débattez pas des couleurs et que vous ne le faites pas lors du wireframing, vous veillerez à ce que les repères visuels et le contenu soient placés aux bons endroits.

Cela expose bien sûr le besoin du concepteur d’un outil professionnel de design d’UI. De préférence, optez pour un outil qui permet à la fois la planification technique de la navigation et de l’interface utilisateur, et un travail plus visuel. De cette façon, vous pouvez déjà commencer à planifier la hiérarchie visuelle à un stade précoce, avant que les changements ne deviennent une tâche coûteuse et difficile.

L’idée est assez simple : vous pouvez utiliser différents traits visuels dans les composants pour les organiser visuellement, en guidant l’utilisateur à travers le design. Voyons quelques-uns de ces indices visuels clés que tous les designers ont dans leurs manches afin de prendre l’utilisateur par la main sur un chemin qui touche tous les domaines les plus importants.

Tous les designers connaissent l’importance d’une bonne composition. Elle peut faire ou défaire un produit dès la première impression et joue un rôle central dans ces premiers instants cruciaux. En effet, la plupart des utilisateurs ne lisent pas tout le contenu ou tous les éléments d’un écran.

En fait, Weinreich et al. (2008) ont constaté dans leur étude empirique du web que la plupart des utilisateurs ont l’habitude de parcourir la page pour y trouver quelques mots. Le temps qu’ils passent sur l’écran n’est tout simplement pas suffisant pour qu’ils lisent le contenu réel, mais plutôt pour qu’ils parcourent le texte à la recherche des principaux centres d’intérêt.

Le groupe Nielsen Norman va même plus loin en affirmant que la plupart des utilisateurs ne lisent que 20 à 30 % du contenu de la page dans leur article How little do users read.

C’est important, car cela nous aide à comprendre l’importance du design de la hiérarchie visuelle – et le rôle que jouent les schémas de lecture dans ce domaine. C’est un fait que la plupart des utilisateurs scannent les pages dès leur première rencontre – mais comment le font-ils ? Quels sont les facteurs qui influencent cette lecture ?

Plus courant sur les écrans comportant beaucoup de contenu écrit, le schéma en F signifie que les utilisateurs suivent une ligne verticale et ne s’aventurent dans le contenu que par de courtes lignes horizontales – formant la forme d’un F dans les cartes thermiques. Le groupe Nielsen Norman l’a épinglé pour la première fois en 2006 et, depuis, il est devenu un élément essentiel du design des sites web.

Il y a plusieurs raisons pour lesquelles les utilisateurs scannent les pages dans une forme particulière. En général, la raison est que l’utilisateur cherche une réponse rapide à une question plutôt qu’un essai approfondi sur le sujet. Il n’est donc pas disposé à lire un écran entier sur le sujet. Les utilisateurs cherchent à minimiser le coût de l’interaction nécessaire pour trouver ce qu’ils veulent.

Ce qui est curieux à propos du motif F, c’est que le groupe Nielsen Norman considère qu’il s’agit du motif de balayage par défaut du cerveau pour le texte, qu’il y ait ou non une hiérarchie visuelle. Ce qui est encore plus curieux, c’est qu’il le considère également comme une mauvaise chose.

From F-shapped Pattern for Reading Web Content.

L’utilisation de ce modèle signifie que les utilisateurs ne traitent que quelques mots de l’ensemble, de grandes parties passant inaperçues. Et pire encore : cela peut créer des problèmes avec le responsive design. Même si vous faites en sorte que le contenu le plus important suive le modèle F, les mots seront placés différemment en fonction de la taille de l’écran.

Comment atténuer cette tendance ? Il s’avère que ce n’est pas aussi difficile que vous le pensez. Il s’agit de structurer votre contenu de manière à ce que les éléments les plus importants attirent l’attention de l’utilisateur – il s’agit d’utiliser votre hiérarchie visuelle de manière à ce qu’elle ne permette pas aux utilisateurs de passer à côté d’informations importantes.

Il s’agit notamment de placer la partie la plus importante du contenu au début. Pour les textes écrits, cela signifie que les points principaux sont présentés dans les deux premiers paragraphes. Pour les titres et sous-titres qui séparent les sections, il s’agit d’utiliser les mots les plus descriptifs au début.

“Si les utilisateurs ne voient que les deux premiers mots (dans l'en-tête), ils devraient quand même comprendre l'essentiel de la section suivante.”

									Kara Pernice   - Groupe Nielsen Norman								

Les lignes directrices générales en matière de lisibilité sont également utiles à cet égard. Les designers sont invités à regrouper de petites parties de contenu pour faciliter la lecture, ainsi qu’à mettre en gras les mots essentiels. Les bonnes idées pour améliorer la lisibilité de votre design sont de séparer les grands paragraphes, de présenter le contenu sous forme de puces et d’effacer tout contenu superflu.

Contrairement au modèle précédent, la forme en Z s’applique aux pages comportant moins de contenu écrit et plus d’éléments visuels. C’est généralement le cas des pages d’accueil ou des pages comportant des images de héros. C’est un modèle plus naturel lorsque l’utilisateur n’a pas beaucoup de contenu à assimiler, ce qui le rend parfait pour la plupart des pages d’atterrissage.

Sachant que la plupart des utilisateurs scanneront en suivant cette forme de Z, les designers peuvent placer les visuels les plus importants dans les coins de ce Z et s’assurer que les utilisateurs les voient. L’élément le plus classique que l’on a tendance à placer à l’extrémité du Z, par exemple, est le CTA. Nick Babich le résume assez bien avec ce qui suit :

From Z-shapped Pattern for Reading Web Content.

Un modèle de gâteau en couches se produit lorsque la page contient beaucoup de contenu écrit, mais il est fondamentalement différent du modèle F.

Au lieu de rester sur une ligne verticale et de lire à peine les paragraphes, les utilisateurs se verront proposer un texte divisé en plusieurs sections et sous-sections. Cela signifie que les utilisateurs liront principalement les titres et les sous-titres, s’aventurant dans le contenu écrit au fur et à mesure qu’ils descendent dans la page.

From Layer-Cake Pattern for Reading Web Content.

L’une des exigences de ce mode de lecture est que le contenu doit être bien structuré. Il s’agit d’éviter les longs paragraphes qui obligent les utilisateurs à parcourir le texte, et d’opter plutôt pour de nombreuses sections différentes et bien définies. Les titres des sections doivent être descriptifs et précis, car ils serviront de point de référence aux utilisateurs à la recherche du bon élément d’information.

Il est important de tenir compte de la distance et de la proximité entre les sections, ainsi que de questions plus classiques telles que la taille et la couleur des caractères. Vous devez laisser suffisamment d’espace entre les différentes sections pour que l’utilisateur puisse immédiatement remarquer la différence entre deux sections et une section avec une sous-section.

Pour un aperçu complet, consultez notre billet sur la façon d’améliorer l’UX à l’aide des principes de la Gestalt. Mais pour l’instant, passons en revue quelques idées de base qui sont considérées comme des principes importants dans la théorie Gestalt de la psychologie.

Dans les grandes lignes, cette théorie prend racine dans la manière dont les humains donnent un sens aux choses qu’ils voient. Elle aide à comprendre que nous voyons les objets en les regroupant, c’est-à-dire en trouvant des modèles qui simplifient la situation dans son ensemble.

Les 5 principes sont également des concepts clés qui ont un impact important sur la hiérarchie visuelle du produit. Ils représentent la manière dont les designers peuvent présenter les différents composants du produit, de manière à ce que l’ensemble raconte une histoire cohérente. Ce qu’il faut retenir, c’est que ces principes concernent la façon dont notre cerveau interprète le monde extérieur, par opposition à la façon dont nos yeux captent les images.

Example of the figure and ground principle at work.

Fermeture. Le principe selon lequel si l’on donne à l’utilisateur différents composants dans une série avec des éléments manquants, notre cerveau comblera les lacunes de lui-même. Notre cerveau préfère les images complètes, ce qui nous amène à voir l’ensemble avant de remarquer les parties qui le composent.

Continuité. Notre cerveau établit des connexions entre les éléments et en vient à identifier un modèle. Une fois que nous avons remarqué ce modèle, nos yeux le suivent naturellement.

Similitude. Les différents éléments qui se ressemblent visuellement doivent être regroupés, car notre cerveau les considère comme des parties d’une même forme.

Un destin commun. Regroupez les éléments qui se déplacent dans la même direction pour créer un lien supplémentaire aux yeux de l’utilisateur – les menus coulissants, par exemple, créent cet effet.

La figure et le sol. Nous percevons les éléments comme des figures (au centre de l’attention) ou comme le sol (l’arrière-plan). Cela joue sur notre perspective et stipule ce sur quoi les yeux se concentrent et ce qu’ils traitent en premier.

Proximité. Cela signifie que la proximité entre les différents éléments déterminera s’ils sont perçus comme étant ensemble ou comme faisant partie d’un tout.

L’espace blanc peut jouer un rôle important dans le design de votre hiérarchie visuelle. Les designs épurés ont tendance à comporter moins d’éléments que les styles plus classiques. Tout doit être parfait.

Pensez à Gordon Ramsey dans Masterchef. Chaque fois qu’un candidat prépare un plat vraiment simple, comme des crêpes, il devient instantanément une tâche inquiétante – la moindre erreur attire immédiatement l’attention du chef redouté. Il en va de même pour le minimalisme dans le design des sites web.

Tubik Studio.

Comme vous n’aurez pas trop d’éléments ou de composants, la hiérarchie visuelle n’aura pas à souffrir d’un trop grand nombre de visuels, ce qui est très utile. Mais le revers de la médaille est que la hiérarchie visuelle du produit doit être parfaite précisément parce qu’elle a très peu d’aide et qu’elle ne peut se cacher nulle part.

L’essentiel est de comprendre la fonction de l’espace blanc actif, qui est laissé intentionnellement entre les éléments dans un souci de structure, de hiérarchie visuelle et de lisibilité. Si vous souhaitez créer une bonne hiérarchie visuelle dans un design minimaliste, vous devrez surveiller attentivement votre typographie, l’utilisation des couleurs, ainsi que l’espacement et les proportions.

Pour en savoir plus sur les interfaces minimalistes, consultez notre article sur le design des interfaces utilisateur minimales.

La typographie joue un rôle important dans le design de la hiérarchie visuelle. Elle a été perfectionnée par les magazines et les journaux en raison de la quantité considérable de contenu écrit sur leurs pages. L’ordre d’importance est nécessaire pour que les gens puissent identifier le titre de la première page, par exemple.

Unsplash.

La hiérarchie typographique joue le même rôle que les en-têtes dans votre produit numérique : elle organise le texte de manière à ce que les utilisateurs sachent par où commencer et ce qui est le plus important. Un aspect important de cette fonction est qu’en tant que design, vous avez la possibilité de décider où les gens commencent à lire et ce qu’ils remarquent en premier.

Voyons donc quelques-unes des techniques typographiques classiques que vous pouvez utiliser pour établir une hiérarchie visuelle avec le texte.

La taille est le premier moyen le plus couramment utilisé pour donner de l’importance à un texte. C’est le moyen le plus simple d’encourager les utilisateurs à commencer à lire à un certain endroit, car nous avons tendance à lire d’abord la police la plus grande, puis à passer à autre chose. La chose importante à retenir lorsque l’on joue avec la taille est l’échelle, c’est-à-dire la relation entre les tailles des différents éléments.

Il est généralement conseillé de commencer par la taille du corps du texte et de poursuivre à partir de là – il est important que le corps du texte ait une taille qui permette une bonne lisibilité. Il sera alors plus facile d’identifier les parties que vous souhaitez mettre en évidence.

Il est intéressant d’utiliser différentes polices de caractères pour créer un contraste. De nombreux designs ont tendance à choisir une police avec empattement et une autre sans empattement pour la même page, de manière à ce que la différence soit palpable. Mais voici l’astuce : même avec de grandes différences, la police doit suivre la même forme.

Le poids est un autre moyen d’ajouter du contraste à la typographie. Le poids de la police de caractères peut immédiatement créer un contraste et établir une hiérarchie. L’association d’une typographie fine et d’une typographie lourde et grasse est un moyen rapide de créer une hiérarchie visuelle, par exemple.

Dropbox reimagined.

Nous le faisons pour maintenir un certain équilibre et une certaine harmonie, même si nous ajoutons beaucoup de contraste. Cela dit, les concepteurs qui ont à cœur de produire quelque chose de tout à fait unique sont toujours les bienvenus pour repousser les limites du design visuel !

La typographie est un sujet assez vaste – comme de nombreux aspects du design UX, il y a beaucoup à explorer quant à ce que vous pouvez réaliser avec la typographie. Consultez d’autres articles utiles sur la typographie :

• Prototypage de polices de caractères pour aligner l’identité de la marque
• Meilleures pratiques UX pour l’espacement des lignes
• Les 15 meilleures polices Google pour votre site web
• Les meilleures polices de caractères pour le web et les applications mobiles

La différence entre le web et le mobile tend à être la même quel que soit l’aspect du design UX auquel on se réfère. Les mêmes principes s’appliquent, mais avec une différence majeure : la grande disparité entre l’espace disponible sur l’écran.

Ce manque d’espace pour les écrans mobiles a toutes sortes d’incidences sur la manière dont nous concevons et planifions les produits mobiles, mais dans les grandes lignes, l’histoire reste la même : il est plus difficile de concevoir pour les mobiles. Les designers doivent toujours répondre aux grandes attentes des utilisateurs. Les normes d’utilisation doivent être respectées et le produit doit conserver sa fonction et son attrait.

Alors, en matière de hiérarchie visuelle dans le design mobile, qu’est-ce qui change ?

Who's chipping?

La réponse est : pas grand-chose. L’espace réduit rend chaque élément individuel encore plus important, car les utilisateurs peuvent voir l’ensemble de l’écran dès le premier coup d’œil et sans trop bouger les yeux. Alors que sur un écran d’ordinateur complet, nous pourrions guider le regard de l’utilisateur autour de la page, sur un écran mobile, il n’y a pas de guidage. Il y a si peu d’espace que l’utilisateur peut tout saisir d’un seul coup.

Voici un changement clé dans la façon de penser des designers pour la hiérarchie mobile : l’accent ne doit pas être mis sur le guidage de l’utilisateur pour qu’il y ait un flux, mais plutôt sur la navigation et la mise en valeur.

Si vous voulez explorer quelque chose de nouveau, consultez notre billet sur le design skeuomorphique.

Check out more prototype examples by Justinmind!

Nous entendons par là que dans le design mobile, il y a généralement beaucoup moins de contenu afin de ne pas encombrer le petit écran. Par conséquent, la question de l’orientation ne consiste pas à guider l’utilisateur vers plus de contenu, mais plutôt à le guider vers l’écran suivant, ce qui fait de la navigation une préoccupation majeure.

Il convient également de garder à l’esprit toutes les ramifications de la taille de l’écran en ce qui concerne la typographie et le texte écrit, par exemple. Les notions de taille et d’échelle sont cruciales, car le design doit créer des contrastes et établir une hiérarchie tout en ménageant des espaces blancs. Les polices de caractères ne peuvent pas être trop grandes ou trop petites avant que les utilisateurs aient du mal à lire ou que l’écran soit dominé par un seul mot.

Nous apprécions le fait qu’Optix ait réalisé sa hiérarchie visuelle avec une utilisation limitée de couleurs – le véritable héros de ce design est la typographie. Vous remarquerez qu’Optix a joué avec le poids et la police de caractères afin de créer de l’ordre et de mettre l’accent sur ce qui est important.

Vous remarquerez également qu’ils ont suivi le modèle de lecture Z, en suivant ces lignes invisibles avec leur design. En haut à droite, l’utilisateur remarquera le logo de la marque et passera au CTA sur la gauche. De là, nous passons en diagonale au texte et au deuxième CTA. C’est à la fois subtil et efficace !

Feed a un point de vue plus moderne et innovant sur le design de la hiérarchie visuelle. Leur page d’accueil est axée sur le mouvement de l’arrière-plan, ce qui lui confère un caractère dynamique et presque onirique.

Nous apprécions le fait que Feed ait opté pour une page d’accueil minimaliste, tout en investissant du temps et de l’attention dans la typographie. La citation de Paulo Coelho, au centre de l’écran, attire l’attention de l’utilisateur et semble le guider pour qu’il continue à faire défiler l’écran vers le bas afin d’obtenir plus d’informations – grâce à l’estompage de la première police et à l’utilisation d’une deuxième police plus lourde.

Medium est un bon exemple de page avec beaucoup de contenu écrit qui doit être organisé. Bien que de nombreux articles différents soient affichés, il y a une légère trace du modèle F, dans lequel les utilisateurs peuvent d’abord balayer la partie supérieure qui comprend les articles et la barre de navigation. Ensuite, les utilisateurs peuvent descendre verticalement, en voyant plus de contenu potentiellement intéressant au fur et à mesure qu’ils avancent.

Nous apprécions le fait que, bien que la page soit très chargée, elle présente un certain ordre et un sens de l’orientation. Elle n’est pas écrasante, grâce à l’utilisation intelligente de l’espace blanc. Nous apprécions également l’utilisation intelligente de la typographie pour établir une hiérarchie dans chaque article, en séparant le titre, l’extrait et les informations sur l’auteur.

Kitchen Stories est un merveilleux exemple de hiérarchie visuelle bien faite, car elle offre beaucoup de contenu aux utilisateurs dans un espace réduit. Kitchen Stories s’appuie sur le style épuré et spacieux de son site web, qu’il transpose avec brio sur son application mobile.

En termes de hiérarchie visuelle, vous pouvez compter sur l’utilisation de différentes polices de caractères et de nombreuses images inspirantes de plats qui plairont à la fois aux utilisateurs affamés et aux designers. Le design de l’application utilise l’espace blanc pour établir une connexion et une distinction entre les différentes recettes et histoires, avec des touches de couleur dans les boutons flottants qui attirent l’œil.

Artsy est une application destinée à tous les amateurs et collectionneurs d’art. Nous aimons cette application parce que, bien qu’elle soit riche en contenu, elle est avant tout visuelle. Avec de nombreuses œuvres d’art accrocheuses à afficher, l’application ne fait aucun effort pour détourner l’attention de l’utilisateur de l’art. Au contraire, elle s’en tient au noir et blanc, avec un peu de couleur dans la navigation.

Nous apprécions le fait qu’Artsy présente les œuvres d’art dans une grille, avec un espace blanc comme séparateur. L’utilisation de la typographie est intelligente, car elle est suffisamment subtile pour que les utilisateurs puissent faire la différence entre le prix de l’art et la date à laquelle il a été réalisé, sans vraiment remarquer la planification de la hiérarchie visuelle.

La hiérarchie visuelle est un élément sur lequel tous les utilisateurs s’appuient pour donner un sens à ce qu’ils voient. Partout, les designers trouvent constamment de nouvelles façons de jouer avec les éléments visuels à leur disposition pour les produits afin de transmettre un message spécifique aux utilisateurs. En matière de design visuel, il s’agit de mettre la créativité à l’œuvre tout en gardant à l’esprit la facilité d’utilisation.