Agence WEX

Auteur/autrice : guillaume

  • 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 ^^

  • Rendez vos sites réactifs !

    Lors des derniers tests mutualisés qui se sont déroulés dans les locaux de Wexperience la semaine passée, un élément a fait la différence en terme de ressenti lors de la navigation sur les 4 sites de vente en ligne testés… il s’agit de la réactivité de l’interface !
    De plus en plus habitués à l’outil web, les utilisateurs ne savent plus attendre et leur patience est très vite épuisée lors de leur séance de shopping sur internet… Pourquoi surfent-ils pour acheter ? Pour aller plus vite et non pour attendre que le site veuille bien réagir ou non à leurs actions…
    Il est évident que concevoir une interface rapide n’est pas toujours évident, il est alors nécessaire dans ce cas de proposer un feed back immédiat à l’utilisateur pour  l’avertir que son action a bien été prise en compte par le système et de ce fait éviter les nombreuses erreurs qui pourraient être commises et qui ne feront qu’exaspérer davantage vos internautes.
    Par exemple, nous avons pu remarquer que sur certains sites que le temps de rechargement des pages suite à la sélection de filtres de tri pouvait être long. Dans ce cas il serait pertinent de griser la page pour montrer que toute action est inutile ainsi que de proposer un message précisant que la page est en chargement, ceci les fera patienter et leur permettra d’améliorer leur expérience sur votre site.
    De bons exemples :
    Jules.fr :


    Monshowroom.com

  • Attention à l’interprétation des cartes de chaleur

    L’eye-tracking est un outil de mesure pertinent lors de test utilisateur. Il permet de collecter tout un ensemble de données (nombre de clics, temps de réalisation des tâches, temps à la  première fixation de zones précises…) qui peuvent apporter énormément à l’analyse d’un site internet.
    Il permet aussi de produire de jolies images que l’on appelle cartes de chaleur… elles montrent la somme des fixations des utilisateurs sur une page durant une durée déterminée.
    Ces cartes de chaleur permettent effectivement de voir quelles sont les zones qui ont été les plus regardées par vos internautes. Mais attention elles sont fortement variables en fonction du nombre d’utilisateurs étudiés mais aussi et surtout en fonction de la tâche qui a été demandée à l’utilisateur de réaliser sur le site.
    Par exemple, la page d’accueil de Becquet.fr,
    Tâche réalisée : Vous avez une réclamation et souhaitez envoyer un mail à Becquet !
    Carte de chaleur de la page d’accueil des 12 utilisatrices jusqu’à la première minute

    Tâche réalisée : C’est l’anniversaire de votre meilleure amie, achetez lui un drap de bain personnalisé.
    Carte de chaleur de la page d’accueil des 12 utilisatrices jusqu’à la première minute


    Il est donc important de bien remettre en contexte la carte de chaleur fournie pour ne pas en faire une interprétation erronée…

  • Inspiration pour le design de vos lookbooks

    Cet article est un complément de la réflexion de Capitaine Commerce sur la séduction sur les sites de mode. Afin de séduire vos internautes et leur procurer du plaisir lors de la consultation de votre site, il est intéressant de proposer une mise en page et une navigation se rapprochant de la consultation d’un magazine. Voici quelques fonctionnalités et astuces trouvées sur la toile (pas nécessairement sur des sites de e-commerce) permettant d’optimiser l’expérience utilisateur.

    Disposer vos visuels produits sous forme de grille

    Portfolio de Malika Favre

     

    Malika Favre, une artiste française, dispose ses créations côte à côte dans un format unique. Quelques gifs animés attirent l’oeil et nous font comprendre qu’il faut cliquer sur les visuels pour en savoir plus. La disposition sous forme de grille commence à se retrouver sur les sites de mode, au détail près que souvent les tailles des visuels sont variables pour instaurer une dynamique.

     

    Le site Kiosk utilise également cette disposition en grille mais intègre une fonctionnalité très intéressante. A chaque clic et selon la résolution de la fenêtre du navigateur de l’internaute la grille se recompose.

     

    Kiosk

    Slideshow d’images pleines pages

    La séduction passe par de beaux et grands visuels. Germancraft l’a bien compris et propose une navigation image par image prenant la totalité de la page. On y navigue par clics de souris ou par des numéros discrets sur la gauche. Par défaut le slideshow est activé ce qui indique à l’internaute que d’autres images sont disponibles s’il ne l’avait pas remarqué de prime abord.

     

    Slideshow d'images pleines pages

     

    De plus il est possible d’afficher l’ensemble des images sous forme de vignettes et catégorisés par rubrique.

     

    Slideshow d'images pleines pages

     

    Cacher le menu

    Il est toujours difficile de proposer une certaine errance dans la navigation en laissant afficher le menu qui prend une place non négligeable dans la page. Une des solutions est de le cacher comme le fait Zara lors de la navigation dans certaines catégories.

     

    Menu caché de Zara
    Au survol de la souris sur le « + », le menu réapparaît.

    Prévisualiser les autres images

    Lors de la consultation d’une page, il est toujours utile d’informer l’internaute sur ce qu’il découvrira s’il clique sur les liens « précédents » et « suivants ». Cela évite les déceptions tout en invitant à poursuivre sa navigation. Exemple avec une page de la boutique de Stella McCartney.

     

    Visuel Stella

    Même si ce principe n’est utilisé sur le site que pour les visuels produits, il peut être bon de le généraliser pour les lookbooks et les magazines.

    ______

    Il ne s’agit ici que de quelques idées que je vous soumets. Que pensez-vous de leur exploitation dans le domaine du e-commerce ? Connaissez-vous d’autres astuces à soumettre à la communauté ?

  • Gestion des erreurs

    La création des formulaires demande une attention toute particulière. Bien que de nombreuses dispositions puissent être prises (indiquer les champs obligatoires, mettre en place des exemples à côté des champs à remplir), il est difficile de se mettre à l’abri des erreurs commises par les utilisateurs.
    Suite à des tests effectués sur un site de vente à distance, je me permets de mettre en avant l’importance d’avoir une bonne gestion des erreurs pour améliorer l’expérience des utilisateurs sur un site. Une mauvaise gestion peut amener l’utilisateur à abandonner en désespoir de cause, ce pourquoi il était venu.
    Quoi de plus frustrant que de valider un formulaire suite à une saisie, et de ne pas comprendre pourquoi on ne passe pas à l’étape suivante, même après avoir vérifié 3 fois sa saisie.
    Il est donc important que vos messages d’erreur soient bien visibles. Il est préférable de les indiquer à l’endroit où se situe l’erreur, en décrivant de manière claire et précise quel est le motif de l’erreur.
    Une bonne pratique : Le formulaire de demande de prêt de GE MONEY BANK  vérifie la saisie des utilisateurs en temps réel et fournit toutes les indications nécessaires à la bonne complétion du formulaire. Un choix audacieux qui permet aux utilisateurs de garder leur sang froid et de gagner du temps…

  • Wexperience dans la Voix du Nord !

    Un article sur Wexperience est paru ce matin dans le journal « La Voix du Nord ».

    Article de la Voix du Nord sur Wexperience
    Cliquez pour agrandir
  • Design flexible et présentation produits

    La tendance des sites de modes et d’habillement à proposer une mise en page de plus en plus proche des magazines imposent un design flexible. En effet les visuels d’ambiance en pleine page sont en train de devenir un standard dans ce secteur et ces images doivent s’adapter à toutes les résolutions d’écran.
    Si les pages d’accueil et d’univers sont généralement très bien réalisées, la présentation des pages rayons et des fiches produits est beaucoup plus statique et ne s’adapte pas en fonction de la taille de la fenêtre du navigateur. Exemple avec les pages rayon de Zara qui présentent les produits sur trois colonnes quelle que soit la taille de la fenêtre.

    Page rayon de Zara en 1680px de large
    Page rayon de Zara avec une résolution de 1680px de large

    La solution d’Amazon

    L’exemple n’est pas très original mais Amazon a le mérite d’innover dans la conception d’interface. En fonction de la taille de la fenêtre du navigateur, Amazon affiche plus ou moins de produits sur une ligne.

    Amazon 1024px
    3 produits avec une largeur de 1024px
    Amazon 1280px
    4 produits avec une largeur de 1280px
    Amazon 1680px
    7 produits avec une largeur de 1680px

    Vous pouvez faire le test chez vous en redimensionnement la fenêtre de votre navigateur.
    Je ne connais pas le coût de développement de cette technique ni comment elle a été développée mais elle m’apparaît comme une solution possible pour tous ces sites de modes qui optent pour un design flexible. Qu’en pensez-vous ?

  • Comment Wexperience évalue vos sites internet ?


    Pourquoi des tests utilisateurs ?
    Dans Petit plaidoyer pour les tests utilisateurs ( article précédent de notre blog ! ), nous vous avons déjà démontré à quel point l’amélioration de l’expérience client ne peut que participer à l’amélioration de votre business.
    Comment se déroulent ces tests ?
    Après avoir défini les profils de nos testeurs(euses) selon le site à étudier, nous les convions dans nos locaux pour effectuer les tests. Les entretiens sont individuels et durent entre 45min et 1h. L’utilisateur(trice) est confortablement installé(e) devant l’eye-tracker et une série de tâches préalablement définies selon l’usage du site lui est donnée. Un(e) ergonome est placé(e) à ses côtés afin de recueillir ses propos et réactions tout au long de la navigation.
    Quelles données et pour quoi faire ?
    Tout au long du test, la voix, le visage, le temps de réalisation des tâches, le nombre de clics et le mouvement du regard sont enregistrés. Ces données sont ensuite analysées et triées pour mettre en avant tous les problèmes rencontrés par les utilisateurs lors de la navigation.
    Et pour vous, quels résultats ?
    Nous vous fournissons un document détaillé regroupant :
    – les principaux défauts priorisés selon leur importance
    – les vidéos des utilisateurs naviguant sur le site et permettant d’illustrer ces défauts
    – des axes d’améliorations
    Si vous voulez en savoir plus, contactez-nous : http://www.wexperience.fr/contact