La liste de contrôle de conception UX

Pendant le processus de conception, certains défauts de votre produit passeront inaperçus. Ces petites (ou parfois grandes) choses peuvent faire beaucoup pour nuire à l'expérience que l'utilisateur a lors de l'utilisation de votre logiciel. Nous avons dressé une liste de points à vérifier avant la signature de la conception.

Veuillez noter que tous ces points ne s'appliquent pas à tous les produits, mais généralement, ce sont les plus pertinents.

Design d'interaction

01 - Les actions répétitives ou les activités fréquentes se sentent sans effort

Pourquoi c'est important : les actions répétitives pour le même résultat (par exemple, remplir différents formulaires avec les mêmes informations) sont une tâche ardue qui n'aide pas l'utilisateur à atteindre ses objectifs plus rapidement ou mieux. L'utilisateur est également susceptible d'essayer de trouver un moyen de le contourner : par exemple, en recherchant des concurrents qui peuvent l'aider à le faire plus vite/mieux.

Comment le tester : Vous devez commencer par analyser tous les flux de votre produit et observer le comportement de l'utilisateur. Vous voulez vous assurer que, si des actions répétitives sont présentes, il existe un moyen de les faciliter : une option pour utiliser les informations saisies précédemment.

02 – Les utilisateurs peuvent facilement récupérer des erreurs

Pourquoi c'est important : Souvent, les utilisateurs effectuent des actions involontaires ou des actions qui n'ont pas abouti aux résultats souhaités - et leur permettre de revenir en arrière et d'essayer à nouveau signifie qu'ils ne seront pas frustrés et qu'ils récupéreront facilement et continueront d'avancer.

Comment le tester : Tout d'abord, assurez-vous que votre système de navigation permet de revenir en arrière et que les actions peuvent être annulées. Ensuite, lors des tests d'utilisabilité, créez des scénarios dans lesquels l'utilisateur effectuera très probablement la mauvaise action et vérifiez s'il peut facilement récupérer.

03 – Les utilisateurs sont adéquatement accompagnés selon leur niveau d'expertise

Pourquoi c'est important : Il est important de s'assurer que les utilisateurs novices de votre produit bénéficient d'une expérience d'apprentissage fluide. Cependant, une fois qu'ils sont déjà familiarisés avec le produit, cela devrait faire place à des outils qui les aident à se déplacer plus rapidement dans les flux. Les deux scénarios améliorent la convivialité et la rétention. Par exemple, des raccourcis pour les utilisateurs experts, des info-bulles pour les utilisateurs novices, etc.

Comment le tester : Tout d'abord, vérifiez si vous disposez d'outils pour les deux publics. Ensuite, effectuez des tests d'utilisabilité avec des utilisateurs novices et experts pour voir si ces outils sont utilisés correctement.

04 - L'accès à l'aide n'entrave pas la progression de l'utilisateur

Pourquoi c'est important : les utilisateurs demandent de l'aide chaque fois qu'ils sont bloqués dans une certaine partie de votre produit. Il est important que l'aide – en ligne ou hors ligne – soit complémentaire et permette à l'utilisateur de reprendre le travail là où il l'avait laissé.

Comment le tester : créez des scénarios de test dans lesquels les utilisateurs demanderont de l'aide et verront si leurs flux de travail et leur progression sont interrompus.

Aspect visuel

05 – Pas plus de trois couleurs primaires

Pourquoi c'est important : Il ne s'agit pas d'une règle fixe - et parfois, dans des cas spécifiques, plus de trois couleurs primaires peuvent être utilisées. Cependant, gardez à l'esprit que combiner trois couleurs est déjà difficile, donc dans la plupart des cas, il faut éviter plus que cela.

Comment le tester : Assurez-vous que la palette de couleurs que vous avez utilisée lors de la conception du produit ne comporte pas plus de trois couleurs primaires.

06 - La couleur seule n'est pas utilisée pour transmettre la hiérarchie, le contenu ou la fonctionnalité

Pourquoi c'est important : Avoir un produit accessible n'est pas un plus, c'est un must. Les personnes ayant une déficience visuelle, comme le daltonisme, comptent uniquement sur la couleur pour transmettre la hiérarchie, le contenu ou la fonctionnalité. Cela signifie qu'ils ne pourront pas utiliser votre produit et seront un groupe démographique exclu.

Comment le tester : colorfilter.wickline.org vous permettra de mettre un filtre de couleur en haut de votre page Web et de le tester pour différents types de daltonisme. Vous pouvez également effectuer une capture d'écran de votre produit et le convertir en niveaux de gris sur un éditeur d'images et voir si vous pouvez distinguer facilement les couleurs.

07 – La hiérarchie visuelle dirige l'utilisateur vers l'action requise

Pourquoi c'est important : les utilisateurs s'appuient sur la hiérarchie et les indices du produit pour savoir quoi faire et où aller - il est essentiel de comprendre cela et de les guider correctement à l'aide de cette hiérarchie.

Comment le tester : Comprenez comment les flux à l'intérieur de votre produit fonctionnent et si ses actions clés sont incitées par la hiérarchie visuelle.

