L'autocomplétion améliore-t-elle les conversions ?

La réponse courte

Oui, significativement. L’autocomplétion réduit le temps de checkout de 30-50% et diminue les erreurs de saisie de 80%.

Impact mesuré

Métrique	Sans autocomplétion	Avec autocomplétion
Temps de saisie	100%	50-70%
Erreurs d’adresse	10-15%	2-3%
Taux d’abandon	Référence	-15 à -25%
Expéditions échouées	5-8%	1-2%

Types d’autocomplétion

1. Autocomplétion d’adresse

La plus impactante. Le client tape les premiers caractères et l’adresse complète apparaît.

[12 rue de la P...]
 ├─ 12 rue de la Paix, 75002 Paris
 ├─ 12 rue de la Paix, 69001 Lyon
 └─ 12 rue de la Pompe, 75016 Paris

2. Autocomplétion du navigateur

Le navigateur propose les données sauvegardées :

• Nom, prénom
• Email
• Adresse
• Numéro de carte

Activation : Utilisez les bons attributs autocomplete :

<input name="name" autocomplete="name">
<input name="email" autocomplete="email">
<input name="street" autocomplete="street-address">
<input name="postal" autocomplete="postal-code">
<input name="city" autocomplete="address-level2">

3. Autocomplétion de carte bancaire

Apple Pay, Google Pay, et les navigateurs proposent les cartes enregistrées.

<input name="cc-number" autocomplete="cc-number">
<input name="cc-exp" autocomplete="cc-exp">
<input name="cc-csc" autocomplete="cc-csc">

4. Autocomplétion ville/CP

Le code postal remplit automatiquement la ville (et inversement).

// Quand le code postal change
document.getElementById('cp').addEventListener('change', async (e) => {
  const cp = e.target.value;
  const ville = await fetchCityFromPostalCode(cp);
  document.getElementById('ville').value = ville;
});

Implémentation

Google Places Autocomplete

// Chargez l'API
<script src="https://maps.googleapis.com/maps/api/js?key=VOTRE_CLE&libraries=places"></script>

// Initialisez
const input = document.getElementById('adresse');
const autocomplete = new google.maps.places.Autocomplete(input, {
  types: ['address'],
  componentRestrictions: { country: 'fr' }
});

// Récupérez les données
autocomplete.addListener('place_changed', () => {
  const place = autocomplete.getPlace();

  // Remplissez les champs
  for (const component of place.address_components) {
    if (component.types.includes('postal_code')) {
      document.getElementById('cp').value = component.long_name;
    }
    if (component.types.includes('locality')) {
      document.getElementById('ville').value = component.long_name;
    }
  }
});

Alternatives à Google

Service	Avantages
Algolia Places	Gratuit jusqu’à 1000 req/jour
HERE	Bonne couverture Europe
La Poste API	Spécifique France, gratuit
Mapbox	Alternative économique

Bonnes pratiques

1. Ne bloquez pas la saisie manuelle

L’autocomplétion doit être une aide, pas une obligation. Certaines adresses ne sont pas dans les bases.

2. Affichez la suggestion au bon moment

• Après 2-3 caractères tapés
• Avec un délai de 150-300ms (évite trop de requêtes)

3. Permettez la navigation au clavier

• ↑↓ pour naviguer dans les suggestions
• Entrée pour sélectionner
• Échap pour fermer

4. Style clair

.autocomplete-suggestion {
  padding: 10px;
  cursor: pointer;
}

.autocomplete-suggestion:hover,
.autocomplete-suggestion.active {
  background: #f0f0f0;
}

Erreurs courantes

1. Désactiver l’autocomplete navigateur : autocomplete="off" frustre les utilisateurs
2. Suggestions trop lentes : Perdent l’utilisateur
3. Pas de fallback : Si l’API échoue, le formulaire devient inutilisable
4. Suggestions non pertinentes : Adresses US sur un site FR

ROI de l’autocomplétion

Coût	Bénéfice
Google Places : ~3€/1000 requêtes	-15% d’abandons
Développement : quelques heures	-80% d’erreurs livraison
Maintenance : faible	Meilleure expérience

Pour un site avec 10 000 commandes/mois et 5% d’erreurs d’adresse, corriger ces erreurs coûte environ 2-5€/erreur (SAV, réexpédition).

Économie : 500 erreurs × 3€ = 1 500€/mois