07:40Owendo
11 h 45
19:25Franceville
- Voiture
- 4
- Place
- 32
- Classe
- 2e
Charte graphique
SETRAG · version 1
Charte graphique · version 1
Une voie, et le ruban qui glisse dessus
Tout le système SETRAG part du logo. La voie ferrée du S donne la structure des écrans. Le ruban vert, jaune, bleu, les couleurs du Gabon, est la seule chose qui bouge : il montre où l’on en est et ce qui avance.
01Le concept
Trois éléments, trois rôles. On ne les mélange pas : la voie ne bouge pas, le ruban ne structure rien, le S n'apparaît qu'aux grands moments.
La voie
Deux rails, des traverses. Elle relie deux informations : une heure de départ et une heure d'arrivée, deux étapes, deux moitiés de billet. Neutre, en gris de ligne, elle ne se voit que si on la cherche.
Le ruban
Vert, jaune, bleu : le drapeau, toujours dans ce sens, le bleu en tête. Il glisse sur la voie pour dire « vous êtes ici », « ça avance », « c'est choisi ». C'est la seule couleur vive qui bouge à l'écran.
Le S
La voie entière, en orange. Il signe : logo, icône d'app, démarrage, états vides. Dans l'interface, on n'en montre que des tronçons droits.
02Le logo
La voie épurée : le logo historique redessiné en aplats, dans les couleurs du site setrag.eramet.com. Le mot est dessiné dans la police de l'interface, Schibsted Grotesk 800 italique. Le ruban souligne tout le nom, S compris : c'est la position où il se pose à la fin de l'animation.
Le logo animé
- 0,0 – 0,8 sLa voie se poseLes traverses, puis les rails, d'un bout à l'autre du S.
- 0,6 – 1,6 sLe ruban la parcourtIl entre par le haut, du gabarit d'un train, et suit les rails en accélérant.
- 1,6 – 2,4 sIl sort et se coucheAu pied du S, il s'affine, fait demi-tour et file sous le nom.
- 1,8 – 2,6 sLes lettres se lèventChacune apparaît quand le ruban passe sous elle.
- 2,5 – 2,9 sLa signatureSociété d'Exploitation du Transgabonais, en fondu.
✓ Où il joue
- Au démarrage à froid de l'app voyageur, une fois. Pas au retour au premier plan.
- À l'ouverture de la billetterie installée (PWA), sur l'écran de démarrage.
- Vidéos, écrans en gare, ouverture des présentations.
✕ Où il ne joue pas
- En boucle, ou à chaque changement de page.
- Dans l'en-tête d'un site : le logo y est fixe.
- Si l'utilisateur a demandé moins d'animations : on affiche l'image finale.
Construction
- Module x
- Hauteur des capitales de ETRAG. Tout se mesure en x.
- Le S
- 2,5 x de haut. Son pied repose sur la ligne de base du mot.
- Le ruban
- 0,1 x d'épaisseur, 0,2 x sous la ligne de base, du pied du S à la fin du G.
- La signature
- Même longueur que le ruban, 0,12 x sous lui.
- Zone de protection
- 0,5 x tout autour (pointillés). Rien n'y entre, pas même un autre logo.
Déclinaisons
Sur chaque fond
Couleur · fond clair
Négatif · fond encre
Sur le bleu SETRAG
Une couleur · impression, tampons
Blanc · sur photo sombre
Jamais sur orange
À ne pas faire
03Couleurs
Deux familles. Celle de l'interface porte les écrans et les statuts. Celle de la marque est réservée au logo, au ruban et à deux usages repris du site : le bandeau d'information, jaune sur bleu, et les pastilles de mise en avant, bleu sur jaune.
Neutres · 60 %Bleu · 22 %Encre · 10 %
Sur un écran type : le ruban et l’orange ne dépassent jamais 8 % de la surface.
Marque
--brand-orange#FA6414 · oklch(0.686 0.199 42.3)Le S uniquement. Jamais pour un statut.--c-accent#0F50A0 · oklch(0.441 0.144 257)Le mot, l'interface, le bouton principal.--brand-rubanvert → jaune → bleu, interpolé en oklchCe qui glisse. Décor, jamais une information seule.--brand-jaune#FCDF49 · oklch(0.902 0.164 97.9)Ruban ; texte sur bleu (5,9:1) ; pastilles.--brand-vert#009E60 · oklch(0.615 0.146 157)Ruban seulement : le succès garde son propre vert.--brand-indigo#1A003B · oklch(0.189 0.103 295.7)Titres éditoriaux : e-mails, PDF, pages institutionnelles.Interface
--c-canvas--c-surface--c-line-strong--c-ink--c-success--c-warning--c-danger--c-info✓ Associations sûres
- Jaune sur bleu SETRAG : 5,9:1, tout texte (bandeau d'information).
- Bleu sur jaune : pastille « Meilleur prix », « Promo ».
- Orange sur encre : 5,7:1, le S du billet et des écrans sombres.
✕ À proscrire
- Texte orange sur blanc (3:1) sous 24 px.
- Texte sur le ruban, ou ruban en fond de bouton.
- Une couleur seule pour dire un statut : toujours une icône et un mot.
04Typographie
Deux familles, servies en local. Le mot-symbole est dessiné dans la police de l'interface : le logo et les écrans parlent la même langue.
Schibsted Grotesk
Aa
Tout le texte d'interface, du titre à la légende. Graisses 400, 500, 600, 700.
Schibsted Grotesk 800 italique
ETRAG
Réservée au mot-symbole. Jamais pour un titre d'écran : l'italique n'existe pas ailleurs.
IBM Plex Mono
07:40
Heures, durées, points kilométriques, références de billet. Les chiffres s'alignent d'une ligne à l'autre.
Display · 49
Owendo → Franceville
Titre 1 · 39
Vos billets
Titre 2 · 31
Choisissez votre classe
Titre 3 · 25
Express 201
Titre 4 · 20
Moyen de paiement
Texte · 16
Votre train partira 12 min plus tard. Votre place est conservée.
Petit · 14
Places tenues 15 minutes pendant le paiement.
Légende · 12
PK 338 · Booué
Heure · mono 25
07:40 → 19:25
05Icônes
Lucide : trait de 2 px sur une grille de 24, extrémités arrondies. Une icône accompagne un mot ; elle ne le remplace que dans la barre d'onglets, où le libellé reste affiché.
06La voie et le ruban dans l'interface
Dans les écrans, la voie est droite, grise et fine ; le ruban y glisse pour un état précis. Chaque usage est un composant, construit une fois dans packages/ui et porté dans packages/mobile-ui.
07:4019:25
Trajet
La voie relie départ et arrivée. Le ruban la remplit quand le trajet est choisi.
Attente
Une rame passe, 1,6 s, sans fin. Seulement pour une attente de plus d’une seconde, toujours avec une phrase.
État vide
Le S en gris, la rame à quai en haut : rien ne roule encore. Jamais animé.
| Élément | Web | Mobile | Couleur |
|---|---|---|---|
| Rails | 2 × 1,5 px, entraxe 6,5 px | 2 × 1,5 pt | --c-line-strong |
| Traverses | 2 px tous les 7 px, 14 px de long | idem en pt | --c-line |
| Ruban sur la voie | 8 px de haut, rayon 4 | 8 pt | --brand-ruban |
| Ruban indicateur | 3 px, sous l'onglet | 3 pt, au-dessus de l'onglet | --brand-ruban |
| Rame d'attente | 34 % de la voie | 34 % | ruban, bleu en tête |
07Le mouvement
Des animations qu'on ne remarque pas. Une seule chose bouge à la fois ; la réponse au doigt est immédiate ; l'information s'affiche tout de suite, l'animation l'accompagne sans la retenir ; les boucles sont réservées aux attentes réelles, toujours avec une phrase.
Une chose à la fois
Si le ruban glisse, le contenu attend ou se contente d’un fondu.
Au doigt, tout de suite
Une pression répond en 90 ms ; l’écran reste utilisable pendant toute l’animation.
L’information d’abord
Le prix, l’heure et le statut s’affichent sans attendre la fin du mouvement.
Une boucle pour attendre
La rame tourne seulement pendant une attente réelle, avec une phrase qui dit ce qu’on attend.
Durées
--dur-micro- 90 ms
- Réponse au doigt : pression d'un bouton.
--dur-fast- 120 ms
- Survol, fondu d'un contenu d'onglet.
--dur-base- 200 ms
- Bordure, bandeau, toast, cascade des résultats.
--dur-slow- 320 ms
- Feuille, choix segmenté.
--dur-glisse- 480 ms
- Le ruban se déplace : onglet, jour, trajet, étape.
--dur-boucle- 1 600 ms
- Un passage de rame, pendant une attente réelle.
Courbes
--easecubic-bezier(0.2, 0.8, 0.2, 1)- Réponse : part vite, se pose doucement.
--ease-glissecubic-bezier(0.45, 0, 0.2, 1)- Glissement : départ progressif, arrivée douce, comme un train.
--ease-sortiecubic-bezier(0.4, 0, 1, 1)- Sortie : ce qui part accélère, et part plus vite qu'il n'est venu.
Le catalogue
Pression
Le bouton s’enfonce sous le doigt. Appuyez.
- Durée
- 90 ms · retour 160 ms
- Effet
- échelle 0,98
OngletNavRuban
Le ruban glisse vers l’onglet choisi. Cliquez les onglets.
- Durée
- 480 ms · --ease-glisse
- Contenu
- fondu 120 ms, sans glissement
Trajet choisi
Le ruban remplit la voie entre les heures. Touchez la carte.
- Durée
- 480 ms · --ease-glisse
- Avec
- bordure accent, 200 ms
- Trajet (franchie)
- Voyageurs
- Paiement
- Billet
Étape suivanteStepper
Le ruban avance jusqu’à la gare suivante, qui s’allume à l’arrivée.
- Durée
- 480 ms · --ease-glisse
Bouton en attente
Le libellé ne change pas ; une rame passe sous le texte tant que l’action tourne. Cliquez le bouton.
- Boucle
- 1 600 ms · --ease-glisse
- Seuil
- après 300 ms seulement
Recherche des trains…
Attente longueChargeur
Recherche, validation Mobile Money : une rame passe, avec une phrase.
- Boucle
- 1 600 ms
- Seuil
- au-delà de 1 s ; avant, squelettes
Changement de page
Le ruban traverse le filet du haut pendant le chargement de la page suivante.
- Seuil
- après 150 ms de chargement
- Boucle
- 1 600 ms
Arrivée des résultats
Les cartes montent de 6 px en cascade courte. Au-delà de la sixième, elles sont déjà là.
- Durée
- 200 ms · décalage 28 ms
Billet émis
Le ruban traverse la découpe, une fois.
- Durée
- 720 ms · --ease-glisse
- Haptique
- impact léger, à l'arrivée (mobile)
+12 min
Retard mis à jour
Le nouveau chiffre remplace l’ancien en montant. Pas de clignotement, pas de secousse.
- Durée
- 240 ms · --ease
- 12:14Lopé(desservi)
- 13:07Booué
- 14:02Ivindo
- 15:50Lastourville
Rame du suiviLigneArrets
La rame avance d’un cran à chaque mise à jour du statut, puis s’arrête.
- Durée
- 1 200 ms · --ease-glisse
- Rythme
- à la mise à jour, jamais en continu
Travaux samedi : départs +25 min. Vos places sont conservées.
Billets ajoutés à Wallet
Bandeau et toast
Le bandeau descend du haut, le toast monte du bas. Ils partent plus vite qu’ils n’arrivent.
- Entrée
- 200 ms · --ease
- Sortie
- 160 ms · --ease-sortie
FeuilleFeuille
Choix de la gare, filtres : la feuille monte et se pose, sans rebond.
- Durée
- 320 ms · --ease
- Voile
- fondu 200 ms
- Grand écran
- fenêtre centrée
Tirez pour actualiser
Tirer pour actualiser
Le ruban prend le relais pendant l’actualisation.
- Geste
- la voie suit le doigt, sans durée imposée
- Après le geste
- rame de 1 600 ms jusqu’à la réponse
Logo animéLogoAnime
À l’ouverture de l’app installée, une fois.
- Durée
- 3,3 s · Lottie
- Sortie
- dès 2,4 s si l'app est prête
Fichiers Lottie
Ces fichiers reprennent la géométrie du logo et du signe. Les calques du logo sont nommés (traverses, rails, ruban, mot, signature) pour adapter leur couleur dans l’app mobile. Les animations de chargement ne tournent que pendant une attente.
logo-anime
Démarrage de l’app
3,3 s
logo-anime-negatif
Démarrage en thème sombre
3,3 s
logo-anime-compact
Petits écrans, sans signature
3,3 s
symbole-anime
Formats carrés et vidéos courtes
2,8 s
chargement-voie
Attente longue sur mobile
1,6 s · boucle
chargement-s
Premier chargement plein écran
2,2 s · boucle
ruban-apparition
Première ouverture de Ruban
700 ms
ruban-reflexion
Réflexion de Ruban
1,6 s · boucle
Moins d’animations
| Animation | Si le système réduit les animations |
|---|---|
| Logo animé | Image finale affichée directement |
| Ruban : onglets, jours, trajet, étapes | Il apparaît à sa place, en fondu de 120 ms |
| Rame et bouton en attente | Ruban fixe au milieu de la voie ; la phrase reste |
| Billet émis | Découpe remplie d’emblée ; vibration légère conservée |
| Résultats, bandeau, toast, feuille | Fondu seul, sans déplacement |
| Rame du suivi | Elle passe directement à sa nouvelle position |
✓ Ce qui reste
- Les états finaux : ruban posé sous l'onglet, voie remplie, étape atteinte.
- La rame d'attente, immobile au centre de la voie, avec sa phrase.
- Le logo fixe à la place du logo animé.
✕ Ce qui s'arrête
- Tout glissement, toute cascade, toute boucle décorative.
- L'animation du logo et le tracé du signe de Ruban.
- Le mouvement de la feuille : elle apparaît en fondu.
Mise en œuvre
Web
Animer transform et opacity ; utiliser la propriété --p pour le remplissage du ruban. Charger le logo animé à la demande.
Mobile
Reanimated suit la courbe de glissement, Lottie joue le logo et les attentes, une vibration légère suit l’émission du billet.
Hors de l’app
Widgets et activités en direct n’ont pas d’animation propre. Le système anime le changement de valeur publié.
✓ Toujours
- Animer transform et opacity à 60 images par seconde.
- Laisser l’écran utilisable pendant l’animation.
- Vérifier le mode « moins d’animations » avant une livraison.
✕ Jamais
- Rebond, élastique ou secousse sur une erreur.
- Parallaxe, animation au défilement ou confettis.
- Roue qui tourne : l’attente est montrée par la voie.
08Les composants
Tous les composants de la billetterie, tels qu'ils vivent dans packages/ui. Ce qui s'affiche ici est ce que voit le voyageur : même code, mêmes états. Les horaires et les prix sont des exemples.
Actions
Boutoncomponents/button
Pastille. Un seul primaire par écran : celui qui fait avancer le voyage.
- Variantes
- primaire, secondaire, fantôme, danger, noir (Wallet)
- Hauteur
- 44 px au moins (md), 52 px (lg)
- En attente
- le libellé reste, une rame passe dessous
Bouton rond
Inverser deux gares, fermer, revenir.
- Tailles
- 36, 44, 52 px
- Libellé
- toujours un aria-label
Saisie
Tel qu'écrit sur la pièce d'identité
Numéro incomplet : 9 chiffres après +241.
Adultes
Enfants
Champcomponents/field
Le libellé au-dessus, l’aide dessous, l’erreur écrite. Aucune secousse.
- Hauteur
- 52 px, rayon 12
- États
- repos, focus (anneau 3 px), erreur, désactivé
- Erreur
- écrite : ce qu'il faut faire, pas seulement ce qui ne va pas
Code, compteur, jours
- Code
- un seul champ réel, lu automatiquement par le téléphone
- Compteur
- chiffre en mono, bornes désactivées
- Jours
- le ruban glisse sous le jour choisi
Statuts et messages
PrévuÀ l'heure+12 minSuppriméArrivéMeilleur prixExpressOmnibus
ValidePaiement en attenteUtiliséAnnuléRembourséExpiré
Travaux entre Booué et Ivindo samedi 3 octobre : les départs de l’après-midi partiront 25 min plus tard. Vos places sont conservées.
En savoir plusPaiement au guichet.Réglez avant 18:00 demain, sinon les places sont libérées.
Billets envoyés.Vous les recevrez aussi par SMS.
Plus que 4 places.En première classe, sur ce train.
Paiement refusé.Le solde Airtel Money est insuffisant. Vos places restent tenues.
Billets ajoutés à WalletVoir
Pastillecomponents/tag · voyage/statut
- Règle
- toujours une icône et un mot ; le retard toujours chiffré
- Marque
- bleu sur jaune : mises en avant commerciales, jamais un statut
Bandeau d'informationvoyage/bandeau-trafic
- Couleurs
- jaune sur bleu, comme le site (5,9:1)
- Texte
- ce qui change, puis ce qui reste acquis
La voie et le ruban
Vide
Pleine
À moitié
Attente
- Trajet (franchie)
- Voyageurs (franchie)
- Paiement
- Billet
Voiecomponents/voienouveau
- États
- vide · pleine · attente, ou rempli 0 → 1
- Fonds
- clair · encre · bleu
Étapescomponents/stepper
- Étapes
- des gares ; le ruban avance jusqu'à la courante
- Accessibilité
- « Étape 2 sur 4 » reste écrit
Trajets et achat
Vous recevrez une demande de validation.
Vos places sont tenues encore13:00
1 adulte · 2e classe22 000
1 enfant · 2e classe22 000
Réduction enfant −50 %−11 000
Total33 000 XAF
Trajetvoyage/carte-trajet
- Ordre
- l'heure (mono 24), le prix, le reste en gris
- Choisi
- bordure accent + ruban 480 ms, les classes se déplient
- Supprimé
- heures barrées, le mot « Supprimé », non cliquable
Choix, récapitulatifvoyage/choix · voyage/recapitulatif
- Places
- affichées seulement sous 10
- Tenue
- rebours en mono, danger sous 2 min, sans clignoter
Le billet
07:40Owendo
ven. 2 oct.
19:25Franceville
- Voiture
- 4
- Place
- 32
- Classe
- 2e
RS-EXEMPLE · 1/2
06:15Ndjolé
10:02Booué
10:20Owendo
21:40Franceville
Billetvoyage/billet
- Fond
- encre, dans les deux thèmes
- Code
- Aztec signé, sur fond blanc, lisible hors réseau
- États
- valide, retard, utilisé, annulé, expiré
Découpe
- Voie
- remplace les pointillés
- Émission
- le ruban la traverse une fois, 720 ms
Suivi
- 07:40OwendoPK 0(desservi)
- 10:52
10:40NdjoléPK 182(desservi) - 12:26
12:14LopéPK 290 - 13:19
13:07BoouéPK 338Vous - 16:02
15:50LastourvillePK 484
Départs d'Owendo
07:02| Heure | Destination | Train | Quai | État |
|---|---|---|---|---|
| 07:40 | FrancevilleNdjolé, Booué, LastourvilleExpress 201 · quai 1 | Express 201 | 1 | À l'heure |
| 18:35 | FrancevilleToutes garesOmnibus 203 · quai 2 | Omnibus 203 | 2 | +25 min |
Arrêtscomponents/ligne-arretsnouveau
- Heures
- réelle en gras, prévue barrée dessous
- Rame
- entre deux gares, d'après l'horaire et le retard
Schéma de ligne, départscomponents/schema-ligne · voyage/tableau-departs
- Gares
- à leur point kilométrique réel
- Tableau
- comme en gare : fond encre, heures en jaune
États
Pas de train ce jour-làLe prochain part samedi à 07:40.
Ariane MoussavouJean NdongAvatars : initiales, jamais de couleur aléatoire
État videcomponents/empty-state
- Illustration
- le S gris, rame à quai : jamais animé
- Sortie
- toujours une action : un jour voisin, une recherche
Chargement
- Sous 1 s
- squelettes
- Au-delà
- la voie et une phrase
09Widgets & Live
Le prochain voyage reste lisible sans ouvrir l’app : widgets, écran verrouillé, activité en direct, notifications et Wallet. La voie relie les gares ; le ruban n’avance que lorsqu’une nouvelle position estimée est publiée. Les données ci-dessous sont fictives.
D’où viennent les informations
Le statut de desserte publié par le backend (planifié, à l’heure, retardé, supprimé ou terminé) alimente ces surfaces par notification. La position du train est estimée d’après l’horaire et le retard annoncé, sans GPS. Dès qu’on montre cette position, on indique l’heure de sa dernière mise à jour.
Widgets de l’écran d’accueil
Petit : l’heure et le quai. Moyen : le trajet et la place. Grand : le voyage en cours, gare par gare. Toucher un widget ouvre le billet correspondant.
Express 201
07:40
Owendo → Franceville
Quai 1dans 48 min
Prochain train · ven. 2 oct.À l’heure
07:40Owendo19:25Franceville
- Quai
- 1
- Voiture
- 4
- Place
- 32
- Embarq.
- 07:10
Express 201 · en route +12 min
Prochain arrêtBooué · 13:07
Arrivée à Franceville19:37
- Lopé · 12:14
- Booué · 13:07
- Lastourville · 15:50
- Franceville · 19:37
Position estimée · mise à jour à 12:16
✓ Dans un widget
- L’heure de départ est l’information la plus grande, toujours en chiffres mono.
- Un retard est chiffré en minutes et l’heure montrée est l’heure réelle.
- Le widget ouvre le billet, directement.
✕ À éviter
- Le logo complet : le symbole suffit quand le nom de l’app est déjà affiché.
- Une animation continue : le widget ne change qu’à sa mise à jour.
Écran verrouillé et activité en direct
L’activité démarre 2 h avant le départ et s’arrête à l’arrivée. Avant le départ, elle montre le compte à rebours, le quai et la place. Pendant le trajet, elle montre le prochain arrêt et la position estimée. Le ruban rejoint sa nouvelle position en 1,2 s à chaque mise à jour ; il ne roule jamais en continu.
Express 201 · Owendo → Franceville À l’heure
Départ dans48 min
Quai 1 · voiture 4Place 32
Owendo 07:40BoouéFranceville 19:25
Express 201 · en route +12 min
Prochain arrêtBooué 13:07
Arrivée à Franceville19:37
OwendoBoouéFranceville
Position estimée · mise à jour à 12:16Écran verrouillé
Le cercle indique le temps avant le départ, puis la part du trajet. La ligne courte donne le quai ou le prochain arrêt.
Dynamic Island
Compacte : symbole, prochain arrêt et retard. Minimale : symbole seul. Étendue : trajet et position du ruban. Le système anime les transitions.
Android
Widget aux grands rayons. La notification de progression d’Android 16 marque les gares majeures par des segments et place le train à la position estimée.
Notifications
Chaque titre nomme le train ou la gare. Le message annonce le fait, puis ce qui reste acquis pour le voyageur.
Express 201 · 12 min de retard
Arrivée prévue à Franceville à 19:37. Votre place est conservée.
Dès le changement de statut · Push ; SMS sans app
Embarquement à 07:10, quai 1
Express 201 pour Franceville. Votre billet est prêt, même sans réseau.
30 min avant l’embarquement · Push
2 billets émis
Owendo → Franceville, vendredi 2 octobre. Réf. STG-7K4Q2P.
Paiement reçu, billets émis · Push ; reçu par SMS
Omnibus 405 supprimé
Remboursement de 12 000 XAF lancé sur votre compte Airtel Money.
Lancé, puis effectué · Push ; e-mail
Cartes Wallet
Apple Wallet garde le fond encre du billet, avec des libellés orange lisibles sur ce fond. Google Wallet reprend la voie et le ruban en liseré. Les deux utilisent un code Aztec sur fond blanc ; le nom du voyageur, la voiture, la place et le quai restent écrits à côté du code.
Ven. 2 oct.
OWENDO07:40Quai 1
FRANCEVILLE19:25Express 201
VoyageurN. MboumbaVoiture4Place32Classe2e
STG-7K4Q2P · exemple
SETRAG · Express 201
OWEOwendo · 07:40
FCVFranceville · 19:25
- Date
- 2 oct.
- Voiture
- 4
- Place
- 32
- Quai
- 1
STG-7K4Q2P · exemple
✓ Toujours
- Afficher l’heure de mise à jour dès qu’une position est estimée.
- Afficher l’heure réelle en premier ; l’heure prévue seulement si elle diffère.
- Utiliser les codes OWE et FCV là où la place manque, le nom complet ailleurs.
- Employer le symbole seul sous 48 pt et chiffrer chaque retard.
✕ Jamais
- Présenter une position comme actuelle si son statut a plus de 15 min : le retard de mise à jour doit être écrit.
- Faire porter un retard par la couleur seule.
- Faire bouger ces surfaces en dehors d’une mise à jour réelle.
Heures en mono Position estimée signalée Retard chiffré
10Ruban, l'assistant
SETRAG pose la voie, Ruban roule dessus. Son signe est le ruban lui-même, posé en S, sans les rails : reconnaissable au premier coup d'œil, et toujours à sa place dans l'identité. Ruban répond aux questions, cherche un train, réserve et fait payer dans la conversation, sur le site, dans l'app et bientôt sur WhatsApp et Telegram.
Sur fond encre, la tête du ruban s’éclaircit : le bleu reste lisible.
Le bouton flottant : 60 px sur le web, 56 sur mobile, toujours encre — c’est ce qui le rend reconnaissable sur n’importe quelle page. À la première ouverture de la session, le ruban se trace une fois (700 ms). Touchez-le.
Le nom et la voix restent à valider avec SETRAG. Ruban n’a ni visage ni âge et ne se présente jamais comme une personne. Son signe reprend le tracé du S, sans les rails ni l’orange du logo.
Placement et façon de parler
✓ À faire
- Web : bouton en bas à droite, à 24 px des bords. Mobile : au-dessus de la barre d’onglets ; un appui long ouvre la voix.
- Masquer le bouton pendant le paiement, sur le billet plein écran et quand le clavier est ouvert.
- Dire l’heure, le prix ou le quai, puis ce que cela change. Deux phrases, puis une carte ; détailler sur demande.
- Citer la source d’une information de trafic et dire quand l’information manque. Vouvoyer le voyageur.
✕ À éviter
- Animer le bouton au repos, le faire rebondir ou le colorer en bleu SETRAG.
- Remplacer le signe par une bulle de discussion ou des étincelles.
- Plaisanter sur un retard ou ajouter des émojis à une réponse.
La conversation et ses cartes
Fenêtre web
400 × 640 px, ancrée au bouton. Elle connaît la page et le trajet consultés ; la page /assistant donne accès à l’historique.
Feuille mobile
Elle s’ouvre au-dessus de la page, puis peut occuper tout l’écran. Le fil et les actions restent les mêmes.
Cartes d’action
Trajets, récapitulatif, paiement, billet ou modification : les composants de l’app dans le fil. Trois trajets au plus, deux boutons par carte.
Après une action
La carte traitée se replie en une ligne de résumé. Seule la dernière carte du fil reste active.
La voix
Le micro du champ dicte un message ; le bouton au signe lance la conversation orale. Tout ce que Ruban dit s’écrit aussi à l’écran, avec les mêmes cartes que dans le fil écrit.
Écoute
Les mots s’écrivent pendant que le voyageur parle. Une pause de 1 s termine la phrase.
Recherche
Ruban annonce ce qu’il cherche. Pas plus de 3 s sans indication.
Réponse
Trois phrases au plus ; les heures se disent en toutes lettres. Le texte suit à l’écran.
Interruption
Le voyageur peut parler pendant la réponse : Ruban s’arrête et écoute.
Une réservation, une modification ou une annulation se confirme par un toucher ou par un « oui » après la relecture du récapitulatif. Le paiement Mobile Money se valide sur le téléphone. Aucun code secret, code SMS ou numéro de carte n’est demandé à voix haute.
Actions et confirmation
| Action | Ce qui la déclenche |
|---|---|
| Chercher, répondre, suivre | La question du voyageur. |
| Tenir des places | Le choix d’un trajet ; les places se libèrent après 15 min. |
| Payer en Mobile Money | Le bouton « Payer », puis la validation sur le téléphone. |
| Payer par carte | Un formulaire sécurisé ouvert hors du fil. |
| Modifier | La confirmation sur la carte avant / après. |
| Annuler, rembourser | Un bouton qui nomme le billet concerné. |
Le mouvement de Ruban
| Moment | Mouvement | Durée |
|---|---|---|
| Ouverture | Montée depuis le bouton, sans rebond ; voile en fondu | 320 ms |
| Première ouverture | Le signe se trace une fois | 700 ms |
| Réflexion | Une rame parcourt le S après 400 ms d’attente | 1 600 ms, boucle |
| Réponse | Le texte s’écrit ; la carte monte de 6 px | 14 mots/s · 200 ms |
| Écoute et parole | L’épaisseur du ruban suit la voix | Lissage 80 ms |
| Carte traitée | Elle se replie en une ligne | 200 ms |
| Alerte | Un point jaune apparaît, sans rebond | 200 ms |
Ruban utilise les mêmes fonctions et la même session que l’interface. Une action sensible passe par un brouillon, puis par la confirmation du voyageur ; elle est inscrite au journal d’audit.
✓ Ce que fait Ruban
- Il montre des cartes : trajets, récapitulatif, paiement, billet. Le voyageur agit sur la carte.
- Il demande une confirmation avant toute réservation, tout paiement, toute annulation.
- Il dit quand il ne sait pas, et renvoie vers le guichet ou l'aide.
✕ Ce qu'il ne fait jamais
- Demander un code secret, un code reçu par SMS ou un numéro de carte.
- Payer sans un geste du voyageur : la validation se fait sur son téléphone.
- Parler à la place d'une information officielle de trafic : il la cite.
11Le ton
Ce qu'on écrit compte autant que ce qu'on montre. Des phrases courtes, un fait, puis ce que ça change pour le voyageur.
« Incident d'exploitation »
« Votre train partira 12 min plus tard. Votre place est conservée. »
« Transaction en cours de traitement »
« Validez le paiement sur votre téléphone. Vos places sont tenues 15 minutes. »
« Erreur 503 »
« Pas de réseau. Vos billets restent consultables. »
« Aucun résultat »
« Pas de train ce jour-là. Le prochain part samedi à 07:40. »