Vitrine & prise de rendez-vous
Au trés'Or des sens
Site vitrine pour un cabinet de massages et soins holistiques : présentation de la praticienne, catalogue de prestations et formulaire de prise de rendez-vous.
Le projet
Une praticienne indépendante en soins bien-être n'avait aucune vitrine en ligne : ses clientes la trouvaient par bouche-à-oreille et la contactaient par téléphone. Le besoin était double : exister sur le web, et transformer une visite en prise de contact qualifiée (nom, prestation souhaitée, créneau) plutôt qu'en appel à l'aveugle.
Le front est terminé. L'envoi du formulaire est volontairement débranché : le projet n'a pas de partie serveur, elle n'était pas dans le périmètre convenu.
La mise en ligne est suspendue en attendant la reprise d'activité côté cliente. Ce temps me sert à préparer une seconde version nettement plus technique : le travail porte pour l'instant sur le design et les fonctionnalités, le choix de la stack viendra ensuite. Tant que la cliente n'a pas repris, ces évolutions restent en attente.
Fonctionnalités
- Ambiance sonore maîtrisée : musique de fond, fenêtre d'activation et bouton de coupure permanent
- Formulaire de rendez-vous structuré : coordonnées, prestation, créneau et intention de séance
- Catalogue de 9 prestations réparties en 3 univers, présentées en fenêtres accessibles
- Conception mobile d'abord : menu déroulant animé, effet de vague sur la navigation, palette pilotée par variables CSS
Les difficultés rencontrées
Le site repose sur une ambiance sonore, mais les navigateurs bloquent toute lecture audio qui n'est pas déclenchée par un geste de l'utilisateur. Ma première version lançait simplement la lecture au chargement : silence total, et une erreur dans la console. Je ne pouvais pas forcer le son, mais je pouvais préparer le terrain, en séparant deux choses qu'on confond souvent : lancer la lecture, et rendre le son audible. La piste démarre donc en sourdine, ce que les navigateurs autorisent, et tourne déjà silencieusement dès l'arrivée sur le site. Une fenêtre propose alors d'activer le son : ce clic est le geste légitime qui me permet de couper la sourdine. Résultat, aucune latence de démarrage, le son entre instantanément. La fenêtre se ferme d'elle-même au bout de quinze secondes, pour qu'un visiteur qui ne veut pas de son n'ait rien à cliquer.
Le dernier chantier a été un travail d'accessibilité qui a supprimé plus de code qu'il n'en a ajouté : 217 lignes retirées pour 60 écrites. J'ai remplacé ma gestion manuelle de la visibilité par un attribut prévu pour ça, et surtout ajouté un vrai piège à focus sur les fenêtres : le focus se place sur le bouton de fermeture à l'ouverture, revient sur l'élément déclencheur à la fermeture, et la touche Échap ferme. C'est là que j'ai compris que les attributs d'accessibilité seuls ne servent à rien sans la gestion du focus qui va avec.
Ce que j'en ai retiré
- Les contraintes des navigateurs sont des règles du jeu, pas des bugs : les comprendre permet de concevoir avec elles plutôt que de lutter contre.
- L'accessibilité n'est pas une couche qu'on ajoute à la fin : elle change la façon dont on écrit le code.
- Travailler avec une vraie cliente : comprendre un besoin exprimé sans vocabulaire technique, et concevoir un parcours simple pour des utilisatrices peu habituées au web.
- Anticiper l'évolution d'un produit : la v2 en préparation prévoit un assistant qui guiderait les clientes ne sachant pas quelle prestation choisir. Je commence par cadrer le besoin et l'expérience avant de choisir la technique ; l'inverse m'aurait fait retenir une stack pour de mauvaises raisons.