L’ergo-note : revue ergonomique du site Pierreherme.com

ergo-note-revue-ergonomique-du-site-pierreherme-com-vignette

Après 1855, l’ergo-note continue et termine sa revue du patrimoine français, avec le site du pâtissier, Pierre Hermé.

A maintes reprises, l’artiste s’est déjà fait tailler le tablier de circonstance, assaisonnement d’éloges sur papier glacé récompensant le chef au panache chocolaté, sa réputation au cœur d’une cuisine n’est ainsi plus à faire ; mais l’ARTisan, a t-il su apporter la même minutie à sa vitrine web ?

Alors un grand nom, pour un grand site ?

L’ergo-note : le site PierreHerme.com

1. Présentation de la société

Pour ceux qui ne connaîtraient pas encore Pierre Hermé, je vous renvoie vers sa fiche Wikipedia. Parce que l’on peut être Geek mais non moins français, jeune homme !

Les présentations étant faites, passons à sa boutique en ligne, c’est tout de même ça qui nous intéresse !

Le lancement a eu lieu en 2006, ce qui permet de placer Pierre Hermé parmi les pionniers du genre. On y retrouve toutes les grandes catégories de produits proposés par les pâtisseries Pierre Hermé, et d’ailleurs la possibilité de commander en ligne pour ensuite effectuer un retrait dans sa boutique du 15ème arrondissement. On compte dix boutiques à Paris, excusez du peu ! Ainsi que plusieurs autres hors de la capitale (merci quand même…) à Strasbourg, Chesnay, Nice ou encore Lyon ; sans oublier une manufacture en Alsace. Cette présence est renforcée à l’internationale par neuf points de vente à Tokyo, une boutique à Osaka et une à Hyogo, deux à Londres, une à Dubaï, deux à Hong-Kong, et pour terminer une à Doha.

Autant dire que l’artiste sait voyager et qu’à ce niveau là, ce n’est plus une chronique mais un livre blanc que l’on pourrait dédier à sa logistique !

2. L’avis de l’ergo’note

Homepage

Après cette (copieuse) mise en bouche, passons à l’appareil !

On note d’emblée que la boutique en ligne fait partie intégrante du site institutionnel Pierre Hermé. La cohérence est parfaite tant au niveau visuel que fonctionnel, une assonance de bon ton qui favorise l’expression de la marque et qui, ma foi, est loin d’être systématique, encore aujourd’hui.

ergo-note-revue-ergonomique-du-site-pierreherme-com-homepage-charte-graphique

La charte graphique puise assez largement, et avec gourmandise, dans les conventions et tendances du luxe et de l’art, laissant apparaître une composition empreinte à la fois de tradition et de modernisme ; ce qui, bien au contraire, ne dessert PAS l’ergonomie, qui se plie bien volontiers à ce caprice esthétique vu le contexte.

On regrettera néanmoins que sur ma résolution de travail (NdlR : 1366 x 768), le “Fold” ou ligne de flottaison tombe dans le “vide”, marquant ainsi la “fin” de la page pour les utilisateurs non-avertis, et les laissant alors potentiellement, sur leur “faim” !

De nombreuses catégories se trouvent pourtant encore en-dessous de celui-ci, même si les informations principales (et contextuelles, comme en ce moment à l’approche de la St Valentin) semblent occuper la place adéquate au sein de ce découpage.

ergo-note-revue-ergonomique-du-site-pierreherme-com-homepage-fold

Header

Le header est très propre.

Le logo est là où il se doit d’être et l’absence de baseline se justifie amplement par la notoriété du nom du maître pâtissier. On retrouve d’ailleurs, et comme cela a été évoqué préalablement, une des caractéristiques des marques agissant dans le secteur du luxe qui, en omettant volontairement la baseline, effacent un aspect commercial dont la connotation peut sembler lourde et grossière.

