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

ergo-note-revue-ergonomique-du-site-made-in-design-com-vignette

L’ergo-note est ravi de vous retrouver pour une nouvelle revue ergonomique, consacrée cette fois au site e-Commerce Madeindesign.com. Cette série de chroniques arrive à son terme, du moins dans son format de base, que vous connaissez maintenant bien. Pourquoi ? Si l’ergonome que je suis prend toujours autant de plaisir à fouiller, décortiquer et analyser l’ergonomie de sites e-Commerce (et peut-être bientôt le votre !), il commence à apparaître au fil de ces micro-audit des refrains, qui il me semble, vous ont maintenant été largement assez fredonnés !!! Mais ce n’est là pas une fin, je vous rassure. L’ergo-note va évoluer espérant continuer à apporter à ses lecteurs & e-Commerçants toujours autant d’idées et de pertinence.

ergo’notement vôtre,

L’ergo-note : le site Madeindesign.com

1. Présentation de la société

Made In Design est une entreprise française de e-Commerce créée par Catherine Colin en 1999 dont le siège se trouve à Echirolles en Isère. SARL au capital de 347.112€, la société n’a cessé de croitre depuis sa création, tout comme son CA qui en 2012 s’élevait à 25 millions d’€.

Une belle histoire donc, portée par la passion de sa fondatrice dont la volonté affichée était d’ouvrir les portes d’un univers jusque là très fermé, pour ne pas dire élitiste, au plus grand nombre. La société s’affirme aujourd’hui comme le numéro 1 du design sur internet, leader dans la vente en ligne de mobilier avec plusieurs dizaines de milliers de références produits (on évoque plus de 200 nouvelles références mises en ligne chaque semaine) et un panier moyen largement supérieur à la moyenne (entre 250 et 350€ selon les sources).

Rentable depuis 2002, l’entreprise a bénéficié en 2009 d’une levée de fond de 4.5 millions d’€ via le fond d’investissement Gimv afin notamment de soutenir/développer sa présence à l’international.

Made In Design est enfin une entreprise qui, si elle a su profiter de l’essor du web, a surtout su s’adapter parfaitement au développement de la vente en ligne, en témoigne dès ses premiers pas, des choix marketing judicieux, une volonté de professionnalisation, notamment grâce au développement d’une logistique solide, et l’orientation naturelle vers la création d’une communauté dédiée au design autour de la marque.

Autant d’éléments concrets qui ont fait la différence, et auxquels Catherine Colin ajoute : “la  compréhension du marché, une gestion rigoureuse, une capacité à former des équipes impliquées, et à se remettre en cause en permanence.”

C’est dit ! Il est donc bien ici question de business story et non de success story ;)

2. L’avis de l’ergo’note

Homepage

La sobriété est ici de rigueur, surement un parti-pris directement inspiré des grands principes du design que le site s’évertue à valoriser. Aucun univers de marque ne se dégage de cette homepage, faisant la part belle aux produits. Un choix qu’on pourrait considérer comme stratégique mais qui nous fera quand même regretter que l’identité ne soit pas plus marquée, ramenant presque Made In Design au rang d’un site e-Commerce “lambda”.

ergo-note-revue-ergonomique-du-site-made-in-design-com-frontpageHeader

ergo-note-revue-ergonomique-du-site-made-in-design-com-header

Un logo simple et une baseline efficace, Made In Design connait ses classiques.

Au niveau du moteur de recherche interne, il a été judicieusement proposé de filtrer les recherches par marques et par designers. Bien vu ! On regrettera un header un peu chargé (notamment la redondance des entrées « pro »), mais avec cependant la présence du numéro de téléphone, toujours utile.

Deux critiques : on ne comprend pas vraiment si on change de langue ou de pays avec les drapeaux. Ca ne pose pas de soucis tant qu’on ne vise pas le marché d’un pays multilingue…

D’autre part, je n’ai pas compris l’intérêt d’afficher la devise, si on ne peut pas la modifier. J’ai pris ça, à tort, pour un « call to action »…

