Facebook EmaiInACirclel
Développement front-end, back-end

Le nouveau design d’Amazon.com

Cornel Fatulescu
Cornel Fatulescu
Chief Platform Officer

Amazon a toujours été un acteur majeur en terme d’ergonomie.
Avoir le plus gros magasin du web pose aussi quelques problèmes. Il faut pouvoir gérer d’énormes quantité de produits tout en restant accessible au plus grand nombre. Vu qu’Amazon s’est toujours montré doué dans cet exercice, il est très important de pouvoir apprendre ce qu’ils ont implémentés après tant d’années d’expérience dans leur nouveau design.

Responsive design

Contenu

Il a toujours été implémenté depuis qu’Amazon est passé en « liquid » mais c’est implémenté de manière vraiment impressionnante. Bon d’accord, ce n’est pas exactement « responsive » dans le sens ou certains éléments sont cachés dans les resolutions les plus basses, mais néanmoins le site s’adapte aux besoins des utilisateurs de manière tout à fait transparente.

Plus on descend en resolution, moins d’objets sont affichés. De cette manière les blocs ne paraissent pas vides sur les résolutions les plus grandes.
Cacher de l’information est une mauvaise pratique en ergonomie, mais ici c’est fait d’une manière tout à fait intéressante. Sans parler du fait que ces blocs ont un affichage particulièrement intéressant en mélangeant les objets deja vus avec d’autres vus par d’autres utilisateurs. C’est une excellente manière de capter l’oeil de l’utilisateur en lui suggérant d’autres objets lorsque sa vue se déporte sur la droite.

Un nouveau menu

La deuxième est plus importante chose selon moi est le menu.

Il est très simple : un fond blanc sans séparateur de contenu répétitif. Seuls les petites phrases grises aident à casser la linéarité de la lecture. Le menu est lui même coupé en deux. Une partie est dédiée au contenus numériques, et l’autre pour les contenus physiques. Même si cette différence est faite de manière très discrète, c’est intéressant de noter qu’il y a toujours une logique derrière ce qui est fait, et même les petites phrases grises aident encore plus a comprendre le différence entre les deux parties.

Alors que sur l’ancienne version (qui peut toujours être vue sur amazon.fr) le menu était statique, dans cette version, il disparait lorsque notre résolution est trop faible et se transforme en menu déroulant.

C’est un choix assez intéressant de la part d’Amazon et peut être vu comme deux choses :

  1. Soit Amazon pense que le bouton est visuellement suffisant pour que les utilisateurs sachent par ou naviguer (d’autant plus qu’il est présent au même endroit depuis des années)
  2. Ou le menu principal n’est pas la méthode de prédilection pour naviguer dans le site

Je dois dire, mon instinct d’ergonome penche en faveur de la seconde solution.
Selon moi, afficher un énorme champ de recherche en haut de la page est une indication significative qui permet de comprendre le comportement des utilisateurs sur le site. Sur Amazon, la recherche est la nouvelle manière de naviguer.

Le barre de recherche

Si elle est si importante, qu’est-ce qui la différencie des autres, et quelle bonnes pratiques pouvons nous en tirer ?

Une chose intéressante à propos de cette barre de recherche est le fait que contrairement à la plupart des sites web, le filtre de recherche est placé avant le champ. Pourquoi cela ? Comme nous pouvons le présumer, la barre de recherche est utilisée principalement comme premier niveau de navigation. Ce filtre agit alors comme un fil d’ariane. Il aide a identifier l’endroit ou l’on se trouve sans que l’on ait a forcement comprendre les différent niveaux de profondeur. C’est une pratique connue en terme d’ergonomie, car utiliser un fil d’ariane sur un site avec beaucoup de contenu avec une navigation complexe sera en fait plus difficile à lire et a comprendre rapidement, ce qui risque fortement d’entrainer une certaine confusion chez l’utilisateur…. et c’est tout le contraire de ce que l’ergonomie se doit de faire.

