Exemple pédagogique
À quoi ressemble un rapport UXClarity
Voici la structure du livrable réel : indice de clarté, synthèse, quatre piliers, pastilles sur le premier écran, plan CRO. La boutique ci-dessous est fictive. Aucun chiffre de ventes, aucun taux de conversion inventé.
Exemple pédagogique. Boutique fictive « Atelier Nord ». Ce n’est pas un audit d’un site existant, ni un benchmark sectoriel.
Atelier Nord — fiche produit (fictive)
Le visiteur comprend qu’il s’agit de vêtements, mais l’achat n’est pas évident au premier coup d’œil : le bouton est bas, le prix se noie dans les variantes, et la rassurance n’apparaît qu’après un long scroll. La page demande trop d’effort pour une décision simple.
Pourquoi les visiteurs quittent la page sans acheter
On ne « refait pas le site ». On remonte l’action d’achat, on allège les choix visibles d’emblée, et on place une preuve de confiance à côté du prix — là où le pouce hésite.
Illustration du premier écran mobile, pas une capture d’une vraie boutique.
Manteau laine courte
S · M · L · XL · XXL · Sur-mesure
Prix
Les 4 piliers évalués
Hiérarchie visuelle & F-pattern
54Regard qui décroche
État actuel
Le titre est clair, mais le bouton d’achat est sous une pile de pastilles promo. Le regard finit sur les variantes, pas sur l’action.
Maquette corrigée
Garder une seule offre visuelle au-dessus du pli : photo, nom, prix, bouton. Reléguer badges et variantes secondaires sous l’action principale.
Charge cognitive & loi de Hick
48Trop de choix trop tôt
État actuel
Taille, couleur, bundling et livraison express sont tous visibles avant le bouton. Le visiteur compare au lieu d’agir.
Maquette corrigée
Un chemin par défaut (taille guidée, couleur déjà sélectionnée). Les options avancées se déplient après le clic d’achat, pas avant.
Signaux de confiance
57Preuves trop basses
État actuel
Avis et retours sont en bas de fiche. Au moment du doute (prix + bouton), il n’y a rien à côté.
Maquette corrigée
Une ligne de preuve à côté du prix : note, délai, retour. Le détail des avis peut rester plus bas.
Lisibilité mobile
72Correct, perfectible
État actuel
Le texte principal se lit. Le bouton secondaire (« wishlist ») concurrence visuellement le bouton d’achat.
Maquette corrigée
Un seul bouton plein pour acheter. L’action secondaire en lien texte, pas en pilule aussi lourde.
Plan CRO — ordre, impact, effort
1. Remonter le bouton d’achat au-dessus du pli
Impact Fort · Effort Faible · Premier écran
Dans le thème produit, coller prix + CTA sous le titre, avant la grille de variantes. Vérifier un iPhone SE : le CTA doit être visible sans scroll.
2. Réduire les choix visibles avant le clic
Impact Fort · Effort Moyen · Variantes
Pré-sélectionner une variante. Masquer bundling et options secondaires derrière « Personnaliser ».
3. Coller une preuve à côté du prix
Impact Moyen · Effort Faible · Prix / CTA
Une ligne : avis (nombre) + délai. Pas un carrousel d’avis à cet endroit.