Au cours du 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 utilisateur de l'utilisation de leur logiciel. Nous avons compilé une liste de points à vérifier avant l'approbation de la conception.
Veuillez noter que tous ces points ne s'appliquent pas à tous les produits, mais en général ce sont les plus pertinents.
La boîte à outils de conception UX
Téléchargements illimités: plus de 1 000 000 de modèles filaires et UX, kits d'interface utilisateur, éléments de conception, etc.
Télécharger maintenant
Design d'interaction
01 – Les actions répétitives ou les activités fréquentes se sentent sans effort
Parce que 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) est 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 l'éviter – par exemple, à la recherche de concurrents qui peuvent les aider à le faire plus rapidement / mieux.
Comment le tester: Vous devez commencer par analyser tous les flux de votre produit et observer le comportement des utilisateurs. Vous voulez vous assurer que s'il y a des actions répétitives, il existe un moyen de les faciliter: par exemple, une option pour utiliser les informations saisies précédemment.
02 – Les utilisateurs peuvent facilement récupérer des erreurs
Parce que c'est important: Souvent, les utilisateurs prennent des actions indésirables ou des actions qui n'ont pas conduit aux résultats escomptés, et leur permettre de revenir et d'essayer à nouveau signifie qu'ils ne seront pas frustrés et se rétabliront facilement et continueront d'avancer.
Comment le tester: Tout d'abord, assurez-vous que votre système de navigation autorise le retour et que les actions peuvent être annulées. Ensuite, lorsque vous exécutez des tests d'utilisabilité, créez des scénarios dans lesquels l'utilisateur est susceptible de prendre la mauvaise action et voyez si vous pouvez facilement récupérer.
03 – Les utilisateurs reçoivent un soutien adéquat en fonction de leur niveau d'expérience
Parce que c'est important: Il est important de garantir aux utilisateurs novices de votre produit une expérience d'apprentissage fluide. Cependant, une fois que vous êtes familiarisé avec le produit, cela devrait conduire à des outils pour vous aider à vous 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, exécutez 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
Parce que c'est important: Les utilisateurs demandent de l'aide lorsqu'ils sont piégés dans une certaine partie de leur 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 s'était arrêté.
Comment le tester: Créez des scénarios de test où 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
Parce que c'est important: Il ne s'agit pas d'une règle définie, et parfois, pour des cas spécifiques, plus de trois couleurs primaires peuvent être utilisées. Cependant, gardez à l'esprit que la combinaison de trois couleurs est déjà difficile, donc dans la plupart des cas, il faut éviter plus.
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é
Parce que c'est important: Avoir un produit accessible n'est pas un avantage, c'est essentiel. Pour les personnes ayant une déficience visuelle comme le daltonisme, s'appuyer uniquement sur la couleur pour transmettre la hiérarchie, le contenu ou la fonctionnalité signifie qu'elles ne seront pas en mesure d'utiliser votre produit et seront un groupe démographique exclu.
Comment le tester: colorfilter.wickline.org vous permettra de placer un filtre de couleur en haut de votre page Web et de le tester pour différents types de daltonisme. Vous pouvez également capturer l'écran de votre produit et le convertir en niveaux de gris dans un éditeur d'images et voir si vous pouvez facilement distinguer les couleurs.
07 – La hiérarchie visuelle dirige l'utilisateur vers l'action requise
Parce que c'est important: Les utilisateurs s'appuient sur la hiérarchie et les indices de produits pour savoir quoi faire et où aller; il est essentiel de comprendre cela et de les guider de manière appropriée en utilisant cette hiérarchie.
Comment le tester: Comprenez comment les flux fonctionnent au sein de votre produit et si vos actions clés sont encouragées par la hiérarchie visuelle.
08 – Les éléments en haut de la hiérarchie visuelle sont les plus importants
Parce que c'est important: La hiérarchie visuelle permet aux utilisateurs de numériser rapidement des 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: Capturez l'écran de votre produit numérique, puis flou gaussien cette capture d'écran dans un rayon d'environ 5 pixels. En regardant le résultat, vous visualiserez instantanément la hiérarchie et noterez quels éléments sont mis en évidence. Sont-ils les plus importants pour l'entreprise et l'utilisateur?
09 – L'action primaire est visuellement différente des actions secondaires
Parce que c'est important: Le fait d'avoir différentes actions primaires et secondaires 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 différents.
Comment le tester: Lors de l'exécution de tests d'utilisabilité, recherchez les erreurs courantes qui ne résultent pas de l'intention de l'utilisateur, mais d'actions primaires et secondaires peu différenciées. De plus, lors de l'examen du design, 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
Parce que c'est important: Lors de l'utilisation d'un nouveau produit, les utilisateurs viennent avec un ensemble d'attentes créées à partir de leur expérience précédente avec d'autres produits numériques, par exemple à quoi les boutons devraient ressembler et comment ils devraient fonctionner. Répondre à ces attentes signifie que vous ne créez pas de friction inutile.
Comment le tester: Tout d'abord, vérifiez votre produit pour 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 d'une manière visuellement différente
Parce que c'est important: Il est essentiel de confirmer à l'utilisateur si une action a réussi ou non. Par exemple, après avoir soumis un formulaire, un message de confirmation clair sous la forme d'une bannière colorée signifie que l'utilisateur peut passer à la tâche suivante.
Comment le tester: Vérifiez toutes les zones de votre produit où l'utilisateur entre 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 la rétroaction est claire concernant l'état final.
12 – Les messages d'alerte sont cohérents
Ce que c'est: Les messages d'alerte ont le même style visuel et apparaissent au même endroit de la même manière.
Parce que c'est important: Le fait d'avoir des messages d'alerte cohérents signifie que l'utilisateur comprendra toujours ce qui mérite une attention immédiate. Ne pas être cohérent avec les alertes mettrait une pression mentale supplémentaire sur chaque nouvelle alerte.
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 différents
Parce que 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 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 dans les tests d'utilisabilité.
Architecture informationnelle
14 – La navigation est cohérente
Parce que c'est important: La façon dont les utilisateurs ciblent puis parcourent votre produit influence directement leur capacité à atteindre leurs objectifs, quelle que soit leur page actuelle.
Comment le tester: Vérifiez la documentation de votre architecture d'informations et assurez-vous que la navigation est accessible sur chaque page et qu'elle ne change ni ne disparaît. Avant de plonger dans la conception visuelle, essayez de commander des cartes ou de tester des arbres pour vous assurer que vos itinéraires d'architecture d'informations sont aussi intuitifs que possible.
15 – Place à la croissance
Parce que 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 disposition générale devraient prendre en charge plus de catégories / thèmes sans interruption. Concevoir avec une marge de croissance signifie que les efforts de conception et de développement majeurs sont facilement mis à l'échelle via l'interface.
Comment le tester: Demandez à tous ceux qui s’inquiètent de la façon dont le contenu pourrait évoluer avec le temps dans le produit. Soutiendra-t-il un contenu plus statique? L'architecture devra-t-elle prendre en charge les vidéos?
Typographie
16 – Pas plus de deux familles de types différents sont utilisées
Parce que c'est important: Ce n'est pas une règle fixe: il est parfois possible d'en réaliser plus de deux. Mais de manière générale, faire correspondre plus de deux n'est pas une tâche facile. Pour des raisons de convivialité et visuelles, le fait de s'en tenir à deux simplifie votre hiérarchie typographique et améliore la compréhension.
Comment le tester: Assurez-vous simplement que votre conception ne mélange pas plus de deux familles de types. Vous devez également vous assurer que les familles que vous choisissez correspondent correctement (en savoir plus ici).
17 – Les polices utilisées pour le contenu du texte ont une taille d'au moins 12 pixels
Parce que c'est important: Encore une fois, ce n'est pas une règle stricte: en théorie, vous pouvez utiliser des tailles plus petites à des fins très spécifiques, mais en général la lisibilité est fortement réduite pour les tailles inférieures à 12 pixels.
Comment le tester: Vérifiez tout leur contenu et assurez-vous que les polices utilisées sont d'au moins 12 pixels.
18 – Réserve les mots majuscules pour les étiquettes, les titres ou les acronymes
Parce que c'est important: Limiter l'utilisation de mots en majuscule est connu pour le rendre plus facile à comprendre: il est moins lourd visuellement et plus facile à digérer pour l'utilisateur. Il doit être utilisé spécifiquement pour souligner des cas très restreints – acronymes, par exemple.
Comment le tester: Veuillez effectuer une vérification approfondie du contenu et vous assurer que les mots en majuscule sont limités aux titres, aux étiquettes ou aux acronymes.
19 – Différents styles ou familles de polices sont utilisés pour séparer le contenu des contrôles
Parce que c'est important: Il devrait y avoir des indicateurs clairs de ce qu'est le contenu et de ce que sont les contrôles, c'est-à-dire avec quoi l'utilisateur peut interagir. Ces indicateurs peuvent être la taille, la couleur, le positionnement, la police, etc. La source est importante: l'utilisation de différents styles ou familles signifie que l'utilisateur ne sera pas confus et identifiera facilement avec quoi il peut interagir.
Comment le tester: Identifiez tous les contrôles de votre produit et assurez-vous qu'ils se détachent du contenu. Lors de l'exécution de tests d'utilisabilité, vérifiez 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
Parce que c'est important: Elle affecte fortement la lisibilité et la compréhension. Faire une distinction claire entre les titres, les sous-titres et les paragraphes réduit la tension mentale en digérant ce contenu. Il a également des avantages visuels: il semble et se sent mieux.
Comment le tester: Lorsque vous examinez le contenu de votre produit, assurez-vous que les en-têtes, sous-titres et paragraphes utilisent des tailles de police et des poids différents.
Interface utilisateur
21 – Proximité et alignement
Parce que 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 son interface.
Comment le tester: Recherchez les éléments qui ont des fonctionnalités similaires et vérifiez si (si possible) ils sont regroupés.
22 – Indicateur de progression pour les workflows en plusieurs étapes
Parce que c'est important: Surtout pour les workflows en plusieurs étapes, l'utilisateur peut facilement se sentir dépassé ou se demander combien de temps jusqu'à ce qu'il soit finalement terminé. Un indicateur de progression vous aide à vous localiser, mais plus important encore, il crée un sentiment d'accomplissement et réduit les taux de chute.
Comment le tester: Vérifiez tous les flux dans votre produit où il y a différentes étapes pour réaliser quelque chose, puis assurez-vous que la progression est indiquée par un indicateur.
23 – Les éléments de premier plan (tels que le contenu et les contrôles) se distinguent facilement de l'arrière-plan
Parce que c'est important: Important pour les malvoyants. Il améliore également la courbe d'apprentissage et la compréhension des utilisateurs. La distinction claire facilite la navigation, accorde plus d'attention aux boutons et augmente la convivialité globale.
Comment le tester: Capturez l'écran de votre produit et flou gaussien cette capture d'écran dans un rayon d'environ 3px à 5px. En regardant le résultat, pouvez-vous facilement dire ce qui est au premier plan et ce qui est à l'arrière-plan?
Félicitations pour avoir révisé la liste!
… Mais ce n'est pas la fin.
Votre produit est maintenant plus robuste et s'est peut-être amélioré dans plusieurs domaines, peut-être maintenant plus accessible, par exemple, mais n'oubliez pas de tester, de recueillir les commentaires des utilisateurs et de continuer à itérer.