Le panier et « mon compte » offrent un aperçu judicieux au survol. Dommage que le total du panier ne soit pas visible de prime abord.

Le 1er niveau de navigation est un menu horizontal par onglets on ne peut plus classique, avec des sous-catégories en « mouse-over » (dont l’état au survol n’est d’ailleurs pas des plus distinctifs…) façon mega-menu. Là-encore, le menu possède trop de points d’entrées (13 ! Au lieu des 7 +/-2 habituellement recommandés) et la présentation des sous-catégories apparait trop chargée. La lisibilité de chaque sous-catégorie n’est pas optimale, on peut y voir plusieurs raisons, dont entre autres l’interlignage, l’insuffisante hiérarchisation graphique ou encore l’identification de la sous-catégorie qui repose uniquement sur la casse et la graisse de la font – pourquoi pas sur la couleur ???

ergo-note-revue-ergonomique-du-site-made-in-design-com-navigation-mega-menu

En somme un mega-menu pas vraiment… Design… Un comble !

On remarquera enfin la mise en avant des catégories « outdoor » et « services pros » plutôt bien faite à travers des codes couleurs dédiés. Si l’intérêt de la chose pour la catégorie pro se justifie assez logiquement à travers 2 segments distincts, il est plus difficile de l’envisager pour la catégorie “outdoor” – présumons que la saisonnalité en soit la justification (ndlr: présomption confirmée après avoir pu observer un bandeau promotionnel consacré à la “semaine outdoor”)

Une mini-barre de rassurance est très bien située, juste sous le menu de navigation (quand elle n’est pas remplacée par un call-to-action promotionnel…). Je noterais simplement qu’elle est malheureusement « cachée » par toute consultation du menu, ce qui est dommage.

Corps

ergo-note-revue-ergonomique-du-site-made-in-design-com-body

Ce qui saute assez rapidement aux yeux c’est la présence des 2 encarts promotionnels qui bordent la page et qui, il faut bien l’avouer, s’avèrent plutôt incitatif.

Un bon moyen d’étoffer sa liste d’opt-in et, enfin un e-commerçant qui a compris que la seule relation gagnante, c’était le win-win !

Je suis par contre un peu plus dubitatif sur le rappel des “6,90€ de frais de livraison – seulement” en bas de page, à l’heure où la plupart des e-commerçants affichent la “gratuité” de celle-ci (gratuité toute relative, évidemment tout est répercuté dans le prix, vous le savez fort bien).

Le slider défile trop vite (4 secondes quand 8 sont recommandées) et ne possède aucun bouton “pause” (même s’il se fige au survol de la souris). Les pastilles de “raccourcis” pour chaque vignette sont trop petites (Loi de Fitts).

Idée pertinente que d’avoir imaginé des thèmes “ponctuels” comme le “Métal” ou “Week-end à la campagne”. Ce type de mise à jour en lien direct avec la saisonnalité ou l’actualité est un très bon moyen de fidéliser sa clientèle ; elles entretiennent d’autant l’image d’un site vivant et dynamique. Les “Tendances” et “Meilleures ventes” forment des push-produits on ne peut plus classiques, leur disposition en “onglets” n’est toutefois pas particulièrement incitative. Je serais curieux de connaître le taux de clic des “Meilleures ventes”. Gageons qu’il y a largement moyen de l’améliorer, en tout état de cause.

Soit dit en passant, l’espace “Les plus populaires” avec 3 à 4 mots qui se battent en duel ne sert strictement à rien et occupe un espace/vide critique.

ergo-note-revue-ergonomique-du-site-made-in-design-com-les-plus-populaires

Footer

ergo-note-revue-ergonomique-du-site-made-in-design-com-footer

Rien à redire, le (super) footer n’a aucune particularité, ni aucune valeur ajoutée particulière.

Performances

Homepage chargée en 1,48sec pour 109 requêtes réprésentant un poids total de 966kB.

Sur ces 3 points, on frôle les limites de l’acceptable.

On est encore dans les clous mais il faut d’ores et déjà envisager un effort d’optimisation, au risque de franchir la ligne rouge !

Responsive

