Lorsque j’ai esquissé la mise en page d’une boutique de café fictive en 2014, il semblait logique de décrire l’en-tête, la page d’accueil, la catégorie et la fiche produit presque comme des éléments de construction : logo à gauche, panier à droite, filtres ici, bouton d’achat là.
Les attentes fondamentales des utilisateurs n’ont pas beaucoup changé. Le contexte, lui, a changé : la plupart des designs doivent fonctionner sur mobile, les offres sont plus complexes et chaque script supplémentaire pèse sur la vitesse et l’attention. Je ne recommande donc plus de copier aveuglément une mise en page. Je recommande de parcourir les tâches des clients.
L’en-tête doit orienter, pas afficher toutes les options
Dans l’en-tête, les utilisateurs cherchent la marque, la navigation, la recherche, le compte et le panier. Ces éléments n’ont pas tous besoin du même niveau de visibilité. La priorité varie selon le catalogue et l’étape d’achat.
- Le logo ramène à l’accueil et possède un nom textuel compréhensible.
- La recherche est facile à atteindre lorsque les utilisateurs connaissent un produit ou un paramètre.
- Le panier affiche son état et ne disparaît pas après l’ajout d’un article.
- Le contact ou l’aide est facile à trouver sans concurrencer l’achat.
- Le menu fonctionne au toucher, au clavier et sans viser précisément avec la souris.
Un menu tiroir peut aider pour un catalogue étendu. Avec dix catégories, il constitue souvent simplement un obstacle impressionnant. Google recommande de rendre les catégories et les produits accessibles par des liens de navigation ordinaires ; la recherche seule peut ne pas exposer tout le catalogue aux robots. Les principes sont décrits dans la documentation sur la structure des sites e-commerce.
La page d’accueil doit répartir le trafic, pas raconter tout le catalogue
Sur la page d’accueil, je dois comprendre rapidement ce que vend la boutique, à qui elle s’adresse et où continuer. Plutôt qu’un carrousel automatique, je préfère une priorité claire et plusieurs accès stables aux principales situations d’achat.
Les meilleures ventes peuvent aider, tout comme les catégories saisonnières, les conseils ou une raison de faire confiance à la boutique. Chaque bloc doit avoir une fonction. « Pour que la page ne soit pas vide » n’en est pas une.
Une catégorie aide à réduire le choix
Une catégorie n’est pas un texte SEO collé au-dessus d’une grille de produits. C’est un outil d’aide à la décision. Son nom et sa courte introduction définissent l’offre, les filtres affinent le choix et le tri aide à répondre à la situation du client.
- Nommez les filtres dans le langage des clients, pas avec les champs de la base de données interne.
- Affichez les choix actifs après le filtrage et rendez-les faciles à supprimer.
- Présentez les sous-catégories importantes sous forme de liens, pas seulement comme des valeurs de script.
- Affichez les données de liste nécessaires à la comparaison ; placez le reste dans la fiche détaillée.
- Un résultat vide doit proposer un moyen de revenir en arrière, pas une impasse.
Les fils d’Ariane aident les utilisateurs à comprendre leur position dans le catalogue et peuvent aider les moteurs de recherche à comprendre la hiérarchie. Si vous utilisez des données structurées, suivez la documentation actuelle de Google sur les fils d’Ariane.
La fiche produit doit répondre aux questions avant et après le bouton
Un bouton « Ajouter au panier » visible est une base, pas toute la fiche. Avant de décider, les utilisateurs ont besoin du nom, du prix, de la variante, de la disponibilité, de la livraison, des retours, de photos et d’informations adaptées au risque lié à l’achat.
Pour le café, l’origine, les arômes, la torréfaction, le poids et la préparation comptent. Pour une perceuse, les spécifications, la compatibilité et le service comptent davantage. Il n’existe pas d’ordre universel. Mais une question est universelle : que doit savoir le client pour acheter la bonne variante et ne pas la retourner plus tard ?
Les avis doivent être crédibles et concerner le produit précis. Les produits recommandés doivent accompagner le choix, pas détourner quelqu’un d’un achat presque terminé. Un bouton social sur une fiche produit n’est toujours pas une priorité. Nous devrions avoir dépassé l’époque où un bouton « J’aime » était la réponse à tout.
Le panier et le paiement doivent supprimer les mauvaises surprises
Le panier doit permettre de modifier les quantités et les variantes, ainsi que de supprimer des articles. Affichez le prix total, les frais de livraison et la date de livraison le plus tôt possible, pas après la troisième étape et la création d’un compte.
Le paiement en tant qu’invité est souvent un choix par défaut pertinent. Si un compte apporte une réelle valeur, proposez-le après la commande. Les formulaires ont besoin de libellés corrects, du remplissage automatique et d’erreurs expliquant quoi corriger. Les zones tactiles doivent être suffisamment grandes ; le critère actuel est décrit dans le WCAG 2.2 sous Taille de la cible.
Mesurez les tâches, pas la couleur des boutons
Les tests A/B peuvent être utiles lorsqu’une entreprise dispose d’un trafic suffisant, d’une hypothèse et d’un indicateur décisif. Modifier les bannières chaque semaine sans échantillon suffisant relève du terrain de jeu, pas d’une conclusion fiable.
Je suis l’utilisation de la recherche et des filtres, les ajouts au panier, les erreurs de formulaire, les abandons à chaque étape, les retours et les questions adressées au support. Je complète les chiffres en observant les utilisateurs et leurs questions. Les outils d’analyse montrent où ; une personne explique souvent pourquoi.
La base de la mesure se trouve dans Google Analytics 4. J’aborde les vérifications de performance dans Comment accélérer un site web.
Une boutique en ligne n’a pas besoin d’être originale dans l’emplacement de son panier. Elle doit être convaincante sur la raison d’acheter ce produit ici.
Pour les arguments des pages produit et commerciales, poursuivez avec Les éléments importants d’une page de vente. Les bases complètes d’un site web se trouvent dans Comment démarrer un projet web.