Vibe coding UX : soigner l'expérience utilisateur

Du prototype au produit — l'expérience utilisateur

Le look est pro. Mais tes utilisateurs décrochent.

Dans la première partie, on a couvert le look & feel : états vides, erreurs, responsive, design, logo, icônes, couleurs, images, micro-interactions, textes. Tout ce qui fait qu'une app a l'air professionnelle.

Mais avoir l'air pro ne suffit pas. Il faut que l'expérience soit pro aussi. C'est ce qui fait la différence entre un utilisateur qui essaie ton app et un utilisateur qui reste.

Ce deuxième volet couvre trois piliers souvent négligés dans les apps vibe-codées : la performance, l'onboarding, et les emails.

1. La performance perçue

Ton app met 3 secondes à charger ? L'utilisateur est déjà parti. Mais la vraie performance, c'est celle que l'utilisateur ressent — et elle ne dépend pas que de la vitesse du serveur.

Les images non optimisées : l'IA ne compresse jamais les images. Résultat : des photos de 3 Mo qui mettent 5 secondes à charger. Utilise le format WebP, redimensionne à la bonne taille, ajoute un loading="lazy".
Le skeleton loading : au lieu d'un écran blanc pendant le chargement, affiche la structure de la page avec des placeholders gris. L'utilisateur sait que quelque chose arrive.
Le chargement progressif : affiche d'abord le contenu critique (texte, navigation), puis les éléments secondaires (images, widgets). L'utilisateur peut commencer à lire immédiatement.

Ce que tu peux faire maintenant : ouvre les DevTools (onglet Network), coche "Slow 3G", et navigue dans ton app. Tout ce qui prend plus de 3 secondes mérite ton attention.

2. L'onboarding

C'est le moment le plus critique de ton app. Un utilisateur qui s'inscrit et qui ne comprend pas quoi faire dans les 30 premières secondes... ne revient pas.

Les apps vibe-codées ont souvent le même problème : l'inscription marche, et ensuite l'utilisateur atterrit sur un dashboard vide. Aucune indication, aucun guide, aucune direction. Il est censé deviner.

Un prototype : inscription > dashboard vide > l'utilisateur se débrouille.

Un produit : inscription > l'utilisateur est pris par la main jusqu'à son premier "moment de valeur".

Ce que font les bons produits

Un message de bienvenue personnalisé. Pas juste "Bienvenue sur [App]". Quelque chose qui donne la direction : "Tu es à 3 étapes de [résultat concret]." L'utilisateur doit savoir immédiatement ce qu'il va obtenir et comment y arriver.

Une première action guidée. Ne laisse pas l'utilisateur choisir parmi 15 options. Propose-lui une seule chose à faire en premier. "Crée ton premier projet", "Ajoute ton premier produit", "Importe tes données". Un seul bouton, bien visible.

Un indicateur de progression. "Étape 1 sur 3" ou une barre de progression. C'est simple, mais ça change tout. L'utilisateur sait où il en est et combien il lui reste. Ça réduit l'abandon de manière significative.

Des exemples pré-remplis. Rien de pire qu'un formulaire avec 10 champs vides sans contexte. Montre un exemple concret. Pré-remplis les champs avec des données fictives. L'utilisateur comprend le format attendu et voit à quoi ressemblera le résultat.

Un email de bienvenue utile. Pas une confirmation d'inscription générique. Un email qui rappelle la première action à faire, avec un lien direct. "Tu t'es inscrit — voici comment démarrer en 2 minutes." Beaucoup d'utilisateurs s'inscrivent et ne reviennent que via cet email.

Les erreurs classiques

Trop de champs à l'inscription. Nom, prénom, entreprise, téléphone, adresse... L'utilisateur n'a pas encore vu ton produit et tu lui demandes sa vie. Email + mot de passe, c'est suffisant pour commencer. Tu demanderas le reste plus tard, quand il aura vu la valeur.
Un tour guidé de 12 étapes. Personne ne le lit. Personne ne le finit. Si tu as besoin de 12 étapes pour expliquer ton app, le problème c'est l'app, pas l'onboarding.
Zéro email après l'inscription. L'utilisateur s'inscrit, ferme l'onglet, oublie. Sans email de rappel, tu as perdu un lead.

Ce que tu peux faire maintenant : crée un nouveau compte sur ton app. Chronomètre le temps entre l'inscription et le moment où tu fais quelque chose d'utile. Si c'est plus de 60 secondes, simplifie le parcours. Ajoute un message de bienvenue, une première action claire, et un email de bienvenue.

3. Les emails transactionnels

C'est le truc le plus négligé des apps vibe-codées. Et c'est logique — quand tu construis ton app prompt par prompt, les emails sont le dernier de tes soucis. Sauf que pour ton utilisateur, un email c'est souvent le premier ou le dernier contact avec ton produit.