Madeindesign.com a échoué aux tests responsive. Le site ne s’adapte donc pas à la plateforme de l’utilisateur.

Le site est prévu d’origine pour une largeur fixe de 768 pixels, soit la largeur d’un Ipad ou d’un Ultrabook.

Page catégorie

ergo-note-revue-ergonomique-du-site-made-in-design-com-page-catégorie

La page catégorie affiche (et illustre) les sous-catégories directement dans le corps de page, utile et appréciable !

A noter que les “Top 20 rédaction”, “Top 20 nouveautés”, “Top 20 icônes” forment autant d’aides à la décision pour la catégorie Luminaires par exemple, et que si cela ne suffit pas, les “Tendances” regroupent plus spécifiquement encore les produits préférés de l’équipe de Made In Design, également accompagnées des nouveautés et des meilleurs ventes sous forme d’onglets.

Chaque catégorie dispose par contre d’incitations différentes. C’est très riche en terme de contenu mais cela manque un peu de cohérence et pourrait facilement désorienter un utilisateur lambda, en l’occurrence comme moi, peu familier de ce type d’univers, je me suis parfois un peu retrouvé perdu…

Essayez un peu de consulter les 5res catégories successivement et dites-moi quelle est la logique de navigation/hierarchie de l’information que vous en retirez ?

On peut (et on devrait) faire mieux à ce sujet.

Fiche produit

ergo-note-revue-ergonomique-du-site-made-in-design-com-page-produit

Est-ce que vous voulez voir une fiche-produit qui respecte toutes les conventions du genre ? RDV chez Made In Design !

Nombreuses prises de vues, mise en situation, fonctionnalité de zoom particulièrement aboutie (très peu de déperdition en terme de qualité) et intuitive (contrôle au clavier), fil d’ariane (bluffant ! Même si on peut craindre que cette fonctionnalité restera confinée à des usages confirmés), informations pratiques détaillées, disponibilité, frais de port, prix, paiement en plusieurs fois, quantité, cross-selling, upselling, déclinaisons, bref… TOUT a été pensé, un modèle du genre !

Cerise sur le gâteau : les principales infos sont “above the fold” et coupent la ligne de flottaison afin d’indiquer clairement qu’il en reste en dessous.

Panier

ergo-note-revue-ergonomique-du-site-made-in-design-com-panier

Le panier est également plutôt bien réalisé. La possibilité d’ajout d’un paquet-cadeau par article est judicieuse !

Par contre, nous y revenons là encore… Les codes promo, je ne le dirais jamais assez, sont à bannir, sauf à vouloir venir nourrir les 88% d’internautes qui abandonnent leur panier avant l’achat… (voir infographie webmarketing)

Puisque le Panier est considéré par Made In Design comme l’étape n°1 du tunnel de commande, sans plus attendre :

Tunnel d’achat

ergo-note-revue-ergonomique-du-site-made-in-design-com-checkout

Pitié !

C’était presque parfait, pourquoi pourquoi pourquoi me contraindre à m’authentifier/créer un compte ? Pourquoi…

Rappel : lorsque vous allez à Ikea, vous demande t-on votre carte d’identité en caisse pour payer par CB ? Non ! Alors ARRETEZ de demander aux gens de créer un compte. C’est chiant, c’est long, c’est inutile, ça ne leur (r)apporte rien, et ennui suprême : il faut choisir puis se rappeler du mot de passe…

Mettez-vous d’urgence au “guest-checkout”, sinon les autres le feront avant-vous !

Vous pouvez obtenir exactement les mêmes informations de la part de vos clients, mais sans que cela s’apparente, pour eux, à une obligation. Ils doivent pouvoir identifier ce partage d’informations comme un gain (réciproque – ce qui est d’ailleurs le cas, à n’y rien comprendre, dans la cadre de l’inscription à la newsletter pour laquelle Made In Design offre 10 euros de réduction) et non comme une contrainte.

Soyez innovants, soyez intelligents. Pensez utilisateur ! Et partagez vos bons plans avec l’#ergonote ;)