Un positionnement que l’on retrouve également à travers la mention “Paris” figurant l’univers de la Haute-Couture, cet art “à la Française”, ici transposé à la pâtisserie, et qui selon le magazine américain Vogue, fait du chef français, le “Picasso de la Pâtisserie”, svp…

ergo-note-revue-ergonomique-du-site-pierreherme-com-header

J’émettrais toutefois les critiques suivantes :

  • Le panier est trop petit. Son icône est à peine visible. Et il est, on ne sait pourquoi, le seul élément rédactionnel à être écrit en anglais, alors même que je suis bien dans la partie “FR” du site. Shocking !
  • La nécessité d’indiquer ou non le montant total de son panier est une chose discutable. En l’espèce, je regrette pour autant qu’aucun détail n’apparaisse au survol de celui-ci, à moins de cliquer.

Une action de plus = une action de trop !

  • Le moteur de recherche m’apparaît peu fonctionnel. Un “champ” où taper aurait été sinon souhaitable, préférable. On trouve ici la limite esthétique à l’affordance en même temps que la “bonne idée technique” qui peut nuire à l’expression d’une charte graphique cohérente. En l’état, on ne peut deviner au 1er coup d’œil que le mot “Rechercher” enferme un champ de saisi. Ce n’est pas assez intuitif. Ne serait-ce que l’emploi d’une forme interrogative l’aurait peut-être été d’avantage et cela sans pour autant contrarier le design général de ce header.
  • L’absence de numéro de téléphone est aussi embêtante, bien qu’elle puisse là encore se justifier par cette volonté d’appuyer le positionnement dessiné par la marque au travers d’un design épuré et minimaliste. Je propose un compromis : remonter le lien “Nous écrire” au niveau du header (et qui actuellement prend place au sein du footer) afin qu’il soit plus visible et plus facilement cliquable. Il est fondamental que vos clients puissent vous contacter facilement, sans avoir à chercher 3 heures le numéro téléphone du Service Client Internet.

C’est au-delà d’être un simple gain de temps un gage de rassurance (oserais-je dire d’achat…) !

  • Il faudrait enfin dans le même temps renommer ce lien avec une dénomination plus usuelle du type “Nous contacter” ou plus simplement “Coordonnées” afin que l’utilisateur n’anticipe pas juste un simple formulaire de contact, mais bel et bien l’ensemble des coordonnées, dont les numéros de téléphone et adresses emails.

Si ce glaçage à pu correctement nous faire patienter, passons maintenant au cœur de l’entremet.

Navigation

4 catégories principales, d’aucun pourrait dire “c’est un peu court, Mr. Hermé !”, s’il ne s’adressait pas à un pâtissier de classe internationale…

En l’espèce, cela s’explique une nouvelle fois par la volonté de rester sur le segment “Luxe” et “Arts de la bouche”. On retrouve ensuite pas moins de 15 sous-catégories formant l’ensemble de la gamme de produits vendus par la boutique en ligne Pierre Hermé. Un drop-down légèrement indigeste, et bien que chaque sous-catégorie soit illustrée au mouse-over, on peut s’interroger sur la mise en forme graphique de ce menu déroulant qui pourrait trouver meilleure adéquation au sein du site.  On notera deux sous-catégories à part : “Art de vivre” et “Livres”, dont l’harmonie gustative pourrait là aussi laisser quelque peu perplexe.

C’est ici qu’intervient ce qui est désormais la tradition au sein de cette rubrique ergo-note : l’ergo-fail ! Plus communément établi comme LE bug…

Déjà ! Me direz-vous ?

Eh bien oui, en cliquant avec délectation sur “Snacks chocolats”, l’estomac de votre humble serviteur a crié au scandale en voyant s’afficher une page 404…

ergo-note-revue-ergonomique-du-site-pierreherme-com-404

