Boostez votre UX avec une hiérarchie visuelle claire

Le concept de hiérarchie visuelle a été appliqué dans la conception depuis qu'Internet était un fantasme lointain, et il est tout aussi important dans la conception de produits modernes qu'il l'était au zénith de la publicité imprimée.

La hiérarchie visuelle détermine l'ordre dans lequel les personnes saisissent et traitent les informations sur une page, qu'elles soient numériques ou imprimées. C'est un élément essentiel pour créer une expérience utilisateur optimale.

En termes simples, un sens clair de la hiérarchie visuelle guide les gens vers le contenu ou les actions importantes. Dans une publicité imprimée, ce serait le slogan, alors que dans un produit numérique, il pourrait s'agir d'un message de marque ou d'un appel à l'action principal.

C'est un moyen incroyablement utile de créer une expérience client ordonnée et ciblée tout en améliorant les chances d'atteindre un résultat stratégique.

Voici quelques étapes que les concepteurs UX peuvent suivre pour obtenir un sens clair de la hiérarchie visuelle dans les produits numériques et faire passer l'expérience client au niveau supérieur.

Définir les objectifs UX et de marque

En utilisant diverses méthodes, de nombreuses équipes produit définissent déjà les objectifs UX pour chaque section de leur produit.

Façonner la définition des objectifs UX en répondant aux critères de la méthodologie SMART ( S pecific, M easurable, A ctionable , Relevant, T rackable) est un moyen populaire de le faire. Il y a un bon article à ce sujet ici.

Les objectifs de la marque sont tout aussi importants. Ceux-ci reflètent les objectifs généraux de l'entreprise, tant du point de vue de la marque que du point de vue commercial. Un exemple d'objectifs de marque pour une page de destination de service automobile serait : a) établir la marque en tant que service premium, et b) encourager les recherches de voitures.

Le moyen le plus simple et le plus efficace de documenter les objectifs UX et de marque des différentes phases du parcours client consiste à animer un atelier collaboratif de hiérarchie visuelle.

À l'aide d'un outil de collaboration à grande échelle tel que Milanote ou même Sketch, disposez les écrans prototypes dans un ordre chronologique général. Invitez les praticiens clés à une réunion en ligne ou physique, en vous assurant qu'il y a une représentation à la fois des perspectives UX et de la marque.

Ensuite, partagez l'écran (ou connectez-vous à un moniteur) et commencez à annoter !

Cela lance le processus d'identification des objectifs UX et de marque pour chaque section de l'expérience client et met en mouvement un flux de travail stratégique qui peut être exploité tout au long du processus de conception.

Classez les actions et le contenu pour une hiérarchie visuelle claire

Maintenant que les objectifs UX et de marque sont en place, il est temps de définir la hiérarchie visuelle appropriée de chaque action ou élément de contenu et de documenter cela pour référence lors des travaux de conception ultérieurs.

Tout d'abord, une taxonomie est nécessaire. Il est préférable d'utiliser une échelle de 1 à 3, 1 étant le plus important, 3 le moins.

À l'aide du format de canevas large décrit précédemment, commencez à annoter en collaboration la mise en page du prototype.

Dans cet exemple, il y a un objectif UX de " Je veux en savoir plus sur le service de cette marque pour déterminer s'il correspond à mon budget, mes besoins et mes préférences ". Les objectifs de la marque sont a) d'établir la marque en tant que service premium, et b) d'encourager les recherches de voitures.

À la lumière de cela, le message de la marque Trouvez votre voiture idéale parmi plus de 500 voitures s'est vu attribuer une hiérarchie de 1, tout comme le formulaire et le CTA qui l'accompagnent.

Malgré son importance pour l'expérience client globale, le logo (et la navigation) lui-même a reçu un 2, car il ne joue pas un rôle aussi important dans la réalisation des objectifs UX et de la marque.

Le contenu de support est marqué d'un 3, ce qui peut sembler contre-intuitif. Cependant, il adhère au flux narratif qui commence à prendre forme, avec la messagerie de la marque et la fonctionnalité "démarrer" comme objectif principal, puis le logo et la navigation pour établir l'identité et la structure premium du service, puis le contenu de support pour rassurer, mettre en contexte et inspirer le client.

Au fur et à mesure que les concepteurs s'habituent à prendre en compte la hiérarchie visuelle, il est facile de commencer à apprécier les possibilités narratives qu'elle révèle, ajoutant une réelle profondeur aux interfaces utilisateur et aux histoires qu'elles racontent.

Créer une hiérarchie visuelle dans le système de conception

Maintenant que les objectifs et les classements hiérarchiques visuels sont définis, le langage visuel qui va leur donner vie peut être créé. Supposons qu'il existe déjà un système de conception en place (sinon, cela devrait être fait en premier !) et qu'une gamme d'éléments d'interface utilisateur a déjà été conçue.

Le premier point de départ est la composition, c'est-à-dire la mise en page des modèles nécessaires. Considérez où les éléments hautement classés doivent apparaître (comme décrit précédemment, ce n'est pas toujours le plus attendu). Plusieurs variantes peuvent être nécessaires pour répondre à une gamme de scénarios. Pour s'assurer que rien n'est oublié plus tard dans le projet, les concepteurs doivent prendre le temps de les créer maintenant.

Plus tard dans le processus de conception, un certain nombre d'exemples de maquettes peuvent être inclus dans le document du système de conception, avec des symboles dynamiques des modèles d'interface utilisateur (afin que les concepteurs travaillant sur le projet disposent des dernières versions).

Une fois qu'une idée générale de la composition a été établie, des variantes d'éléments d'interface utilisateur peuvent commencer à être créées.

Prenez l'humble en-tête de page. Dans cet exemple d'un projet récent pour un cabinet de conseil en RH, il existe trois variantes dans le système de conception afin de répondre aux différents niveaux de la hiérarchie visuelle.

Les concepteurs peuvent développer cela avec les blocs de construction de leur interface utilisateur. Par exemple, sur un projet récent pour une application de recrutement populaire, la profondeur a été utilisée pour différencier les panneaux de contenu - plus la profondeur est grande, plus la hiérarchie visuelle est élevée.

La hiérarchie visuelle peut être conçue dans à peu près tous les éléments du langage visuel d'une marque : composition, typographie, profondeur, imagerie, iconographie et ton de la voix. Plus la conception est approfondie, plus l'expérience client sera cohérente et ciblée.

Emballer

L'intégration d'un flux de travail hiérarchique visuel dans le processus de conception se traduit par des expériences utilisateur considérablement meilleures. Pour ce faire, il donne aux concepteurs un moyen d'attribuer un classement à différents types de contenu, ce qui se traduit par des interfaces utilisateur qui non seulement semblent ordonnées et intuitives, mais permettent également d'atteindre les objectifs fondamentaux de la marque.

Une hiérarchie visuelle claire renforce non seulement votre UX, mais met également en place un flux de travail durable qui donne au processus de conception une orientation stratégique, essentielle dans un environnement de conception de produits moderne.

Pour en savoir plus sur le blog Toptal Design :

• Principes de conception : introduction à la hiérarchie
• Meilleures pratiques de conception d'interface utilisateur et erreurs courantes
• Explorer les principes de conception de la Gestalt
• Le guide complet de l'architecture de l'information
• Boostez votre UX avec ces principes de conception d'interaction réussis