Les indicateurs de localisation dans le contexte mobile

Gens regardant leur téléphone mobile

L’un des principes d’utilisabilité numérique bien connu consiste à faire en sorte que les utilisateurs comprennent toujours bien où ils se retrouvent dans l’arborescence d’un site Web.

Parmi les moyens disponibles au concepteur dans un contexte d’ordinateur de bureau, on utilisera parfois le fil d’Ariane (ou "breadcrumbs"), pour venir à la rescousse de l’utilisateur égaré. On s’assurera dans un site dense en contenu que le menu de gauche, si menu de gauche il y a, présente une hiérarchie de couleur évidente et des indentations pour aider l’utilisateur à se situer dans le site.

Mais ces moyens ne sont pas disponibles dans le contexte mobile. Il n’y a pas de place pour ça dans une telle interface utilisateur.

Le contexte mobile, par la petitesse de son interface, l’absence d’effets de survol et par la proximité gestuelle entre le simple clic et le défilement de l’écran, présente non seulement un défi de localisation dans l’arborescence du site ou de l’application, mais peut de plus engendrer un plus grand nombre de clics erronés.

 

"Merde, ou ai-je cliqué" ?

Négligée, mais efficace, l’utilisation des transitions par CSS représente une façon éclairante pour l’utilisateur de comprendre non pas le chemin parcouru après un clic, mais le chemin qu’il ou elle s’apprête à parcourir dans la ou les prochaines secondes.

Bien sûr, pour procurer une expérience agréable, il faut utiliser la technique avec retenue et subtilité.

 

Démonstration

J’ai produit un exemple pour démontrer clairement la différence de l’expérience utilisateur avec et sans la présence d’une animation de transition. Bon, ne regarder pas le code, c’est du bidouillage de premier ordre fait à partir d’un prototype Axure, c’est dans un iframe, les images ne sont pas optimisées, ce qui fait que le tout n’est pas très performant "techniquement" sur tout autre support qu’un ordinateur de bureau, mais c’est juste pour la démonstration.

Dans cet exemple, seul le bouton "Trucs et conseils" est cliquable. Imaginons donc que vous cliquez sur ce bouton par erreur, avec votre pouce. Allez-y, essayez le bouton dans les deux situations.

 

Situation A : SANS transition animée.

Situation B : AVEC transition animée.

N’est-ce pas concluant comme expérience ? Dans la situation B, l’utilisateur a le temps de comprendre où il ou elle vient de cliquer. Normal, nos yeux sont naturellement attirés par le mouvement. Et en plus, l’animation de la transition apporte une touche ludique agréable dans l’expérience utilisateur, ce qui ne gâte évidemment rien.

 

Après avoir cliqué

Pour une application ou un site Web mobile, il peut être pertinent de recourir au typique chevron vers la gauche, pour indiquer à l’utilisateur qu’il ou elle peut "remonter" d’un niveau dans l’arborescence de l’application. C’est le retour du bouton de la "page précédente" dans l’interface. À utiliser sans gène quand le contexte s’y prête.

 

En conclusion

Les interfaces d’applications ou de sites mobiles génèrent plus d’erreurs de clics, c’est normal. Dans ce contexte, l’utilisation des transitions animées au moment d’un clic dans une interface mobile et du chevron, après le clic, représentent des outils de navigation importants qui permettent à l’utilisateur de se situer dans l’architecture d’information de l’application ou du site mobile. Un parcours de navigation plus clair, mène à une expérience utilisateur plus agréable.

 

Leave a Comment.