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.

 

La conquête du hamburger

Icône du hamburger

Les appareils mobiles ne dominent pas encore les visites de votre site Web ? Je vois régulièrement des statistiques de fréquentation du site montrant plus de 20 % de visites en provenance des appareils mobiles. Ça augmente lentement, mais régulièrement d’une année à l’autre…

20 %, c’est probablement aussi le pourcentage des gestionnaires de site Web qui se préoccupe de l’apparence de leur site dans un appareil mobile. Qu’a cela ne tienne, le mobile va s’insérer dans l’ordinateur de bureau et le portable de ces 80 % de récalcitrants qui ne vivent que sur leur portable, malgré eux, par la voie du Design visuel d’interfaces. Une simple petite icône, le hamburger, ces trois petites lignes toutes simples, mène cette charge vers la conquête de l’espace visuel PC.

Oui, oui, je vous le dis, cette petite icône sera éventuellement dans toutes les interfaces de site Web, sur mobile comme sur PC.

« Hérésie ! » Clameront les puristes réactionnaires du Design d’expérience utilisateur. « Mcdonaldisation de la fine cuisine moléculaire ! » Entendrez-vous de la bouche de ces mêmes nobles concepteurs. On peut comprendre. « À quoi bon faire des tests d’utilisabilité et d’oculométrie en laboratoire s’il n’y a qu’un seul élément de contenu dans la page ?!« 

Pour ma part, j’applaudis cette conquête, car j’y vois là la conquête de la simplicité et de l’efficacité. En effet, vous avez peut-être été déstabilisé la première fois que vous avez vu le hamburger s’aventurer dans les terres hostiles des sites pour PC, royaume des onglets horizontaux, des mégas menus apparaissant en survol de souris sans qu’on le veuille, des logos en haut à gauche de l’écran. Puis vous l’avez reconnue. Vous avez immédiatement su à quoi il servait. Un premier clic, et hop, le menu de navigation apparait. Un deuxième, et hop, il disparait. En un seul clic de souris, vous avez désormais la possibilité comme utilisateur de nettoyer votre interface, de l’épurer, de faire le grand ménage. Pourquoi diable se passer de ce coup de serpillière instantané ?

Moi, je dis « longue vie au hamburger ! » Oui, bien sûr, il faut tout de même porter une attention particulière à la présentation du repas. Il y a la coutellerie, l’assiette, les entrées, le reste du repas… L’art de la table demeure bien vivant et la gourmandise, ce n’est pas la même chose que la goinfrerie.