https:\/\/dribbble.com\/shots\/852180-Hamburger-Buttons<\/p>
Il existe un \u00e9quilibre entre trop et trop peu d’options pour une fen\u00eatre de navigation et il est parfois difficile de le trouver.<\/p>
Un menu qui contient trop d’options est tout simplement \u00e9crasant. Imaginez que les utilisateurs tapent sur le menu et que tout leur \u00e9cran soit rempli de choix de menu. Ils pensaient peut-\u00eatre savoir o\u00f9 ils voulaient aller, mais maintenant ils n’en sont plus si s\u00fbrs. Trop d’options les ont oblig\u00e9s \u00e0 s’interroger sur leur prochaine action. Vous pouvez en savoir plus \u00e0 ce sujet dans notre article intitul\u00e9 “Abus du menu hamburger”.<\/p>
D’un autre c\u00f4t\u00e9, trop peu d’options laissent trop de place au hasard. Si, dans un effort de rationalisation, vous avez regroup\u00e9 toutes les destinations sous deux ou trois choix g\u00e9n\u00e9riques, vous avez fait en sorte que l’utilisateur doive deviner. Cela signifie une courbe d’apprentissage plus importante pour une application qui devrait \u00eatre intuitive.<\/p><\/div><\/div>
<\/span>2. Sortir des standards de navigation<\/span><\/h2>Les applications et les sites web font partie de notre vie quotidienne. Et les gens sont devenus tr\u00e8s familiers avec la fa\u00e7on dont ils s’attendent \u00e0 ce qu’ils fonctionnent.<\/p>
Les utilisateurs ont des conventions standard dans leur esprit sur ce \u00e0 quoi ils s’attendent en mati\u00e8re de navigation. Par exemple, ils connaissent la navigation horizontale en haut, la navigation verticale \u00e0 gauche ou le bouton “retour” en haut \u00e0 gauche.<\/p>
Lorsque vous vous \u00e9cartez des conventions de navigation standard, vous obligez vos utilisateurs \u00e0 travailler plus dur et \u00e0 r\u00e9fl\u00e9chir davantage \u00e0 ce qu’ils regardent et recherchent. Une bonne UX signifie que vos utilisateurs doivent trouver plus facilement le contenu, et non apprendre \u00e0 utiliser l’application.<\/p>
<\/span>3. Devenir trop cr\u00e9atif avec les ic\u00f4nes<\/span><\/h2>Les ic\u00f4nes agissent comme un guide permettant aux utilisateurs de savoir intuitivement o\u00f9 aller. En fin de compte, la navigation est une question de convivialit\u00e9. Les utilisateurs ont un mod\u00e8le mental de ce qu’ils attendent. Si vous leur proposez une ic\u00f4ne de maison, ils s’attendront tr\u00e8s probablement \u00e0 \u00eatre dirig\u00e9s vers une page d’accueil, alors ne les envoyez pas vers une page de connexion.<\/p>
Donnez \u00e0 vos utilisateurs ce qu’ils attendent pour qu’ils soient \u00e0 l’aise pour cliquer. Ne les obligez pas \u00e0 se poser des questions. Un utilisateur frustr\u00e9 est un utilisateur qui ne reviendra pas.<\/p>
Utilisation d’ic\u00f4nes peu famili\u00e8res<\/h3> Les ic\u00f4nes des applications ont un langage universel. Nous savons tous qu’une petite maison vous m\u00e8nera \u00e0 la page d’accueil et que le fait d’appuyer sur un panier d’achat fera appara\u00eetre un r\u00e9sum\u00e9 de votre commande. Lorsque vous vous \u00e9loignez de ces normes de navigation, les utilisateurs sont d\u00e9sorient\u00e9s.<\/p>
R\u00e9sistez \u00e0 l’envie d’\u00eatre cr\u00e9atif ou mignon avec les ic\u00f4nes pour que la navigation reste simple et intuitive pour vos utilisateurs. En d’autres termes, ne r\u00e9inventez pas la roue, aussi tentant que cela puisse \u00eatre.<\/p>
Ic\u00f4nes sans label<\/h3> Lorsque vous essayez de garder une navigation propre et simple et de vous en tenir aux ic\u00f4nes standard, vous pouvez penser que les \u00e9tiquettes ne sont pas n\u00e9cessaires. Et, pour l’utilisateur expert de votre application, cela peut \u00eatre vrai.<\/p>
Mais qu’en est-il du nouvel utilisateur qui n’est pas familier avec votre application ? Et m\u00eame certaines des ic\u00f4nes les plus reconnaissables, comme l’\u00e9toile ou le c\u0153ur, peuvent avoir des significations diff\u00e9rentes. Sur une application, le c\u0153ur peut \u00eatre le symbole d’un “favori”, alors que sur une autre application, il peut \u00eatre synonyme de “j’aime”.<\/p>
Associer une ic\u00f4ne \u00e0 un libell\u00e9 r\u00e9duit le temps que l’utilisateur doit passer \u00e0 r\u00e9fl\u00e9chir et \u00e0 reconna\u00eetre la commande. R\u00e9duisez la charge cognitive de vos utilisateurs, car plus vous les faites r\u00e9fl\u00e9chir, plus ils sont susceptibles de trouver une autre application plus intuitive.<\/p>
<\/span>4. Rendre la navigation trop longue<\/span><\/h2>Les utilisateurs ne doivent pas avoir besoin de travailler pour trouver leur chemin dans votre application. S’il leur faut plus de deux ou trois clics pour trouver ce qu’ils cherchent, il est temps de rationaliser le processus.<\/p>
Par exemple, les utilisateurs d’une application bancaire doivent pouvoir se connecter au solde ou \u00e0 l’historique de leur compte en un seul clic, au lieu de passer par une s\u00e9rie d’\u00e9tapes inutiles. C’est essentiellement l’histoire de “Too Long ; Didn’t read”. Les utilisateurs abandonneront une t\u00e2che s’ils ont l’impression qu’elle prend trop de temps.<\/p>
Pas d’indicateurs visibles<\/p>
La navigation dans votre application ne doit pas \u00eatre compliqu\u00e9e et les utilisateurs ne doivent pas se sentir perdus. Personne n’aime se sentir perdu !<\/p>
Avez-vous d\u00e9j\u00e0 remarqu\u00e9 les points “vous \u00eates ici” sur les cartes d’un b\u00e2timent ? Ils vous aident \u00e0 vous orienter lorsque vous \u00eates dans un environnement inconnu. Faites de m\u00eame pour vos utilisateurs dans votre application afin de les aider \u00e0 se sentir en s\u00e9curit\u00e9 dans les t\u00e2ches qu’ils accomplissent.<\/p>
Les utilisateurs doivent savoir o\u00f9 ils se trouvent lorsqu’ils se d\u00e9placent dans l’application. Simplifiez la navigation en fournissant aux utilisateurs des indices visuels (You Are Here) leur permettant de savoir o\u00f9 ils se trouvent dans l’application. Il peut s’agir de quelque chose d’aussi simple que la mise en \u00e9vidence de l’ic\u00f4ne s\u00e9lectionn\u00e9e, de changements dans la conception visuelle, de titres ou d’indices contextuels.<\/p>
Un retour d’information insuffisant pour une r\u00e9ponse lente<\/h3> Combien de fois avez-vous \u00e9t\u00e9 au milieu d’une t\u00e2che sur une application et celle-ci semble soudainement se figer… ou est-elle vraiment fig\u00e9e ? Devriez-vous cliquer \u00e0 nouveau ? Devriez-vous revenir en arri\u00e8re et recommencer, peut-\u00eatre rafra\u00eechir ?<\/p>
Pensez \u00e0 la frustration que vous ressentez et appliquez-la \u00e0 vos utilisateurs. Soyez proactif si l’application ne r\u00e9pond pas aux temps de r\u00e9ponse attendus en fournissant un retour d’information. Informez vos utilisateurs de l’\u00e9tat d’avancement \u00e0 l’aide d’indicateurs de progression.<\/p>
Les indicateurs de progression rassurent sur le fait que quelque chose est en train de se passer, ils leur donnent quelque chose de visuel \u00e0 regarder plut\u00f4t qu’un \u00e9cran fig\u00e9 et peuvent fournir une estimation du temps d’attente dans de nombreux cas.<\/p>
Absence de signaux de progression<\/h3> Les indicateurs de progression ne sont pas seulement un retour d’information lors d’une r\u00e9ponse lente. Les signaux de progression, ou feedback, permettent \u00e0 vos utilisateurs de savoir ce qui se passe, que l’action qu’ils ont entreprise est en cours, ou l’\u00e9tat actuel de l’application.<\/p>
Un bon retour d’information rassure l’utilisateur et lui \u00e9vite de jouer aux devinettes. Il lui permet \u00e9galement de savoir o\u00f9 il en est (et que ses actions ont \u00e9t\u00e9 ex\u00e9cut\u00e9es correctement), ce qu’il lui reste \u00e0 faire et le temps qu’il lui faudra pour y arriver.<\/p>
Consid\u00e9rez les signaux de progression de la m\u00eame mani\u00e8re que vous consultez Google Maps lorsque vous prenez la route vers une nouvelle destination. Vous recevez des informations vous indiquant que vous \u00eates dans la bonne direction, vous connaissez votre emplacement, les virages \u00e0 prendre et votre heure d’arriv\u00e9e pr\u00e9vue.<\/p>
<\/span>5. En faire trop quand il s’agit de mise en page<\/span><\/h2>Nous interagissons tous avec des applications et des sites Web depuis suffisamment longtemps pour nous sentir \u00e0 l’aise pour rechercher des \u00e9l\u00e9ments de navigation cl\u00e9s \u00e0 des endroits sp\u00e9cifiques. L’\u00eatre humain a besoin de coh\u00e9rence. Il est tout \u00e0 fait possible de faire preuve de cr\u00e9ativit\u00e9 dans la mise en page, mais dans la limite du raisonnable.<\/p>
Interface incoh\u00e9rente<\/h3> Lorsque nous avons une id\u00e9e pr\u00e9cise du fonctionnement d’une application ou d’un site Web, nous nous attendons \u00e0 pouvoir facilement et intuitivement accomplir des t\u00e2ches ou trouver ce que nous cherchons \u00e0 l’endroit o\u00f9 nous l’attendons.<\/p>
Par exemple, vous n’allez pas naturellement regarder dans le coin inf\u00e9rieur droit pour reculer d’un \u00e9cran. Nous sommes des cr\u00e9atures d’habitudes et il est important de garder cela \u00e0 l’esprit lorsque vous concevez la navigation de votre application.<\/p>
Vos utilisateurs arrivent sur votre application avec des mod\u00e8les mentaux de la fa\u00e7on dont ils pensent que votre application doit fonctionner, en fonction de leurs exp\u00e9riences pass\u00e9es. Il est donc important d’\u00eatre coh\u00e9rent avec votre interface. Une interface incoh\u00e9rente s\u00e8mera la confusion chez l’utilisateur et l’obligera \u00e0 r\u00e9fl\u00e9chir davantage pour accomplir une t\u00e2che donn\u00e9e.<\/p>
<\/span>6. \u00c9l\u00e9ments difficiles \u00e0 r\u00e9aliser<\/span><\/h2>Lorsqu’il s’agit d’une application ou d’un site Web, les \u00e9l\u00e9ments ou les cibles sont tout ce qui peut \u00eatre cliqu\u00e9 ou tap\u00e9. Une bonne UX signifie que les utilisateurs doivent \u00eatre en mesure d’acqu\u00e9rir une cible en l’identifiant facilement, puis en cliquant ou en tapant dessus.<\/p>
Faiblesse des \u00e9l\u00e9ments visuels<\/h3> L’une des raisons pour lesquelles votre utilisateur peut ne pas \u00eatre en mesure d’identifier de mani\u00e8re fiable une cible ou un \u00e9l\u00e9ment est la faiblesse des signifiants. Pour mieux comprendre l’importance d’avoir des \u00e9l\u00e9ments visuels forts, commen\u00e7ons par la d\u00e9finition de l’affordance, c’est-\u00e0-dire ce qu’un objet peut faire. Par exemple, un bouton d’appel \u00e0 l’action se donne la possibilit\u00e9 d’\u00eatre cliqu\u00e9.<\/p>
Les indicateurs sont des \u00e9l\u00e9ments visuels qui clarifient l’affordance, en indiquant \u00e0 l’utilisateur ce qu’il peut faire avec l’\u00e9l\u00e9ment. Dans les applications, l’utilisateur doit scanner de nombreux \u00e9l\u00e9ments visibles.<\/p>
Les utilisateurs n’ont ni le temps ni la patience d’\u00eatre oblig\u00e9s de cliquer au hasard dans l’espoir de trouver le bon \u00e9l\u00e9ment pour l’action correcte qu’ils esp\u00e8rent r\u00e9aliser. Si l’utilisateur se demande “Que dois-je faire ici ?” ou s’il ne parvient pas \u00e0 localiser l’\u00e9l\u00e9ment correspondant \u00e0 la t\u00e2che \u00e0 accomplir, vos signifiants sont faibles et vous cr\u00e9ez une UX n\u00e9gative.<\/p>
Cibles \u00e0 clics minuscules<\/h3> Le probl\u00e8me ne vient peut-\u00eatre pas d’un signifiant faible, mais de cibles de clics trop petites. Lorsque les cibles tactiles sont trop petites, les utilisateurs mettent plus de temps \u00e0 les toucher. Ils peuvent \u00e9galement toucher par inadvertance une autre cible lorsqu’il n’y a pas assez d’espace autour d’elles.<\/p>
Pensez aux indicateurs de localisation sur une carte. Combien de fois avez-vous appuy\u00e9 accidentellement sur un indicateur pour vous rendre compte ensuite qu’il ouvrait le mauvais emplacement ? Cela arrive ! Vous \u00eates alors oblig\u00e9 de revenir en arri\u00e8re et de r\u00e9essayer. C’est frustrant. Ne frustrez pas vos utilisateurs.<\/p>
Gardez votre public \u00e0 l’esprit. Les cibles tactiles difficiles \u00e0 utiliser peuvent \u00e9galement poser des probl\u00e8mes d’accessibilit\u00e9. Les cibles tactiles minuscules sont particuli\u00e8rement difficiles \u00e0 utiliser pour les utilisateurs plus \u00e2g\u00e9s ou ceux qui ont des difficult\u00e9s motrices. Les cibles tactiles trop petites peuvent \u00e9galement \u00eatre difficiles \u00e0 utiliser pour les jeunes enfants.<\/p>
<\/span>7. Modales \u00e0 gogo<\/span><\/h2>Une modale est un \u00e9cran ou une page secondaire qui s’ouvre au-dessus de la page en cours. Les utilisateurs sont oblig\u00e9s d’agir sur la modale avant de pouvoir poursuivre leur t\u00e2che sur la page en cours.<\/p>
Les fen\u00eatres modales pr\u00e9sentent certains avantages. L’utilisation d’une fen\u00eatre modale au lieu d’une page compl\u00e8te permet aux utilisateurs de conserver le contexte de leur t\u00e2che. Les fen\u00eatres modales requi\u00e8rent une attention imm\u00e9diate et sont id\u00e9ales lorsqu’un utilisateur doit effectuer certaines \u00e9tapes ou actions avant de pouvoir terminer une t\u00e2che, lorsqu’elles informent l’utilisateur d’une erreur ou d’un risque d’erreur, et pour les t\u00e2ches critiques.<\/p>
Toutefois, les fen\u00eatres modales pr\u00e9sentent certains inconv\u00e9nients, tels que l’interruption du flux de travail de l’utilisateur, le blocage du contenu d’arri\u00e8re-plan que l’utilisateur peut vouloir consulter ou l’oubli de ce qu’il \u00e9tait en train de faire. Lorsque les modales sont utilis\u00e9es pour des t\u00e2ches non critiques, elles cr\u00e9ent une \u00e9tape suppl\u00e9mentaire pour l’utilisateur, \u00e0 savoir la t\u00e2che de rejeter la modale pour revenir \u00e0 l’\u00e9cran sur lequel il se trouvait.<\/p>
Si les modales peuvent \u00eatre utiles, il devient plus important de les utiliser \u00e0 bon escient.<\/p>
<\/span>8. Les demandes r\u00e9p\u00e9titives de confirmation<\/span><\/h2>Le principe de proximit\u00e9 est bas\u00e9 sur la tendance cognitive \u00e0 percevoir les objets proches les uns des autres comme \u00e9tant li\u00e9s. Par exemple, Sauvegarder et Supprimer sont des actions li\u00e9es dans la mesure o\u00f9 elles d\u00e9terminent le r\u00e9sultat d’une action – vous pouvez soit poursuivre la sauvegarde, soit choisir de supprimer. Comme elles sont li\u00e9es, les concepteurs les placent souvent \u00e0 proximit\u00e9 les unes des autres. Malheureusement, si elles sont trop proches l’une de l’autre, l’utilisateur risque de faire une mauvaise s\u00e9lection par inadvertance. C’est l\u00e0 que les actions de confirmation peuvent entrer en jeu.<\/p>
Les actions de confirmation sont celles qui demandent \u00e0 l’utilisateur de v\u00e9rifier une action, par exemple de poursuivre ou d’annuler une action. Souvent, les actions de confirmation sont utilis\u00e9es pour des actions destructives, comme la suppression d’un contact, ou pour des actions cons\u00e9quentes, comme la publication d’un message sur les m\u00e9dias sociaux.<\/p>
Les actions de confirmation peuvent sauver la vie des utilisateurs en les aidant \u00e0 \u00e9viter des actions qu’ils ne souhaitent vraiment pas voir se produire, comme la suppression d’un album photo ou la perte de donn\u00e9es importantes. Cependant, il est important de ne pas abuser de ces actions et de ne pas bombarder vos utilisateurs avec des actions qui pourraient facilement \u00eatre annul\u00e9es. Selon l’article d’Andrew Coyle intitul\u00e9 “Designing Confirmation”, le chaos de la confirmation, qui consiste \u00e0 utiliser inutilement des actions de confirmation, peut en fait entra\u00eener une augmentation des erreurs de l’utilisateur.<\/p>
<\/span>Des applications au design de navigation exceptionnel<\/span><\/h2>WeTransfer<\/h3>WeTransfer fait un excellent travail en int\u00e9grant ses annonces cr\u00e9atives \u00e0 un flux de travail super rationalis\u00e9.<\/div><\/div>
Waze App<\/h3>Waze ne submerge pas les utilisateurs avec trop de contenu (seulement le plus pertinent) pour les amener en toute s\u00e9curit\u00e9 \u00e0 leur destination, avec une personnalit\u00e9 de marque amusante.<\/div><\/div>
<\/span>Une composante essentielle de la r\u00e9ussite<\/span><\/h2>Dire que le march\u00e9 est comp\u00e9titif est un doux euph\u00e9misme. Dire que vous devez vous surpasser pour vous d\u00e9marquer est un fait. C’est pourquoi la compr\u00e9hension de l’UX est essentielle au d\u00e9veloppement d’une application r\u00e9ussie.<\/p>
L’UX peut contribuer \u00e0 faire en sorte que votre application se distingue des autres en offrant une UX plus agr\u00e9able \u00e0 laquelle les utilisateurs sont habitu\u00e9s. Le respect des meilleures pratiques en mati\u00e8re d’UX vous \u00e9vite \u00e9galement de commettre les erreurs de conception de la navigation que nous avons \u00e9voqu\u00e9es.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"
En 2017, le nombre d’applications t\u00e9l\u00e9charg\u00e9es a atteint 197 milliards. Si l’on consid\u00e8re que la population du monde entier ne repr\u00e9sente qu’une fraction de ce chiffre, arr\u00eatez-vous une seconde et consid\u00e9rez l’ampleur de ce nombre. S’il est \u00e9vident que les utilisateurs de mobiles aiment les apps, il est \u00e9galement \u00e9vident qu’ils ont beaucoup de choix. […]<\/p>\n","protected":false},"author":1,"featured_media":3856,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[27],"tags":[192,190,194],"class_list":["post-3851","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized-fr","tag-developpement-apps","tag-erreurs-design","tag-mobile-fr"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/linksoftware.net\/wp-json\/wp\/v2\/posts\/3851"}],"collection":[{"href":"https:\/\/linksoftware.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/linksoftware.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/linksoftware.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/linksoftware.net\/wp-json\/wp\/v2\/comments?post=3851"}],"version-history":[{"count":5,"href":"https:\/\/linksoftware.net\/wp-json\/wp\/v2\/posts\/3851\/revisions"}],"predecessor-version":[{"id":3857,"href":"https:\/\/linksoftware.net\/wp-json\/wp\/v2\/posts\/3851\/revisions\/3857"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/linksoftware.net\/wp-json\/wp\/v2\/media\/3856"}],"wp:attachment":[{"href":"https:\/\/linksoftware.net\/wp-json\/wp\/v2\/media?parent=3851"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/linksoftware.net\/wp-json\/wp\/v2\/categories?post=3851"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/linksoftware.net\/wp-json\/wp\/v2\/tags?post=3851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}