Maîtriser la cohérence de l’interface : comment créer une expérience utilisateur fluide
Avez-vous déjà ressenti la frustration de naviguer sur un site web ou une application sans comprendre son fonctionnement ? Bien sûr que oui.
La cause de votre frustration est très probablement une interface mal conçue qui ne vous permet pas de la parcourir intuitivement. Au lieu de cela, vous devez vous arrêter et analyser chaque élément pour comprendre comment il fonctionne et à quoi il sert.
L’une des erreurs les plus courantes menant à une mauvaise conception de produit est l’incohérence de l’interface utilisateur.
Vous voulez plus de The CPO Club ?
Inscrivez-vous gratuitement pour terminer la lecture de cet article :
Have an account? Log In
En plus d’être l’une des erreurs les plus répandues, elle est aussi très facile à corriger ou à éviter complètement. Alors, comprenons ce qu’est l’incohérence dans l’UI et comment vous pouvez vous assurer que vos utilisateurs ne la rencontrent pas.
Comprendre la cohérence de l’interface utilisateur
Comme son nom l’indique, la cohérence de l’UI consiste à avoir des éléments d’interface identiques, une conception atomique, et une expérience utilisateur générale similaire pour le même type d’action ou d’entité dans votre produit.
Si vous avez des boutons principaux à plusieurs endroits dans votre interface, ils doivent tous avoir la même apparence (UI) et fonctionner de la même manière (UX). Par exemple, si vous vous connectez à votre compte Dropbox et que vous parcourez les différentes sections, vous remarquerez que tous les boutons d’action principale sont identiques.
Si vous regardez de plus près, vous verrez que ce ne sont pas seulement les boutons d’action principale qui restent cohérents dans Dropbox, mais pratiquement tous les éléments.
Il existe plusieurs raisons importantes pour lesquelles les équipes de design accordent une attention particulière à la cohérence de l’interface utilisateur. À savoir :
- Cela semble propre et agréable à l’œil. La diversité n’est pas toujours la meilleure chose sur une interface utilisateur. Avoir trop de types de visuels pour les éléments rend l’interface lourde et nuit à la lisibilité.
- Cela paraît professionnel. Une interface utilisateur épurée donne une impression de professionnalisme et de compétence. Les utilisateurs ont tendance à faire davantage confiance aux marques si leurs sites web ou produits sont bien conçus.
- Cela améliore l’expérience utilisateur. Si vous voyez un bouton noir quelque part sur Dropbox et que vous l’identifiez comme une action principale, alors, chaque fois que vous verrez un bouton identique, vous saurez qu’il s’agit aussi d’une action principale. Par conséquent, vous n’aurez pas à vous demander à quoi sert ce bouton à chaque fois que vous en croisez un.
Enfin, il y a aussi le facteur lié au développement de cette interface. Si les éléments de votre UI sont cohérents partout dans votre produit, alors l’équipe front-end n’a pas à développer chaque nouvel élément à partir de zéro. Ils créent un seul élément et le réutilisent sur les nouveaux écrans à développer. Ainsi, vous réduisez considérablement le temps nécessaire pour créer de nouvelles interfaces et fonctionnalités.
En dépit de son importance et de son impact sur l’expérience utilisateur, la cohérence n’est pas toujours présente. Même les grands produits tech rencontrent ce problème. Le menu des paramètres d’Android est mon exemple préféré.
Regardez les différents éléments de cette liste et dites-moi lesquels sont cliquables (boutons) et lesquels ne sont que du texte informatif. Il y a de fortes chances que vous ne puissiez pas le dire à moins d’ouvrir le même menu sur votre téléphone et de tout toucher.
Même si vous avez deviné juste (il s’agit de « Données du compte Google » et « Photos & vidéos »), il vous aura fallu un petit effort de réflexion pour y parvenir.
Ce n’est pas ainsi que l’UX est censée fonctionner. Après tout, la célèbre citation du gourou de l’UX Steve Krug dit :
Ne me faites pas réfléchir.
Au passage, je vous recommande vivement de lire son livre ainsi que la « bible » de l’UX par Don Norman – The Design of Everyday Things.
L’idée générale ici est que vos utilisateurs doivent pouvoir reconnaître automatiquement les éléments de votre interface sans avoir à se demander ce que c’est, et naviguer dans votre application de manière intuitive, presque par « mémoire musculaire ».
Fondamentaux de la conception d’interface utilisateur
Avant d’aller plus loin pour comprendre comment garder votre design cohérent, revoyons les principes fondamentaux qui permettent à la fois la convivialité et la cohérence d’une interface utilisateur.
Clarté et simplicité
Fini le temps des sites web avec des gifs clignotants et toutes les couleurs de l’arc-en-ciel sur l’UI (les milléniaux, vous vous en souvenez ?).
Plus les gens ont commencé à utiliser Internet, plus les designers UI et UX ont prêté attention à la manière dont ils perçoivent et interagissent avec les interfaces utilisateur.
Ils ont vite découvert qu’avoir trop de couleurs et d’éléments visuels gênait les utilisateurs dans l’accomplissement de leurs tâches. Au lieu de cela, la seule chose qu’ils en retirent à parcourir ces interfaces est la fatigue oculaire.
Naturellement, nous avons donc évolué vers le minimalisme et la simplicité. La cohérence de l’interface utilisateur, en fait, est une autre manière de rendre votre interface plus simple.
Hiérarchie visuelle
Lorsque de nombreux éléments apparaissent sur votre écran, il devient difficile de comprendre la relation qu’ils entretiennent entre eux. Par exemple, comment savoir si un texte donné est un titre d’article ou simplement une partie du texte ?
Vous aidez vos utilisateurs à comprendre ces relations grâce à la hiérarchie visuelle. En plaçant certains éléments en haut, en les agrandissant, en les colorant, en gras, ou en employant d’autres astuces, vous permettez aux utilisateurs de percevoir rapidement qu’ils sont plus importants que les autres éléments de l’écran. Les utilisateurs regarderont alors naturellement cet élément en premier avant de passer au second.
Il existe un célèbre mème qui illustre la magie de la hiérarchie visuelle.
Vous avez souri en lisant ce texte, n’est-ce pas ? C’est normal, comme tout être humain, votre vision suit naturellement la hiérarchie visuelle.
Retour d’information
Chaque fois qu’un utilisateur effectue une action sur votre produit, il s’attend à savoir si cette action a eu lieu ou non.
Si vous cliquez sur le bouton supprimer et qu’il ne se passe rien, vous pouvez être désorienté. La suppression a-t-elle eu lieu, ou y a-t-il eu une erreur ? Pour aider vos utilisateurs, vous devez leur fournir un retour visuel (ou sonore, voire haptique) qui leur indique le résultat de l’action.
Si votre système a bien traité la demande de suppression, informez-les que l’élément a été supprimé. Si une erreur survient, là encore, prévenez-les. Ainsi, l’utilisateur saura que l’élément n’a pas été supprimé, et qu’il doit réessayer ou vous contacter pour obtenir de l’aide.
Meilleures pratiques pour assurer la cohérence de l’interface utilisateur
À première vue, la cohérence de l’interface utilisateur paraît très simple, et tout designer devrait pouvoir l’atteindre. C’est vrai, à condition que vous soyez seul à concevoir le produit et que celui-ci soit petit et simple.
Dès que vous commencez à travailler en équipe (où chaque designer a son propre style) et sur un produit composé de dizaines de pages et de fonctionnalités, maintenir la cohérence des éléments devient un véritable défi.
Il vous est tout simplement impossible de vous souvenir de l’apparence de chaque élément du produit et de la reproduire à l’identique dans la nouvelle fonctionnalité sur laquelle vous travaillez.
Heureusement, il existe de nombreux processus et cadres qui permettent de limiter le risque d’introduire de l’incohérence dans le design. En voici trois qui sont des standards de l’industrie.
Guides de style : Il s’agit d’un document qui définit les normes de conception de votre produit et incarne l’identité de votre marque. Il détaille la typographie (polices, tailles, emplacements, etc.) pour les différents types de texte (ex. titres, corps de texte, commentaires...), l’iconographie, la palette de couleurs, ainsi que les autres éléments de design essentiels.
Avec un guide de style, vous garantissez que toute l’équipe de design travaille selon les mêmes standards et que votre contenu, vos couleurs et vos icônes restent cohérents à travers l’ensemble du produit.
Apple est probablement le meilleur exemple d’application stricte de son guide de style, y compris auprès des entreprises qui créent des applications pour ses produits.
L’exemple ci-dessus est le guide de style pour le bouton à placer sur votre site web afin que les utilisateurs téléchargent votre application depuis l’App Store. Comme vous pouvez le constater, Apple indique clairement la manière dont ce bouton doit être utilisé.
Bibliothèques de modèles : C’est un autre document de référence qui se concentre sur la description des détails les plus fins de votre standard de conception, à la différence du guide de style qui se positionne à un niveau plus général. Les bibliothèques de modèles de design sont un livrable courant si votre équipe pratique la méthode du design atomique.
Le concept de design atomique est de disposer d’éléments d’interface utilisateur bien définis et de petite taille qui, une fois combinés, créent des éléments plus complexes. Dans ce cadre, les catégories courantes d’éléments et de leurs combinaisons comprennent :
- Atomes (d'où le nom) : Éléments de base comme les formulaires, les boutons, les icônes, etc. Ce sont des éléments que vous ne pouvez pas diviser davantage.
- Molécules : Combinaisons d’atomes ayant une fonction spécifique. Par exemple, la pagination de vos listes, les fils d’Ariane pour la navigation, etc.
- Organismes : Éléments d'interface plus complexes, composés de plusieurs atomes et molécules représentant des entités. Ce sont des cartes, des barres de recherche, et autres.
- Modèles : Combinaisons d'organismes réutilisables que vous pouvez ajouter à vos pages. Il peut s'agir de listes de résultats, de sections de descriptifs de produits, etc.
- Page : Le résultat final de votre conception et l’endroit où l’utilisateur interagit avec elle. Comme son nom l’indique, ce sont les différentes pages de votre produit comme votre page d’accueil.
Une bibliothèque de motifs est une collection de molécules et d’organismes standardisés que vous pouvez utiliser dans votre conception. Vous obtenez de la cohérence en réutilisant toujours les mêmes éléments dans différentes parties de votre produit, puisque les utilisateurs reconnaîtront instantanément l’élément dès l’ouverture d’une page spécifique.
Système de design : Il s’agit de la combinaison globale de guides de style de haut niveau, de polices, de palettes de couleurs, de descriptions de petits éléments d’interface utilisateur, ainsi que d’un ensemble de composants prêts à l’emploi que vous pouvez utiliser aussi bien dans votre conception que lors du développement du produit.
Presque toutes les grandes entreprises technologiques créent leur propre système de design afin d’assurer une cohérence visuelle. Google a Material, Shopify a Polaris, et Apple a Human Interface. Il existe également des systèmes open-source indépendants que vous pouvez facilement intégrer à votre produit et utiliser gratuitement. Mon préféré parmi ceux-ci est ant.design.
Comme les autres systèmes de design, il propose à la fois une bibliothèque de conception que vous pouvez utiliser dans Figma ou d'autres outils populaires et une bibliothèque de composants pré-codée dans des frameworks populaires (ex. : react) que vos développeurs peuvent utiliser dans leur code.
Outils pour maintenir la cohérence de l'interface utilisateur
Pour conserver la cohérence de votre design à travers toutes vos équipes et toutes les parties de votre produit, il vous faudra documenter vos directives et veiller à ce que votre équipe entière collabore dessus.
Pour documenter et appliquer vos standards de design dans vos écrans et fonctionnalités au quotidien, vous pouvez profiter des fonctions spécialisées de nombreux outils de conception modernes.
Figma, par exemple, vous permet de créer des composants évolutifs que vous pouvez stocker dans votre fichier de système de design et que tout le monde dans votre entreprise pourra utiliser.
Il prend également en charge les UI Kits, une bibliothèque préfabriquée de règles et de guides de conception que vous pouvez télécharger depuis la bibliothèque de Figma et intégrer dans vos produits. Voici un kit pour le Material Design de Google.
Ce kit en particulier vous propose une grande variété d’éléments pour concevoir une application Android conforme aux normes de design de Google.
Maintenant, la partie collaboration. Sans une véritable collaboration dans votre équipe de design, vous risquez d’obtenir des éléments qui ne respectent pas vos directives et qui rompent votre cohérence visuelle. Heureusement, il existe aussi des outils UX/UI pour favoriser la collaboration.
Zeplin, par exemple, aide vos designers et développeurs à collaborer plus efficacement en créant des versions adaptées aux développeurs du design, où l’équipe de développement peut trouver les spécifications exactes en CSS pour les éléments et télécharger facilement les images, icônes et autres ressources du design. Il s'intègre aussi à d’autres outils de développement d’interface pour vous permettre de transférer facilement vos designs réalisés ailleurs vers Zeplin.
Tests et itération pour la cohérence de l'UI
Tout comme pour les exigences produit ou votre stratégie, les guides de design ne sont pas non plus des documents figés. Vous serez toujours amené à les modifier et à les garder à jour.
Parmi les raisons courantes de modification de vos guides figurent :
- Ajouter de nouveaux éléments absents de la bibliothèque.
- Adopter de nouvelles tendances et bonnes pratiques en design.
- Découvrir des problèmes et des « bugs de design » à corriger.
Enfin, il est judicieux de laisser votre équipe de design le revoir de temps à autre et y apporter de petites améliorations.
En plus d'améliorer l'apparence générale et la qualité de votre design, cela vous permet également de réaliser ce que l’on appelle un « test de cohérence de l’interface utilisateur », lors duquel votre équipe de design recherche activement des incohérences dans votre système de design et les corrige.
Vous pouvez également réaliser un test similaire sur vos designs finalisés. Il existe toujours une possibilité que certaines fonctionnalités contiennent des éléments absents de l’UI Kit ou qui n'ont pas l'apparence attendue.
Outre la réalisation de tests internes, je vous suggère également d'impliquer activement vos utilisateurs dans le processus de test. Il existe deux façons de le faire.
- Demandez des retours sur le design, comprenez les besoins de vos utilisateurs et itérez activement en fonction de leurs commentaires.
- Réalisez des tests d'utilisabilité pour comprendre le niveau de cohérence de votre interface.
Concernant ce dernier point, imaginez que vous ayez utilisé votre bouton d’action principal à 10 endroits différents dans votre produit. Êtes-vous sûr que dans ces 10 cas, vos utilisateurs l’identifieront comme l’action principale ?
Vous ne pouvez pas en être certain à moins de mener des tests d’utilisabilité modérés ou non modérés avec des prototypes créés sur votre outil UX et d’observer la façon dont ils interagissent avec eux.
Sur la base de ces tests et des retours utilisateurs, vous pourrez alors prendre des décisions de conception basées sur les données.
Ne me faites pas réfléchir
La cohérence est l’un des éléments fondamentaux d’un bon design d’interface utilisateur (UI). En gardant tout simple et visuellement identique, vous vous assurez que vos utilisateurs ne se perdent pas dans votre interface. Au contraire, ils comprennent intuitivement le rôle de chaque élément à l’écran et réalisent facilement leurs tâches.
N'oubliez pas de vous abonner à notre newsletter pour plus de ressources et de guides en gestion de produit, ainsi que les derniers podcasts, interviews et autres perspectives de leaders et d’experts du secteur.
