Audit Ergonomique - Amazon, Leboncoin, Spotify

Partie 1 : Analyse Intuitive

Évaluation initiale basée sur l'expérience utilisateur sans connaissance préalable des principes scientifiques de l'ergonomie.

Amazon

Fig. 1 - Page d'accueil d'Amazon

Points forts

Navigation claire : Architecture de l'information bien pensée avec menu catégoriel complet et barre de recherche prominente.
Feedback immédiat : Animation subtile mais perceptible lors de l'ajout au panier + notification visuelle.
Personnalisation avancée : Suggestions pertinentes basées sur l'historique et comportements similaires.
Hiérarchie visuelle : Organisation spatiale qui guide naturellement l'œil vers les éléments importants.

Points faibles

Surcharge informationnelle : Accumulation de promotions, recommandations et options sur la page d'accueil.
Performances variables : Temps de chargement parfois longs sur mobile, surtout pour les pages produits riches en médias.
Complexité progressive : Certaines options avancées (filtres complexes) ne sont pas découvertes intuitivement.

Leboncoin

Fig. 2 - Interface de recherche de Leboncoin

Points forts

Simplicité fonctionnelle : Interface minimaliste centrée sur la tâche principale (trouver des annonces).
Filtrage efficace : Système de tri par prix, localisation et catégorie particulièrement intuitif et rapide.
Champ de recherche avancé : Suggestions pertinentes lors de la saisie avec correction automatique.

Points faibles

Design vieillissant : Esthétique datée comparée aux standards actuels du web design.
Redondance des contenus : Répétition fréquente d'annonces similaires dans les résultats.
Manque de cohérence : Certaines pages ont un style visuel différent (ex: pages de paiement).
Feedback limité : Confirmations d'actions parfois trop discrètes.

Spotify

Fig. 3 - Interface principale de Spotify

Points forts

Expérience fluide : Transitions douces entre les sections et playlists.
Design moderne : Interface visuellement attractive avec une identité forte.
Navigation cohérente : Structure constante entre les différentes plateformes (web, mobile, desktop).
Personnalisation : Recommandations musicales pertinentes et découvertes.

Points faibles

Options cachées : Certains paramètres importants enfouis dans des menus secondaires.
Publicités intrusives : Coupures fréquentes pour les non-abonnés.
Hiérarchie contestable : Priorité donnée au contenu sponsorisé plutôt qu'aux playlists personnelles.

Site le moins ergonomique (analyse intuitive) : Leboncoin

Bien que fonctionnellement efficace pour sa tâche principale (trouver des annonces), Leboncoin souffre de problèmes majeurs d'expérience utilisateur : design vieillissant, incohérences visuelles et redondance des contenus qui nuisent à son ergonomie globale.

Amazon et Spotify offrent des expériences plus abouties, bien qu'Amazon pêche par une certaine surcharge informationnelle sur sa page d'accueil.

Partie 2 : Analyse Théorique

Évaluation approfondie basée sur les principes d'ergonomie web et d'accessibilité.

Amazon à travers le prisme théorique

Fig. 4 - Affordance des boutons sur Amazon

Points conformes aux bonnes pratiques :

Affordance (p.12) Les éléments interactifs présentent une excellente affordance : boutons "Ajouter au panier" jaune vif, liens soulignés, curseurs qui changent au survol. L'interface guide naturellement l'utilisateur.

Loi de Similarité (p.11) Les produits similaires sont regroupés visuellement avec une cohérence dans la présentation (même structure de carte produit, mêmes éléments cliquables).

Feedback (p.13) Confirmations d'actions exemplaires : animations subtiles mais perceptibles lors de l'ajout au panier, messages textuels clairs, indicateurs de progression.

Loi de Fitts (p.11) Les zones cliquables principales sont suffisamment grandes et bien espacées, facilitant l'interaction, surtout sur mobile.

Problèmes identifiés :

Charge cognitive (p.14) Surcharge informationnelle : La page d'accueil présente trop d'éléments simultanément (promotions, recommandations, catégories), saturant la "mémoire de travail" (Loi de Miller sur les 7±2 éléments).
Accessibilité (p.31) Contraste insuffisant : Certains textes secondaires n'atteignent pas le ratio 4.5:1 recommandé par les WCAG.
Performance (p.5) Temps de chargement : À optimiser via la compression d'images et le lazy loading pour améliorer l'efficience.

Leboncoin sous l'angle théorique

Fig. 5 - Exemple de contraste insuffisant sur Leboncoin

Problèmes majeurs :

Accessibilité (p.31-34) Contraste insuffisant : Plusieurs boutons et textes n'atteignent pas le ratio de contraste minimum recommandé par les WCAG 2.1, les rendant difficilement lisibles pour les utilisateurs malvoyants.
Charge cognitive (p.14) Redondance des annonces : La répétition fréquente d'annonces similaires dans les résultats de recherche surcharge inutilement la mémoire de travail.
Navigation (p.14,16) Absence de fil d'Ariane : Difficile de se repérer dans l'arborescence du site sans cet élément de navigation essentiel. Navigation secondaire limitée.
Affordance (p.12) Éléments interactifs peu distinctifs : Certains boutons manquent de visibilité (couleur trop fade, taille réduite).
Normes WCAG (p.12-13) Manque d'ARIA labels : Peu d'éléments comportent des attributs d'accessibilité pour les lecteurs d'écran.

Recommandations d'amélioration :

