X

UX : test utilisateur du nouveau site de la Fnac

Après avoir longtemps - sous-entendu des années - décrié le site internet de la Fnac comme l'exemple-type d'ergonomie inadaptée où l'utilisateur / consommateur est mal considéré, notamment dans le processus d'achat en ligne (communément appelé le "tunnel d'achat"), après avoir aussi souvent pointé du doigt de nombreux problèmes via les réseaux sociaux, nous avons été contactés par un membre de l'équipe Fnac.

Antoine PIC est responsable UX Web & Mobile à la Fnac et il nous a conviés au test utilisateur du nouveau site, encore en version beta. Voici quelques bribes de notre analyse et de notre expérience.

 

Tout d'abord une impression de modernité et de clarté où l'interface du site utilise toute la largeur de la fenêtre en mode responsive. La tendance est affirmée avec le menu de navigation présent à gauche, en mode fixe, ne laissant dans l'en-tête que la place minimale pour la recherche et les informations personnelles de l'utilisateur.

FNAC site web 2015 - accueil

FNAC site web 2015 - oh ! la belle nouvelle page d'accueil en version desktop !

FNAC site web 2015 mobile

FNAC site web 2015 - L'interface d'accueil en version tablette et smartphone

 

Visible juste à côté du logo, le moteur de recherche apporte des suggestions sémantiques qui accompagnent vraiment l'utilisateur : une classification claire, par catégorie ou en liens profonds. Le nombre de réponses de cette auto-complétion est volontairement limité afin d'être plus efficace. La Fnac privilégie la qualité plutôt que la quantité puisque de toute façon le cerveau humain a lui même une perception limitée : plutôt que des milliers des réponses à parcourir dans les rayons, seulement une quinzaine sont affichées pour vous aiguiller (ou pour faire mouche de suite !).

FNAC site web 2015 - recherche

FNAC site web 2015 - une auto-complétion efficace

 

Chacun s'en doute avec un tel site comme celui de la Fnac, le souci est la classification des contenus et des produits. Le nombre de catégories, de médias, de sous-catégories par rayon, etc. est un véritable casse-tête. Cette fois-ci c'est lisible et presque plaisant alors même qu'il y a ces nombreuses sous-classifications.

FNAC site web 2015 - sous-menu

FNAC site web 2015 - les nombreuses catégories et sous-catégories restent claires

 

Notez que dans les pages internes, le menu vertical de gauche est celui de la catégorie consultée. Vous pouvez à tout moment revenir au menu général en cliquant sur l'intitulé "Tous nos univers".

FNAC site web 2015 - menu navigation

FNAC site web 2015 - accès au menu

 

La liste des réponses à une recherche a également été nettement améliorée : la lisibilité est devenue confortable et les filtres de tri sont affichés dans cette colonne stratégique à gauche !

FNAC site web 2015 - liste résultats

FNAC site web 2015 - la liste des résultats de recherche est optimisée

 

La page produit fait partie des bonnes surprises expérientielles selon nous. Une idée UX, qui commence à se répandre, y est intelligemment proposée : en colonne latérale à droite, l'affichage  du résumé de l'article consulté avec des liens directs vers les sections de contenu (des ancres HTML). Cette zone a un triple avantage fonctionnel :

  • rappeler le produit consulté pour l'ajouter au panier,
  • permettre de naviguer très rapidement dans les sections de contenus qui peuvent s'étaler sur un long scroll (qui théoriquement augmente lorsque la résolution diminue),
  • permettre le repérage en cas de provenance sur une section précise de la page depuis un lien externe.
FNAC site web 2015 - ancres produit

FNAC site web 2015 - la bonne idée : le menu d'ancres verticales en colonne latérale de la fiche produit

 

Attaquons maintenant la partie la plus contestée de l'ancien site : le tunnel d'achat.

Force est de constater le gros travail UX et UI qui a été là aussi fourni. Le panier supérieur résume joliment vos articles en commande. La gestion est un peu dépouillée selon nous ; il manque une indication de prix à proximité de l'icône panier et la possibilité de modifier les quantités dans le layer qui apparaît au clic sur l'icône panier. Mais cela est en cours de développement nous assure Antoine PIC.