Un autre comportement intéressant est le fait que le filtre est affiché de manière graphique, mais lorsque l’on clique dessus, il retrouve un comportement dit système.

C’est assez différent par rapport aux précédentes versions ou le menu déroulant était entièrement système… Il s’agit d’un vrai choix graphique afin d’uniformiser la barre de recherche, mais c’est aussi une excellente nouvelle de voir que le menu déroulant classique est préféré a une contrepartie graphique.
Tout le monde sait comment les utiliser, et ils sont optimals en terme d’ergonomie.

Bouton mon compte

Le compte utilisateur est désormais plus proche du panier et de la liste d’envie. C’est clairement le fait de l’ajout d’un menu en rollover sur chacun de ces éléments.
Il est évident que l’utilisateur regulier d’amazon doit gérer de nombreuses choses. En implémentant ces menus, Amazon joue la carte du gain de temps.Être capable de voir le contenu de son panier d’un simple survol de souris par exemple est très apréciable. Cette pratique n’est pas nouvelle en terme de eCommerce, mais le fait qu’Amazon l’utilise nous apprend une chose : les utilisateurs sont désormais accoutumés avec les menus en roll over. Et on va voir qu’Amazon s’en sert justement beaucoup sur son site (menu princiapal, mon compte, liste d’envie, etc.)

Donner plus d’importance au compte utilisateur avait dejà été lancé par Google, mais le fait qu’Amazon en fasse de même doit être pris en considération vu que la plupart du temps, un simple lien html est utilisé.
Est-ce qu’une nouvelle mode est en train d’apparaitre ? Probablement, mais le temps nous le dira.

Navigation

A part sa nature « responsive », ce nouveau menu est également très différent des précédents.
Comme précédemment, il s’agit d’un menu en rollover (les catégories n’étant pas cliquables) mais la principale différence est la manière dont le sous menu réagit. Sa hauteur est fixe et similaire à celle du menu de premier niveau. Il s’agit la d’une pratique assez inhabituelle pour un menu vertical, mais marche parfaitement vu qu’il règle le problème de précision que certains menu/sous menu rencontre du à la difficulté de déplacer sa souris horizontalement (problème de l’axe du poignet). L’espace qu’il offre est également rafraichissant et très bien utilisé dans les cas ou il n’y a pas beaucoup d’éléments de sous menu en affichant une image relative au contenu. Comme précédemment pour les petites phrases grises, cette manière assez aléatoire d’afficher des designs spécifiques dynamise quelque peu une hiérarchie visuelle parfaite, mais également rébarbative.

Hiérarchie visuelle

Voila la meilleure partie. Selon moi, Amazon est le roi de la hiérarchie visuelle. La manière dont le contenu est affiché est clairement otpimisée et semble naturelle à l’utilisation. Mais soyons honnête, cette perfection ne s’est pas fait sans des centaines d’heures de design et de tests ergonomiques. Vraiment un chef d’oeuvre d’ergonomie. Peut être que mon enthousiasme n’est pas partagé par la plupart des gens, vu que le design d’Amazon doit être percu par certains comme assez rébarbatif justement, mais c’est la vraie force d’Amazon : que vous soyez un expert informatique ou non, vous serez capable d’acheter sur leur site. Le rêve de tout ergonome qui se respecte.

Mais voyons comment tout cela est fait, a coup de simple code HTML et de quelques styles…

Styles

La hiérarchie du menu principal

Même si les liens se ressemblent fortement entre le menu et le sous menu, leur comportement est totalement différent.
Les liens du menu principal ne sont pas cliquables, de fait ils passent en gras et orange (couleur d’action) en cas de survol de la souris. L’ajout d’une petite flèche a la fin de la ligne, termine de montrer la notion de mouvement attendu…
Contrairement au menu principal, les éléments des sous menus sont cliquables. C’est pour cela que les liens deviennent soulignés lors du survol. Et ce comportement est vrai sur chaque lien du site web… vu la complexité de faire cela sur des sites internet plus basiques, je n’ose imaginer le temps passé et les contraintes liées a ce genre de choix.

