Agence WEX

Étiquette : e-commerce

  • Mesure de l’engagement sur le site d’ETAM

    La mesure de l’engagement est possible désormais

    L’émotion dicte nos choix beaucoup plus que nous ne voulons bien l’admettre. En e-commerce comme ailleurs. Mais comprendre ce que ressent un internaute face à une photo tient du domaine de l’impossible. Comprendre comment un visuel influence son comportement, de même.

    C’est pourquoi Wexperience s’est alliée à Perceptio Media, spécialisée dans la mesure de l’engagement, pour proposer à nos clients la possibilité de comprendre la perception émotionnelle des médias sur une page web. Afin de tester notre concept, nous avons mené une étude pilote sur le site d’Etam dont voici un aperçu des résultats.

    Exemples avec le site d’ETAM

    A) Comment deux offres peuvent-elles se concurrencer inutilement sur une même page

     

    Dans ce premier exemple, nous allons voir comment des utilisatrices cibles de la marque perçoivent une page d’offres, telle que « Love You Maman ». Il s’agit ici d’une analyse réalisé à la fois en utilisant l’eye-tracking et à la fois un outil de mesure émotionnel, en mode statique. C’est à dire que les participantes ne surfaient pas sur le site, mais il leur était demandé de regarder la page.

     

     

    Comme on peut le voir sur cette courbe d’attention/émotion, durant les 10 secondes d’observation. La page ne suscite que peut d’intérêt et d’émotion durant les 2 première secondes de visualisation, puis ces deux variables augmentent drastiquement à partir de la deuxième seconde. Pourquoi ? Analysons en même temps les parcours oculaires des utilisateurs.

     

     

    Les premières fixations sont mobilisées pour l’égérie et l’accroche « Love You Maman » qui provoquent un pic d’émotion et d’attention. Le visage de l’égérie provoque de l’attention (reconnaissance) plus une phase de recherche d’informations. L’émotion provoquée par le mannequin est une amorce émotionnelle. Après cette amorce, la mention « Love You Maman » prolonge l’émotion.

     

    Ensuite les participantes sont « activées » par la mention « Offert » située en bas à droite. Lorsque la mention « Offert » est parcourue visuellement, cela déclenche de l’intérêt et l’on observe un retour vers le « 1 haut + 1 bas = 10€ offerts » (tentative de rapprochement = incompréhension ?). Point de vigilance : 2 offres qui peuvent être distractrices l’une de l’autre.

     

    Enfin, le mannequin en robe et le prix sont regardés (attention + émotion) = projection dans l’achat.
    En revanche, la mention « Vive les robes » n’est pas lue.

    La mention « BE + » est peu saillante. C’est le mannequin en mouvement qui est regardé surtout à partir de la 8e seconde. Mais la mention « Gamme SPORT + » n’est pas lue.

    Comment une photo peut-elle séduire plus ?

    Autre cas de figure. Dans quel cas une photo peut-elle concourir à augmenter l’attractivité du produit ? Pour le savoir, nous avons analysé la page ci-dessous.

     

     

     

     

    La photo qui engage le plus émotionnellement est celle de gauche.
    Photo de gauche : le soutien-gorge est surtout regardé + le visage baigné de soleil + transfert des regards vers le maillot de bain avec rémanence de l’émotion.

     

    Ce transfert est efficace quand on constate que c’est un détail du produit, le nœud du soutien-gorge, qui provoque une émotion à la 9e seconde.

     

    On provoque une émotion par le mannequin et l’effet du halo solaire et ensuite on porte attention sur le produit en bénéficiant de l’amorçage émotionnel.

     

    NB : il est astucieux d’avoir masqué la saillance du visage du mannequin tout en reproduisant un effet « bain de soleil ». S’il avait été visible, le visage du mannequin aurait risqué d’empêcher de progresser vers le maillot de bain.
    La mention en haut à droite de la photo de gauche n’est pas lue.

     

    Engagement émotionnel et test utilisateur : le couple parfait pour analyser le merchandising d’un site

    L’analyse de ces pages a été, lors de l’étude, complétée par des tests utilisateurs où les testeurs interagissent par rapport à l’interface et ne sont plus statiques. Les deux méthodologies mixées entre elles ont pu fournir un bilan complet de la manière dont les internautes interagissent et réagissent au site Etam.com. De l’ensemble des résultats obtenus il a ensuite été possible de fournir des recommandations d’optimisation des parcours utilisateurs qui passent de corrections ergonomiques à des recommandations sur l’organisation du merchandising et sur le travail photographique.

     

    En comprenant l’influence, positive ou négative, des médias sur un site et en les corrigeant, il devient possible d’augmenter l’engagement des utilisateurs, non plus sur des critères d’utilisabilité ou des critères marketing, mais sur ce qui fait l’essence même de la décision du consommateur : l’émotion.

  • Création d’application e-commerce sur tablette : ne faites pas de fantaisie

    Aujourd’hui, c’est journée de test sur tablettes. Ceci m’a rappelé un petit impératif dont il me semblait qu’il fallait faire un petit rappel.
    Ce n’est pas parce que vous pouvez vous permettre des fantaisies en terme d’interaction qu’il faut vous les permettre !
    On le sait : les langages de développement des applis pour tablettes permettent des interactions qu’il est difficile de réaliser en HTML. D’où une certaine créativité ! Du son, des animations, des effets spéciaux, etc. Si cela peut satisfaire le web designer et les créas en charge de sa conception, cela peut aller à l’encontre de l’utilisateur. Vous n’imaginez pas à quel point la moindre interaction innovante peut perdre l’utilisateur et le détourner de ses objectifs. Aussi, même s’il est tentant de vouloir tirer parti de toutes les possibilités d’interaction de ses applis, mieux vaut tout de même le faire avec parcimonie et surtout en respectant les habitudes des utilisateurs.
    Et surtout, surtout, ne lancez pas une appli sans l’avoir fait tester par des utilisateurs finaux au préalable ! Vous ferez non seulement des économies en la modifiant à un stade où cela ne coûte pas encore trop cher, et, en plus, vous éviterez une phénomène de rejet massif si vous arrivez à détecter en amont « les loups » qui s’y cachent (et il y en a parfois plus qu’on imagine).
    Tester est d’ailleurs également un bon moyen pour mettre tout le monde d’accord (direction, concepteur, web marketeur) sur ce qui va ou ne vas pas sur une application.

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

  • 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é ?

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