FNAC site web 2015 - panier

FNAC site web 2015 - un panier qui va s'enrichir (lui aussi)

 

Les étapes du processus d'achat sont claires, belles, propres, lisibles, déchargées des appels visuels perturbants et des textes gênant la priorité. L’accompagnement et l'aide à l'achat sont perceptibles afin de renforcer l'assurance et la confiance de l'internaute. Il reste encore quelques améliorations de détail : un raccourci pour ajouter une adresse, une zone d'insertion de code de réduction ou de bons cadeaux dès l'amont, etc. Ces détails sont aussi dans le périmètre des améliorations en cours, nous assure-t-on.

FNAC site web 2015 - achat

FNAC site web 2015 - un tunnel d'achat (enfin) agréable

 

Conclusion :

Nous soulignons le magnifique travail ergonomique et UX qui a été mené, ainsi que le webdesign responsive, présents dans cette nouvelle version du site de la Fnac.

Points forts :

  • la suggestion qualitative des résultats de recherche ;
  • la réflexion apportée à la page produit avec la barre latérale de navigation au sein des zones de contenus de cette page ;
  • et, le meilleur pour la fin, l'amélioration du tunnel d'achat ! \o/

Pour ce 3e point, il existe de plus un mode raccourci, donc encore plus simple. Comme le parcours de la majorité des clients sur le site se concentre sur un seul produit, il existe un panier mode "mono-produit" pour un processus d'achat optimisé sur une seule page unique.

Points faibles :

  • nous n'allons pas les révéler ici d'autant qu'ils seront corrigés dans les itérations prochaines. À vous de les trouver et de les suggérer sur l'interface du nouveau site via le lien "Un avis ?"

Le site est actuellement en version beta et testé en A/B-testing aléatoire. Il se peut que certains d'entre vous ne perçoivent donc pas encore la refonte. Le lot principal est en ligne depuis ce jour avec des itérations qui vont l'enrichir peu à peu en fonction des retours.

Sinon ? nous sommes ravis de cette nouvelle mouture.
La Fnac est une véritable institution ancrée dans le paysage commercial français. Elle doit se doter d'outils digitaux en adéquation avec le marché et les attentes de ses clients. On sent que la conception 2015 tient compte d'un vrai retour utilisateur : bravo !

