# Template Notion — 58 patterns de design de formulaires

> Inventaire complet des 58 patterns benchmarkés par LFDN sur 12 A/B tests menés entre mai 2025 et avril 2026 (1,4 M sessions, 84 000 soumissions). Classement par palier d'impact + effort + risque + secteur.

---

## Comment utiliser ce template

> 💡 Dupliquez cette page Notion. Filtrez par **Palier** pour identifier vos quick wins (Haut) puis vos polish (Moyen / Polish). Évitez les Anti-patterns. Chaque pattern porte un delta conversion estimé (% min → % max).

### Légende paliers

- **Haut** : delta > 8 % (10 patterns)
- **Moyen** : delta 3 à 8 % (au moins 18 patterns)
- **Polish** : delta < 3 % (à cumuler 3 ensemble pour atteindre +5 %)
- **Anti-pattern** : delta négatif ou neutre

---

## Top 10 patterns "haut impact" (delta > 8 %)

| # | Pattern | Delta min | Delta max | Effort dev (h) | Risque | Secteur |
|---|---|---|---|---|---|---|
| 1 | Single-column layout | +8 % | +18 % | 2 | Faible | Tous |
| 2 | Inline validation au blur | +9 % | +14 % | 4 | Moyen | Tous |
| 3 | Smart defaults (géo, locale) | +7 % | +13 % | 3 | Faible | Tous |
| 4 | Social login (Google, Apple, MS) | +8 % | +22 % | 8 | Moyen | SaaS |
| 5 | Suppression des champs non essentiels | +6 % | +16 % | 2 | Faible | Tous |
| 6 | Floating labels | +5 % | +11 % | 3 | Faible | Tous |
| 7 | Mot de passe révélable | +4 % | +10 % | 1 | Faible | SaaS |
| 8 | CTA explicite (verbe d'action) | +6 % | +12 % | 1 | Faible | Tous |
| 9 | Progress indicator multi-step | +7 % | +14 % | 5 | Moyen | Devis |
| 10 | Auto-focus premier champ desktop | +4 % | +9 % | 1 | Faible | Tous |

---

## Patterns "moyen impact" (delta 3 à 8 %)

| Pattern | Delta min | Delta max | Effort dev | Secteur |
|---|---|---|---|---|
| Inputmode mobile (tel, email, numeric) | +3 % | +7 % | 1 h | Mobile |
| Adaptive placeholder vs label persistant | +3 % | +6 % | 2 h | Tous |
| Bouton submit sticky sur mobile | +3 % | +8 % | 2 h | Mobile |
| Error summary en haut de page | +3 % | +6 % | 3 h | Long formulaire |
| Save-and-resume (état persisté) | +4 % | +8 % | 8 h | Long formulaire |
| Préremplissage adresse via API postale | +3 % | +7 % | 5 h | E-commerce |
| Champ password unique (vs confirmation) | +3 % | +6 % | 1 h | SaaS |
| Touch targets ≥ 44px | +3 % | +7 % | 1 h | Mobile |
| Sélecteur de pays via autocomplétion | +3 % | +6 % | 4 h | International |
| Format téléphone international (libphonenumber) | +3 % | +7 % | 4 h | International |
| Suggestion email correctif (mailcheck.js) | +3 % | +6 % | 2 h | Tous |
| Captcha invisible (Turnstile) | +3 % | +5 % | 3 h | Tous |
| Conditional fields | +3 % | +8 % | 4 h | Devis |
| Microcopy contextuelle | +3 % | +7 % | 0 h dev / 4 h design | Devis |
| Date picker natif | +3 % | +6 % | 1 h | Rdv |
| Slider numérique | +3 % | +5 % | 2 h | Simulateur |

---

## Patterns "polish" (delta < 3 %)

> 📌 Cumulez-en 3 pour viser un +5 % consolidé. Idéal en phase 2 d'optimisation.

- Animation focus subtle (border-color)
- Loader sur submit (feedback)
- Success state (toast ou inline)
- Skeleton loading pour champs async
- Étoiles obligatoires en rouge
- Helper text sous le label
- Tabindex cohérent
- Champ recherche autocomplétion typeahead
- Bouton retour étape (multi-step)
- Hover state CTA
- Icônes de validation inline (check / cross)
- Footer rassurance (RGPD, lock SSL)
- Step-by-step animé (transition slide)
- Confirmation email post-submit
- Preview avant submit (étape récap)
- Couleur d'accent cohérente avec marque
- Espacements verticaux ≥ 16 px entre champs
- Typographie système (zero CLS)

---

## 5 anti-patterns à bannir

> ⚠️ Ces patterns produisent un delta négatif documenté sur les A/B tests LFDN.

| Anti-pattern | Delta | Pourquoi |
|---|---|---|
| Placeholder en lieu et place du label | -3 % à -8 % | L'utilisateur oublie ce qu'on lui demande dès qu'il commence à taper |
| Validation au keyup | -2 % à -6 % | Erreurs en cours de frappe infantilisent |
| Double saisie mot de passe | -2 % à -5 % | Double friction sans gain |
| Captcha visible (image) | -4 % à -10 % | Saut de friction massif |
| Message d'erreur générique | -3 % à -7 % | "Champ invalide" ne dit pas quoi corriger |

---

## Plan A/B test (database mock)

| Test ID | Pattern testé | Variante A (contrôle) | Variante B | Trafic / mois | Durée prévue (semaines) | MDE atteignable | Outil | Statut |
|---|---|---|---|---|---|---|---|---|
| AB-01 | Single-column layout | 2 colonnes | 1 colonne | 18 000 | 4 | 7 % | GrowthBook | À lancer |
| AB-02 | Inline validation au blur | Validation submit | Validation blur | 22 000 | 3 | 6 % | VWO | À lancer |
| AB-03 | Smart defaults | Champs vides | Pays préselectionné FR | 35 000 | 3 | 5 % | GrowthBook | À lancer |
| AB-04 | Social login | Email + password | + Google + Apple | 12 000 | 5 | 8 % | GrowthBook | Backlog |
| AB-05 | Floating labels | Label statique | Floating label | 28 000 | 3 | 5 % | VWO | Terminé |
| AB-06 | Mot de passe révélable | Caché par défaut | Bouton œil | 15 000 | 3 | 6 % | GrowthBook | Terminé |
| AB-07 | Progress indicator | Aucun | Stepper 1/4 → 4/4 | 9 000 | 5 | 8 % | VWO | À lancer |
| AB-08 | Sticky submit mobile | Submit en fin de form | CTA sticky bas | 19 000 | 3 | 6 % | GrowthBook | À lancer |
| AB-09 | Microcopy contextuelle | Pas d'aide | "Pourquoi cette info ?" | 11 000 | 4 | 7 % | GrowthBook | Backlog |
| AB-10 | Captcha invisible | reCAPTCHA visible | Turnstile invisible | 24 000 | 3 | 5 % | VWO | Terminé |

---

## Méthodologie LFDN

> 💡 Outils utilisés : Google Optimize (jusqu'à sa sunset), VWO, puis GrowthBook self-hosted.
> 
> **Sample** : 12 sites annonceurs, secteurs SaaS B2B, e-commerce DTC, prise de rendez-vous médical, simulateurs financiers.
> 
> **Volumétrie** : 1,4 M sessions, 84 000 soumissions, 12 mois (mai 2025 → avril 2026).

### Critères mesurés par pattern

- **Delta conversion estimé** (en %), borne basse → borne haute selon secteur
- **Effort dev** (en heures, dev mid-level front)
- **Effort design** (en heures, designer senior)
- **Risque de régression** (faible / moyen / élevé) si mal implémenté

---

> 📎 Template fait par l'équipe éditoriale LFDN. Le tableur source complet (58 patterns détaillés + captures avant/après + deltas par secteur) est disponible en Excel et Sheets.