Faut-il afficher une barre de progression dans le checkout ?

La réponse courte

Oui, pour les checkouts multi-étapes. La barre de progression réduit l’incertitude et encourage à terminer.

Pourquoi ça fonctionne

1. Réduit l’incertitude

Sans indication, le client se demande :

• “Combien d’étapes reste-t-il ?”
• “Combien de temps ça va prendre ?”
• “Où en suis-je ?“

2. Effet d’engagement

Une fois engagé (étape 2/3), le client veut terminer ce qu’il a commencé.

3. Sentiment de contrôle

Le client sait exactement où il en est et ce qui l’attend.

Types de barres de progression

1. Étapes numérotées

Étape 1/3        Étape 2/3        Étape 3/3
[●]──────────────[○]──────────────[○]
Livraison        Paiement         Confirmation

2. Barre visuelle

[████████████░░░░░░░░░░░░░░░░░░] 40%

3. Breadcrumb

Panier > Livraison > Paiement > Confirmation
          ↑ Vous êtes ici

4. Points/Cercles

(●)────(●)────(○)────(○)
 ↑      ↑
Fait   En cours

Design recommandé

Le format le plus efficace

┌─────────────────────────────────────────────────┐
│                                                 │
│     ①          ②          ③          ④         │
│   ─●──────────●──────────○──────────○─         │
│  Panier    Livraison   Paiement   Confirmation  │
│              ✓            ↑                     │
│                      Vous êtes ici              │
│                                                 │
└─────────────────────────────────────────────────┘

Éléments à inclure

Élément	Recommandation
Numéro d’étape	✅ Oui
Nom de l’étape	✅ Oui
Étapes passées	✅ Marquées comme complétées
Étape actuelle	✅ Mise en évidence
Étapes futures	✅ Grisées/discrètes
Retour aux étapes précédentes	✅ Cliquable

Implémentation

HTML/CSS simple

<div class="checkout-progress">
  <div class="step completed">
    <span class="step-number">1</span>
    <span class="step-name">Panier</span>
  </div>
  <div class="step active">
    <span class="step-number">2</span>
    <span class="step-name">Livraison</span>
  </div>
  <div class="step">
    <span class="step-number">3</span>
    <span class="step-name">Paiement</span>
  </div>
</div>

.checkout-progress {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.step {
  flex: 1;
  text-align: center;
  position: relative;
}

.step::after {
  content: '';
  position: absolute;
  top: 15px;
  right: -50%;
  width: 100%;
  height: 2px;
  background: #ddd;
}

.step.completed::after {
  background: #28a745;
}

.step-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ddd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.step.completed .step-number {
  background: #28a745;
  color: white;
}

.step.active .step-number {
  background: #007bff;
  color: white;
}

Quand NE PAS utiliser

• Checkout une page : Tout est visible, pas besoin
• 1-2 étapes seulement : Surcharge visuelle inutile
• Mobile avec scroll : Peut prendre trop de place

Bonnes pratiques

1. Maximum 4-5 étapes

Au-delà, le processus semble trop long.

2. Noms d’étapes clairs

• ✅ “Livraison”, “Paiement”, “Confirmation”
• ❌ “Étape 1”, “Étape 2”, “Étape 3”

3. Permettre le retour

Les étapes passées doivent être cliquables pour modifier les infos.

4. Position fixe

Sur mobile, la barre peut rester visible en haut (sticky).

Impact mesuré

Métrique	Sans progression	Avec progression
Taux de complétion	Référence	+5-15%
Temps ressenti	”Long"	"Rapide”
Satisfaction	Standard	Meilleure

Alternative : le récapitulatif d’étape

Au lieu d’une barre, affichez un résumé des étapes précédentes :

┌─────────────────────────────────────┐
│  ✓ Livraison                        │
│    12 rue de la Paix                │
│    75002 Paris            [Modifier]│
├─────────────────────────────────────┤
│  → Paiement (étape actuelle)        │
│    ...                              │
└─────────────────────────────────────┘