13 commentaires sur cet article De “UX : test utilisateur du nouveau site de la Fnac”

  1. Nicolas 22 juillet 2015 à 10 h 42 min

    Le tunnel de commande est très propre mais la homepage bien que relativement épurée ne répond à aucun standard du e-commerce : menu à l’horizontale, moteur de recherche interne en haut à droite etc..
    Cela ne risque-t-il pas de perdre les utilisateurs et de nuire à la conversion ?

    • Christophe 22 juillet 2015 à 11 h 01 min

      Disons que cela correspond plus à une nouvelle tendance issue du mobile avec le menu vertical en colonne latérale. Cela s’éloigne des anciennes habitudes liées aux design Desktop mais je ne pense pas que cela nuise à la conversion. Les tests utilisateurs et les statistiques le prouvent/prouveront :) Voici un autre exemple e-commerce, chez Nike : https://www.pinterest.com/pin/98234835596608712/

  2. tdrop 12 août 2015 à 14 h 01 min

    Je suis d’accord avec Nicolas, je trouve que cela ne correspond pas au standard e-commerce.
    Je trouve le site est ergonomique à l’utilisation tablette / mobile, mais pas à l’utilisation ordinateur avec ce scrolling vertical. Qu’est ce que c’est que cette mode à tout calquer sur les tablettes ? il reste quand même un bon nombre de e-consommateur qui ont exclusivement un pc ou mac.

  3. Christophe 17 août 2015 à 11 h 41 min

    @tdrop : Il s’agit plus d’une évolution des interfaces numériques que d’un simple effet de mode. Le nombre de terminaux mobiles vendus est en constante croissance depuis leur apparition, alors que celui des postes fixes diminue (il est même inférieur à celui du mobile). Pour les mieux équipés, le nombre de pixels de nos smartphones dépasse celui de nos écrans d’ordinateurs fixes. Les proportions d’affichage sont donc privilégiées, plus les pixels, afin de prendre en compte l’affichage convenable dans tous les navigateurs.

    Il est donc évident qu’aujourd’hui l’utilisation fonctionnelle, l’UX/UI et le design apportés par le parc des mobiles influencent les interfaces desktop. La raison supplémentaire est aussi budgétaire puisque les interfaces sont développées en ‘responsives’ afin de s’adapter à tous les terminaux de consultation, sans développer de versions dédiées pour chacun.

    Les « standards e-commerce » évoluent donc avec les usages du « m-commerce ». Le site de la FNAC respecte certains ‘standards’ que vous évoqués, comme le panier et le compte toujours disponibles, ainsi que le moteur de recherche et la navigation. La consultation en desktop apporte des fonctionnalités et repères visuels en plus car l’écran le permet : le scrolling étant de mise, je trouve personnellement que l’affichage en colonne latérale fixe lors du scroll est une bonne idée : cela permet de conserver visuellement sur écran large le produit consulté, son prix et le bouton ‘ajouter au panier’ qui sont aussi des bonnes pratiques (pas des standards) e-commerce.

    Les usages et les retours utilisateurs, comme les votres @tdrop et @Nicolas, viendront en effet confirmer ou non ces partis-pris UX. À mon avis, le site va continuer d’évoluer en fonction des statistiques de fréquentation et de conversion :)

  4. Sophie 18 octobre 2015 à 19 h 46 min

    Bonjour,
    Ce nouveau site est pour moi un calvaire, et particulièrement l’utilisation de la rubrique Mon Compte.
    Sur l’ancien site j’avais créé 2 listes (liste1 : Musique / liste 2 : Livres) contenant chacune quelques dizaines d’articles sélectionnés.
    Depuis je ne peux plus consulter qu’une seule liste (Musique), l’autre étant tout simplement impossible d’accès (je ne peux visualiser que les 5 premiers livres enregistrés).
    Si je consulte un article, je dois ensuite rafraichir plusieurs fois ma page pour pouvoir revenir sur la liste.
    J’ai tenté de créer une nouvelle liste Livres mais dans ce cas ma première liste initiale n’apparait plus afin que je puisse transférer les sélections vers la nouvelle liste.
    Pour ce qui concerne les achats : je met un article dans mon panier et le consulte, j’ai le message : panier désespérément vide !!!!
    Bref ce site est détestable.

    • Christophe 19 octobre 2015 à 15 h 12 min

      Bonjour Sophie,
      merci de votre contribution ! Grâce à votre commentaire je viens en effet de voir le problème des listes : la création/suppression n’est pas compréhensible (je viens de rater 3 fois) et j’ai aussi un bug d’accès à mon compte / mes listes -> ce 2e point est à mon avis simplement un problème technique, donc améliorable. Pour le premier problème lié à la perception confuse de l’interface et des interactions, il faut par contre optimiser cela, j’en conviens. Souhaitez-vous que nous relayons ce point à la FNAC ?

  5. Bobby 5 novembre 2015 à 4 h 07 min

    Il est certain que les designers de la Fnac ont eu d’excellentes raisons de faire le design actuel.

    On notera que la forme en L du site segmente la page d’accueil surinvestit l’espace disponible sur l’écran, emmaillotant la navigation comme dans un carcan. Diviser la page en autant est généralement vue comme une mauvaise pratique dans l’industrie. Par exemple, Google indique comme un « Don’t » le fait de structurer des pages en L dans sa documentation sur la Material Design – saluée par la communauté de designers.

    On peut se demander pourquoi le site laisse si peu d’espaces vides, pourtant utiles pour faire respirer l’information aux yeux de l’utilisateur. Cela peut mener à des surcharges cognitives aux nombreux effets pervers – chute de l’attention, baisse de l’adoption utilisateur du produit… Lors du défilement de l’écran (scroll state), le menu sur la droite présente quatorze catégories. Un tel menu est légitime s’il est directement invoqué par l’utlisateur (par exemple, drop down via un hover state). Il est gênant lorsqu’il est par défaut, de manière persistante, sur l’écran.

    Il est étonnant de voir une barre de recherche si peu centrale à la navigation. Amazon, si le site propose d’autres manières de naviguer via des menus-déroulants, garde la barre de recherche comme point focal sur l’écran. Cela se traduit par un rectangle blanc sur fond gris foncé, offrant un contraste de 13:1. Sur Fnac.com, la barre de recherche est sur un fond gris clair sur blanc soit un ratio de contraste de 1,4:1. L’oeil ne vient pas se poser dessus, compliquant la prise en main.

    On est agacé de voir les panneaux qui viennent completer le menu vertical de gauche, ceux présentant les sous-classifications, venir couvrir la majeure partie de l’écran, faisant perdre à l’utilisateur le contexte de sa navigation. Leur largeur est d’environ 750 pixels de largeur soit presque toute la largeur de la page. Amazon qui a adopté le même système a des panneaux de 500 pixels, ce qui les rends moins intrusifs. Ici, l’utilisateur perd facilement de vue la page où il était.

    Les icônes en haut à droite le page ne sont accompagnés d’aucun texte. Ils n’expliquent ainsi pas leur valeur ajoutée pour l’utilisateur. Que signifie exactement l’icône de localisation dans un site comme Fnac.com ? C’est à l’utilisateur de faire le calcul mental. Des sites comme Airbnb accompagne leurs icônes de navigation d’une légende facilitant la compréhension du produit. De manière générale, il est bien vu d’accompagner les icônes d’une ligne de texte pour rendre l’interface moins cryptique.

  6. Sophie 18 novembre 2015 à 14 h 13 min

    Bonjour,
    Hasard ou coïncidence, je réitère la remarque de l’autre Sophie à propos des listes … Ce nouveau site est effectivement très pénible car il est vraiment impossible de consulter toutes les listes antérieurement crées et présentées agréablement sous forme de planche photo assortie de boutons « ajouter au panier » ou « supprimer » : les articles ne s’affichent pas, impossible de naviguer d’une liste à l’autre …
    J’avais pris l’habitude de « mettre de côté » des articles au fur et à mesure de mes visites sur le site histoire d’avoir des idées à souffler aux moments opportuns …
    Et bien à quelques semaines des fêtes, c’est raté ! quelle poisse, il va falloir rechercher les références et peut être bien aller à la concurrence … tant pis !!
    à moins qu’un correctif soit disponible ??

    • Christophe 18 novembre 2015 à 14 h 27 min

      Bonjour Sophie. Nous allons leur transmettre votre remarque. Merci de votre commentaire et bonne journée !

  7. Antoine 18 novembre 2015 à 15 h 14 min

    Merci pour vos retours.

    Concernant le bug dans « Mes listes »; c’est un bug que nous avons identifié et qui sera corrigé rapidement. Merci pour votre patience.

    Pour le reste, on est toujours en phase d’optimisation :)
    Une refonte totale sur un site aussi lourd oblige à lotir, et c’est tant mieux dans une démarche agile. On se nourrit des retours utilisateurs pour optimiser nos interfaces et parcours utilisateurs.

    • Christophe 18 novembre 2015 à 16 h 51 min

      Merci Antoine !

      Note pour les lecteurs : Antoine est « User eXperience Web & Mobile » à la Fnac.

  8. Fnac 22 janvier 2016 à 23 h 59 min

    J’aime beaucoup cette nouvelle version et félicite Antoine. Je suis cependant d’accord avec les remarques de Bobby et nottament concernant la barre de recherche, peu visible a mon gout et l’etouffement de la page du a l’accumulation de panneaux.

  9. codereductions.fr 7 novembre 2016 à 13 h 39 min

    De mon côté je trouve ça bien d’utiliser toute la largeur de l’écran, je préfère le mode mosaique, plus clair à mon sens.

Laisser un commentaire

Votre nom *
Votre mail *
Site internet
Message

Nous contacter

Pour nous (re)joindre

captcha

Coordonnées

NEOMA interactive by Linagora
100 Terrasse Boieldieu
Tour Franklin
92042 Paris - La Défense Cedex
France
(+33) 1 46 96 63 63