08 – Les éléments au sommet de la hiérarchie visuelle sont les plus importants

Pourquoi c'est important : la hiérarchie visuelle permet aux utilisateurs de parcourir rapidement les informations, en hiérarchisant le contenu en fonction de leurs besoins immédiats. Les éléments situés en haut de la hiérarchie visuelle doivent être les plus importants pour l'entreprise et les plus pertinents pour les utilisateurs.

Comment le tester : faites une capture d'écran de votre produit numérique, puis floutez cette capture d'écran dans un rayon d'environ 5 px. Lorsque vous regardez le résultat, vous visualisez instantanément la hiérarchie et remarquez quels éléments se démarquent. Sont-ils les plus importants pour l'entreprise et l'utilisateur ?

09 - L'action principale est visuellement distincte des actions secondaires

Pourquoi c'est important : avoir des actions principales et secondaires distinctes signifie que l'utilisateur ne sera pas confus lorsqu'il interagira avec votre produit et sera moins enclin à faire des erreurs. Par exemple, "Soumettre" et "Annuler" doivent être clairement distincts.

Comment le tester : lorsque vous effectuez des tests d'utilisabilité, observez les erreurs courantes qui ne résultent pas de l'intention de l'utilisateur, mais d'actions principales et secondaires mal distinctes. De plus, lors de l'examen de la conception, assurez-vous que la couleur, la taille, le positionnement et d'autres éléments différencient les actions.

10 – Les éléments interactifs ne sont pas abstraits

Pourquoi c'est important : lors de l'utilisation d'un nouveau produit, les utilisateurs ont un ensemble d'attentes construites à partir d'expériences antérieures avec d'autres produits numériques - par exemple, à quoi doivent ressembler les boutons et comment ils doivent fonctionner. Répondre à ces attentes signifie que vous ne créez pas de frictions inutiles.

Comment le tester : Tout d'abord, passez en revue votre produit en recherchant les zones où les modèles courants ne sont pas utilisés. Par exemple, des liens qui ne ressemblent pas à des liens.

11 – La soumission du formulaire est confirmée de manière visuellement distincte

Pourquoi c'est important : Il est essentiel de confirmer à l'utilisateur si une action a été effectuée avec succès ou non. Par exemple, après avoir soumis un formulaire, un message clair de confirmation sous la forme d'un bandeau de couleur signifiera que l'utilisateur pourra passer à la tâche suivante.

Comment le tester : Vérifiez toutes les zones de votre produit où l'utilisateur saisit des informations. Une fois la saisie de l'utilisateur terminée, déclenchez une confirmation indiquant si cette action a réussi ou non. Assurez-vous que les commentaires sont parfaitement clairs concernant l'état final.

12 – Les messages d'alerte sont cohérents

Qu'est-ce que c'est : les messages d'alerte ont le même style visuel et s'affichent au même endroit de la même manière.

Pourquoi c'est important : Avoir des messages d'alerte cohérents signifie que l'utilisateur comprendra toujours ce qui mérite immédiatement son attention. Ne pas être cohérent avec les alertes signifierait une charge mentale supplémentaire à chaque fois qu'une nouvelle alerte apparaît.

Comment le tester : Assurez-vous que les messages d'alerte ont le même style visuel et que leur positionnement est similaire ou identique.

13 – Les messages d'alerte sont visuellement distincts

Pourquoi c'est important : En s'assurant que les messages d'alerte sont clairement différenciés des autres éléments de l'écran, l'utilisateur peut réellement les remarquer et/ou agir en conséquence.

Comment le tester : après avoir vérifié vous-même la différenciation visuelle, voyez comment les utilisateurs réagissent aux messages d'alerte lors des tests d'utilisabilité.

Architecture des informations

14 – La navigation est cohérente

Pourquoi c'est important : la façon dont les utilisateurs s'orientent puis naviguent dans votre produit influence directement s'ils peuvent atteindre leurs objectifs, quelle que soit leur page actuelle.

Comment le tester : Vérifiez la documentation de votre architecture d'information et assurez-vous que la navigation est accessible sur chaque page et qu'elle ne change pas ou ne disparaît pas. Avant de plonger dans la conception visuelle, essayez le tri de cartes ou le test d'arborescence pour vous assurer que les voies de votre architecture d'informations sont aussi intuitives que possible.

15 – Place à la croissance

Pourquoi c'est important : vous ne pouvez pas repenser le système de navigation et d'information d'un produit à chaque fois que de nouvelles fonctionnalités ou de nouveaux contenus apparaissent. Les menus de navigation et la mise en page globale doivent prendre en charge plus de catégories/sujets sans interruption. Concevoir avec une marge de croissance signifie que les efforts de conception et de développement majeurs s'étendent facilement à travers l'interface.

Comment le tester : demandez à toutes les parties prenantes comment le contenu peut évoluer au fil du temps dans le produit. Prendrez-vous en charge plus de contenu statique ? L'architecture devra-t-elle prendre en charge les vidéos ?

Typographie

