Comment un problème d’UI, en fin de compte, crée un problème d’UX

[Déjà publié sur Google+, le 9 février 2015] Dimanche dernier je suis allé voir Orléans. Peu importe le motif, mais, en arrivant, nous avons pris le tramway pour arriver à notre destination.

À Orléans, les transports urbains sont gérés par un organisme qui s’appèle le TAO. Dans le cadre de ce billet je passe sur son logo qui est légèrement plus agréable à regarder que d’enfoncer des aiguilles chauffées dans ses globes occulaires. Je passe aussi sur mon ‘expérience’ avec le borne de vente de billets, pour me concentrer sur le ticket, ou titre de transport comme ils l’appelent.

titres de transport comparaison

Titre de transport TAO et titre de transport valable en Île-de-France pour comparaison

Ce ticket/titre est aussi un interface, car les usagers vont interréagir avec. Je vais donc appeler la réaction avec ce titre l’expérience utilisateur.

Le titre de transport en main, je monte sur le tramway. Une machine se présente à moi avec une fente de la largueur du titre délivré par la borne. Au vu des nombreux rappels à composter son titre de transport [vraiment, vraiment beaucoup — mais c’est une autre histoire — ainsi que les graves pénalités si on ne le fait pas] je comprends que l’appareil est destiné à composter. J’enfonce donc le titre dans la fente.

En fait, c’est faux. Je tente de le faire, mais la machine refuse d’avaler le titre. Il n’y a pas de bruit de refus, il n’y a pas de message sur l’écran. Je retourne le billet et retente ma chance. Toujours rien.

En ce qui concerne le titre les transports urbains en Île-de-France, on peut le présenter dans n’importe quel sens dans les bornes et composteurs. S’il est refusé la machine beepe désagréablement et la plupart du temps affichent un message d’erreur. Dans ce cas, c’est que nous essayons d’utiliser un titre déjà composté, ou que le titre a été démagnetisé. Si le borne refuse de prendre le titre c’est signe que le borne est en panne et on a gagné le droit à un voyage gratuit…

Sur mon tramway à Orléans je commence tout juste à me demander si, justement, le composteur n’est pas en panne et s’il ne faut pas aller chercher un autre. J’effectue une rotation avec le billet, tente de l’enfoncer encore et commence à regarder autour de moi pour chercher une autre machine. À ce moment, le voyageur derrière moi, voyant mon problème, se propose de m’aider, prends le titre de ma main, le retourne, et l’enfonce dans la machine qui hoquète puis le recrache. Je le remercie.

Il me montre sur le ticket une flèche minuscule caché dans le motif pour m’indiquer le sens d’insertion. Je le remercie.

Madame demande comment je prétends enseigner le design — surtout d’expérience et d’interfaces — quand je ne suis pas capable de composter un simple titre.

“Justement, c’est un cas typique de problème d’UI qui mène à problème d’UX,” je réponds.

Prise en main du titre de transport TAO

Prise en main du titre de transport TAO

Regarder maintenant la photo de la prise en main du titre. Le recto du titre de la TAO est imprimé. Le verso est vide. La plupart des gens sont droitiers. Pour lire le texte [minuscule — ce qui est encore un problème — je devrais plutôt dire : pour déchiffrer le texte…] on le tient donc naturellement de sa main droite. Si on remarque la ‘fleche’ — la seule indication du ‘mode d’emploi’ du titre — on le prends pour de la décoration [tout aussi ‘moche’ et inutile que les autres éléments de décoration du titre]. Mais, la plupart du temps cet ‘affordance’ minuscule est caché par la main [pouce] de l’utilisateur. On présente donc le titre naturellement du côté opposé de celui où il le fallait.

Mes recommandations, dans l’ordre :
1. utiliser des machines à composter comme en région parisienne, ainsi le sens du compostage n’a pas d’importance ;
2. sinon, émettre un bruit, accompagné d’une indication sur écran en cas d’échec de compostage ;
3. augmenter le contraste entre le fond et le texte sur le titre, augmenter la force du corps, et — surtout — inverser le sens du texte [bande magnétique sur le côté droit] et mettre une indication sur le mode d’emploi avec la flèche en haut du document.

Avec ce titre de transport, la TAO avait une seule chose à faire pour le rendre utilisable [le rôle du UI] et ils l’ont râtée.

  • Qui plus est, la flèche étant située à côté d’une photo, et pas loin du logo, on la confond avec un élément décoratif …

    Il y a un champ (dans l’encadré blanc) où il faut visiblement écrire quelque chose, mais quoi ?
    Et la bande noire magnétique, bien que nécessaire, peut-être designée autrement (de la même manière que les nouvelles lubies des codes barres, ils peuvent apporter un sentiment de “collection” et pousser à plus d’achat des titres/moins de fraude)

  • jonathan munn

    Il est clair que la flèche ressemble plus à un élément décoratif qu’un élément fonctionnel.

    Pour le champ (dans l’encadré blanc) je suppose qu’il doit fonctionner comme les anciens titres de carte orange [et comme les titres Paris Visite fonctionne toujours] où il faut inscrire le numéro d’une carte qui nous identifie et donc permet d’empêcher une carte hebdomadaire ou mensuel d’être utilisée par un tiers.

    Sinon, l’idée de ‘collection’ est intéressante…