Le menu a un comportement bien à lui. Il est d’ailleurs très surprenant de voir Amazon n’utiliser aucune couleur pour son menu. Mais pour moi c’est une manière de simplifier encore plus un menu deja bien complexe, et vu que la zone est parfaitement identifiée à l’aide du gros onglet « Shop by department » et que le menu lui même est imposant avec une ombre portée, on identifie instantanément le menu…. en se disant : « c’est la que je dois cliquer ».

Image ou titre ?

En fonction du produit, parfois l’image elle même est suffisante pour identifier le produit, mais parfois non.
C’est peut être un concept un peu bizarre à comprendre, mais la hiérarchie visuelle depend souvent du contenu lui même et il devrait être utilisé de la manière dont l’utilisateur le souhaite.

Exemple :

A gauche, l’image peut être comprise vu que le titre est lisible, alors que le produit de droite ne l’est pas. D’habitude, les livres nécessitent un titre, mais disons que pour certains produits, comme les chaussures, l’utilisateur cliquera en fonction de l’image et non du titre.

Vu qu’Amazon vend de nombreux produits et ne peux faire de différence d’affichage pour tout ses produits différents, les titres se doivent d’être à la fois visible… mais pas trop non plus lorsqu’ils ne sont pas souhaités… Et cela s’applique pour chaque taille de photo et de bloc.

En d’autres termes : le cauchemard d’un graphiste.

Mais devinez quoi ? Amazon s’en sort comme un chef…

Blocs

Ce bloc démontre bien la logique d’Amazon :

  • Le gras et souligné est utilisé pour définir le premier niveau de navigation, ou la catégorie
  • Les liens vers des produits sont en bleu 12px regular
  • Les information complémentaires sont en noir 11px regular
  • Lorsque les liens sont soulignés, il ne s’agit alors pas d’un lien vers un produit mais vers une liste ou une page spéciale. Séparé de tout contenu, il s’agit alors clairement d’une page.
  • Les titres sont assez petits et gris foncés. Ils sont ici uniquement afin d’amener une information complémentaire et n’ont pas pour vocation d’être la première entrée de lecture. la ligne en dessous aidant à l’identifier comme un titre, et le séparant du contenu.

Si l’on continue, nous pouvons voir que de nouveaux élément arrivent.

  • $Le prix a une couleur bien à lui. Un savant mélange entre visible et discret, la police est plus grande que le prix. Pas la peine d’en faire trop vu que le sigle du dollar nous rappelle qu’il s’agit du prix.
  • Le style des block de titres est en fait décidé en fonction de sa position dans la page. Dans la zone de contenu, les titres sont Orange
  • les liens complémentaires sont réduis à 11px (1 px de moins que le lien) et toujours bleu

Bien sur de nombreux comportement particulier peuvent être rencontrés, mais ils sont toujours logiques.
Pour ce cas particulier, nous avons une liste de petits liens mais tous soulignés… pourquoi cela ? Simplement car aucune image ne leur est associée. Nouvelle règle : lorsqu’il n’y a pas de photo associée, le lien est souligné.

De nombreux petits cas particuliers comme celui la sont implémentés sur le site, et il serait extremement long de vouloir tous les lister vu que de nouveaux comportements semblent apparaître lorsque des objets sont présents dans des blocs visuellement différents. Quoiqu’il en soit, la hiérarchie visuelle mise en place par Amazon fonctionne tellement bien, que même avec du faux texte, le contenu semble toujours compréhensible.

Exemple :


Lorem ipsum dolor sit amet

Fusce rhoncus, quam nec bibendum tempus
Phasellus eu adipiscing eros
$0,00
venenatis ac justo. Fusce ullamcorper enim

Duis vitae tortor nec

Simple, clair, et reconnaissable.

