En coulisses : réinventer l’annulation des billets

par Pierre de La Morinerie, le 10 septembre 2015 | 22 commentaires

Depuis quelques mois, vous pouvez annuler les billets d’un seul passager, directement sur notre site web ou nos applications mobiles.

L’arrivée de cette possibilité toute simple a pris presque deux ans. C’est parce que nous mettons un point d’honneur à vous proposer le service le plus simple possible : nous sommes prêts à passer le temps qu’il faudra pour concevoir l’interface évidente, celle qui vous permettra de faire ce que vous voulez, quand vous en avez besoin, sans même y penser.

Aujourd’hui, nous voudrions vous montrer toutes les expérimentations qui ont été nécessaires au développement de cette fonctionnalité sur notre site web.

L’interface aux rayons-X

Qui dit nouvelle fonctionnalité, dit nouvelle interface. En rendant possible l’annulation des billets d’un seul passager directement depuis le site, il nous a fallu repenser notre module d’annulation.

Peut-être voulez-vous annuler seulement l’aller de Paul, ou le retour de Cédric – ou encore l’aller et le retour de tous les passagers. Comment présenter cette myriade de possibilités ? Fallait-il une évolution mineure de l’interface ? Ou un changement complet ? Pour ne rien vous cacher, plusieurs pistes furent envisagées. Nous les avons toutes explorées pendant quelques temps, et nous voulions les partager avec vous, par ordre d’itération :

  1. Le sous-menu
  2. Le dialogue
  3. Le bandeau

#1 — Le sous-menu

Le sous menu

Une erreur de trajectoire et le sous-menu se barre

Cette première piste est une évolution du menu existant pour annuler un billet. Pour un aller-retour, trois choix étaient possibles : annuler l’aller, le retour, ou les deux. Une solution consiste donc à ajouter une navigation supplémentaire au sein de ce menu, afin de sélectionner les passagers concernés par l’annulation.

Si cette interface est intuitive, elle n’est pas simple pour autant : manipuler un sous-menu demande une certaine dextérité dans le maniement de la souris. Une erreur de trajectoire est rarement pardonnée. Il existe plusieurs astuces pour rendre les sous-menus plus tolérants, mais cela ne résout pas le second problème de cette solution : en systématisant le choix des passagers, nous ajoutons une étape souvent superflue.

Nous avons donc repris nos papiers et nos crayons, pour une nouvelle itération.

#2 — Le dialogue

Boite de dialogue

Solution claire mais hors contexte

L’annulation a toujours eu lieu en 3 étapes :

  1. le choix de la partie du billet à annuler via un menu ;
  2. l’affichage de l’estimation du remboursement au sein d’une petite fenêtre de dialogue ;
  3. la confirmation de l’annulation.

Il aurait donc été possible d’ajouter une étape au sein du dialogue pour sélectionner les passagers concernés par l’annulation.

Seulement, nous n’étions pas satisfaits par la boîte de dialogue. En s’affichant par dessus les billets, elle force à changer de contexte et nous éloigne de l’élément principal, à savoir le billet. L’annulation étant irréversible, se tromper de trajet peut avoir de lourdes conséquences.

Une autre itération semblait nécessaire.

#3 — Le bandeau

Bandeau de l’annulation partielle

Voilà qui est mieux

Les humains parlent aux humains

Ce n’est un secret pour personne : nous n’aimons ni le jargon, ni la complexité. Dans cette troisième itération, nous avons donc opté pour une cascade de menus qui suivent la structure d’une phrase : « Annuler le retour de Thibaut ».

Muscle ton contexte

De cette manière, nous ne vous sortons pas du contexte de l’annulation. Votre billet reste visible, juste au dessus de la zone bleue. Les risques de boulette s’en trouvent donc diminués. Cette solution nous permet également de ne pas séparer votre choix (annuler tel ou tel passager) et l’estimation du remboursement auquel vous avez droit (le devis). Les deux se retrouvent sur la même ligne.

Computer says no

Enfin, cette solution en bandeau permet d’exprimer tous les choix possibles. Si une manipulation n’est pas possible (annuler un retour en carte weekend par exemple), alors un message d’erreur spécifique sera affiché.

Qu’importe la couleur pourvu qu’elle soit bleue

Les choix de couleurs ne se prennent jamais à la légère, car il en va des émotions qu’elles transmettent. Nous en débattons donc beaucoup, nous faisons pas mal d’essais au fil de l’eau.

