Au cours du processus de conception, certains d\u00e9fauts de votre produit passeront inaper\u00e7us. Ces petites (ou parfois grandes) choses peuvent faire beaucoup pour nuire \u00e0 l'exp\u00e9rience utilisateur de l'utilisation de leur logiciel. Nous avons compil\u00e9 une liste de points \u00e0 v\u00e9rifier avant l'approbation de la conception.<\/p>\n
Veuillez noter que tous ces points ne s'appliquent pas \u00e0 tous les produits, mais en g\u00e9n\u00e9ral ce sont les plus pertinents.<\/p>\n
La bo\u00eete \u00e0 outils de conception UX
T\u00e9l\u00e9chargements illimit\u00e9s: plus de 1 000 000 de mod\u00e8les filaires et UX, kits d'interface utilisateur, \u00e9l\u00e9ments de conception, etc.<\/p>\n
T\u00e9l\u00e9charger maintenant <\/i><\/p>\n Parce que c'est important:<\/strong> Les actions r\u00e9p\u00e9titives pour le m\u00eame r\u00e9sultat (par exemple, remplir diff\u00e9rents formulaires avec les m\u00eames informations) est une t\u00e2che ardue qui n'aide pas l'utilisateur \u00e0 atteindre ses objectifs plus rapidement ou mieux. L'utilisateur est \u00e9galement susceptible d'essayer de trouver un moyen de l'\u00e9viter – par exemple, \u00e0 la recherche de concurrents qui peuvent les aider \u00e0 le faire plus rapidement \/ mieux.<\/p>\n Comment le tester:<\/strong> 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\u00e9p\u00e9titives, il existe un moyen de les faciliter: par exemple, une option pour utiliser les informations saisies pr\u00e9c\u00e9demment.<\/p>\n Parce que c'est important:<\/strong> Souvent, les utilisateurs prennent des actions ind\u00e9sirables ou des actions qui n'ont pas conduit aux r\u00e9sultats escompt\u00e9s, et leur permettre de revenir et d'essayer \u00e0 nouveau signifie qu'ils ne seront pas frustr\u00e9s et se r\u00e9tabliront facilement et continueront d'avancer.<\/p>\n Comment le tester: <\/strong>Tout d'abord, assurez-vous que votre syst\u00e8me de navigation autorise le retour et que les actions peuvent \u00eatre annul\u00e9es. Ensuite, lorsque vous ex\u00e9cutez des tests d'utilisabilit\u00e9, cr\u00e9ez des sc\u00e9narios dans lesquels l'utilisateur est susceptible de prendre la mauvaise action et voyez si vous pouvez facilement r\u00e9cup\u00e9rer.<\/p>\n Parce que c'est important:<\/strong> Il est important de garantir aux utilisateurs novices de votre produit une exp\u00e9rience d'apprentissage fluide. Cependant, une fois que vous \u00eates familiaris\u00e9 avec le produit, cela devrait conduire \u00e0 des outils pour vous aider \u00e0 vous d\u00e9placer plus rapidement dans les flux. Les deux sc\u00e9narios am\u00e9liorent la convivialit\u00e9 et la r\u00e9tention. Par exemple, des raccourcis pour les utilisateurs experts, des info-bulles pour les utilisateurs novices, etc.<\/p>\n Comment le tester: <\/strong>Tout d'abord, v\u00e9rifiez si vous disposez d'outils pour les deux publics. Ensuite, ex\u00e9cutez des tests d'utilisabilit\u00e9 avec des utilisateurs novices et experts pour voir si ces outils sont utilis\u00e9s correctement.<\/p>\n Parce que c'est important:<\/strong> Les utilisateurs demandent de l'aide lorsqu'ils sont pi\u00e9g\u00e9s dans une certaine partie de leur produit. Il est important que l'aide, en ligne ou hors ligne, soit compl\u00e9mentaire et permette \u00e0 l'utilisateur de reprendre le travail l\u00e0 o\u00f9 il s'\u00e9tait arr\u00eat\u00e9.<\/p>\n Comment le tester:<\/strong> Cr\u00e9ez des sc\u00e9narios de test o\u00f9 les utilisateurs demanderont de l'aide et verront si leurs flux de travail et leur progression sont interrompus.<\/p>\n Parce que c'est important: <\/strong>Il ne s'agit pas d'une r\u00e8gle d\u00e9finie, et parfois, pour des cas sp\u00e9cifiques, plus de trois couleurs primaires peuvent \u00eatre utilis\u00e9es. Cependant, gardez \u00e0 l'esprit que la combinaison de trois couleurs est d\u00e9j\u00e0 difficile, donc dans la plupart des cas, il faut \u00e9viter plus.<\/p>\n Comment le tester: <\/strong>Assurez-vous que la palette de couleurs que vous avez utilis\u00e9e lors de la conception du produit ne comporte pas plus de trois couleurs primaires.<\/p>\n Parce que c'est important:<\/strong> Avoir un produit accessible n'est pas un avantage, c'est essentiel. Pour les personnes ayant une d\u00e9ficience visuelle comme le daltonisme, s'appuyer uniquement sur la couleur pour transmettre la hi\u00e9rarchie, le contenu ou la fonctionnalit\u00e9 signifie qu'elles ne seront pas en mesure d'utiliser votre produit et seront un groupe d\u00e9mographique exclu.<\/p>\n Comment le tester:<\/strong> colorfilter.wickline.org vous permettra de placer un filtre de couleur en haut de votre page Web et de le tester pour diff\u00e9rents types de daltonisme. Vous pouvez \u00e9galement capturer l'\u00e9cran de votre produit et le convertir en niveaux de gris dans un \u00e9diteur d'images et voir si vous pouvez facilement distinguer les couleurs.<\/p>\n Parce que c'est important: <\/strong>Les utilisateurs s'appuient sur la hi\u00e9rarchie et les indices de produits pour savoir quoi faire et o\u00f9 aller; il est essentiel de comprendre cela et de les guider de mani\u00e8re appropri\u00e9e en utilisant cette hi\u00e9rarchie.<\/p>\n Comment le tester: <\/strong>Comprenez comment les flux fonctionnent au sein de votre produit et si vos actions cl\u00e9s sont encourag\u00e9es par la hi\u00e9rarchie visuelle.<\/p>\n Parce que c'est important:<\/strong> La hi\u00e9rarchie visuelle permet aux utilisateurs de num\u00e9riser rapidement des informations, en hi\u00e9rarchisant le contenu en fonction de leurs besoins imm\u00e9diats. Les \u00e9l\u00e9ments situ\u00e9s en haut de la hi\u00e9rarchie visuelle doivent \u00eatre les plus importants pour l'entreprise et les plus pertinents pour les utilisateurs.<\/p>\n Comment le tester:<\/strong> Capturez l'\u00e9cran de votre produit num\u00e9rique, puis flou gaussien cette capture d'\u00e9cran dans un rayon d'environ 5 pixels. En regardant le r\u00e9sultat, vous visualiserez instantan\u00e9ment la hi\u00e9rarchie et noterez quels \u00e9l\u00e9ments sont mis en \u00e9vidence. Sont-ils les plus importants pour l'entreprise et l'utilisateur?<\/p>\n Parce que c'est important:<\/strong> Le fait d'avoir diff\u00e9rentes actions primaires et secondaires signifie que l'utilisateur ne sera pas confus lorsqu'il interagira avec votre produit et sera moins enclin \u00e0 faire des erreurs. Par exemple, "Soumettre" et "Annuler" doivent \u00eatre clairement diff\u00e9rents.<\/p>\n Comment le tester:<\/strong> Lors de l'ex\u00e9cution de tests d'utilisabilit\u00e9, recherchez les erreurs courantes qui ne r\u00e9sultent pas de l'intention de l'utilisateur, mais d'actions primaires et secondaires peu diff\u00e9renci\u00e9es. De plus, lors de l'examen du design, assurez-vous que la couleur, la taille, le positionnement et d'autres \u00e9l\u00e9ments diff\u00e9rencient les actions.<\/p>\n Parce que c'est important:<\/strong> Lors de l'utilisation d'un nouveau produit, les utilisateurs viennent avec un ensemble d'attentes cr\u00e9\u00e9es \u00e0 partir de leur exp\u00e9rience pr\u00e9c\u00e9dente avec d'autres produits num\u00e9riques, par exemple \u00e0 quoi les boutons devraient ressembler et comment ils devraient fonctionner. R\u00e9pondre \u00e0 ces attentes signifie que vous ne cr\u00e9ez pas de friction inutile.<\/p>\n Comment le tester:<\/strong> Tout d'abord, v\u00e9rifiez votre produit pour les zones o\u00f9 les mod\u00e8les courants ne sont pas utilis\u00e9s. Par exemple, des liens qui ne ressemblent pas \u00e0 des liens.<\/p>\n Parce que c'est important:<\/strong> Il est essentiel de confirmer \u00e0 l'utilisateur si une action a r\u00e9ussi ou non. Par exemple, apr\u00e8s avoir soumis un formulaire, un message de confirmation clair sous la forme d'une banni\u00e8re color\u00e9e signifie que l'utilisateur peut passer \u00e0 la t\u00e2che suivante.<\/p>\n Comment le tester: <\/strong>V\u00e9rifiez toutes les zones de votre produit o\u00f9 l'utilisateur entre des informations. Une fois la saisie de l'utilisateur termin\u00e9e, d\u00e9clenchez une confirmation indiquant si cette action a r\u00e9ussi ou non. Assurez-vous que la r\u00e9troaction est claire concernant l'\u00e9tat final.<\/p>\n Ce que c'est:<\/strong> Les messages d'alerte ont le m\u00eame style visuel et apparaissent au m\u00eame endroit de la m\u00eame mani\u00e8re.<\/p>\n Parce que c'est important:<\/strong> Le fait d'avoir des messages d'alerte coh\u00e9rents signifie que l'utilisateur comprendra toujours ce qui m\u00e9rite une attention imm\u00e9diate. Ne pas \u00eatre coh\u00e9rent avec les alertes mettrait une pression mentale suppl\u00e9mentaire sur chaque nouvelle alerte.<\/p>\n Comment le tester:<\/strong> Assurez-vous que les messages d'alerte ont le m\u00eame style visuel et que leur positionnement est similaire ou identique.<\/p>\n Parce que c'est important: <\/strong>En s'assurant que les messages d'alerte sont clairement diff\u00e9renci\u00e9s des autres \u00e9l\u00e9ments de l'\u00e9cran, l'utilisateur peut les remarquer et \/ ou agir en cons\u00e9quence.<\/p>\n Comment le tester:<\/strong> Apr\u00e8s avoir v\u00e9rifi\u00e9 vous-m\u00eame la diff\u00e9renciation visuelle, voyez comment les utilisateurs r\u00e9agissent aux messages d'alerte dans les tests d'utilisabilit\u00e9.<\/p>\n<\/span>Design d'interaction<\/span><\/h2>\n
<\/span>01 – Les actions r\u00e9p\u00e9titives ou les activit\u00e9s fr\u00e9quentes se sentent sans effort<\/span><\/h3>\n
<\/span>02 – Les utilisateurs peuvent facilement r\u00e9cup\u00e9rer des erreurs<\/span><\/h3>\n
<\/span>03 – Les utilisateurs re\u00e7oivent un soutien ad\u00e9quat en fonction de leur niveau d'exp\u00e9rience<\/span><\/h3>\n
<\/span>04 – L'acc\u00e8s \u00e0 l'aide n'entrave pas la progression de l'utilisateur<\/span><\/h3>\n
<\/span>Aspect visuel<\/span><\/h2>\n
<\/span>05 – Pas plus de trois couleurs primaires<\/span><\/h3>\n
<\/span>06 – La couleur seule n'est pas utilis\u00e9e pour transmettre la hi\u00e9rarchie, le contenu ou la fonctionnalit\u00e9<\/span><\/h3>\n
<\/span>07 – La hi\u00e9rarchie visuelle dirige l'utilisateur vers l'action requise<\/span><\/h3>\n
<\/span>08 – Les \u00e9l\u00e9ments en haut de la hi\u00e9rarchie visuelle sont les plus importants<\/span><\/h3>\n
<\/span>09 – L'action primaire est visuellement diff\u00e9rente des actions secondaires<\/span><\/h3>\n
<\/span>10 – Les \u00e9l\u00e9ments interactifs ne sont pas abstraits<\/span><\/h3>\n
<\/span>11 – La soumission du formulaire est confirm\u00e9e d'une mani\u00e8re visuellement diff\u00e9rente<\/span><\/h3>\n
<\/span>12 – Les messages d'alerte sont coh\u00e9rents<\/span><\/h3>\n
<\/span>13 – Les messages d'alerte sont visuellement diff\u00e9rents<\/span><\/h3>\n
<\/span>Architecture informationnelle<\/span><\/h2>\n