Si celui-ci pardonne bien volontiers, compte tenu du souci de personnalisation de la-dite page 404, Google, lui, pardonnera beaucoup moins puisque les pages d’erreur sont systématiquement interprétées comment une raison de pénaliser le référencement naturel d’un site.

Bah oui… Google n’a pas envie de décevoir ses clients (vous, moi… tout le monde !) en proposant du contenu introuvable dans ses résultats !

Mais ceci reste un micro-audit ergonomique et non SEO, et force est de constater que sur cette personnalisation, il n’y a pas grand-chose à redire. Un champ de recherche peut-être ? Plutôt qu’évoquer une “barre de recherche en haut de la page” qui… n’existe pas (ou presque, en ces termes en tout cas)…

Je prends donc note, ceinture sur les “Snacks chocolats” qui sont “obsolètes” (dixit la page) et arrive ainsi au terme de mon entremet en constatant que l’équilibre des saveurs n’a pas tout à fait été respecté Mr. Hermé !

Footer

Puisqu’il n’y a pas vraiment de corps de page, coquetterie d’artiste me direz-vous, j’entame la dernière bouchée avec le footer :

ergo-note-revue-ergonomique-du-site-pierreherme-com-footer

 

Erreur typique de bon nombre de sites : si vous mettez une date avec un ©, par pitié, veillez à mettre la bonne année…

Ça a l’air de rien, mais j’ai déjà vu des utilisateurs se poser la question de l’existence ou du dépôt de bilan d’une entreprise, tout ça parce que la date sur la homepage n’avait pas été actualisée… A consommer avec modération, donc.

Notons que les liens sont trop petits, et que leur couleur se confond avec le fond de page, c’est qui rend très difficile la lisibilité. La rubrique “Courrier du jour” devrait plutôt s’intituler F.A.Q. (là encore l’idée étant de maximiser les points de repères pour l’utilisateur) ou simplement, voir de façon plus pertinente, être annexée à la rubrique “Aide” étant donné que les contenus sont sensiblement identiques.

La rubrique “Aide”, justement, m’apparaît très bien faite : simple et claire. Bien organisée, et si ce n’est pas parfait, elle a le mérite d’exister et d’être fonctionnelle.

Au niveau des “CGV”, j’ai noté la clause abusive suivante :

“18. LOI APPLIQUABLE – 18.1. Les présentes conditions générales sont régies exclusivement par la loi française. Le Tribunal de commerce de Paris sera seul compétent pour tout litige ou différent les concernant.”

Il est à noter qu’un e-commerçant ne peut imposer le Tribunal de son choix dans le cadre d’un litige avec un particulier (B2C). C’est au particulier de choisir le Tribunal de son choix, pas au professionnel :

“Toute clause qui, directement ou indirectement, déroge aux règles de compétence territoriale est réputée non écrite à moins qu’elle n’ait été convenue entre des personnes ayant toutes contracté en qualité de commerçant et qu’elle n’ait été spécifiée de façon très apparente dans l’engagement de la partie à qui elle est opposée” (art. 48 du Nouveau Code de procédure civile).

De toute façon, pour un litige inférieur à 10.000€ entre un particulier et un commerçant, c’est le Tribunal d’Instance, et non le Tribunal de Commerce réservé aux litiges entre commerçants, qui serait compétent.

Plus d’informations sur droit & technologies.

Aucun élément de rassurance n’a été noté, mais en a-t-on encore besoin lorsque l’on est sur le site du “Kitchen Emperor”, comme l’a qualifié le New York Times ?

Performances

Le site s’est chargé en une moyenne de 1,28 secondes en 5 essais. Rien à dire !

Le poids total compressé de la page est de 768Ko pour 53 requêtes. Compte tenu du nombre d’images et de leur taille, on aurait pu craindre le pire, mais il n’en est rien, le résultat est plus que satisfaisant.

La poids compressé du document est de 3Ko, tout bonnement irréprochable !

A noter, la solution technologique retenue par Pierre Hermé pour sa boutique en ligne est Magento.

