Agence WEX

Blog

  • Dynamisez vos listes produits

    Optimiser la présentation des produits afin de maximiser les ventes ou la rentabilité est un art qui associe le design, l’e-merchandising et l’ergonomie. Alors que la théâtralisation du point de vente est devenue incontournable dans les magasins physiques, nous retrouvons trop souvent les sempiternelles listes produits où les produits sont rangés quatre par quatre, de même dimension, avec la même mise en forme… Si l’architecture de l’information et les options de filtres sont primordiales, cela n’empèche pas de casser cette organisation afin de mettre en scène, séduire et amuser. L’expérience utilisateur, votre image de marque et la mémorisation de votre site en sortiront grandies.

    S’émanciper de l’organisation classique des listes produit, d’accord mais comment ?

    Certains ont déjà eu de bonnes idées, il serait dommage d’en faire l’impasse. Commençons avec le site Tiffany & Co.

    Liste produit du site Tiffany
    Liste produit du site Tiffany & Co.

    Le site Tiffany & Co. varie la taille des visuels produits pour créer une dynamique dans la présentation des produits. Au survol s’exécute un zoom sur le visuel ce qui accentue cette dynamique. Il est toutefois dommage de devoir changer de page pour voir le reste des produits. Une liste infini qui se charge au fur et à mesure de notre descente dans la page aurait donné plus de cachet à cette page. Ce que fait d’ailleurs le site de Stella McCartney, notre exemple suivant.

    Liste produit du site Stella
    Liste produit du site Stella McCartney

    Ici le site a fait le choix de proposer un carrousel discret (les flèches du carrousel, très graphiques, manque de visibilité) en tant que premier élément de la liste. Ce carrousel utilise des visuels de grande taille ce qui permet de mettre un article en tête de gondole ainsi que d’inviter à parcourir la liste. Burton reprend ce principe de tête de gondole pour ses produits populaires sans pour autant proposer un carrousel.

    Liste produit sur Burton
    Liste produit du site Burton

    La taille du visuel du premier élément de la liste est très grande ce qui invite fortement au clic. Petit plus : il est possible d’afficher l’article dans d’autres coloris directement depuis la page rayon et cela sans rechargement de page. Et contrairement aux exemples précédents, Burton ne fait pas l’impasse sur les filtres produits. Ces derniers sont accessibles en haut de page via un menu apparaissant au survol.
    Varier la taille des visuels de la page rayon permet de créer une dynamique dans la présentation de l’offre. Et nous avons vu à travers les exemples de Burton et Stella McCartney qu’il n’y a pas besoin de fortement s’émanciper des présentations classiques. Toutefois d’autres sites vont plus loin et créent de véritables mosaïques. C’est notamment le cas du site Piiq.

    Liste produit du site Piiq
    Liste produit du site Piiq

    Ici l’interface crée du rythme dans la page en proposant trois tailles de visuels.  La présentation des produits est originale et fonctionnelle. Il y a fort à parier que cette présentation en mosaïque, ou du moins la variation de la taille des visuels dans les listes produits, se développera sur les sites e-commerce et figurera dans les Trends de conception de l’année prochaine. A surveiller de près !

  • Quand optimiser l’ergonomie de son site ?

    L’optimisation : un art de la patience

    L’optimisation ergonomique d’un site s’apparente à une forme de polissage qui permettrait d’en gommer les aspérités les plus impactantes sur le taux de conversion.
    Cette optimisation repose sur plusieurs axes d’analyse :

    • L’inspection ergonomique elle même
    • Les tests utilisateurs
    • Les webs analytics

    Et l’on peut ensuite compléter ces méthodes à l’aide de questionnaires, d’enquêtes ou de sondages ou de tout autre moyen de collecter de l’information objective auprès d’internautes.
    Le tout est de savoir rassembler une quantité de données suffisantes pour pouvoir agir. Mais cela ne nous dit pas à partir de quand cela vaut la peine.

    Seuls des sites générant un CA conséquent méritent d’être optimisés

    Disons-le tout net, un site ne générant pas quelques millions d’euros de chiffres d’affaire par an au minimum ne devrait pas à avoir à se préoccuper d’optimisation ergonomique. L’investissement n’est tout simplement pas rentable.
    Au delà, et pour des montants parfois modiques, l’optimisation ergonomique permet en effet de dégager de nouvelles sources de profit proportionnelles au chiffre d’affaire. Plus celui-ci croît, meilleur sera l’investissement, car il demeure à un coût fixe.
    On peut juste s’en donner une petite idée en calculant ce qui se passerait si un site avec 300,000 v.u. mensuel et un panier moyen de 100€ augmentait son taux de transformation globale de 3,5% à 3,6%. Un CA supplémentaire de 360,000 euros / an serait alors généré. Le tout est de savoir si le coût de l’optimisation ne vous a pas coûté plus que la marge brute de ce CA supplémentaire (à ce niveau là, il n’y a aucun doute)
    Cela veut-il dire que si vous êtes en deça de ces chiffres – que seuls quelques dizaines de sites atteignent en France – vous ne devez pas vous préoccuper d’ergonomie ?
    Au contraire, un checkup n’est jamais inutile, bien au contraire. Il saura vous dire rapidement si votre site présente des écueils majeurs et nécessite urgemment des correctifs ou pas. Un test utilisateur, à ce titre, peut être édifiant pour détecter notamment des points de blocages dans le tunnel de commande ou de la navigation.

    Un site peut-il avoir une ergonomie parfaite ?

    Dans le contexte actuel, vu la vitesse d’évolution du web et l’amélioration permanente du niveau d’expertise de la population, il est difficile de pouvoir prétendre à une ergonomie parfaite. Mon avis est qu’il faut se préoccuper de cet aspect en permanence et non pas de manière épisodique ou à grands coups de serpes. C’était l’objet de mon dernier article : Optimiser ou refondre : comment faire évoluer un site ?

  • Aidez les utilisateurs à parcourir vos pages rayon !

    La pagination pose régulièrement des problèmes sur les sites que nous testons. Beaucoup proposent une large gamme de produits. Afin d’affiner ces listes, des filtres sont proposés. Il est aussi possible de changer le nombre d’articles par page, diminuant ainsi le nombre de pages rayon proposées.
    Cependant les utilisateurs n’utilisent pas tous les filtres, de peur de manquer une partie de l’offre. Et certains n’aiment pas non plus augmenter le nombre d’articles par page de peur de se retrouver avec une liste de produits  interminable où il est difficile de rester concentré jusqu’à la fin. Dans ce cas-là, il n’est pas rare de se retrouver face à une dizaine de pages rayon… et c’est là qu’une mise en forme pertinente de la pagination prend toute son importance.
    Des exemples de pagination qui ne facilitent pas la recherche des utilisateurs :

    Une zone de clic trop petite qui demande aux utilisateurs beaucoup d’application

     

    Si l’utilisatrice souhaite revenir à la 1ère page, le retour sera laborieux

     

    Un accès aux pages intermédiaires par les pointillés un peu hasardeux

     

    Une surcharge d’informations

    Il est important de mettre en place une pagination adaptée à l’offre de son site. Si l’utilisateur peut se retrouver devant une quantité non négligeable de pages rayon il faut alors lui permettre de retourner le plus facilement possible à chacune des pages. La méthode qui a pour l’instant fait ses preuves lors des tests est le menu déroulant. L’utilisateur peut ainsi naviguer de pages en pages et retourner sur celles de son choix à tout moment. De plus, l’utilisation du menu déroulant ne surcharge pas la page.

    Exemple de pagination sous forme de menu déroulant :

  • Liste produit et représentation visuelle du scroll

    Un scroll original et pratique

    L’article de Geoffrey Dorne sur le nouveau service de Google « What Do You Love ? » a mis en évidence le module de scroll utilisé dans la page. Ce système visuel, toujours visible, permet de savoir où l’on se situe dans la page et ce qu’il nous reste à parcourir. Il est également possible de contrôler le scroll en déplaçant le rectangle bleu symbolisant ce qui est visible sur la page. Google nous propose ici une fonctionnalité originale et pratique lors de la consultation d’une page très longue.

    Scroll du service de Google What do you love
    Le scroll selon Google

    Une utilisation possible en e-commerce ?

    Si la plupart des sites e-commerce répartissent leur offre sur plusieurs pages, certains sites proposent une liste produit infini. C’est le cas du site de Stella McCartney.
    Il peut être intéressant ici de proposer à l’utilisateur un indicateur visuel pour lui permettre de connaître le nombre restant de produit à afficher. Cela peut être également un indicateur de repérabilité pour l’utilisateur qui pourra retrouver facilement un produit qui lui plaisait en connaissant sa position dans la page.
    Que pensez-vous de cette fonctionnalité ? En voyez-vous l’utilité ?

  • Optimiser ou refondre : comment faire évoluer un site ?


    A la question faut-il optimiser ou refondre un site, je réponds sans hésitation : il faut optimiser.

    Avec le temps, les coûts de maintenance d’un site augmentent proportionnellement à son âge;

    Au bout de 2 ou 3 ans de vie d’un site, la tentation peut-être grande de « tout refaire ». L’histoire du ecommerce est courte et vu la vitesse d’évolution technologique du web, un site de 3 ans d’âge ressemble à une vieille bourrique qu’on aurait trop chargée prête à rendre l’âme.
    Prenez un vieux site.  Le code est devenu compliqué à faire évoluer. Rustines, patches, les développeurs n’ont pas toujours respecté les règles de développement. De nombreux plugins ou script extérieurs sont venus s’insérer. Toujours est-il que votre site coûte de plus en plus cher à maintenir et qu’il est de moins en moins souple.

    Changer de plateforme permet-il de résoudre tous les problèmes d’un coup ?

    Il faut donc, vous dit-on, changer de plateforme. Votre plateforme qui était à la pointe du progrès il y a 3 ans est aujourd’hui dépassée par d’autres solutions. La tentation est grande de repartir sur un nouveau code. Et tant qu’à faire, autant en profiter pour améliorer et corriger toutes les petites choses que personne n’a jamais eu le temps de faire. Ajouter de nouvelles fonctionnalités. Refaire le design que vous ne pouvez plus voir en peinture (voir l’avis de Jacob Nielsen à ce sujet : Fresh vs Familiar : How Agressively to redesign).
    Votre décision prise, il apparait que votre projet de refonte vous coûtera biiiiiip euros et durera biiiiiip mois de réalisation. D’autant plus que pendant ce temps là, il n’est pas question d’allouer du budget à faire évoluer l’ancienne version.

    Risques d’une évolution brutale

    Les dangers liés à ce choix sont multiples :

    • Explosion des coûts et dépassement des délais : c’est classique en informatique, un peu moins dans le web, mais j’ai rarement entendu parler de projet qui tenait les plannings et respectait les budgets
    • Risques informatiques
    • Risques ergonomiques. Ex : changer un tunnel de commande sans test revient à faire voler un avion sans jamais avoir fait d’essai en simulateur
    • Perte de temps fonctionnelle sur votre ancien site qui n’évolue plus. Et pendant ce temps là, la concurrence avance.

    Arguments pour l’optimisation progressive

    Une autre attitude consiste à penser non pas en terme « technologique », mais en terme « client ». Ce que vos clients veulent, ce sont des prix moins chers, une facilité plus grande à commander, une offre toujours plus variée et nouvelle, du service, plus de service.
    Un site mature est comme un paysage raviné par les eaux. Chaque petit ruisseau, rivière ou canal est un parcours client créé par le temps. Changer ces parcours revient à changer les habitudes. Grâce à votre outil de web analytics, vous devriez avoir une connaissance parfaite de la physionomie de ce paysage et de ce qu’il s’y passe. Vous en connaissez les points de blocages et par là même les points d’amélioration. Cela fonctionne, peut-être pas de manière optimale, mais cela fonctionne et parfois il tient à peu de chose de l’améliorer grandement.

    Tester pas à pas

    Tester votre site pas à pas pour l’optimiser progressivement est peut-être la meilleure manière de procéder en permettant de limiter le risque tout en mesurant les potentialités réelles des hypothèses que l’on émet. Exemple : vous souhaiteriez augmenter le temps de navigation des visiteurs nouveaux sur votre site (plus les visiteurs restent longtemps, plus ils ont tendance à « être convertis » en clients). Dans ce cas, vous penserez sûrement à améliorer votre « descente produit » (univers, rayon et fiche produit) en améliorant l’information, la présentation des produits, afin d’engager plus vos visiteurs.

    Tester pour réduire les coûts de développement

    Pour peu que l’on dispose des bons outils, il est moins dangereux de développer une version (ou deux, ou trois) alternative à une page en en modifiant certains aspects (en ne touchant qu’au code HTML, CSS et javascript) que de mettre en ligne directement une nouvelle version en utilisant la fameuse technique du doigt mouillé (ou celle de l’opinion du plus gros salaire). En testant, non seulement, vous obtiendrez un retour en temps réel des internautes de la meilleure version, mais vous aurez également des données chiffrées. Et il ne vous restera plus qu’à la mettre en ligne (presque sans coût supplémentaire).

    Avantages de l’optimisation

    Il est ainsi possible de mettre en oeuvre un processus cyclique de test qui vise à diminuer le risque de mise à jour ou de refonte à l’aveugle. Ce processus a de nombreux avantages :

    • Il est moins risqué en terme de changement des habitudes des internautes
    • Il donne droit à l’erreur (vous éliminerez, chiffres à l’appui les mauvaises idées et ce sans discussion possible)
    • Il est plus facile à défendre financièrement qu’une refonte complète
    • Il est également moins onéreux, puisque les investissements réalisés en tests peuvent être vite amortis par l’amélioration des KPI (taux de transfo)
    • Il permet d’avancer toujours dans la bonne direction

    Quelques inconvénients :

    • Adopter ce processus, comme j’ai pu souvent le constater, suppose néanmoins que vos équipes IT ne soient pas monopolisées par des tâches évolutives lourdes ou de maintenance corrective (ce qui est souvent le cas). Autrement dit, j’ai déjà vu souvent des responsables webs se payer un bel outil d’AB testing, mais ne jamais s’en servir, faute de main d’oeuvre.
    • Le choix des KPI et la méthodologie de test nécessite un certain apprentissage, car si l’objectif ultime reste toujours d’optimiser le taux de transformation. Il n’en reste pas moins que d’autres indicateurs sont tout aussi pertinents, voire, beaucoup plus importants. Il est également primordial de bien savoir interpréter les résultats. Je vous donne un exemple.
      • Pierre a décidé de changer la couleur du bouton « Ajouter au panier » de sa fiche produit. Il décide de tester 3 versions : le rose, le vert et le bleu. Il lance son test et au bout d’une semaine, sur un segment global de trafic de 30% de la masse totale de son trafic et sur une catégorie de son catalogue, il découvre que la version rose convertit le mieux. Il décide donc de garder la couleur rose. Mais Pierre a-t-il bien regardé tout ses indicateurs ? S’il avait été plus loin, Pierre se serait peut-être rendu compte que l’augmentation de son taux de transformation avait été anéanti par une baisse drastique du panier moyen dans le cas du bouton rose. Deuxième erreur, Pierre n’a testé qu’une trop petite partie de son trafic sur un temps trop limité. En recommençant son test sur plus de catégorie de produits et sur un trafic plus important, il aurait vu qu’au final, c’était une autre version qui apportait les meilleurs résultats.
    • Tester implique d’installer un outil d’AB testing. Attention à bien le choisir. Même si Google Website Optimizer est gratuit, il reste très limité fonctionnellement et nécessite beaucoup d’interventions techniques pour en tirer pleinement parti. De la même manière, évitez le piège de l’outil qui fait tout, mais qui vous coûte un bras, et dont vous n’utilisez qu’un petit pourcentage des capacités (suivez mon regard 😉 )

    L’approche client remet en question la manière dont un site doit évoluer et grandir :

    • Elle repose sur une observation fine des utilisateurs (par différents angles de vues : par les metrics du site, par des tests utilisateurs, des études ergonomiques, des questionnaires à distance, des focus group).
    • Elle implique une gestion différente des équipes IT : certains sont affectés à des tâches évolutives de fond, d’autres aux tests, d’autres encore à la maintenance corrective.
    • Un consensus sur cette méthodologie doit régner depuis la direction jusqu’aux équipes de développement et les convictions intimes de certains doivent céder le pas aux faits. Autrement dit, il faut changer les mentalités (et ça, c’est pas facile).

    L’approche client ne remet pas en question les évolutions fonctionnelles, ou les refontes graphiques. Elle les intègre au sein d’un processus d’évolution rapide en cascade plus proche du métier de jardinier (patience, observation, interventions mesurées, prise en compte des saisonnalités) que du bâtisseur (on rase tout et on recommence).
    Quel est votre retour d’expérience sur ce sujet ? Avez-vous des exemples ?

  • Eye Tracking à distance, résultats fiables ou arnaque ?

    Wexperience a participé récemment à l’évènement EyeTrackUX dédié à l’eye-tracking et à l’expérience utilisateur. Lors du discours d’ouverture, Aga Bojko, spécialiste du domaine, a mis en évidence la distinction entre eye tracking et « mouse tracking » puis les différences entre des tests d’eye-tracking classiques et des tests proposés par des services d’eye-tracking à distance.

    Mouse Tracking = Eye Tracking

    Le mouse tracking consiste à enregistrer les mouvements de souris de vos visiteurs et à proposer des représentations visuelles des données recueillies (comme par exemple des cartes de chaleur). Les services de mouse tracking prétendent obtenir des résultats correspondant aux parcours visuels des utilisateurs, et ceci pour des coûts beaucoup moindres.

    Mouse Tracking
    Le site promet un parcours du regard précis et des représentations visuelles correspondant à ce que les utilisateurs regardent sur la page.

    Pourquoi cette affirmation ?

    En raison de cette étude : « What can a mouse cursor tell us more?: correlation of eye/mouse movements on web browsing » qui étudie les relations entre les mouvements de souris et le parcours du regard durant la navigation web. Les données de l’étude montrent que sur la totalité des zones que le curseur a visité, 84% d’entre elles ont aussi été visités par un regard d’utilisateur. Toutefois, l’étude précise également que lors des tests, la distance entre les mouvements de souris et le regard des utilisateurs est allée de 0,1 pixel à 1137,4 pixels, avec une moyenne de 290,5 pixels. Rien de bien précis donc.

    Lors de nos séances de tests utilisateurs, nous avons remarqué que certaines personnes passaient le curseur de leur souris sur les éléments qu’ils étaient en train de lire. Néanmoins la grande majorité déplacent leur souris une fois après avoir identifié sur la page les éléments d’interaction (lien, boutons, …).

    Simulation de regards humain

    D’autres services proposent de simuler par des ordinateurs les 5 premières secondes du parcours oculaire humain à l’arrivée sur une page. Aga Bojko a testé trois de ces services (voir son article – en anglais). En voici les résultats.

    Voici une carte de chaleur représentant le parcours visuel de 21 participants lors des 5 premières secondes de navigation :

    Eye tracking

    Et voici la même page avec les différents services d’eye-tracking à distance :

    Carte de chaleur eye tracking à distance
    EyeQuant, qui assure 90% de corrélation avec l’oeil humain
    Eye Tracking à distance
    AttentionWizard, 10 pages pour 1 penny

    Eye Tracking à distance
    FengGUI, 5 pages pour 25 dollars

    Détail très étonnant, FengGUI nous indique que la première fixation de l’oeil se trouve en dessous de la ligne de flottaison, toujours d’après Aga Bojko.

    Eye Tracking à distance
    La première fixation de l’oeil serait en bas de page sous la ligne de flottaison ? /:)

    La responsable du eye-tracking chez User Centric remarque de fait que ces simulations par ordinateur font l’impasse sur des éléments essentiels :

    • l’utilisateur scrolle,
    • l’utilisateur peut venir sur le site avec un objectif ou un but ce qui va influer sur sa navigation,
    • l’utilisateur peut déjà avoir visité la page et donc se comporter différemment.

    Des progrès à faire

    Réaliser des tests utilisateurs à distance avec l’eye-tracking serait un plus dans l’analyse d’interfaces. Les interfaces seraient testées avec l’environnement de l’utilisateur (matériel mais aussi avec toutes les distractions qu’il peut y avoir lors d’une navigation sur Internet), ce qui limiterait le biais que l’on peut avoir en faisant venir des utilisateurs dans un environnement étranger. Toutefois, à l’heure actuelle, ces solutions ne sont pas fiables pour prendre des décisions concernant l’utilisabilité ou même sur la disposition d’éléments e-merchandising.

  • Un réel accompagnement du client


    Proposer des vendeurs sur un site internet comme dans un magasin physique c’est possible et Jimmy Fairly l’a fait. Ce site spécialisé dans la vente de lunettes solaires et de lunettes de vue propose une fonctionnalité de chat qui  permet à tout moment de la navigation d’entrer en relation avec un « vrai » opticien.

    Cette fonctionnalité de chat est présente sur toute les pages dans le header et sous forme d’onglet à droite de la fiche produit. Elle est visible mais n’est pas particulièrement mise en avant.
    Petit bonus : si un « fairly opticien » est présent au moment où vous vous connectez, il se peut que ce soit lui, qui au bout de quelques temps de recherche, vous interpelle pour savoir si oui ou non vous avez besoin d’aide. Ce qui peut se révéler très pratique dans le cas où vous n’auriez pas vu la fonctionnalité et que vous auriez des interrogations plein la tête.
    La fenêtre de chat s’ouvre alors en bas de page, n’est pas intrusive et ne perturbe absolument pas la navigation. Certaines fonctionnalités sont proposées afin de pouvoir mémoriser la conversation (imprimer, recevoir par mail) ce qui permet de garder les informations fournies par l’opticien. Il est aussi possible d’augmenter ou de rétrécir la taille de la police d’écriture.
    De plus, afin de ne pas encombrer la page, la fenêtre se ferme automatiquement lorsque la conversation est arrêtée depuis un certain temps (Un message prévient l’internaute à l’aide d’un petit décompte !) . On peut néanmoins accéder de nouveau à la discussion très simplement au cours de sa navigation.


    L’offre de ce site se prête tout particulièrement à ce genre de service. L’achat d’une paire de lunettes de vue sur internet n’est pas forcément rassurant pour l’utilisateur et peut amener à se poser de nombreuses questions.
    Une aide qui devrait être appréciée et encourager les internautes à faire une bonne action 😉 : chez Jimmy Fairly, une paire de lunettes achetée = une paire de lunettes offerte à une personne dans le besoin.

  • Adaptez votre site à votre offre produit

    Aujourd’hui faisons un zoom sur une fonctionnalité vue récemment sur la page d’accueil du site Archiduchesse.com. Pour rappel, ce site a fait le choix de présenter une de ses catégories de produit en page d’accueil. Exit donc les sempiternelles offres commerciales et autres constituant la première page du site. Bien sûr c’est un choix qui se justifie par rapport à l’offre produit et qui ne peut pas être adopté à tous les sites marchands.

    Une déclinaison de l’offre impliquant une évolution ergonomique.

    Jusqu’à récemment les produits étaient présentées de la manière suivante sur la page d’accueil.
    Présentation des produits en page d'accueil du site archiduchesse.com
    La disposition des tailles, permettant d’ajouter directement une paire au panier, convenait très bien jusqu’à ce que l’offre produit évolue. Proposant désormais des chaussettes pour enfants*, le choix de taille est passé de 3 à 7. L’interface a donc dû évoluer pour accueillir cette offre supplémentaire. Evolution que voici :

    Les filtres de taille sur la page d'accueil d'archiduchesse.com
    Des filtres de taille directement sur la page d’accueil

    Une augmentation de l’offre nécessite des options de tris.

    Vos yeux experts n’ont pas manqué de remarquer qu’outre la nouvelle disposition des tailles très bien intégrée graphiquement, le site propose désormais un filtre de taille. L’offre augmentant, il est nécessaire de proposer aux utilisateurs du site des moyens de faire le tri pour l’aider dans sa navigation et dans sa sélection d’achat.
    = Expérience utilisateur +1
    En sélectionnant sa taille, le site enlève les couleurs non disponibles dans la taille demandée et réagence dynamiquement les vignettes produits selon leur ordre chromatique. C’est très bien fait. De plus ce ré-agencement joue le rôle de feedback, le site informe l’utilisateur sur l’efficacité de son action.
    = Expérience utilisateur +2

    Petit bémol : avec une résolution de 1024px de large, les filtres se superposent sur la dernière colonne.
    Comment trouvez-vous cette évolution ?
    ———-
    * : petit coup de pouce pour le référencement car j’aime bien le site ^^

  • Emerchandising de mode : la fiche produit sur les sites Homme

    Cet article sera le premier d’une série concernant le emerchandising sur différents sites de mode. Pour cette première, nous nous focalisons sur les fiches produit « homme ». Après avoir vu et analysé plusieurs sites, WeXperience vous propose quelques points fondamentaux. Vous pouvez suivre cette rubrique en vous abonnant à notre compte twitter ou à notre newsletter.


    1- L’importance du visuel
    Le dicton « je ne crois que ce que je vois » peut être employé pour l’élaboration d’une fiche produit. Généralement situé sur la gauche, le visuel doit être clairement optimisé tant sur la qualité de la photographie que sur l’élaboration de son zoom. En mettant l’accent sur une excellente qualité de photo et un nombre de visuels suffisants, cela permet en parallèle de pouvoir alléger le descriptif de son produit. Bien travailler son visuel, c’est permettre de donner des informations qui n’auront pas besoin d’être écrites. Parmi les sites vus, Jules et Zara sont incontestablement au point.

    Fiche produit du site de Jules
    Le traitement du visuel est la priorité chez Jules

    2- Délimiter ses blocs d’information
    Par la suite, mettre à disposition un descriptif pertinent et des étapes de choix (couleur et taille) efficaces sont également des priorités importantes. Cependant, il ne s’agit pas de les mettre en place n’importe comment. Celio et H&M proposent deux façons de procéder :

    • La marque française oriente sa fiche produit vers l’action de l’utilisateur. Après le visuel, il est proposé de choisir directement la couleur et la taille du produit. Le tout est élaboré en étapes numérotées avec des intitulés s’adressant directement au consommateur. Le descriptif plus détaillé du produit se trouve en dessous de l’image, moins visible.
    • Du côté des Suédois, description de l’article et choix sont alignés sur la droite de la fiche produit. La délimitation se fait à l’aide de deux colonnes qui permet un bon équilibre des informations. En complément de visuels de moyenne qualité, le descriptif est de suite lisible et l’on perçoit facilement les actions à mener avant d’ajouter sa chemise au panier.
    Fiche produit du site de Celio
    Celio oriente sa fiche produit sur l’action de l’utilisateur
    Fiche produit du site de H&M
    H&M propose une autre façon de présenter le descriptif

    3- Une bonne gestion des erreurs
    Il faut également prendre en compte que, après avoir bien mis en place ses informations, nous ne sommes jamais à l’abri d’une erreur (oubli du choix des tailles, mauvaise couleur) au moment de cliquer sur le bouton panier. Dans ce sens, l’initiative de prévenir avant de cliquer ou de corriger ce qui n’a pas marché est normal. Cependant, il est important de penser un message pertinent et une visibilité efficace. Généralement, les sites proposent une petite bulle d’information situé au dessus du bouton panier ou à l’emplacement où a été commise l’erreur. Voici deux exemples de messages d’erreur ci dessous:

    L'infobulle d'erreur chez Jules
    Jules propose une infobulle après le clic, mais peu visible
    La gestion des erreurs de H&M
    H&M prévient l’erreur, une infobulle visible sur le bouton

    Bien sûr, d’autres petites choses sont à penser pour optimiser sa fiche produit. Mais il est fondamental de beaucoup travailler ces trois points pour offrir une présentation efficace à l’utilisateur.

  • Camaïeu.fr teste son site avec weXperience

    Camaïeu.fr, Unigro.be, Amataï.fr et CG59.fr ont confié leurs tests utilisateurs et audits de site à weXperience.

     

    Unigro.be : Basé en Belgique, UNIGRO distribue l’ensemble les biens d’équipement de la maison et de loisir pour le groupe 3Suisses International. Nous avons le plaisir de travailler une seconde fois pour ce e-commerçant.

    tests utilisateurs par weXperience.fr sur la Home Page UNIGRO.BE
    tests utilisateurs par weXperience.fr sur la Home Page UNIGRO

    Amatai.fr : Spécialiste en vêtements de grande taille ce nouveau client souhaitait obtenir une vision globale de l’utilisabilité de son site. Wexperience, spécialiste des tests utilisateurs en eye tracking, réalise également des audits ergonomiques. Deux ergonomes web ont analysés l’ensemble des pages du site pour produire un document de synthèse relevant les axes d’amélioration de la navigation pour l’optimisation de la transformation.

    Audit Ergonomique du site Amataï.fr par weXperience
    Audit Ergonomique du site Amataï.fr par weXperience

    Camaïeu.fr : Nouveau client ayant craqué pour un Test Utilisateur. Une innovation weXperience qui propose de réaliser un test utilisateur sur une partie d’un site, une nouvelle fonctionnalité, une nouvelle fiche produit ou le tunnel de conversion. Le test utilisateur est économique, rapide et adapté  pour tester vos évolutions avant leur mise en ligne. Moins de surprise c’est plus de transformation.

    Test Utilisateur du site Camaieu.fr par weXperience.fr
    Test Utilisateur du site Camaieu.fr par weXperience.fr

    Conseil Général du Nord : Le site institutionnel du Conseil Général du département du Nord est très riche en contenu et souhaitait obtenir une vue précise de son architecture d’information. L’inspection ergonomique a fourni une nouvelle approche plus cohérente dans le cadre d’un projet de refonte.

    Inspection Ergonomique sur site CG59.fr par wexperience.fr
    Inspection Ergonomique sur site CG59.fr par wexperience.fr

    Quels que soit votre problématique, avec ses tests utilisateurs et ses audits ergonomiques, weXperience optimise votre transformation et l’organisation de votre contenu web pour une meilleure expérience utilisateur.

    Vous cherchez à augmenter la performance de votre site ?
    Contactez Emmanuel au 09 81 02 61 93 ou via notre formulaire.