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.

L’avènement du « Überentwerfer »

Nietzsche

J’ai eu une petite pensée pour Nietzsche récemment. En fait, mon profond athéisme fait que j’y pense régulièrement, mais là n’est le propos de ces lignes. L’une de ses célèbres citations va comme suit : « Aussitôt qu’on nous montre quelque chose d’ancien dans une innovation, nous sommes apaisés. » Ainsi en est-il de l’utilisabilité, la chose ancienne, et de l’expérience utilisateur (ma traduction de User Experience, mais en moins James Bond.), la chose innovante.

La discipline de l’expérience utilisateur est sur toutes les lèvres de nos jours et c’est une excellente nouvelle. De vocable branché des agences numériques par lequel on réfère encore dans plusieurs cas au Design d’interface usager, la « science » de l’expérience utilisateur fait maintenant son entrée dans les entreprises du Québec. Réjouissons-nous mes frères et sœurs.

Les 40 ans passés comme moi se rappelleront que l’utilisabilité a connu ses heures de gloire au début des années 2000. Wikipédia la définit comme « le degré selon lequel un produit (ou un site Web, une Application) peut être utilisé, par des utilisateurs identifiés, pour atteindre des buts définis avec efficacité, efficience et satisfaction, dans un contexte d’utilisation spécifié ». Notez le mot « satisfaction » dans cette définition. Et puis, plus rien. Démodée, ringard, passée date, l’utilisabilité. Au diable les tests d’utilisabilité. De toute façon, personne ne mesure d’objectifs alors à quoi bon.

Puis, vient le « UX« … Ça c’est « cool » le UX. Oh, et aussi le « UI » (pour User Interface), le Design d’interface usager.

Wikipédia, à l’aide : « Contrairement à l’utilisabilité, [le concept de l’expérience utilisateur] n’est pas strictement pragmatique dans le sens ou il sous entend un impact émotionnel cumulé à un bénéfice rationnel, il est entendu que la démarche est bien de créer une expérience agréable. » En d’autres termes, l’objectif n’est pas ici d’atteindre un URL ou un ratio de pages par visite, au sens où Google Analytics l’entend. Et l’utilisabilité serait, elle, un sous-ensemble de l’expérience utilisateur.

En effet, l’expérience utilisateur cherche à faire en sorte que votre site Web ou application soit :

  • Utile à l’utilisateur
  • Désirable
  • Accessible pour tous les types d’utilisateurs
  • Crédible aux yeux des utilisateurs
  • Composé de contenus et de fonctions facilement repérable
  • Utilisable, ou facile d’utilisation
  • Contribuer à la mission du site ou de l’application

On n’est pas dans le flou artistique ici. On n’est pas dans les dessins. D’ailleurs, dans un contexte de réalisation de site Web ou d’application, je définis pour ma part le Design d’interface usager comme étant la discipline qui analyse et optimise :

  • Les contrastes
  • L’emphase à mettre sur les divers éléments de contenu
  • La quantité de ces éléments
  • Leurs proportions
  • Leur présence répétitive
  • L’équilibre
  • L’harmonie

À nouveau, le Design de l’interface utilisateur est également un sous-ensemble de l’expérience utilisateur.

On peut lister ces sous-ensembles ainsi :

  • La recherche utilisateur (Profil démographique, psychologique, définition de personas)
  • La stratégie de contenu
  • L’architecture de l’information
  • Le Design des interactions
  • Le Design de l’interface usager, le visuel
  • L’utilisabilité

L’avènement du « Überentwerfer »

Pourquoi se réjouir ? Parce que ces efforts constants de l’industrie visant à raffiner la discipline du Design de l’expérience utilisateur démontrent sa capacité de se renouveler et un désir de gagner en crédibilité qui va plus loin que de faire des beaux dessins. Les organisations qui ont intégré des postes de gestionnaire de l’expérience utilisateur sont, bien plus qu’innovatrices. Elles sont crédibles car elles cherchent à systématiser l’impact émotionnel de leur produit et à le mesurer.

Votre organisation peine encore à s’y retrouver et encore moins à justifier le développement d’un poste s’y afférant quotidiennement ? Suivez les conseils de Friedrich, insérez dans votre discours l’expression « utilisabilité », ça apaisera vos interlocuteurs. Et ils se sentiront à la mode.