16 – Pas plus de deux familles de types distinctes sont utilisées

Pourquoi c'est important : Il ne s'agit pas d'une règle fixe : il est parfois possible d'en réussir plus de deux. Mais d'une manière générale, faire correspondre plus de deux n'est pas une tâche facile. Pour des raisons de convivialité et visuelles, s'en tenir à deux simplifie votre hiérarchie typographique, ce qui améliore la compréhension.

Comment le tester : Assurez-vous que votre conception ne mélange pas plus de deux familles de types. Il serait utile que vous vous assuriez également que les familles que vous avez choisies correspondent correctement (en savoir plus ici).

17 – Les polices utilisées pour le contenu textuel ont une taille d'au moins 12px

Pourquoi c'est important : Encore une fois, ce n'est pas une règle fixe - vous pourriez, en théorie, utiliser des tailles plus petites à des fins particulières - mais d'une manière générale, la lisibilité est considérablement réduite pour les tailles inférieures à 12 pixels.

Comment le tester : Vérifiez tout votre contenu et assurez-vous que les polices utilisées pour eux sont d'au moins 12 pixels.

18 – Réservez les mots en majuscules pour les étiquettes, les en-têtes ou les acronymes

Pourquoi c'est important : Limiter l'utilisation de mots en majuscules est connu pour faciliter la compréhension - c'est moins lourd visuellement et plus facile à digérer pour l'utilisateur. Il doit être utilisé spécifiquement pour l'emphase ou les cas très restreints - les acronymes, par exemple.

Comment le tester : effectuez une vérification approfondie du contenu et assurez-vous que les mots en majuscules sont limités aux seuls en-têtes, étiquettes ou acronymes.

19 – Différents styles ou familles de polices sont utilisés pour séparer le contenu des contrôles

Pourquoi c'est important : il doit y avoir des indicateurs clairs sur ce qu'est le contenu et ce que sont les contrôles, c'est-à-dire ce avec quoi l'utilisateur peut interagir. Ces indicateurs peuvent être la taille, la couleur, le positionnement, la police, etc. La police est importante : l'utilisation de différents styles ou familles signifie que l'utilisateur ne sera pas confus et identifiera facilement ce avec quoi il peut interagir.

Comment le tester : Identifiez tous les contrôles de votre produit et assurez-vous qu'ils se démarquent du contenu. Lors de l'exécution de tests d'utilisabilité, faites attention si les utilisateurs ont des difficultés à interagir avec les contrôles.

20 – La taille/le poids de la police différencie les types de contenu

Pourquoi c'est important : cela a un impact important sur la lisibilité et la compréhension. Faire une distinction claire entre les titres, les sous-titres et les paragraphes réduit la surcharge mentale pour digérer ce contenu. Il a également des avantages visuels - il a l'air et se sent mieux.

Comment le tester : lorsque vous examinez le contenu de votre produit, assurez-vous que les titres, les sous-titres et les paragraphes utilisent des tailles et des poids de police différents.

Interface utilisateur

21 – Proximité et alignement

Pourquoi c'est important : L'utilisateur a tendance à regrouper - fonctionnellement ou contextuellement - des éléments proches les uns des autres. Une barre de navigation en est un bon exemple. Suivre ce modèle et regrouper les éléments connectés signifie que l'utilisateur comprend instantanément votre interface.

Comment le tester : recherchez des éléments dont les fonctionnalités sont similaires et vérifiez si (si possible) ils sont regroupés.

22 – Indicateur de progression pour les workflows en plusieurs étapes

Pourquoi c'est important : en particulier pour les flux de travail en plusieurs étapes, l'utilisateur peut facilement se sentir dépassé ou se demander combien de temps il faudra pour que cela soit finalement terminé. Un indicateur de progression les aide à se localiser, mais plus important encore, cela crée un sentiment d'accomplissement et réduit les taux d'abandon.

Comment le tester : vérifiez tous les flux à l'intérieur de votre produit où il y a différentes étapes pour accomplir quelque chose, puis assurez-vous que la progression est indiquée par un indicateur.

23 – Les éléments de premier plan (comme le contenu et les contrôles) se distinguent facilement de l'arrière-plan

Pourquoi c'est important : important pour les personnes ayant une déficience visuelle. Il améliore également la courbe d'apprentissage et la compréhension de l'utilisateur. Une distinction claire facilite la navigation, attire davantage l'attention sur les boutons et augmente la convivialité en général.

Comment le tester : faites une capture d'écran de votre produit et effectuez un flou gaussien sur un rayon d'environ 3 pixels à 5 pixels. En regardant le résultat, pouvez-vous facilement distinguer ce qui est au premier plan et ce qui est en arrière-plan ?

Félicitations pour avoir parcouru la liste! Cependant, ce n'est pas la fin.

Votre produit est maintenant plus solide et vous vous êtes peut-être amélioré dans plusieurs domaines - peut-être est-il plus accessible maintenant, par exemple - mais n'oubliez pas de toujours continuer à tester, à recueillir les commentaires des utilisateurs et à continuer à itérer.