Agence WEX

Étiquette : Optimisation

  • Retour sur la refonte d’un site spécialiste du syndic en ligne collaboratif : le cas Syndic One

    Il y a maintenant 8  mois, Syndic One, le spécialiste du syndic collaboratif en ligne confiait la refonte de son site à Wexperience. Il s’agissait surtout de clarifier l’offre proposée par Sergic mais aussi de moderniser le site.

    syndicone-a-la-une

    Qui est Syndic One ?

    Filiale du groupe Sergic, spécialiste de l’immobilier, Syndic One est le leader du syndic en ligne dédié aux petites copropriétés. 

    Objectifs de la refonte

    • Besoin de clarifier l’offre proposée par Sergic, souvent mal comprise sur le site
    • Besoin de remettre au goût du jour la charte du site
    • Besoin d’augmenter la prise de lead

      Réponse de Wexperience

    À chaque projet, sa réponse propre, mais avec des méthodologies centrées utilisateurs.

    1) Comprendre les besoins, les attentes et juger la performance du site actuel

    Après plusieurs projets de refonte de sites effectués par les équipes Wexperience, c’est en 3 phases que nous avons piloté ce nouveau projet. Dans un premier temps, des tests utilisateurs d’une durée de 30min avec 6 testeurs ont été réalisés sur l’interface actuelle à savoir l’ancien site (cf ci-dessous). Le principal objectif de cette phase d’immersion et de préparation a été de juger la compréhension de l’offre. Lors de ce test, un questionnaire UXM de mesure de l’UX de notre solution UX.Care a également été soumis aux testeurs.

    ancienne-version-syndicone
    Ancienne homepage du site Syndic One

     

    Nous nous sommes rendus compte que de nombreux utilisateurs ne saisissaient pas les contours de l’offre. L’interprétation était floue et aucune réponse à leurs questions n’était réellement fournie. Hotjar, et sa solution de Clic Map & Scroll Map a également été utilisée en début de projet, afin de suivre et comprendre les habitudes réelles de navigation des utilisateurs. 

     

    Si les web analytics  ou les questionnaires permettent d’avoir une idée, dans les grandes lignes, de ce qui ne va pas à un endroit d’un site ou d’une app, les tests utilisateurs sont comme la loupe surpuissante de voir exactement POURQUOI ça ne va pas !

     

    Cela ne veut pas dire que nous avons négligé l’information fournie par les web analytics. Bien au contraire, un audit analytics réalisé par notre agence partenaire Digitaleez a été plus qu’important à ce stade du projet pour comprendre la provenance du trafic, et pour disposer d’informations sur les internautes, leur navigation et la conversion. Google Data Studio, permettant de rendre les données plus visuelles  s’est également ajouté à cet audit analytics.

     

    Syndic One s’est donc vu recevoir un rapport complet de leurs données web, entièrement personnalisé, plus facile à lire et à partager.

     

    2) Conception du site avec prise en compte des enseignements des tests utilisateurs 

    Une seconde vague de tests utilisateurs sur la base de wireframes a, par la suite, été réalisée (durée de 20min). Nul besoin de rappeler l’importance des wireframes qui permettent à la fois de réduire les incertitudes et de se concentrer sur l’architecture de l’information. Grâce à un travail de retouche de la structure et des contenus du site, l’offre est devenue beaucoup plus claire pour les utilisateurs. 

     

    Cette seconde phase a surtout permis de valider les orientations prises sur les choix de conception faits, sur les parcours et les nouvelles pages.

     

    wireframe-homepage
    Phase de prototypage faite sur Invision, qui permet simplement de dynamiser les wireframes, dans leurs versions mobile, desktop et tablette.

     

    Conception de nouveaux parcours : 

    La page offre qui était auparavant présentée sous forme de texte brut a complètement été revue. Un tableau suffit à  la clarifier désormais.

     

    Avant / Après avec une offre plus claire présentée sous forme de grille

     

    La section dédiée à la réalisation du devis a également été améliorée avec un tout nouveau parcours en 5 étapes, bien plus clair et simplifiée que le formulaire qui était proposé.

     

    parcours-devis-syndicone

    3) Direction artistique et Intégration HTML/CSS

    À la suite des phases de direction artistique (DA), ce sont 2 versions du site qui ont été proposées à la marque. Plus moderne, plus proche de la cible des utilisateurs, plus humaine, claire et fidèle à la marque, découvrez à cette adresse la version gagnante :

     

    Après quelques aller/retour et la sélection de la version gagnante, nous avons procédé à la réalisation des pages du site.

    Les objectifs de l’identité graphique :

     

    – Permettre, avant toute chose, une identification rapide de l’offre et de la marque

    – Améliorer et faciliter la navigation et la lecture

    – Rendre le site plus humain et proche de ces utilisateurs

     

    Intégration HTML/CSS + Développement

    Pour finir, c’est aussi les équipes Wexperience qui ont piloté l’ensemble du développement et l’intégration du site sous le système de gestion de contenus (CMS) WordPress ainsi que le développement du formulaire (directement relié à Salesforce) 

     

    Livrable -> Code HTML de tout le site et maquettes graphiques de tout le site

     


     

    Méthodologie de projet :

    Agile et centrée utilisateur : un processus que nous adaptons à une majorité de nos projets et qui alterne phase de conception et test utilisateurs. Par une approche d’amélioration continue du projet, cela permet de produire un site en meilleure adéquation avec les besoins utilisateurs et de réduire, par la suite, les coûts de maintenance corrective.

     

    Quant aux tests utilisateurs, ils permettent d’avoir le point de vue objectif des utilisateurs finaux. Nous réalisons généralement nos tests dans des salles dédiées : dans nos locaux à Lille, ou à Paris, ou même ailleurs, si le client le souhaite. Dans tous les cas, nous invitons également nos clients  à assister aux tests.

     

    Outils

    Pour assurer la qualité de nos prestations, plusieurs outils nous permettent d’optimiser les coûts et les temps de conception.

     

    Invision : pour le partage d’informations et les discussions sur le projet. Invision est également utilisé pour le prototypage

     

    Sketch : outil de conception, qui permet de gagner du temps en production. Avant de passer à la conception de maquettes graphiques, celles-ci sont conçues sous la forme de maquettes « fil de fer » (wireframes) qui permettent de se concentrer d’abord sur l’architecture d’information avant l’apparence graphique du site. La légèreté de l’outil permet également de gagner du temps de production en favorisant la mise en forme d’idées de manière plus rapide.

     

    WordPress : est le CMS que Syndic One utilise et sur lequel nous avons procédé à l’intégration.  

     

    Outils de développement utilisé : 

     

    – Bitbucket (git)
    – Docker

     

    Durée et budget du projet

    Durée du projet : 4 mois

    Prix : inférieur à 100k€

     

    Voir le site : www.syndic-one.fr

     

     

  • Refonte d’un site : le cas de la mutuelle GSMC

    En 2017, la mutuelle GSMC confiait la refonte de son site à Wexperience. Il s’agissait de remettre à jour un site qui avait trop vieilli et qui ne correspondait plus à la stratégie digitale de la société. Wexperience s’est donc vu confier la partie design de la refonte. Revue de détail !

     

    HOMEPAGE-GSMC

     

    Qui ?

    GSMC est une mutuelle indépendante

    Besoins de la refonte

    • Besoin de se remettre dans l’air du temps, le site « datait »
    • Changement de plateforme technique
    • Intégration d’une version mobile, alors inexistante
    • Démarrage d’une véritable politique digitale / préparation de l’avenir

      Réponse de Wexperience

    A chaque projet, sa réponse propre, mais avec les mêmes méthodologies centrées utilisateurs

    1) Acquisition de la connaissance client

    Wexperience possédait déjà une expérience du métier de l’assurance (ayant déjà travaillé sur la refonte de Smeno, Humanis, Matmut ou Just). Les équipes connaissent bien les problématiques de mutuelles ou d’assurance.

    La connaissance se fait également par des entretiens individuels sur site (tests utilisateurs) permettant de dresser un diagnostic de l’existant et de perfectionner sa connaissance utilisateur.

     

    Importance des tests utilisateurs : GSMC qui avait un à priori très négatif sur son site a pu découvrir, au contraire, des points forts qui l’ont surpris et ont pu être réintégrés dans le nouveau site. Lors de ce test, nous avons également mis en oeuvre, notre questionnaire de mesure de l’expérience utilisateur UXM via notre solution UX.Care.

    Livrable -> retour des tests utilisateurs / retours des web analytics (par notre filiale Digitaleez)

    2) Conception de l’identité graphique

    A partir des éléments constitutifs de la marque, Wexperience a fait plusieurs propositions d’identité graphique. Celle-ci, en plus de son rôle dans la valorisation de la marque, servant également à renforcer la perception de facilité d’utilisation du site. Cela a été un succès comme l’on montré les mesures de l’expérience utilisateur réalisée sur l’ancien site et le nouveau site

     

    Objectifs de l’identité graphique :
    permettre une identification rapide de la marque et véhiculer ses valeurs
    améliorer la perception de la facilité d’utilisation du site

    Intégré à cette phase : la conception d’animations et d’interactions visuelles destinées à améliorer le potentiel émotionnel de l’interface

    Livrable -> maquettes graphiques des pages les plus importantes du site

     

    3) Conception des pages

    La conception des pages est réalisée dans un premier temps sous la forme de maquettes fil de fer.

    Ce procédé permet d’accélérer la production des pages, mais aussi d’avoir plus de souplesse.

    Dans le cas de GSMC, les pages pour ordinateur ont d’abord été conçues, puis celles pour l’affichage sur téléphone mobile.

     

    WIREFRAME-PROJET2-GSMC

     

     

    A noter : cet ordre est interchangeable et dépend de la maturité du site. Un site avec beaucoup d’utilisateurs mobiles sera d’abord conçu pour les téléphones mobiles (« mobile first »).

     

    Après une première phase de conception, un test utilisateur a été conduit de manière à apporter de nouvelles améliorations et de nouveaux correctifs.

    A la fin de la phase de maquettage est appliquée la couche de design graphique. Celle-ci vient renforcer certains détails ergonomiques du site, en plus de poser l’identité de marque.

    Prise en compte du référencement naturel (SEO) : au cours de la conception, un expert SEO vient valider la conception des pages en prenant en compte les critères d’optimisation

    Livrable -> maquettes graphiques de tout le site

     

     

    PAGE-PRODUIT-GSMC

    4) Intégration HTML/CSS

    Avant d’être exploitable techniquement, les maquettes de page doivent être codées en HTML/CSS, le langage universel dedescription du Web.

    Livrable -> code HTML de tout le site

     


     

    Méthodologie de projet agile et centrée utilisateur

    Ce processus alterne phase de conception et test utilisateurs. Il permet, par une approche itérative d’amélioration continue du projet, de produire un site en meilleure adéquation avec les besoins utilisateurs et de réduire par la suite les coûts de maintenance corrective.

    Cela par rapport opposition à ce qui est appelé « le mode projet » où un cahier des charges est établi à l’avance et suivi sans aucune possibilité de correctif avant la livraison.

    Les tests utilisateurs permettent d’obtenir la vision des clients finaux au cours du processus de conception.

    Outils

    Pour assurer la qualité de nos prestations, plusieurs outils nous permettent d’optimiser les coûts et les temps de conception.

     

    Invision : pour le partage d’informations et les discussions sur le projet. Invision est également utilisé pour le prototypage

    Sketch : outil de conception, qui permet de gagner du temps en production. Avant de passer à la conception de maquettes graphiques, celles-ci sont conçues sous la forme de maquettes « fil de fer » (wireframes) qui permettent de se concentrer d’abord sur l’architecture d’information avant l’apparence graphique du site. La légèreté de l’outil permet également de gagner du temps de production en favorisant la mise en forme d’idées de manière plus rapide.

    Durée et budget du projet

    Durée du projet : 4 mois

    Prix : plus de 50k€

     

     

    Voir le site : www.mutuelle-gsmc.fr

     

     

  • Baromètre de la conversion : e-commercants êtes-vous meilleurs que vos concurrents ?

    Wexperience, CapitaineCommerce, Prestashop, Oxatis, Wizishop, AB Tasty, Nuukik, TrustedShop, Blanchemaille, Euratechnologies, la CCI de Lille et NBS System lancent le


    Baromètre 2016 : « Conversion et

    priorités business par secteur »

    baromètre_conversion

     

     

    Suite au succès du Nord Conversion Day et 2 ans après la 1ère édition de 2014 qui avait déjà connu un beau succès, nous relançons à nouveau le Baromètre de la conversion pour 2016.

    « C’est la deuxième fois que l’on lance ce baromètre du ecommerce. Avec presque 300 répondants en 2014 et plus de 1000 téléchargements, nous espérons cette année faire beaucoup plus pour avoir, bien entendu, une bien meilleure représentativité. L’objectif de cette opération est de pouvoir donner aux ecommerçants qui y participent une meilleure vision de leur marché et aussi de pouvoir les aider à prendre des décisions bénéfiques pour leur business sur des aspects sur lesquels ils sont encore peu à l’aise : l’UX, la conversion, le merchandising »
    L’étude est donc entièrement bénévole et profitera à tous. Alors j’espère qu’elle sera un grand succès comme la précédente 🙂

    Explique Olivier Sauvage, fondateur de Wexperience & CapitaineCommerce

    Je participe !

     

    L’objectif ?

    L’étude aura pour principal objectif de fournir aux e-commerçants des données par secteur d’activité, car les performances commerciales sont évidemment différentes quand on vend des services aux entreprises, des voitures, ou des produits textiles aux particuliers.

    À combien se situe le taux de conversion sur votre secteur d’activité ? Vos performances sont-elles meilleures ou moins bonnes que celles de vos concurrents ? Vos priorités business sont-elles les mêmes que celles de vos concurrents ? quels sont les budgets consacrés au Marketing et la communication dans votre secteur 

    C’est principalement pour répondre à ces questions que nous aborderons 2 thèmes majeurs :

    1. Les performances des e-commerçants en terme de croissance, de trafic et de taux de conversion.
    2. Ainsi que leurs priorités business pour 2016, en terme de budget marketing, et d’outils de pilotage de leur performance.

    Pour participer :

    C’est donc en partenariat avec quelques acteurs majeurs du secteur (Prestashop, Wizishop, ABTasty, Trustedshop, Nuukik, Oxatis et bien d’autres…) que Capitaine Commerce & Wexperience s’associent pour vous garantir une étude qualitative complète et permettre sa diffusion à toute la profession !

    Pour participer, il vous suffit simplement de répondre à ce questionnaire. Le formulaire ne vous prendra que quelques minutes et vous permettra de contribuer à avoir des données fiables sur votre secteur.

    Petit plus, vous disposerez des résultats en avant-première 😉 Alors cliquez !

    Je participe !

    • Les données et vos réponses au questionnaire sont confidentielles. Répondre à ce questionnaire ne vous engage à rien et AUCUNE DÉMARCHE COMMERCIALE ne sera entreprise à la suite de ce questionnaire.
    • Les e-commerçants qui participent à l’enquête recevront en avant première les résultats de l’étude, avec des consolidations diverses (par secteur d’activité notamment), pour que ce soit utile à chaque participant.
    • À propos de Wexperience :

    Wexperience est une agence d’ergonomie digitale dédiée entièrement à l’optimisation des sites e- business. Fondée en 2010, elle compte parmi ses clients les grandes marques du ecommerce comme LaRedoute, 3 Suisses, des marques de distribution comme KIABI, Okaidi ou des grands compte comme TOTAL ou VVF.

  • Test A/B : n’arrêtez pas avant d’avoir assez attendu

    Une des grandes questions que se posent nos clients lorsqu’ils font appel à nous est : « Quand est-ce qu’un test A/B ou multivarié doit s’arrêter ? » OU « A partir de quel moment est-on sûr d’être sûr du résultat ? »
    Questions simples, mais réponses compliquées !
    Première remarque : il est, la plupart du temps, malvenu d’arrêter un test en cours si ses résultats sont négatifs ou supposés négatifs. Mais c’est une réaction normale que l’on peut comprendre : voir la courbe d’un test s’effondrer peut signifier (en e-commerce) une perte de chiffre d’affaires. Grande est dès lors la tentation de stopper le test ou de le modifier et de passer à un autre test.

    Première leçon : ne pas se fier aux apparences

    C’est d’après moi une erreur.
    Ou du moins, une erreur, tant que la question n’a pas été plus approfondie. Pour cela, il est indispensable de se pencher plus en avant sur les données dont on dispose. Je le montrerai à travers un exemple d’un test sur un site dont je ne peux citer le nom, mais qui prouve bien, cependant, qu’il faut savoir attendre, et pas seulement pour des raisons statistiques.
    L’indice de confiance des logiciels de tests est intéressant dans la mesure où il donne une vue mathématique d’une expérience en cours. En gros, il considère qu’à partir d’un certain volume de données, le résultat peut être considéré comme fiable. L’inconvénient, ou en tout cas, l’erreur, serait de croire qu’il serait entièrement fiable d’un point de vue commercial, et cela pour une bonne raison : l’indice de confiance si le test n’est pas suffisamment calibré ne peut pas prendre en compte les différences intrinsèques du trafic testé.
    Je m’explique. Dans le test dont je parle, le trafic n’était pas suffisant pour mettre en place un test multivarié alors que beaucoup d’éléments devaient être testés. Je me suis donc rabattu sur un test A/B en privilégiant une hypothèse précise. Il me fallait prendre tout le trafic possible pour obtenir suffisamment vite le résultat de mon test. Le but d’un test n’est pas, n’est-ce pas, de durer plusieurs mois.

    Courbe de résultats du site testé
    Courbe de résultats du site testé

    Au bout de quelques jours, comme vous pouvez le voir sur la courbe ci-dessus, la version gagnante semblait être la version de contrôle (et non pas la version de test). Mais en y regardant de plus près et en croisant les données avec Google Analytics, je me suis aperçu qu’il y avait beaucoup plus de visiteurs anciens dans le trafic de la nouvelle version que de visiteurs nouveaux, introduisant par là un biais dans le résultat. En effet, qui dit « plus de visiteurs anciens » dit plus de résistance au changement et donc propension à moins convertir. J’appelle ça l’effet d’accoutumance. Et malgré un indice de confiance suffisant de la part du logiciel de test, il fallait donc attendre que le trafic s’équilibre entre visiteurs anciens vs nouveaux.
    Et effectivement, au bout de quelques jours, la tendance s’inversait définitivement au profit de la version B (la nouvelle version donc). Il me suffisait alors ensuite de contrôler à nouveau la répartition du trafic entre anciens et nouveaux visiteurs pour être certain de mon résultat.
    Donc en cas d’un constat de moindres performances sur les variations testées, ne paniquez pas. Vous risquez d’arrêter le test trop tôt, de tirer des conclusions hâtives et de ne pas retirer les bénéfices de la version gagnante. Demandez-vous d’abord si le trafic impliqué dans le test est correctement distribué entre les versions. Regardez si les répartitions suivantes sont quasi-égales selon les variations : nouveaux visiteurs / anciens visiteurs, sources d’acquisition, résolution d’écran, navigateurs, dispositifs utilisés (ordinateurs, tablette, mobile), visites des pages promotions, utilisation du moteur de recherche, etc.

    Deuxième leçon : toujours aller plus loin

    Ceci étant dit, il me semble également très important d’ajouter qu’un test ne doit pas être regardé qu’à l’aune de son objectif principal.
    Dans le cas précédent, il s’agissait de tester une fiche produit. Les indicateurs intéressants pour la fiche produit sont souvent le taux d’ajout au panier, puis, ensuite le taux de conversion et la valeur par visiteur. Cela permet de voir, si effectivement, une amélioration de la performance de la page a lieu.
    Sans pouvoir vous dévoiler la maquette, voici les modifications auxquelles nous avions procédées.

    • Augmentation de la visibilité des éléments de rassurance sous le bouton « Ajouter au panier »
    • Amélioration de la visibilité du nom du produit
    • Amélioration de la visibilité du stock
    • Amélioration de la visibilité du prix

    Ces quatres éléments, vous le constaterez avec moi, tendent vers une meilleure rassurance et une meilleure information sur la fiche produit. Ce sont des facteurs extrêmement important pour augmenter la conversion.
    Les résultats à la fin du test ont été probants :
    + 14 % en taux de transfo et ce, malgré une baisse de 1,4% du taux d’ajout au panier
    Que s’est-il passé ?
    Premier point : malgré une baisse du taux d’ajout au panier, on constate une augmentation de 9% de la validation du panier pour les personnes ayant vu la nouvelle fiche produit.
    Deuxième point : on discerne très nettement dans le trafic des visiteurs ayant la version de test une augmentation des visites vers les pages de rassurance (+15% environ). Effet indirect ou induit, ces mêmes testeurs vont moins solliciter la page de contact.
    Troisième point : une meilleure information entraîne un meilleur engagement des visiteurs avec une très nette augmentation de pages vues par visites, ainsi qu’un taux de retour (de visite) en augmentation également.
    Comme vous pouvez le voir, ce test simple nous a permis d’en apprendre beaucoup sur le comportement des utilisateurs et nous a permis de découvrir de nouvelles pistes d’optimisation : amélioration des informations sur les pages produits et services notamment.
    Il nous a aussi montré qu’il n’est pas possible de ne pas attendre suffisamment longtemps la conduite du test, car trop d’éléments humains entrent en jeu pour se contenter d’un résultat obtenu en moins de 2 semaines.
    Tester consiste donc à bien mesurer les effets de bord et à être patient.

  • Quoi de neuf dans Visual Website Optimizer ?

    idea_factory
    Nous avons pu assister en interne au dernier webinar de Wingify, maison fondatrice de Visual Website Optimizer, notre outil d’A/B testing préféré.
    Et quand on parle d’A/B testing, on parle évidemment bien de tests multivariés, split test, etc.

    Trois nouveautés majeures au rendez-vous.

    Une refonte complète de l’interface

    Que ça ait un impact ou pas sur l’efficacité de ceux qui font les tests tient du domaine du possible. Toujours est-il que la nouvelle interface de VWO semble plus ergonomique, plus conviviale, et surtout adaptée au mobile. De là à piloter des campagnes de tests depuis son smartphone, il n’y a qu’un pas que nous franchirons allègrement dès que l’occasion nous en sera donnée.

    La segmentation des résultats

    Beaucoup plus importante est la possibilité désormais de pouvoir segmenter les résultats d’un test et donc d’en affiner la lecture. C’est une évolution que nous attendions depuis longtemps et qui va permettre d’améliorer le conseil et le testing dans le long terme en permettant une analyse plus fine.
    Exemple simple : il deviendra possible de mesurer l’impact d’une évolution sur tablette ou desktop dans le même test. Mais cela n’est qu’un exemple. Ainsi pour un même test pourra-t-on aussi mesurer quelles sont les sources de trafic qui convertissent le mieux. Cela pourra être décliné à toutes les sauces : nombres de visites, valeurs dans un cookie, nouveaux visiteurs, etc… Les possibilités qui s’ouvrent à l’analyse sont immenses.
    variations_chart

    Les tests d’applis mobiles

    Enfin, et c’était la grosse surprise du Webinar, il va aussi être désormais possible de faire du test d’applications mobiles. Pour l’instant, cette option est encore en bêta, mais elle est extrêmement prometteuse dans un domaine où le test était impossible. Réservé à iOS, nulle doute qu’elle sera aussi disponible prochainement pour Android. Et pour vous faire patienter, vous pourrez vous faire une idée de l’outil sur le screenshot ci-dessous.

    Au vu de toutes ces nouveautés, et si l’envie vous prend d’optimiser votre site, n’hésitez pas à nous contacter pour en savoir plus.ios_testing

  • Oscaro : petites idées entre amis pour améliorer la conversion

    Oscaro.com lancé en 2001 permet d’acheter des pièces automobiles en ligne. Ce nouveau filon intéresse d’autres acteurs du web comme le géant Amazon depuis mars dernier. Alors est-ce que notre pure-player classé 20e en France tient-il ses promesses de simplicité et d’efficacité ? Voici une brève analyse de sa fiche produit.

    Une navigation difficile

    En arrivant sur Oscaro, j’ai été surpris par l’absence d’un menu de navigation. Sur la page d’accueil, l’utilisateur est guidé et choisit une catégorie, puis une pièce mais une fois sur la fiche produit, comment retourner dans une catégorie ? C’est surprenant.
    L’unique bouton de navigation « Retour » est placé à droite, ce qui n’a rien de conventionnel. L’utilisateur aura tendance à le chercher en haut à gauche et pourra avoir du mal à le repérer. Le fil d’Ariane n’est lui aussi pas présent pourtant bien pratique pour remonter dans les catégories rapidement. Pensez à toujours faciliter la navigation sur votre site.

    Améliorer lexperience d'achat et la navigation en proposant un fil d'Arianne

    Inciter à mettre au panier

    L’objectif de cette page est d’amener l’utilisateur à ajouter le produit dans son panier. Ce bouton doit donc être l’élément mis en valeur ainsi que toutes les informations nécessaires pour exécuter cette action comme le prix, la disponibilité.
    Ici l’utilisateur ne peut pas voir le prix du produit, ni le bouton d’ajout au panier à l’ouverture de la page. Le bouton est situé bien en-dessous de la ligne de flottaison repérée par la zone bleue claire. (Résolution entre 1024px et 1920px) (suite…)

  • L’optimisation du taux de conversion en temps de crise

    Adobe a réalisé une enquête auprès de 1800 marketers d’Amérique, d’Europe et d’Asie. L’enquête s’intéresse aux taux de conversion web/mobile, aux budgets marketing et aux stratégies pour générer plus de revenus en ces temps difficiles.
    En France, la progression des leaders du eCommerce au premier trimestre 2013 est de seulement 2% en moyenne et s’effondre à -7% dans le secteur de l’habillement. Le panier moyen quand à lui baisse de 4% en moyenne. Dans ce contexte économique morose, difficile de penser grappiller des parts de marché et pourtant! L’utilisation des budgets marketings devient une stratégique et le retour sur investissement doit être le plus important possible.

    Budget alloué et taux de conversion

    La première question concerne le pourcentage de budget alloué à l’optimisation en 2012 puis en 2013.

    Allocation d'un budget d'optimisation de conversion dans le budget marketing

    Plus de 50% des sondés vont allouer moins de 5% de leur budget et 42% entre 6 et 25%. Le constat n’est pas surprenant mais n’est pas sans conséquences sur les revenus du site comme le montre ce tableau :

    Relation entre l'allocation budget optimisation et le taux de conversion ecommerceOn peut observer un rapport entre  la part de budget réservé à l’optimisation supérieur à 25% et un taux de conversion supérieur à 2%. Il est possible que ces entreprises cherchent des leviers plus performant que l’optimisation du trafic aujourd’hui mature. (suite…)

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

  • Méthodologie d’optimisation de site

    Pris dans les affres de la création d’entreprise, il n’en reste pas moins que ma réflexion progresse sur la manière dont on peut optimiser les sites de ebusiness.

    La problématique de la transformation

    La problématique que je trouve la plus répandue aujourd’hui sur le marché est celle de l’optimisation du taux de transformation. Cela concerne en grande partie des sites de ecommerce, mais aussi tous les sites qui font de la génération de lead. Je pense notamment aux sites d’offres de crédit ou de demande de contrat d’assurances.
    Tous ces sites la rencontrent : comment rendre facile la conclusion d’une transaction entre eux et leurs clients ? L’ergonomie et l’usabilité ont évidemment un grand rôle à jouer dans cet objectif. Il devient de plus en plus notoire qu’une ergonomie défectueuse, mal pensée, d’un formulaire peut contribuer très lourdement à un taux d’abandon conséquent d’une transaction.
    S’il s’agit d’un site ecommerce, ce sont des ventes qui ne se font pas. S’il s’agit d’un site ebusiness, ce sont des leads qui disparaissent et cela « simplement » si je puis dire à cause d’un problème fonctionnel d’interface.

    Un futur service d’optimisation

    Le service que je propose de mettre en place dans les mois à venir sera donc d’aider ces sites à améliorer leur interface afin de pallier à ces « fuites » inopinées qui, lorsque le site bénéficie d’un fort trafic, se traduisent concrètement en perte de CA.
    Comment optimise-t-on un formulaire ?
    Avant toute chose, plusieurs critères sont à prendre en compte :

    • La typologie du trafic : qui sont les gens qui viennent sur le site et pourquoi
    • La volumétrie du trafic : elle permettra de déterminer l’espérance de gain en optimisant le taux de transformation
    • La technologie du site : il est plus ou moins facile d’intervenir techniquement sur un site. Le travail d’un « optimisateur » sera notamment de savoir comment prioriser les optimisations à un moindre coût technique
    • L’état de l’usabilité du site : tous les sites n’en sont pas au même stade d’avancement dans ce domaine. Certains sont très en retard, d’autres très en avance et dans ce dernier cas, l’optimisation jouera sur des points extrêmement subtils
    • La psychologie des utilisateurs : connaître la manière dont un utilisateur aborde une transaction est aussi un point fondamental de l’amélioration de l’usabilité. Ex: « Quand je demande un crédit en ligne, dans quel état d’esprit suis-je ? »
    • Et évidemment : les informations factuelles données par le web analytics (taux de rebond dans le processus de commande, etc.)

    L’annonceur ne dispose souvent pas de toutes ces informations, notamment celle concernant la psychologie  de ses internautes. Aussi, avant toute chose, faudra-t-il l’aider à en savoir plus sur la manière dont ces derniers peuvent se comporter. Cela implique nécessairement de passer par des tests utilisateurs à la fois quantitatifs et qualitatifs.
    A partir donc de l’analyse de ces critères ressortira une méthodologie d’optimisation. Celle-ci n’est donc pas monolithique et pourra varier du tout au tout.
    Quoiqu’il en soit, ce qui compte, c’est le résultat, et dans la plupart des cas, je pense qu’offrir un service basé sur une logique ROIiste demeure l’argument le plus parlant et le plus efficace. Concrètement, optimiser un processus transactionnel ne peut se faire que pas à pas en mesurant chaque étape de progression précautionneusement, tout cela dans un processus itératif.
    Cela se réalise :

    • en proposant via des maquettes plus ou moins poussées graphiquement, décrivant si possible les interactivités
    • en intégrant ces maquettes dans le site
    • en mesurant leur impact sur le taux de transformation
    • et ainsi de suite…

    Le meilleur outil pour mesurer les résultats est bien sûr un outil d’A/B testing, mais il faut toutefois noter qu’il n’est pas toujours possible de l’intégrer à un processus transactionnel, parfois pour des raisons techniques, d’autres fois pour des raisons de coût. A noter qu’il devrait être extrêmement rare de faire évoluer complètement en une fois un tel processus devant le nombre de risques que cela engendre en terme de perte de taux de transformation.
    N’hésitez donc pas à m’appeler (06 59 38 92 92) pour en savoir plus sur la manière dont je pourrais vous aider à optimiser le taux de transformation de votre site.