Phase 1 — Clarification du projet
Principe clé
« Si vous ne savez pas où vous allez, n'importe quel chemin vous y mènera. » — Lewis Carroll
Avant d'écrire une seule ligne de code, vous devez savoir exactement ce que vous construisez et pour qui.
Pourquoi clarifier ?
L'erreur n°1 : foncer dans le code
« Je commence et je verrai bien. » — c'est la phrase qui coûte le plus de temps.
| Élève A — fonce | Élève B — clarifie | |
|---|---|---|
| Jour 5 | Le client veut tout changer | Commence à coder avec un plan clair |
| Jour 10 | Recommence de zéro | Site terminé et validé |
| Résultat | 😰 Stress et retard | 😎 Livré à temps |
Selon Steve Krug (Don't Make Me Think), la clarté des objectifs est la base de tout projet web réussi.
Les 4 questions fondamentales
1. Quel est le but du site ?
Définissez en une phrase l'objectif principal. Formule : « Permettre à [qui] de [faire quoi] pour [quel résultat] ».
Exemples — formulation par projet
Pizza Mario :
- ✅ Permettre aux clients de consulter le menu et commander en ligne pour le take-away
- ❌ Faire un site pour la pizzeria
Portfolio développeur :
- ✅ Montrer mes 5 meilleurs projets pour décrocher un stage de développeur web
- ❌ Faire un site pour montrer mes trucs
Boutique artisanale :
- ✅ Permettre aux clients de commander des bijoux faits main et de payer en ligne
- ❌ Vendre des trucs sur internet
La bonne version est mesurable et précise — on peut vérifier si l'objectif est atteint.
2. Qui sont les utilisateurs cibles ?
Plus vous les connaissez, mieux vous répondez à leurs besoins.
| Question | À définir |
|---|---|
| Âge | Enfants, adolescents, adultes, seniors ? |
| Niveau technique | Novices, intermédiaires, experts ? |
| Contexte d'utilisation | Bureau, transport, domicile ? |
| Appareil principal | Mobile, tablette, ordinateur ? |
| Motivations | Pourquoi viennent-ils sur le site ? |
| Freins potentiels | Qu'est-ce qui pourrait les décourager ? |
Ne dites pas « tout le monde »
Un site pour tout le monde est un site pour personne. Identifiez votre cible principale.
Exemples — personas par projet
Pizza Mario — Luca, 25 ans, employé de bureau à 5 min de la pizzeria
- Niveau : à l'aise mobile, commande sur Uber Eats
- Objectif : commander pendant la pause de midi, récupérer en passant
- Frustrations : menus PDF illisibles, devoir téléphoner en open space
- Appareil : smartphone (90%)
Portfolio dev — Thomas, 38 ans, responsable technique en PME
- Niveau : expert (développeur lui-même)
- Objectif : évaluer rapidement un candidat junior
- Frustrations : portfolios sans code source, projets non déployés, pas de GitHub
- Appareil : laptop au bureau
Boutique artisanale — Claire, 30 ans, amatrice de bijoux faits main
- Niveau : achète sur Etsy/Instagram
- Objectif : trouver un bijou original, voir matériaux et taille, payer en ligne
- Frustrations : photos floues, frais cachés, pas de retour possible
- Appareil : smartphone (Instagram → boutique)
3. Quelles fonctionnalités ?
Listez toutes les fonctionnalités, puis priorisez avec la méthode MoSCoW :
| Priorité | Signification | Exemple |
|---|---|---|
| 🔴 Must have | Indispensable — le site ne fonctionne pas sans | Afficher les produits |
| 🟠 Should have | Important — améliore significativement | Filtrer par catégorie |
| 🟢 Could have | Souhaitable — bonus si le temps le permet | Mode sombre |
| ⚪ Won't have | Reporté — pas dans cette version | Blog, forum |
« Won't » ne veut pas dire « jamais »
Prioriser, c'est accepter de reporter à une V2. La livraison de Pizza Mario sera ajoutée quand Mario aura embauché un livreur.
Exemples — listes MoSCoW par projet
Pizza Mario
| Fonctionnalité | Priorité | Justification |
|---|---|---|
| Afficher le menu avec les prix | 🔴 Must | Raison n°1 de la visite |
| Commander en ligne (take-away) | 🔴 Must | Objectif principal |
| Horaires et adresse | 🔴 Must | Info de base |
| Choisir l'heure de retrait | 🟠 Should | Évite l'attente |
| Paiement en ligne | 🟠 Should | Confort client |
| Galerie photos des pizzas | 🟢 Could | Donne envie |
| Programme de fidélité | ⚪ Won't | Trop complexe pour la V1 |
| Livraison à domicile | ⚪ Won't | Pas de livreur |
Portfolio développeur
| Fonctionnalité | Priorité | Justification |
|---|---|---|
| Page d'accueil avec présentation | 🔴 Must | Première impression |
| Galerie de projets | 🔴 Must | C'est le but du site |
| Page de contact | 🔴 Must | Permettre le recrutement |
| Liens GitHub/LinkedIn | 🟠 Should | Crédibilité pro |
| Mode sombre | 🟢 Could | Plaisant mais pas essentiel |
| Blog technique | ⚪ Won't | Demande trop de contenu régulier |
Boutique artisanale
| Fonctionnalité | Priorité | Justification |
|---|---|---|
| Catalogue avec photos | 🔴 Must | Les clients doivent voir les produits |
| Panier et paiement en ligne | 🔴 Must | Objectif principal |
| Page « À propos » (artisan) | 🟠 Should | Crée la confiance |
| Avis clients | 🟢 Could | Rassure mais pas bloquant |
| Newsletter | ⚪ Won't | Pas assez de contenu pour la V1 |
4. Quelles contraintes ?
| Type | Questions à se poser |
|---|---|
| Temps | Deadline ? Heures disponibles ? |
| Budget | Hébergement, outils, images ? |
| Technique | Quelles technologies imposées/disponibles ? |
| Contenu | Qui fournit textes, images, données ? |
| Légal | RGPD, mentions légales, droits d'auteur ? |
| Accessibilité | Niveau WCAG (A, AA, AAA) ? |
Exemples — contraintes par projet
Pizza Mario (projet scolaire, 4 sem., 40h)
- Budget : 0 CHF — Technologies : HTML/CSS/JS imposés
- Contenu : photos fournies (qualité moyenne, à recadrer), menu PDF à convertir
- Légal : formulaire de commande → mentions légales obligatoires
- Accessibilité : WCAG AA minimum
- 🔍 Contrainte cachée : Mario met à jour son menu chaque saison → structure facilement modifiable
Portfolio dev (2 sem., 20h)
- Budget : 0 CHF (GitHub Pages) — Technologies : libres
- Contenu : captures à préparer, textes à rédiger soi-même
- Légal : mentions légales, licence des projets open-source
- Accessibilité : WCAG AA (bon signal pour un recruteur)
Boutique artisanale (6 sem., 60h)
- Budget : ~50 CHF/an (domaine + hébergement) — Technologies : HTML/CSS/JS + Stripe
- Contenu : photos à prendre soi-même (fond blanc), descriptions à rédiger
- Légal : CGV obligatoires, droit de rétractation 14j, RGPD (paiement)
- Accessibilité : WCAG AA
- 🔍 Contrainte cachée : chaque bijou est unique → système de stock « disponible / vendu »
Critères de succès
« Comment saurons-nous que le projet est réussi ? » Sans critères clairs, impossible de mesurer si le site atteint ses objectifs.
La méthode SMART
| Lettre | Signification | ❌ Mauvais | ✅ Bon |
|---|---|---|---|
| S | Spécifique | « Le site est rapide » | « La page d'accueil charge en moins de 3 secondes » |
| M | Mesurable | « Les gens aiment le site » | « Le score SUS est supérieur à 70/100 » |
| A | Atteignable | « 100% des utilisateurs commandent » | « 60% trouvent le menu en moins de 10 secondes » |
| R | Réaliste | « Zéro bug » | « Aucune erreur critique en production » |
| T | Temporel | « Un jour on aura des avis » | « 5 avis clients dans les 2 premières semaines » |
Comment rédiger ses critères
- Reprenez chaque fonctionnalité Must have → 1 critère minimum
- Formulez avec un chiffre (temps, %, score)
- Précisez comment vérifier (outil, test, nb personnes)
- « Le site est beau » n'est pas un critère — remplacez par : « 4 testeurs sur 5 qualifient le design de professionnel (test 5 secondes) »
Exemples — critères SMART par projet
Pizza Mario
| Critère | Comment vérifier |
|---|---|
| Commander une pizza en moins de 2 min (du menu au panier validé) | Chronométrer 5 personnes |
| 80% des testeurs trouvent les horaires sans aide | Test : « Trouvez les horaires du samedi » |
| Page d'accueil < 3s sur mobile 4G | Google Lighthouse |
| Menu lisible sans zoomer sur 375px | Test mobile réel |
| Allergènes visibles pour chaque pizza | Vérifier chaque fiche |
| Bouton « Commander » visible sans scroller sur mobile | Screenshots 3 tailles |
| Contrastes WCAG AA | WebAIM Contrast Checker |
Portfolio développeur
| Critère | Comment vérifier |
|---|---|
| Voir les 5 projets et me contacter en < 60s | Test avec 3 personnes |
| Lighthouse > 90 sur les 4 métriques | Google Lighthouse |
| Affichage correct sur Chrome/Firefox/Safari | Test 3 navigateurs |
| Chaque projet a GitHub + démo en ligne | Vérifier chaque lien |
Boutique artisanale
| Critère | Comment vérifier |
|---|---|
| Ajouter au panier et payer en < 3 min | Chronométrer 5 personnes |
| Photos chargent en < 2s sur mobile | Lighthouse + throttling 4G |
| 90% des testeurs comprennent la démarche en 5s | Test première impression |
| Panier affiche un récapitulatif clair avant paiement | Tester le parcours complet |
Document de cadrage
Rassemblez les réponses aux 4 questions + les critères de succès dans un document de cadrage. C'est le contrat entre vous et votre projet — tout ce qui n'y est pas n'existe pas.
Exercice — Rédigez votre document de cadrage.
Remplir ma fiche de cadrageLes 10 heuristiques de Nielsen
Ces 10 principes d'utilisabilité de Jakob Nielsen guident toutes les décisions, de la clarification à la livraison. Gardez-les en tête dès cette phase.
Voir les 10 heuristiques
- Visibilité de l'état du système — L'utilisateur sait toujours où il en est (barre de progression)
- Correspondance avec le monde réel — Langage familier (icône panier)
- Contrôle et liberté — Annuler et revenir en arrière (bouton « Annuler »)
- Cohérence et standards — Suivre les conventions (logo = retour accueil)
- Prévention des erreurs — Anticiper (calendrier pour choisir une date)
- Reconnaissance plutôt que rappel — Options visibles (menu toujours visible)
- Flexibilité et efficacité — Raccourcis pour experts (Ctrl+S)
- Design minimaliste — Ne montrer que l'essentiel (Google)
- Aide à la récupération d'erreurs — Messages clairs (« Email invalide »)
- Aide et documentation — Disponible si nécessaire (FAQ)
Checklist de la Phase 1
- L'objectif du site est défini en une phrase claire
- Le public cible est identifié (persona créé)
- Les fonctionnalités sont listées et priorisées (MoSCoW)
- Les contraintes sont documentées (temps, budget, technique)
- Les critères de succès sont définis (SMART)
- Le document de cadrage est rédigé
Prochaine étape
Une fois le projet clarifié, passez à la Phase 2 — Card Sorting pour organiser l'information de votre site.