Comment Amazon nuit à ses utilisateurs avec son interface médiocre

Amazon est est un leader de l'e-commerce, cependant, force est de constater que le design de leur site est de plus en plus catastrophique par rapport aux possibilités actuelles. Les critiques sont de plus en plus nombreuses et viennent d'entités relativement reconnues dans le domaine : Bret Victor, Jakob Nielsen, et beaucoup d'autres. Ces critiques sont de plus en plus percutantes quand on voit que sur la page d'un produit, le premier écran est majoritairement vide. L'espace est tellement sous utilisé qu'il faut aller aux deuxième ou troisième écran avant de trouver des informations pertinentes sur l'objet. De plus, l'usabilité de l'interface est médiocre avec beaucoup de données redondantes. C'est le succès de la plate-forme qui lui assure des clients fidèles malgré de nombreux défauts.

La page d'accueil d'un produit sur Amazon.fr Sur un écran de 1400*1050, on voit que presque la moitié n'est pas utilisée. Surtout à cause de ce bandeau kindle peu utile.

Avec un petit effort, ce même espace pourrait permettre de montrer bien plus d'informations pertinentes sur le produit. Pour la suite, je suis parti de la page de présentation d'Amazon.com pour le livre Successful Drawing d'Andrew Loomis.

La page présentée telle quelle sur amazon.com

 Sur la page originale, une très grosse partie est dédiée à la colonne de droite, pour l'achat du produit et la vente.

Dans la version refaite, la zone consacrée est un peu plus petite, mais est plus mise en valeur : la simplification permet de ne plus se perdre dans les options confuses.

Le prix ressort nettement et la description du livre peut être intégralement contenue sur la page ainsi qu'un peu de texte.

Un exemple de redesign du premier écran

On peut noter qu'il reste encore une zone blanche dans le redesign qui peut être consacrée aux détails sur l'envoi.

De plus, le titre ressort dorénavant de manière beaucoup plus nette qu'auparavant.
 
Sur la même surface, on a déjà commencé à augmenter la quantité d'information percutantes, tout en simplifiant les données affichées et en gagnant de l'espace. On a ainsi densifié l'information.

De manière volontaire, les lignes sont gardées relativement courtes, de manière à ne pas gêner la lecture avec un retour à la ligne difficile. Amazon a préféré un design extensible qui fait qu'avec une résolution de "seulement" 1024 pixels de large, les lignes sont déjà extrêmement longues.

Un agencement catastrophique

À gauche, la page originale, les zones bleus sont les zones inutilisées et les zones grises sont des zones redondantes. La deuxième colonne correspond à la page originale telle quelle, la troisième colonne représente le redesign. La quatrième colonne montre la taille d'un écran de 1024*768. La dernière colonne sert uniquement à montrer qu'au total l'ensemble des zones inutilisées correspond à environ 2 écrans et les zones redondantes à environ 1 écran.

Entre le facelift proposé et l'agencement obtenu sur amazon.com, j'arrive a réduire la longueur de la page d'environ 33% soit quasiment 2100 pixels de moins sur une page qui en fait originalement environ 6800. Certes, j'ai enlevé quelques bandeaux commerciaux redondant. Mais même en les ajoutant de nouveau, on économise encore environ 1400 pixels par rapport au design original. De plus, le redesign proposé est fait pour un écran de seulement 1024 pixels de large.

Le gain provient essentiellement de la suppression des espaces perdus. Cependant, j'ai gardé des zones blanches pour aérer la présentation.

Des outils mal mis en valeur

Alors que la version anglaise du site propose énormément d'outils, ces derniers sont extrêmement mal mis en valeur.

Au lieu de mettre les outils les uns à la suite des autres, une disposition sur trois colonnes permet d'économiser énormément de place sans perdre aucune information.

Les outils sont juxtaposés les uns derrières les autres avec une perte de place énorme pour trop peu de contenu. Le redesign permet de condenser la même information sur moitié moins de surface. Le texte et les images sont pourtant identiques et il reste même encore pas mal de place.

Conclusion

Le redesign proposé est encore loin d'être parfait, le but de cet article étant juste de montrer comment un léger réagencement des différents blocs permet non seulement de gagner énormément de place, mais en plus de structurer l'information sans perdre de contenu. En condensant l'information, les utilisateurs pourraient ainsi gagner en efficacité de manière dramatique. Il ne reste plus qu'à espérer que l'équipe design d'amazon se mette au travail sérieusement pour améliorer la mise en page et la mise en valeur de leurs produits. Malheureusement, leur site est extrêmement pauvre en contenu.  Le fichier du redesign est disponible ici, il fait environ 1 Mo et est au format SVG.

Je pense essayer de peaufiner le redesign dans les prochains jours en mettant au point une version HTML de la page.