Responsive

Pierre Hermé a échoué au test Responsive Web Design. Le site possède néanmoins deux applications mobile, l’une dédiée aux Macarons et l’autre aux Chocolats. Toutes deux disponibles sur iOS et Android.

Page Catégorie

La page catégorie est à l’image du site : elle sort de l’ordinaire.

ergo-note-revue-ergonomique-du-site-pierreherme-com-page-categorie

On note assez rapidement la citation du chef qui, en plus de nous mettre l’eau à la bouche, apporte un surcroît de légitimité au produit…

La proposition de téléchargement de l’application mobile dédiée est par contre peu mise en valeur. Il pourrait s’avérer plus que pertinent de lui ajouter une emphase, notamment par le biais d’un pictogramme, simple, sobre, et élégant.

Chose originale à cette étape du workflow pour un utilisateur e-Commerce lambda, on vous offre le choix du moyen de livraison avant même d’avoir consulté la liste des produits !

Moins anecdotique et surement plus dérangeant, l’apparition de 2 options “Achat rapide” et “Voir en détail” au survol d’un produit. Celles-ci auraient dû être proposées d’office, sous les produits. D’autant que l’info-bulle peut venir se superposer aux-dites options, gênant de fait leur lisibilité :

ergo-note-revue-ergonomique-du-site-pierreherme-com-page-categorie-survol-superposition

Fiche Produit

ergo-note-revue-ergonomique-du-site-pierreherme-com-fiche-produit

On peut apprécier la présence d’un fil d’Ariane.

Les informations sont claires et fournies. Le badge “Disponible aujourd’hui” ajoute un certain cachet à cette fiche. Il est appréciable de pouvoir également, et à nouveau, modifier son mode de livraison. Voilà ici une souplesse additionnelle apportée à l’expérience utilisateur qui ne pourra que conforter ce dernier au sein de son processus d’achat et renforcer ainsi son adhésion

Dommage par contre que le bouton “Ajouter au panier” ne soit pas à côté du prix. En revanche, bien vu pour le cross-selling !

Gros bémol : la quantité voulue est sur “0” par défaut. Il eut été préférable de la mettre sur “1”.

Panier

Le panier s’ouvre en 2 temps.

Au 1er clic apparaît une lightbox :

ergo-note-revue-ergonomique-du-site-pierreherme-com-lightbox-cart

Comme je l’ai dit plus haut, il est dommage d’avoir forcé l’utilisateur à effectuer un total de 2 clics pour passer commande, là où 1 seul est largement suffisant.

Au clic sur le bouton “Commander” apparaît cette page :

ergo-note-revue-ergonomique-du-site-pierreherme-com-panier

On note que la mention de la livraison “gratuite” a disparu entre les 2 images. C’est regrettable. Il faut alors cliquer sur “Modalités d’Expédition à Domicile” pour retrouver cette information, pourtant largement incitative à la validation d’un panier.

La présence du champs “Code Avantage” est, elle aussi, incitative, paradoxalement, à sortir du panier pour partir à la recherche de codes de réductions sur Ie Web…
Je suis très sceptique au sujet de ce genre d’outils marketing. En tout cas je ne suis sûrement pas partisan de le présenter ainsi.

Tunnel d’Achat

ergo-note-revue-ergonomique-du-site-pierreherme-com-checkout

Le checkout est très classique, avec un workflow vertical en mode “One Page Checkout”.

On regrettera, encore et toujours, l’impossibilité de commander en “mode invité”, ce qui fait tant défaut au e-Commerce français.

Imposer l’enregistrement à un client a autant de sens que de demander sa carte d’identité lors d’un achat en boutique…

C’est à lui de décider s’il veut s’enregistrer ou non, il ne faut pas l’imposer car cela sera interprété comme une contrainte, et sera alors bien souvent traité comme tel (c’est-à-dire le rejet).