Sans aller aussi loin que les 50 nuances de bleu de Marissa Meyer, nous avons pris très au sérieux le bleu de notre nouveau bandeau d’annulation. Pourquoi ? Tout simplement parce que c’était la première fois qu’une couleur était utilisée sur une si grande surface au sein de notre application.

L’orange est bleu

Initialement, il était question d’utiliser une nuance d’orange, qui transcrit mieux l’instabilité et le changement. Seulement, c’est une couleur qui est souvent associée aux messages d’alerte, aux avertissements et par extension au stress. Avoir un bandeau orange nous a donc semblé un peu trop dramatique.

Période bleue

Nuances de bleu

Nuances de bleu testées, par ordre d’itération, du haut vers le bas

Le bleu initial (ligne 1) est parti d’une variation de notre vert, qui est un vert plutôt vif. Après plusieurs tests, nous avons jugé que cette première nuance de bleu rendait la lecture difficile. Nous avons donc cherché à changer la couleur du fond, pour favoriser le contraste avec le texte, et donc la lecture. Un fond violet (ligne 2) a ensuite fait une brève apparition. Mais nous l’avons rapidement remercié.

Nous avons ensuite exploré la piste de la sobriété, avec un bleu moins saturé (ligne 3), mais finalement un peu triste. D’où un retour vers un bleu-vert plus familier (ligne 4), bien que trop froid à nos yeux. Au total, nous avons opté pour un bleu moins brillant et plus sage (ligne 5). Ce bleu nous semble à la fois discret et caractéristique.

Tout ça pour ça

À l’arrivée ? Vous pouvez annuler un billet en un rien de temps, sans vous prendre la tête. Nous nous occupons de tout : nous calculons le devis, nous vérifions que votre billet n’a pas déjà été annulé en gare, nous effectuons la remise à disposition du billet, nous vous remboursons… Et tout cela quel que soit le transporteur ferroviaire : que votre billet concerne un train SNCF, Eurostar, Lyria ou Thalys, pour vous le fonctionnement reste le même.

gif-anime-annulation-partielle

En déplacement

Déjà en route vers la gare ? Désormais, l’annulation partielle est également disponible sur nos applications Android et iPhone. En cas d’urgence, si vraiment vous ne voyez pas votre ami arriver en courant sur le quai pour attraper votre train, quelques taps sur votre téléphone (avant le départ du train) et l’affaire sera réglée.


22 commentaires

C’est sympa de pouvoir lire tout le cheminement qui a abouti à la solution 🙂

par Bert, le 10 septembre 2015 à 17h22. Répondre #

Vraiment intéressant de voir les coulisses !
Je connais un paquet de sites qui mettent des confirmations en rouge bien vif et ça me fait toujours flipper avant de me rendre compte qu’en fait tout va bien. Ce bleu est parfait !

par mfy, le 10 septembre 2015 à 17h48. Répondre #

Putain, y’a pas à dire, vous êtes trop fort ! c’est tellement simple que ça doit être un travail ÉNORME qui a été fait derrière ! BRAVO à toutes l’équipe !

par Leon, le 10 septembre 2015 à 17h56. Répondre #

Toujours aussi bien pensée, votre #UX ! 🙂 Superbe travail.

par Simon Tripnaux, le 10 septembre 2015 à 18h14. Répondre #

Ya pas a dire vous êtes TRÈS bon !
Super intéressant en tous cas !

par Amaia, le 10 septembre 2015 à 18h51. Répondre #

C’est toujours super bien pensé mais la gamme chromatique est toujours d’une sagesse… un peu plate 😉
Des bisous à mon service préféré de réservation de billets de train néanmoins hein.

par romain G, le 10 septembre 2015 à 18h57. Répondre #

C’est super intéressant et expliqué avec un ton joyeux, je vous adore !

par N2, le 10 septembre 2015 à 19h29. Répondre #

Avez-vous pris en compte le rendu des couleurs pour les daltoniens ?

par Achelle, le 10 septembre 2015 à 19h34. Répondre #

Oui : nous avons fait attention à ne jamais identifier des éléments uniquement par la couleur (notamment parce qu’on n’utilise qu’une seule couleur, le bleu. Ça aide).

Du coup pas de problème pour les daltoniens, qui ne devraient pas avoir plus de difficultés à annuler leurs billets.

par Pierre, le 11 septembre 2015 à 10h33. Répondre #

Brillant!

par Mennesson, le 10 septembre 2015 à 21h09. Répondre #

Merci pour votre feedbacks, une bonne UX ça se mérite !! 😉