Moderniser le design tout en conservant la simplicité fonctionnelle qui fait la force du site.
Implémenter un fil d'Ariane conforme aux bonnes pratiques d'ergonomie pour améliorer la navigation.
Optimiser les contrastes pour répondre aux normes WCAG 2.1 niveau AA minimum.
Réduire la redondance dans les résultats de recherche et améliorer l'algorithme de pertinence.
Améliorer l'affordance des éléments interactifs (boutons plus visibles, feedback renforcé).
Ajouter des attributs ARIA pour une meilleure accessibilité aux technologies d'assistance.

Voici une proposition de refonte du site de Leboncoin, avec un aspect plus ergonomique.

Aller sur Le Bon Coin

Spotify analysé théoriquement

Fig. 6 - Application de la loi de continuité dans l'interface Spotify

Points conformes :

Loi de Continuité (p.10) Les transitions entre les différentes sections sont fluides, guidant naturellement l'œil de l'utilisateur à travers l'interface.

Loi de Proximité (p.10) Les éléments liés sont regroupés spatialement (ex: contrôles de lecture groupés), facilitant la compréhension.

Feedback (p.13) Retours visuels clairs lors des interactions (survol des boutons, sélection des éléments).

Points à améliorer :

Personas (p.16) Cibles négligées : Icônes et zones cliquables trop petites pour les utilisateurs âgés ou en situation de handicap moteur.
Accessibilité (p.31-34) Labels manquants : Certains éléments interactifs manquent d'attributs ARIA pour les utilisateurs de lecteurs d'écran.
Affordance (p.12) Boutons peu distinctifs : Les contrôles de lecture pourraient être plus visibles (taille, contraste).

Site le moins ergonomique (analyse théorique) : Leboncoin

L'analyse théorique confirme et approfondit les conclusions de l'évaluation intuitive. Leboncoin présente des lacunes importantes en matière d'accessibilité (contraste, ARIA labels), de charge cognitive (redondance) et de navigation (absence de fil d'Ariane).

Amazon, malgré ses qualités, révèle des problèmes de surcharge informationnelle qui n'étaient pas aussi évidents initialement. Spotify se distingue par une expérience globalement aboutie, avec quelques améliorations possibles en accessibilité.

Partie 3 : Bilan et Apports Théoriques

Concepts les plus utiles

Affordance (p.12)
Comprendre comment la forme, la couleur et la position des éléments guident naturellement l'utilisateur a transformé ma manière d'analyser les interfaces.
Normes WCAG (p.31-34)
Les standards d'accessibilité fournissent des critères objectifs pour évaluer l'inclusivité des interfaces.
Feedback (p.13)
L'importance des retours visuels immédiats après chaque action est un élément clé de l'expérience utilisateur.
Lois de Gestalt (p.10-11)
Les principes de proximité et similarité expliquent scientifiquement l'organisation perceptive de l'information.
Charge cognitive (p.14)
La notion de mémoire de travail limitée (7±2 éléments) permet d'évaluer la surcharge informationnelle.

Concepts moins utiles dans ce contexte

Loi de Continuité (p.10)
Déjà bien intégrée dans la plupart des sites modernes, donc moins discriminante pour notre analyse.
Personas (p.16)
Utile en phase de conception, mais moins pour l'audit de sites existants sans accès aux données utilisateurs.
Scroll infini
Non abordé dans les sites analysés, donc non applicable dans ce contexte précis.

"Investir dans l'ergonomie permet : satisfaction donc fidélisation des clients, augmentation des ventes et taux de conversion, augmentation du trafic et de sa qualité, amélioration des performances des utilisateurs en terme d'efficacité et d'efficience, amélioration de l'image de marque."
— Notion de ROI (p.5)

Évolution de ma perception

Ce cours a radicalement transformé ma manière d'appréhender les interfaces web :

Avant le cours

Évaluation basée sur des critères esthétiques et subjectifs
Focus sur le design visuel plutôt que l'expérience utilisateur
Peu de considération pour l'accessibilité
Approche globale sans méthodologie précise

Après le cours

Analyse structurée selon des principes scientifiques
Distinction claire entre ergonomie (efficacité, efficience) et design
Sensibilisation aux enjeux d'accessibilité et d'inclusion
Utilisation d'outils d'évaluation objectifs (WCAG, lois cognitives)

L'exemple de Leboncoin illustre parfaitement cette évolution : un site que j'aurais pu considérer comme "simple et fonctionnel" avant le cours, mais dont je perçois maintenant clairement les lacunes ergonomiques et d'accessibilité.

Analyse Comparative des Boutons

Évaluation des styles, affordance et feedback visuel des éléments interactifs

Amazon

Bouton Primaire

Animation : légère élévation + confirmation toast

Bouton Secondaire

Animation : léger assombrissement au survol

Bouton Mobile

Animation : feedback tactile sur mobile

Fig. 8 - Boutons typiques d'Amazon avec leur style distinctif

Leboncoin

Bouton Primaire

Animation : changement de couleur minimal

Bouton Secondaire

Animation : léger assombrissement au survol

Bouton d'Action

Animation : décalage du texte

Fig. 9 - Boutons Leboncoin avec leur style plus sobre

Spotify

Bouton Primaire

Animation : transition fluide des couleurs

Bouton secondaire

Animation : rebond au clic

Fig. 10 - Boutons Spotify avec leur style moderne et animé

Analyse comparative des boutons

Amazon utilise des boutons très contrastés (orange vif) avec des animations discrètes mais efficaces. Le feedback visuel est immédiat, renforçant l'affordance.

Leboncoin propose des boutons plus sobres avec des animations minimales. Certains manquent de contraste (problème d'accessibilité).

Spotify se distingue par des animations sophistiquées et un style moderne. Les micro-interactions contribuent à une expérience engageante.