ergo-note-revue-ergonomique-du-site-pierreherme-com-livraison

Je vous avoue que j’ai cherché pendant quelques minutes l’icône du calendrier qui était mentionnée… Mon cerveau (à priori le même qu’un autre) avait automatiquement associé l’image présente à côté du champ à l’option “Effacer la date de livraison”, comme quoi les tests utilisateurs ne sont PAS une option…

La possibilité d’ajout d’un message personnel est très bien vu !

ergo-note-revue-ergonomique-du-site-pierreherme-com-paiement

Les moyens de paiement ne sont pas assez diversifiés : proposer uniquement la CB n’est pas suffisant. Néanmoins, compte tenu du caractère périssable des produits, on peut comprendre que l’immédiateté soit requise.

Je conseille pour autant de proposer également et au moins une solutions du type “paiement via Tiers de confiance” (Paypal ou Buyster, par exemple – et notre petit mais futur fleuron, Paylib, tant qu’à jouer la carte du patrimoine autant le faire jusqu’au bout !).

Les réseaux sociaux

Paradoxalement, il n’y aucun lien sur le site web Pierre Hermé vers les réseaux sociaux alors que pourtant la maison s’y trouve très présente !

Facebook

https://www.facebook.com/MacaronsPH

+ de 100 000 “j’aime” sur cette page, très visuelle, qui affole les papilles et explose mon taux de glycémie.

Il existe par ailleurs des variantes pour Tokyo, Hong-Kong et Londres.

Twitter

@Pierre_HermeLDN

Il existe 2 comptes Twitter : un pour Londres et un pour Hong-Kong. Pourquoi pas pour la France, Pierre ?

Le blog

Pas de blog pour Pierre Hermé, et c’est bien dommage !

A noter que les recettes sont largement reprises et diffusées à travers toute la blogosphère francophone à la partition culinaire. Il peut sembler alors difficile de se positionner sur une thématique aussi courue et ouverte, surtout quand les leaders d’opinion ne se comptent plus uniquement parmi les professionnels du genre. Mais c’est peut-être là aussi l’opportunité de fédérer une communauté extrêmement dense et à l’écoute.

Conclusion

“L’expérience est merveilleuse quand elle est bien maîtrisée.”

On pourrait finir sur ces quelques paroles du chef ! Mais l’ergo-note est obligé d’y ajouter son grain de sel, quoi de mieux pour relever un peu la saveur !

Nous avons ici un site e-Commerce atypique et qui marche très fort !

Il réussit le tour de force de proposer le meilleur de la pâtisserie française, à distance, avec des délais extrêmement raisonnables.

Bien-sûr, il est perfectible, et on pourrait presque considérer qu’il se le doit compte tenu de son positionnement, mais il a le mérite de prouver que l’on peut concilier une activité particulièrement raffinée et exigeante avec les conditions et contraintes particulières du commerce électronique.

Rappelez-vous toujours cette phrase que je répète inlassablement à mes stagiaires lors de mes formations :

“Les règles et les conventions de l’ergonomie web n’existent que pour mieux être violées”

Si votre contexte s’y prête, si votre métier l’exige : vous n’êtes pas obligés de suivre les règles & conventions. Mais rappelez-vous que vous devez alors être absolument certains de ce que vous faites. Notre micro-audit du jour nous a bien prouvé que si on pouvait effectivement transiger sur l’apparence de la Homepage compte tenu du contexte, même Pierre Hermé ne peut pas “jouer” avec la façon dont on construit un panier et un tunnel d’achat…  et il l’a plutôt bien compris !

Un régal donc, mais qui laissera quand même et toujours cet inexplicable et insatiable goût d’insatisfaction propre au grand chef !

 

Un ping pour “L’ergo-note : revue ergonomique du site Pierreherme.com

0 commentaires pour “L’ergo-note : revue ergonomique du site Pierreherme.com

Laisser un commentaire

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