Mais… comment peut-on arriver à faire la même chose ?

Lorsque vous créez une page, vous ne pouvez pas décider de la manière dont les utilisateurs vont la parcourir.

Ou de n’importe quelle autre manière.

Il est important d’établir une hierarchie visuelle à l’interieur même des informations du produit, mais il est également important que cela soit lisible entre les produits eux même. C’est pourquoi, réduire les blocs (div) et les éléments graphiques est une bonne manière de s’assurer d’une lisibilité optimum.

Lorsque l’on accole plusieurs éléments, essayez de lire tous les prix de chaque objets en 1 seconde. Et juste cela.
Répétez ce processus pour chaque element (fabriquant, nom du produit, etc.) et si la lecture est toujours aussi simple, vous avez réussi à avoir quelque chose de lisible entre éléments.

Essayez d’appliquer des styles verticallement pour atteindre le même effet, et si cela marche, vous serez alors proche d’une excellente ergonomie. Bien sur, il faut après que tout cela soit lisible dans la page et dans le site complet. C’est pourquoi les choses sont difficiles dans le petit monde de l’accessibilité… et c’est la raison pour laquelle Amazon est si bon dans ce domaine.

Que peux-t-on apprendre de tout cela ?

Le fait est que sans un design très travaillé, tout est excessivement lisible et peut être identifié en quelques secondes.

En fait, une nouvelle hiérarchie est créée au sein de chaque bloc.
Les éléments les plus imposants et les plus colorés en haut, et diminuant le long de l’axe vertical. Certains éléments ne suivent pas forcement ce model, et certaines exceptions peuvent être faites (comme le prix).

Dans les cas ou les blocs sont dans la barre de droite, les titres ne sont pas le premier élément de fixation de l’oeil. De la même manière, les liens « en savoir plus » sont toujours un peu plus gros, mais séparés du contenu et ont un style bien distinctif (flèche orange + souligné). De cette manière, même si ce n’est pas vraiment clair, on obtient le sentiment que ces liens sont porteur d’un peu plus d’information que les autres… et la plupart du temps il s’agit de liste de produits.

Bien qu’Amazon ait des millions de pages à traiter, on peut grossierement les réduire à 3 type de pages : Accueil (comprenant l’accueil et les accueils de chaque catégorie), Produit, Liste.

Bien sur, on pourrait lister bien d’autres choses ici, mais ces pages peuvent également représenter 95% du site… voir plus.

Et ces pages les plus importantes, on en quelque sorte leur propre style distinctif (à part dans le menu qui impose son propre style) :

  • Accueil : gras bleu souligné
  • Liste : regular bleu souligné + flèche orange
  • Produit : bleu

Ces styles comme dans le cas de celui des Accueils (gras) peut être utilisé quelque soit la taille de la police. La même chose peut être appliqué aux autres styles.

Cette deuxième lecture n’est pas forcément destiné à réellement être comprise par l’utilisateur de base, mais ce qui est important c’est le sentiment qui en ressort. Même si nous ne comprenons pas, la logique existante contribue à ce sentiment de bien être.

Conclusion

Avec son graphisme minimaliste, Amazon arrive à créer une interface extremement ergonomique.
Mettre le contenu en avant est la clef, et utiliser du html de base et quelques styles css par ci par la suffisent à assouvir cela.

C’est une chose que tous les graphistes web devraient comprendre. Travailler les styles html est souvent BEAUCOUP plus efficace pour l’utilisateur que de remplir son design d’artifices graphiques. Certes cela est un peu plus long et compliqué, mais plus il y a d’informations plus il est nécessaire de réduire les éléments graphiques.

Les liens, le texte et les images sont ce qui fait 90% du web. Définir une bonne hiérarchie visuelle au sein de ces éléménts est ce sur quoi les designers devrait se focaliser, et créer des intefaces capables d’être comprises par tous en quelques secondes devrait être leur but ultime.


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *