[Feature] Onboarding / tutoriel interactif au premier usage #28

New issue

Open

opened 2026-08-05 11:05:42 -04:00 by NixCyRy · 0 comments

NixCyRy commented

2026-08-05 11:05:42 -04:00

(Migrated from github.com)

Problème

Un nouvel utilisateur arrive sur l'application sans aucun guide. Après inscription, il voit l'app complète :

Pas d'explication sur Suivi vs Planification
Pas d'info sur vue Avancée vs Simplifiée
Pas de tutoriel sur comment utiliser les cases/coches
Pas d'explication des codes couleur (vert = objectif atteint, rouge = reste)

Solution

Tour guidé interactif au premier login (détecté via localStorage ou flag utilisateur en DB) :

Tooltip sur le toggle Suivi/Planification — « Choisissez comment vous voulez utiliser NutriFood »
Tooltip sur vue Avancé/Simplifié — « Basculez entre la vue détaillée et simplifiée »
Highlight d'une catégorie — « Cliquez sur un aliment pour l'ajouter à votre semaine »
Tooltip sur le dashboard nutritionnel — « Suivez vos objectifs en temps réel »
Tooltip sur la liste d'épicerie — « Générez votre liste automatiquement »

Bouton « Passer le tutoriel » + option « Revoir le tutoriel » dans le menu.

Librairie suggérée : Driver.js (vanilla JS, 5KB) ou implémentation manuelle (tooltips CSS + overlays).

Sévérité

P2 — Important pour la rétention des nouveaux utilisateurs.

## Problème Un nouvel utilisateur arrive sur l'application sans aucun guide. Après inscription, il voit l'app complète : - Pas d'explication sur Suivi vs Planification - Pas d'info sur vue Avancée vs Simplifiée - Pas de tutoriel sur comment utiliser les cases/coches - Pas d'explication des codes couleur (vert = objectif atteint, rouge = reste) ## Solution Tour guidé interactif au premier login (détecté via `localStorage` ou flag utilisateur en DB) : 1. **Tooltip sur le toggle Suivi/Planification** — « Choisissez comment vous voulez utiliser NutriFood » 2. **Tooltip sur vue Avancé/Simplifié** — « Basculez entre la vue détaillée et simplifiée » 3. **Highlight d'une catégorie** — « Cliquez sur un aliment pour l'ajouter à votre semaine » 4. **Tooltip sur le dashboard nutritionnel** — « Suivez vos objectifs en temps réel » 5. **Tooltip sur la liste d'épicerie** — « Générez votre liste automatiquement » Bouton « Passer le tutoriel » + option « Revoir le tutoriel » dans le menu. Librairie suggérée : [Driver.js](https://driverjs.com/) (vanilla JS, 5KB) ou implémentation manuelle (tooltips CSS + overlays). ## Sévérité P2 — Important pour la rétention des nouveaux utilisateurs.