Cette fois, le client, c’était moi : la refonte d’InkPoke
La plupart des notes de ce blog viennent de projets clients. Pas celle-ci. InkPoke est un produit que je développe et que je fais tourner moi-même : un outil de réservation pour les tatoueurs. Chaque artiste a une page publique avec son travail et ses prestations. Les clients y envoient une demande de réservation, l’artiste l’accepte ou la refuse, et quand la séance demande un acompte, il est payé via Stripe. Le tout fonctionne en 33 langues.
Cette semaine, InkPoke a changé de design. La visite guidée pour les artistes qui l’utilisent, chaque écran avant et après, est sur le blog d’InkPoke. Cette note raconte l’autre côté : pourquoi il a changé, les règles qui ont décidé de chaque écran, et la partie d’une refonte que personne ne voit.
Rien n’était cassé
L’ancien InkPoke fonctionnait. Il ressemblait juste à la plupart des logiciels : des panneaux sombres, des boutons violets, des cartes dans des cartes. Pour des gens qui passent leurs journées à tracer des traits lents et précis, l’outil qui gère leurs réservations ressemblait à un tableur.
Une refonte qui ne change que les couleurs, c’est une couche de peinture. Celle-ci suit quelques règles, et chaque écran devait les respecter :
- papier et encre : un fond papier chaud en mode clair, une encre profonde en mode sombre, selon le réglage du téléphone ;
- un seul bouton rouge par écran, et c’est toujours la prochaine chose à faire ;
- sur la page publique, le travail de l’artiste passe avant tout le reste ;
- des filets fins plutôt que des boîtes dans des boîtes.
C’est la deuxième règle qui a fait l’essentiel du travail. Quand une seule chose peut être rouge sur un écran, il faut décider, écran par écran, quelle est vraiment la prochaine action. Cette décision, c’est le design. La couleur ne fait que la montrer.
L’écran qui compte s’ouvre en premier
L’ancien écran d’accueil s’ouvrait sur quatre cartes de statistiques, un panneau de gains et un QR code. Les demandes de réservation, la seule chose qui attend l’artiste, venaient plus bas, et sur un téléphone, bien en dessous de la ligne de flottaison. Le nouvel écran d’accueil s’appelle Today, et il s’ouvre sur les demandes qui attendent une réponse, avec Accepter et Refuser sur chacune.
Sous chaque demande, une ligne courte dit ce que l’acceptation va déclencher : le client sera invité à payer un acompte, ou aucun acompte n’est nécessaire. Cette ligne compte plus que tout le reste de l’écran. Accepter peut envoyer une demande de paiement à quelqu’un, et personne ne devrait appuyer sur un bouton qui fait bouger de l’argent sans le savoir.
Accepter est en encre pleine, Refuser en contour. Le rouge reste en dehors, exprès : il veut déjà dire « la prochaine étape », et une couleur qui veut dire deux choses finit par ne plus rien dire.
Une couleur n’est pas un statut
Les statuts de réservation étaient des pastilles de couleur, avec une légende pour les déchiffrer. Chaque statut est maintenant un mot avec sa propre forme de point. Une séance confirmée et un acompte payé restent faciles à distinguer en mode sombre, sur un petit écran, et pour quiconque ne voit pas les couleurs comme le designer.
Quatre étapes au lieu de cinq
Réserver prenait cinq étapes. Il en faut maintenant quatre : la prestation, la date et l’heure, les détails, la vérification. La date et l’heure se choisissent sur le même écran. Le client voit toujours avec qui il réserve, et la page dit clairement qu’une demande ne coûte rien tant que l’artiste ne l’a pas confirmée.
Chaque étape d’un parcours de réservation est un endroit où quelqu’un peut s’arrêter et fermer l’onglet. En retirer une n’a rien d’esthétique.
Ce que les clients voient d’abord
La page publique, c’est celle que des inconnus ouvrent. Sur un téléphone, elle commence maintenant par la pièce de couverture de l’artiste, puis son nom, son studio et ses prestations présentées comme une carte de tarifs. La galerie montre sept pièces et un lien vers les autres, pour que la page reste rapide à parcourir, et le bouton de réservation reste à portée de pouce en bas de l’écran. Elle charge aussi environ un cinquième de code en moins qu’avant.
33 langues, dont deux de droite à gauche
Une refonte dans une langue, c’est une refonte. Dans 33 langues, c’en est 33, sauf si la mise en page est pensée pour. Chaque écran, du tableau de bord à la page publique et au parcours de réservation, existe dans toutes les langues d’InkPoke, en mode clair comme en mode sombre. Les heures suivent le format de chaque langue, et le calendrier se lit de droite à gauche en arabe et en hébreu.
Ça ne tient que si aucun texte n’est enfermé dans une boîte taillée pour l’anglais, et si la gauche et la droite ne sont jamais écrites en dur. Ce site applique la même règle dans ses cinq langues : la mise en page doit survivre à la traduction la plus longue, pas à la plus courte.
Ce qui n’a pas bougé
Une refonte qui déplace les données des gens, change leur lien ou les surprend avec un nouveau prix n’est plus une refonte. C’est une migration, et elle demande son propre plan. Le nouveau design est donc arrivé avec une courte liste de ce qui devait rester exactement en place : le lien de chaque artiste, ses clients, ses réservations et son portfolio, les formules et les prix, le fonctionnement des acomptes. Il n’y avait rien à installer non plus. Le nouveau design était simplement là à l’ouverture suivante.
Pourquoi c’est sur ce blog
Parce que les mêmes règles valent pour tout outil dont une entreprise dépend. La prochaine action vient d’abord. Tout ce qui fait bouger de l’argent le dit avant que ça arrive. Une couleur n’est jamais le seul signal. Et ce sur quoi les gens comptent reste exactement là où ils l’ont laissé.
Si vous avez un parcours de réservation ou de paiement qui a pris une étape de trop, ou un outil dont vos clients dépendent et qui doit changer de visage sans rien perdre en route, parlez-m’en. Et si vous connaissez un tatoueur, envoyez-le sur InkPoke.
