Réserver un train en quatre étapes, sans quitter la page.

Réserver un billet de train est un parcours que tout le monde connaît et que peu de sites réussissent : des pages qui se rechargent à chaque étape, des tarifs qu’on ne comprend pas, une place attribuée au hasard. La frustration est connue ; la démonstration montre comment l’éviter.

L’objectif : un seul écran qui se transforme à chaque étape, des tarifs lisibles avec leurs conditions sous le prix, et un plan de voiture sur lequel on choisit sa place, fenêtre ou couloir, espace calme ou près du bar.

• Un diaporama en ouverture et une carte de recherche posée dessus : départ, arrivée, date, voyageurs, aller simple ou aller-retour.
• Les horaires : six trains par jour et par sens, durée, numéro, et trois tarifs par train, Essentiel, Flex, Première, avec le prix le plus bas signalé.
• Le plan de la voiture : places libres, occupées, fenêtre ou couloir, choix de la voiture (espace calme, près du bar, Première), un bouton « Choisir pour moi ».
• Les voyageurs : nom et tarif de chacun, enfant ou senior à prix réduit, e-mail pour les billets.
• Les billets : une carte par voyageur et par trajet, avec horaires, place et prix, clairement marquée « sans valeur ».
• Les destinations en carrousel, les services à bord, les engagements et les questions fréquentes.

Une étape à la fois, toujours au même endroit. Le fil des quatre étapes reste visible, l’écran se remplace sous lui, et le visiteur peut revenir en arrière sans rien perdre. Sur téléphone, seul le nom de l’étape en cours est écrit : les autres sont des numéros.

Des tarifs qu’on comprend avant de cliquer. Les conditions tiennent en une ligne sous chaque prix. Un train complet en Première l’indique au lieu de disparaître.

Le plan comme argument. Choisir sa place est le moment le plus satisfaisant du parcours : c’est l’élément sur lequel le soin a été concentré, avec des sièges dessinés, la marque de la fenêtre et une couleur réservée au choix.

Une image de compagnie. La livrée bleu canard et sable du train traverse les onze images créées pour la démonstration, du paysage côtier à l’intérieur de la voiture. La typographie Outfit, géométrique, donne le ton d’un service moderne ; Manrope porte le texte courant.

Une page HTML, une feuille de style et un script d’environ deux cent cinquante lignes qui calcule les horaires, les prix et l’occupation des voitures à partir de règles fixes, de façon stable pour une route et une date données. Tout se passe dans le navigateur ; rien n’est envoyé.

Sur un service réel, ces calculs seraient remplacés par les appels au système de la compagnie : horaires en temps réel, disponibilité des places, paiement et émission des billets. L’interface, le fil des étapes et le plan de voiture restent les mêmes.

• Le parcours complet, ses fichiers sources et son intégration à son site existant ou sa mise en ligne.
• La connexion à ses données réelles : catalogue, disponibilités, prix, prestataire de paiement.
• Les e-mails et documents générés à chaque étape, testés avec elle.
• Les écrans secondaires : échange, annulation, compte client, selon le périmètre.
• Des explications de prise en main et une documentation des règles de calcul.

Ce type de parcours s’applique à bien d’autres réservations : séances, tables, salles, locations, rendez-vous. Périmètre, prix et délai sont précisés dans un devis avant de commencer.