Sinon, au niveau de l’étape de la livraison, le pré-cochage de l’option “Chronopost”, c’est assez osé… Et pour le paiement, du choix et du paiement en 3x sans frais, c’est parfait !

Les CGV sont très bien réalisées, aucune clause abusive. Je note qu’elles font également office de CGU.

Les réseaux sociaux

Le blog

Si Made In Design fait office de pionnier en matière de e-Commerce, on peut s’étonner du virage “raté” que représente le blog ! Si à bien des égards le contenu est désormais une stratégie à part entière et un blog, un outil de référencement et de conversion avéré, cela semble encore échapper à Made In Design.

L’interface est graphiquement pauvre, les articles sont principalement illustrés, et sans contenu. Si une balise d’image (encore qu’elle soit bien rédigée…) permet bien d’améliorer son référencement, je (Google en vérité) vous assure que le rédactionnel encore d’avantage ! Mais pas ici, alors même que la matière ne doit pas manquer au vue des innombrables tendances qui inondent le web comme la presse de manière générale – pourquoi ne pas présenter des portraits/interview de designers que le site compte en nombre ?

Vraiment dommage…

Conclusion

Bilan mitigé…

Si Made In Design est en mesure de nous offrir ce qui se fait de mieux en matière de e-Commerce français ; que ce soit sur la Homepage, les fiches-produits, le panier… où tout est parfaitement en phase avec les conventions et règles ergonomiques actuelles.

Certaines lacunes, et non des moindres, comme le checkout ou le blog, laissent un arrière-goût amer.

Face à la croissance et l’innovation des e-commerçants étrangers, européens, et notamment allemands, que restera-t-il bientôt comme avantage compétitif à nos compatriotes ?

Ce sujet, l’air de rien, est fondamental et nous y reviendrons très vite dans un nouvel article sur la concurrence que subissent les e-commerçants français face à des professionnels étrangers qui sont désormais rompus à l’art de la pensée “orientée-utilisateurs”.

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

2 commentaires pour “L’ergo-note : revue ergonomique du site Madeindesign.com

    • Bonjour, et merci d’avoir lu cet article :)

      Front Vs. Back ! C’est très rapidement résumé, mais vous relevez ici une problématique majeure et particulièrement intéressante du développement d’un projet web/e-Commerce.

      Il est essentiel de créer davantage de ponts entre les différentes compétences/expertises qui interviennent, qu’il s’agisse d’ailleurs d’un e-Commerce en construction ou d’une entreprise e-Commerce active comme Made In Design – même si l’enjeux semble encore plus crucial compte tenu de votre niveau de croissance et de la vocation internationale de votre site.

      Votre question sur les magazines apporte sa propre réponse :

      Pourquoi avoir deux outils qui ont le même but ?
      C’est du double emploi (= confusion pour l’utilisateur). Et le fait que les magazines existent, qu’ils soient sympathiquement nourris et intégrés au site n’influe en rien sur la qualité du blog ou ses faibles retombées en terme de SEO.

      Enfin, les magazines sont perdus au milieu des autres onglets du menu principal, entre vente privées et cadeaux, alors que le blog est plus facilement identifiable dans le preheader. On a pas vraiment d’incentives à cliquer sur “Magazine” à partir de la HP : quel est la valeur ajoutée proposée pour l’effort (le clic) fourni ? On en sait rien. Aucun moyen de savoir ce qui se cache derrière “Magazine” sans avoir cliqué dessus.
      Blog, par contre, c’est assez clair dans la tête des gens pour qu’ils soient (relativement) incités à cliquer, encore que dans un monde idéal il y aurait une incitation au clic pour renforcer le trafic vers cet élément, si telle est votre stratégie.

      Si je devais faire un pari, je dirais que Blog a largement plus de chances d’être vu (et donc cliqué) par l’utilisateur que Magazine, même tel quel.

      Enfin, avoir baptisé l’URL des magazines “conseils-et-actualites” est intéressant mais sémantiquement très (trop?) proche de “What’s new” (url = nouveautes).

      On en revient à la question initiale : quelle raison ais-je de cliquer sur “Magazine” ?

Laisser un commentaire

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