Un prototype : un email de confirmation d'inscription en texte brut, envoyé depuis noreply@vercel.app. Et c'est tout.

Un produit : une séquence d'emails pensée, avec un vrai expéditeur, un design cohérent avec l'app, et un objectif clair pour chaque message.

Les emails que ton app devrait envoyer

L'email de bienvenue (J+0). C'est le plus important. L'utilisateur vient de s'inscrire, il est encore chaud. L'email doit faire une seule chose : le ramener dans l'app pour sa première action. Pas de pavé de texte, pas de liste de fonctionnalités. Un rappel de la valeur, un bouton, c'est tout. "Tu t'es inscrit sur [App]. Crée ton premier [X] en 2 minutes." + un gros bouton.

Le rappel d'activation (J+2 ou J+3). L'utilisateur s'est inscrit mais n'a rien fait ? Relance-le. Pas de manière agressive — avec un angle utile. "Tu n'as pas encore créé ton premier [X]. Voici un exemple pour te lancer." C'est le mail qui récupère les 30 à 40 % d'inscrits qui avaient oublié.

La demande de feedback (J+7 ou J+14). L'utilisateur a commencé à utiliser ton app. C'est le moment de lui demander son avis. Pas un questionnaire de 20 questions — une seule question ouverte. "Qu'est-ce qui te manque le plus dans [App] ?" ou "Sur une échelle de 1 à 10, tu recommanderais [App] à un ami ?". Ces retours valent de l'or quand tu es en phase de lancement.

Les emails de cycle de vie. L'utilisateur atteint un palier ? Félicite-le. "Tu as créé ton 10e projet — bravo !" Il n'est pas revenu depuis 2 semaines ? Rappelle-lui ce qu'il manque. "Tu as 3 projets en cours — besoin d'un coup de main ?" Ces emails montrent que ton produit est vivant et que quelqu'un s'en occupe.

Ce qui fait la différence entre un email amateur et un email pro

L'expéditeur. noreply@app.com fait robot. thomas@app.com fait humain. Utilise un vrai prénom, même si c'est automatisé.
L'objet. "Bienvenue sur [App]" est générique. "Ton premier [X] t'attend" donne envie d'ouvrir.
Le design. Pas besoin d'un template complexe. Un email simple, avec ta couleur primaire, ton logo, et un bouton bien visible. La cohérence avec ton app suffit.
Le timing. Un email de bienvenue 3 heures après l'inscription, c'est trop tard. Envoie-le dans la minute. Le rappel à J+2, pas à J+15.
Le lien de désinscription. Obligatoire légalement, mais aussi un signal de confiance. Un lien visible en bas de chaque email.

Les outils pour commencer

Tu n'as pas besoin d'une plateforme d'email marketing pour envoyer 5 types d'emails. Les outils transactionnels simples suffisent :

Resend ou Postmark pour l'envoi technique (fiable, bonne délivrabilité)
React Email si tu veux coder tes templates en composants
Le système d'emails intégré de Supabase ou Auth.js pour les emails d'authentification

Le plus important, c'est de commencer. Un seul email de bienvenue bien fait a plus d'impact que zéro email.

Ce que tu peux faire maintenant : inscris-toi sur ta propre app avec une adresse perso. Regarde ce que tu reçois. Si la réponse est "rien" ou "un email moche en anglais technique", c'est ta priorité de la semaine.

La checklist complète "prototype vers produit"

Tu n'as pas besoin de tout faire d'un coup. Priorise ce qui a le plus d'impact pour tes utilisateurs. Cette checklist couvre les deux articles — le look & feel et l'expérience utilisateur.

Priorité 1 — L'essentiel (fais-le aujourd'hui)

Les erreurs sont affichées en langage humain
La page 404 est personnalisée
Les formulaires valident les champs et affichent les erreurs
Les boutons ont un état loading
L'app est utilisable sur mobile

Priorité 2 — Le professionnel (cette semaine)

Priorité 3 — Le polish (quand le reste est fait)

Les transitions et animations sont fluides
Les skeleton loaders remplacent les écrans blancs
Les hover/focus states sont en place partout
La performance est testée en 3G
Une demande de feedback est envoyée à J+7
Des emails de cycle de vie marquent les paliers

Le résultat

Combine le look professionnel avec une expérience utilisateur soignée, et ton app ne ressemble plus à un prototype. Elle ressemble à un produit que les gens prennent au sérieux — et pour lequel ils sont prêts à payer.

Si tu veux un regard extérieur sur ton app avant de la lancer — découvre l'offre Audit. On passe en revue chaque point de cette checklist, on identifie les quick wins, et on te donne un plan d'action concret.

Inscris-toi à la newsletter pour recevoir des conseils comme celui-ci chaque semaine.