Pierre

par Pierre, le 11 septembre 2015 à 9h34. Répondre #

Et si on veut annuler 2 passagers sur 3 (par exemple), il faut en annuler un, puis le second ?
Pas moyen de le faire en une fois, d’après ce que je vois, non ?

par Rodolphe, le 11 septembre 2015 à 13h49. Répondre #

Oui, c’est une situation où il est nécessaire d’annuler les deux passagers un par un. Un compromis raisonnable pour faciliter les cas d’usages les plus fréquents, effectivement.

par Pierre, le 11 septembre 2015 à 15h25. Répondre #

Vous y avez peut-être songé, mais continuer le bandeau (qui est une super chouette idée) avec un bouton ‘+’ ou une phrase genre « et de » avec un menu déroulant « personne d’autre » par défaut qui ne sont affiché qui si un seul nom est choisi et que d’autre choix sont possibles (> 2, sinon, fallait choisir tout le monde dès le départ).

Mais ça surcharge, c’est vrai…

par Adrien, le 11 septembre 2015 à 16h13. Répondre #

Compromis tout à fait raisonnable, en effet.

par Rodolphe, le 15 septembre 2015 à 15h23. Répondre #

Merci pour cet article interressant !
Qui décide si le orange est trop agressif, ou si le bleu est trop bleu ? Qui décide que la derniere itération de l’interface est meilleur que la premiere ?
Vous faires ça en interne ? Ya quelqu’un dédié a l’ux ? vous faites des tests utilisateurs ? Ya un vote de l’équipe ? 🙂

par STuFF, le 11 septembre 2015 à 14h43. Répondre #

Les fonctionnalités appartiennent à ceux qui y travaillent : généralement c’est une discussion entre le designer et le développeur qui l’implémente.

Nous avons aussi des personnes dédiés à la cohérence du produit qui peuvent intervenir – mais dans tous les cas c’est fait en interne chez nous, oui.

par Pierre, le 11 septembre 2015 à 15h33. Répondre #

Excellent travail, on aimerait tellement qu’une UX aussi bien pensée soit la règle et non l’exception.
Quid de l’annulation de plusieurs passagers simultanément (n of m) ? Une multi select combo box n’aurait elle pas été appropriée ? Il y a bien sûr un compromis à trouver avec les scenarios le plus fréquents (j’imagine que vous avez basé votre choix sur les statisiques d’utilisation).

par Erwin, le 12 septembre 2015 à 6h34. Répondre #

Dans ce cas c’est surtout une question d’usabilité : une liste à choix multiple native est un contrôle assez avancé, et rare sont les gens qui trouvent intuitivement comment s’en servir.

Il valait mieux dans ce cas cibler les scénarios les plus fréquents : « rendre les actions habituelles simples, et les actions inhabituelles possibles ».

par Pierre, le 12 septembre 2015 à 18h46. Répondre #

Super, merci pour ce post!
Deux ans de réflexion, n’est-ce pas un peu long ? Pourquoi n’avez-vous pas A/B testé plusieurs solutions ? Comment avez-vous validez que votre choix est la meilleur ?

par Vincent P, le 15 septembre 2015 à 12h02. Répondre #

Deux ans, c’est surtout pour tous les détails techniques nécessaires en coulisse. La conception de l’interface en elle-même n’a pris « que » quelques mois.

Quand à l’A/B testing, c’est délicat : ce genre de tests ne peut donner qu’une seule variable, mais laquelle : le nombre d’utilisateurs qui annulent un seul passager ? Le temps pris pour effectuer l’annulation ? L’A/B testing ne peut pas mesurer la compréhension de l’utilisateur, ou si l’interface lui a semblée familière – ou encore indiquer ce qui manque, et qui par définition ne se voit pas.

Si nous employons parfois l’A/B testing pour répondre à des questions précises, pour valider nos choix d’interfaces nous préférons regarder de vrais utilisateurs utiliser nos produits. Souvent cela nous donne de précieux indices pour améliorer les points qui nous semblaient clairs, et qui en fait ne l’étaient pas suffisamment.

par Pierre, le 15 septembre 2015 à 12h13. Répondre #

Je suis d’accord avec votre remarque concernant l’A/B testing. En revanche, couplé avec une solution de tracking et de records tels que HotJar, cela permet un gain de temps non négligeable.

par Thomas, le 4 novembre 2015 à 20h52. Répondre #

Ajoutez votre commentaire

Requis

Requis (caché)

Facebook

Twitter