Agence WEX

Étiquette : mobile

  • 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

     

     

  • Ergonomie d’un site : pourquoi copier vos concurrents peut être une (très) mauvaise idée

    Copier semble être, à première vue, une bonne idée. Et pourtant, elle ne l’est pas.

    Il est une croyance répandue qui fait que beaucoup de gens pensent s’affranchir du travail d’ergonomie d’un site en copiant leur concurrent direct, déjà installé sur leur marché, ou en « s’inspirant » du leader d’un marché (cf Amazon en ecommerce) pour créer des interfaces utilisateurs fluides, rapides, efficientes, etc. « Puisque Amazon le fait, faisons-le comme eux ! Ça marchera ! » est une des phrases que j’ai le plus souvent entendue dans la bouche d’ardents chefs de projets webs ou d’entrepreneur lançant leur offre sur le marché.

    Comme si copier l’UX d’un site était la garantie de la réussite !

     

    Il est temps de mettre à bas cette légende. En UX, copier n’est pas souvent une bonne idée.

     

    Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

     

    On ne peut pas copier sans connaître

    Les gens qui pensent copier oublient souvent que le contexte dans lequel évolue leur projet n’est pas forcément le même que celui du site copié.

     

    Exemple : Vouloir copier Amazon quand on a ni la même profondeur d’offre, ni le même trafic, ni la même notoriété correspondrait à concevoir et créer une grande routière alors qu’on a besoin d’une petite voiture de ville. Vous auriez un site qui aurait l’apparence du leader de la grande distribution en ligne pour satisfaire les besoins d’une épicerie de quartier : un menu de navigation trop long pour une offre trop courte, des fiches produits trop compliquées, un tunnel de commande inadapté.

     

    Chez Amazon, tout est fait pour répondre à une demande de masse, internationale, avec un offre pléthorique multi-univers. Pour cette raison d’ailleurs, le site d’Amazon n’est jamais optimisé en terme de présentation de produit, tant la recherche de standardisation et de rationalisation des coûts est une obsession.

     

    Avoir la même apparence qu’un leader ou que votre concurrent principal pourrait aussi vous desservir en ne vous différenciant pas assez de ce qui se fait déjà ailleurs. Vous pourriez être confondu avec le leader et, si votre offre, ne présente pas un avantage flagrant, perçu comme une pâle copie.

     

    Les risques de la bête copie sont nombreux et peuvent coûter cher

    Par ailleurs, il faut aussi voir la copie en termes de coûts technologiques. Encore une fois, reprenons l’exemple d’Amazon.

     

    Vous lancez votre propre site ou pas, quelque soit votre histoire, votre socle technologique n’est certainement pas le même que celui que vous copiez. Or, copier ce que fait votre prédécesseur a un coût pour « tordre » votre socle technique vers celui que vous copiez.

     

    Pourquoi s’embêter à créer une interface comme Amazon alors que vous avez déjà quelque chose de bien sur une solution comme Magento ou Prestashop ? Le coût en vaut-il la chandelle ? Clairement, non ! Vous avez bien autre chose à faire que de dépenser des dizaines de jour homme pour ressembler à votre concurrent. Encore une fois, copier n’est pas une bonne idée.

     

    Mais ce n’est pas tout : Jacob Nielsen, apôtre de l’ergonomie web, l’avait signalé dans son propre blog : « Vous ne savez pas ce que vous copiez ». En effet, même les plus grands se trompent. Et, encore une fois, ce n’est pas parce que c’est Amazon que c’est bien. Si l’on en revient au sujet des fiches produits, le site d’Amazon est loin d’offrir quelque chose d’optimisé, d’agréable et d’efficace. Et plus encore, qui vous dit que le tunnel de commande du même site est la crème de la crème de l’optimisation de tunnel de commande. Vous n’en savez rien. Et ce n’est pas un regard d’expert qui va vous aider à y voir plus clair. Copier peut être dangereux.

     

    Alors, copier ou ne pas copier, que faut-il faire ?

     

    L’important, me semble-t-il, est d’arriver à se faire une image exacte de ce qui existe sur le marché et d’en déceler le meilleur comme le pire. Se contenter d’un simple benchmark à travers les yeux d’un expert ne suffit pas. Il faut aller plus loin en mettant un oeuvre un test utilisateur d’une douzaine de personnes sur les principaux parcours utilisateurs de ce que sera votre futur site ou offre. C’est le seul et le meilleur moyen d’obtenir cette vue objective ce qui se fait chez les autres. tout le reste ne serait que suppositions, hypothèses, feelings, impressions au doigt mouillé. Exactement, tout ce que je vous déconseillerai de faire.

    Opérer ainsi présente un double avantage :

    1. Vous obtenez une image équilibrée, relativement correcte, de qu’est une bonne et une mauvaise ergonomie dans votre secteur (il y a toujours des plus et des moins, même sur les meilleurs sites)
    2. Vous rencontrez vos futurs clients et pouvez même les interroger à loisir, les sonder, mieux comprendre leurs aspirations

    Je rajouterai même un autre avantage : mener des tests utilisateurs peut vous aider à fédérer vos équipes sur votre projet en leur permettant de partager la même vision objective de ce qui se passe ailleurs. Fini les débats stériles comme : « Oui, mais moi je pense que … » ou « Moi, je trouve que… » qui ne reposent en général que sur des intuitions sans fondement. Avec un test utilisateur, le débat sera correctement posé et vous pourrez avancer sereinement dans la suite de votre projet, avec un consensus certain.

     

    Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

     

    Dès lors, vous pourrez alors vous livrer à l’art de la copie. Car, après une telle opération, il vous sera effectivement possible de vous forger de vraies convictions et vous pourrez sans doute découvrir des idées bonnes à prendre. Mais, au moins, vous saurez pourquoi ! Et ne vous avancerez pas dans la jungle du feeling !

     

    Excellente journée !

     

    Pour en savoir plus, je vous conseille l’excellent article de Jacob Nielsen, datant déjà de 2010, mais qui reste toujours aussi vrai :

    Photo by JOSE LARRAZOLO on Unsplash

  • [À télécharger] 20 bonnes astuces pour améliorer vos pages listes mobile

    filtre-zalando-mcommerce
    Continuons cette série d’analyse ergonomique des sites web mobile avec l’amélioration des pages listes sur un site web mobile.
    Pour rappel, depuis maintenant une année, le trafic mobile en e-commerce à dépasser celui sur desktop et devient un enjeu de plus en plus important pour les e-commerçants. Raison pour laquelle, Olivier Sauvage vous donne rendez-vous chaque mois pour un webinar sur l’amélioration ergonomique des sites web sur mobile. Si vous souhaitez en savoir plus sur le prochain épisode, suivez-nous sur Twitter 😉
    Sur cet épisode, nous nous sommes intéressés à 12 sites e-commerce leaders dans les domaines de :

    • L’électroménager, informatique, loisirs
    • L’habillement, la mode
    • Le mobilier, l’équipement maison.

    Une sélection qui nous a permis d’avoir une bonne vision des « bests practices » dans le domaine des sites web mobile.

    Présentation de l’offre

    L’affichage en colonne est la norme !
    Quel que soit le site, la présentation de l’offre reste centrée sur les photos. Ce sont les photos qui sont regardées en premier par l’utilisateur. Deux solutions s’offrent alors sur mobile : en ligne ou en colonne.
    Force est de constater que la majorité des marchands offrent un affichage en colonne avec deux produits par ligne. Ceci à l’avantage notamment d’afficher plus de produits par page et de diminuer la distance de scroll.
    D’un autre côté, en principe, la présentation en ligne, permet d’afficher de plus grosses photos, plus attractives. Mais en réalité, ça n’est pas le cas.

    FNACFNAC

    La FNAC offre les deux modes d’affichage, mais est-ce bien utile ? Seuls les gens de la FNAC le savent.

    De manière générale, les photos des sites benchmarkés restent assez petites : en moyenne, leur largeur ne dépasse pas de 50% la largeur de l’écran.
    La plupart n’ont pas non plus de bouton d’ajout au panier directement dans la liste (à part la FNAC ou Cdiscount), ce qui fait qu’on peut s’interroger sur l’utilité d’un tel bouton dans les listes produits.
    En termes de nombre de produits à l’écran, la moyenne s’approche de 4, excepté pour Leroy Merlin qui est le seul site à afficher 6 produits en même temps à l’écran.
    Leroy Merlin
    Leroy Merlin, en mode ligne, permet d’afficher jusqu’à 6 produits à l’écran. Avantage ou pas ?
    But fait dans la simplicité́ et a raison !
    BUT
    Les photos occupent bien la largeur de l’écran. Il n’y a pas de descriptif produit, seul l’info strictement nécessaire est affichée. Dommage tout de même que les titres soient systématiquement tronqués. Sans doute y aurait-il matière à faire mieux en analysant plus finement le contenu du titre et en évitant les « … » qui sont frustrants pour l’utilisateur.
    La mise en page est claire et propre grâce à une séparation des produits par des lignes grises épaisses qui facilitent et accélèrent la lecture de l’écran.

    Dans la mode, il est toujours plus simple de réduire le nombre d’informations à l’écran.
    La RedouteChez La Redoute :

    • Les descriptifs : utiles ? Pas utiles ? Ils n’apportent pas d’information intéressantes à l’utilisateur qui pourra se contenter de la photo.
    • La séparation des produits se fait par un espace blanc et non pas par une ligne. Pour que cela soit efficace, il faut que cet espace fasse presque 1cm d’épaisseur.
    • La sobriété́ est de mise avec très peu de couleurs utilisés

    ZalandoChez Zalando :
    On est quasiment dans le même schéma d’affichage. Les photos sont simplement un peu plus grandes (et du coup, l’espace de séparation plus fin). Mais c’est tout aussi efficace.

    Pour avoir encore d’astuces pour améliorer vos pages listes, vous pouvez télécharger la présentation en lien avec ce webinar en cliquant sur ce bouton.

     

    CTA-JETELECHARGE

  • Revue de presse UX

    Nous vous partageons aujourd’hui notre revue de presse composée d’articles UX plébiscité par nos équipes. Bonne lecture. 

    1) La navigation mobile : Burger or not …?

    La navigation mobile : Burger or not…?
    ➡ La navigation mobile : Burger or not … ?  de KARIN JOUANNO
    Véritable aide de navigation sur mobile pour les utilisateurs, le Burger est partout. Mais depuis quelque temps, son utilisation est remise en cause. Une question se pose alors : Burger or not…?

    2) Motif de lecture en forme de F sur le Web: mal compris, mais toujours pertinent (même sur mobile) – En anglais

    Motif de lecture en forme de F sur le Web: mal compris, mais toujours pertinent (même sur mobile)
    ➡ F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile) de KARA PERNICE
    En tant qu’utilisateur du eye tracking dans nos tests utilisateurs, nous connaissons le modèle F.  Aujourd’hui, NN GROUP nous montre que ce modèle est toujours d’actualité. Le connaissez-vous ?

    3) Nouveaux résultats de l’indice de simplicité de la marque mondiale: les marques qui créent des expériences plus simples gagnent –  En anglais

    ➡ New Global Brand Simplicity Index Results: Brands That Create Simpler Experiences Win de KIMBERLY A. WHIHTLER
    Selon une nouvelle étude mondiale, les spécialistes du marketing doivent repenser ce qu’est une excellente expérience client. De nombreux clients souhaitent un engagement de marque plus transparent, plus simple et plus rapide. Et vous ?

    4) La montée du leadership de l’expérience utilisateur – Le business adopte le design – En anglais

    La montée du leadership de l'expérience utilisateur - Le business adopte le design
    ➡ The Rise of User Experience Leadership – Business Embraces Design de JOSE CORONADO
    Il est essentiel d’éduquer les dirigeants sur l’importance de l’UX et de la conception pour qu’ils soient reconnus comme des piliers clés de la réussite commerciale et de la stratégie globale. Alors, comment faisons-nous cela?

  • Que faut-il retenir de l’application mobile de La Redoute ?

    Appli La Redoute
    La chose la plus intéressante à retenir de l’application mobile de La Redoute est bien sûr la personnalisation.
    Même si cela aurait presque tendance à devenir classique, il est de plus en plus fréquent de voir des applications démarrer et vous demander vos préférences personnelles pour pouvoir ensuite construire une offre en adéquation avec les goûts des utilisateurs.

    Séquençage du formulaire de personnalisation

    On retiendra d’abord que la personnalisation est simple. Elle passe par 4 étapes scindées en 4 écrans. Chaque écran contient un minimum d’informations et il faut vraiment retenir le principe de 1 écran / 1 question qui pourrait paraître lourd, mais pas dans un contexte comme celui là, puisqu’au final l’utilisateur y aura passé à peine quelques secondes.
    L’avantage de scinder le questionnaire en étape est de le transformer en jeu. Pour avoir une nouvelle question, il faut d’abord répondre à la présente, et ainsi de suite. Il y a une sorte de suspens qui est créé ainsi. Le côté répétitif de ces questions crée également un rythme qui permet de mettre l’utilisateur dans une sorte d’état d’éveil accentué. Autrement dit, on le rend ainsi plus attentif, plus prêt à utiliser l’application.

    Appli La Redoute
    Ecran à choix multiples. Petit défaut ici, on ne voit pas les autres choix sous le bouton « J’ai précisé toutes mes préférences ». Sans doute faudrait-il les suggérer en les affichant à moitié.
    Appli La Redoute
    Les choix sont très contrastés (en rose), ce qui permet à l’utilisateur d’avoir un bon feedback et de bien se repérer dans les différents éléments du formulaire.

    Simplicité du formulaire de personnalisation

    L’autre aspect important, vous l’aurez remarqué, c’est le peu d’informations présentes à l’écran. C’est une des tendances du webdesign actuel. Eviter toute distraction. Simplifier les choix quitte à les rendre idiots. Et obtenir ainsi un maximum de concentration sur l’interface.
    D’un point de vue graphique, La Redoute a opté pour des photos plutôt que des icônes. Même si ergonomiquement, c’est un peu moins rapide (il faut plus de temps au cerveau pour analyser l’image), c’est en fait raccord avec l’image de la marque La Redoute (la mode). Les photos sont encadrées dans des formes rondes, des bulles, symbolisant la légèreté, les loisirs, le rêve.

    Appli La Redoute
    Une fois le formulaire rempli, voici la page d’accueil, telle qu’elle s’affiche pour moi. Pour renforcer l’idée de personnalisation, la phrase « Découvrez une sélection rien que pour vous » est placée en haut du bloc.
    Appli La Redoute
    La même version, mais pour une personne préférant la mode féminine et les enfants

    Personnalisation de la page d’accueil

    La partie la plus visible de la personnalisation se trouve sur la page d’accueil, même si à première vue, celle-ci ne parait pas évidente.
    Tous les contenus sont scindés en blocs que l’on peut faire apparaitre ou disparaître, au choix, afin de réellement construire sa propre page.
    Mais étant donné l’ergonomie de cette page, je ne suis pas sûr que les gens s’en rendent bien compte.

    1. Les petites croix de fermeture des blocs sont à peine visibles
    2. La page d’accueil est très longue et il est difficile d’en percevoir le concept, car la vue qu’on en a est forcément parcellaire. En tant qu’utilisateur, je ne peux voir que la partie qui est visible sur mon écran.

    J’aurais tendance à préconiser moins de contenus sur cette page d’accueil, et puis, peut-être, à expliquer rapidement qu’il est possible d’ajouter ou de supprimer des blocs, ainsi que d’expliquer l’intérêt de cette fonctionnalité (qui ne saute peut-être pas aux yeux de l’utilisateur).
    Dans les critiques que j’ai à émettre, je rajouterai le choix graphique du bouton d’ajout de contenus.

    1. Il se trouve tout en bas de la page. Il faut donc scroller pour le découvrir
    2. Son utilité n’est absolument pas explicite. Dans le test que j’ai fait en webinar, j’ai mis quelques instants à comprendre à quoi il servait

    Ma recommandation, c’est que lorsque vous intégrez une fonctionnalité originale à votre application, faites toujours un effort de pédagogie pour l’expliquer. Ne pas aider les gens à apprendre, dans ce cas là, peut condamner cette fonctionnalité à ne pas être utilisée. Dans le cas de La Redoute, un simple libellé pourrait faire l’affaire.
    Pour finir, retrouvez ci-dessous le test live que j’avais fait lors de mon webinar.

  • Comment développer une application mobile efficacement ? Le cas Zalando.

    En terme d’expérience utilisateur, la nouvelle application mobile de Zalando, n°1 de la mode en Europe, apporte son lot d’innovation qu’il serait dommage de ne pas connaître. Notre Capitaine Commerce s’est lancé la semaine dernière dans son analyse « live ». En voici le résumé par écrit et la vidéo en bas de page

    Une interface simplifiée

    La concurrence sur les applications mobile étant plus que féroce, il est primordial de proposer une expérience utilisateur réussie dès la première utilisation. C’est le cas de l’app de Zalando. Et cela grâce à plusieurs subterfuges qui donnent à l’utilisateur final l’impression d’une application simple et facile à utiliser.

    Une page d'accueil épurée
    Une page d’accueil épurée avec très peu d’éléments visibles au premier abord. Voilà qui repose le regard et donne envie d’avancer à l’utilisateur.

    Surprise ! Il n’y a pas de navigation. En fait, si, il y en a une, même si elle est un peu cachée, ce qui n’est pas plus mal. Ainsi, l’attention de l’utilisateur est soit portée vers le moteur de recherche, soit directement vers les catégories de produits mises en avant. Résultat : une interface plus légère visuellement, plus simple, plus attirante.
    Mieux encore, et dans une intention d’efficacité et de rapidité, l’ensemble des contenus de l’écran d’accueil peuvent être personnalisés en fonction des préférences utilisateurs. Mais ne pensez pas à un configurateur compliqué. Non, Zalando ne vous demande que si vous êtes un homme, une femme ou si vous cherchez des vêtements pour vos enfants. Une fois le choix effectué, pour pourrez le changer à tout moment.
    App Zalando
    Ecran de choix des préférences pour les femmes…

     
    App Zalando
    … et pour les hommes…

     
    Petite attention délicate, qui rend compte d’une autre façon de penser les apps, je suis accueilli par un message me souhaitant la bienvenue de manière personnalisée également. Sans compter une petite phrase d’accueil dont le contenu change en fonction, par exemple, du contenu de mon panier. Chaque détail a son importance, n’est-ce pas ?

    Une navigation plus fluide, plus intuitive et plus libre

    L’aspect le plus innovant de l’app Zalando repose dans le fait que la navigation y est devenue beaucoup plus libre et plus agréable. Contrairement à beaucoup d’apps, il y devient possible de slider avec le doigt soit à l’horizontale, soit à la verticale, depuis la fiche produit. Le premier faisant défiler les différentes vues du produit. Le deuxième permettant de passer d’un produit à l’autre dans la liste. Plus besoin de revenir en arrière dans la page liste !

    App Zalando
    Vue zoomée sur un produit. Tout l’écran est occupé par la photo.

     
    App Zalando
    La fiche produit en mode normal. Même dans cette configuration, beaucoup d’espace est donné à la photo.

     
    Mieux encore : le mode zoom fonctionne un peu comme la touche majuscule d’un clavier d’ordinateur. Vous pouvez l’activer ou le désactiver à volonté pour pouvoir naviguer soit en mode d’affichage normal, soit en mode zoomé permanent. C’est une solution qui offre une nouvelle expérience de navigation beaucoup plus fluide, plus immersive, autant que cela soit possible sur un terminal téléphonique. Et qui, c’est quasiment certain, devrait contribuer à augmenter le temps de navigation.
    Rapidité : il est impossible de tester la rapidité d’une application sans faire de véritables mesures. Mais je dois avouer que mon test en vidéo et en 4G n’a souffert d’aucun ralentissement. Cela reste à vérifier, mais il est fort probable que les concepteurs de l’app Zalando aient aussi fait le ménage du côté du code.

    Le paiement rendu transparent avec Touch ID

    A ma grande surprise, j’ai découvert via l’app de Zalando qu’il était désormais possible d’exploiter Touch ID,  la fonction d’identification digitale de l’iPhone pour pouvoir s’identifier sur une application mobile. Et c’est réellement un grand pas en avant dans l’amélioration de la conversion des applications mobiles. Toute la transpiration nécessaire à s’identifier sur la plupart des applications disparait ici en étant remplacée par un simplement toucher de doigt sur le bouton principal de l’iPhone. Une fonction qui prend encore plus de sens pour un marchand dont la fréquence d’achat doit être plutôt élevé pour les clientes fidèles.

    App Zalando Paiement
    Lors du passage au paiement, Touch ID est proposé à l’utilisateur pour qu’il puisse s’identifier simplement.

     
    App Zalando Paiement
    Touch ID se configure depuis les préférences utilisateurs.

    Comment Zalando est arrivée à ce résultat ?

    Ce qu’il faut retenir par dessus ces innovations en terme d’expérience utilisateur est aussi la méthode pour y parvenir. L’application a été conçue en interne par l’équipe web de Zalando à qui une autonomie presque totale a été donnée. Du GO à la validation des principes de l’utilisation, à peine 4 semaines se sont écoulées. Et ceci sans attendre à chaque fois les décisions du top management.
    Les équipes ont bien sûr travaillé en mode agile, mais y ont ajouté une touche d’auto-apprentissage. 20% du temps du projet y était consacré. D’où un temps de développement record de 3 mois pour livrer l’application !
    Comme quoi une bonne expérience utilisateur n’est pas qu’entre les mains des ux designers ou des développeurs, mais dépend entièrement d’un mode de management agile, faite de courtes phases d’auto-apprentissage, mais aussi d’une bonne dose d’autonomie, ainsi que d’une collaboration accrue entre les compétences métiers. Un exemple à suivre et dans lequel Wexperience peut aussi vous accompagner.

    Pour ceux et celles qui auraient manqué le webinar :

     

  • Sites webs mobiles : pour convertir plus, simplifiez vos interfaces !

    ipod
    Photo par Alexandre Van De Sande

    J’ai toujours eu l’intuition que des interfaces simples aidaient à mieux convertir, mais sans jamais en avoir la preuve en chiffres. Mais cette fois, ça y est ! Une passionnante étude en ligne, réalisée par Google et SOASTA, une startup américaine, révèle au grand jour la vérité sur la corrélation entre la simplicité des interfaces et le taux de conversion des sites ecommerce mobiles.

    Moins de complexité, moins d’images, telle est la recette gagnante !

    Il en ressort des résultats parfois attendus, parfois surprenant, et si vous n’êtes pas anglophone, je vous propose d’en faire le résumé ici.
    Tout d’abord, la complexité ne paye pas. Même si, de manière surprenante, le nombre de scripts d’une page ne semble pas impacter la conversion, en revanche, ce paramètre va peser beaucoup dès qu’on y rajoute la quantité d’éléments d’une page et le nombre d’images.
    Autrement dit, les pages complexes (visuellement), comprenant beaucoup d’éléments, beaucoup d’images et beaucoup de scripts impactent négativement la conversion.
    Dans le même ordre d’idée, à complexité égale, trop d’images tuent la conversion. Que ce soit des logos, des icônes de page, ou des images produits, plus il y a d’images sur votre site mobile, moins les chances de convertir sont grandes. Cela peut sembler paradoxal en ce qui concerne les fiches produits. Plus d’images enrichissent le contenu, mais à contrario, ralentissent aussi les temps de chargement des pages pendant une session.
    Au niveau du code, beaucoup de choses peuvent être améliorées.

    Structurez bien et simplifiez le code des pages

    Le facteur le plus impactant, toujours d’après l’étude, est la capacité du navigateur à comprendre le code HTML qui lui est envoyé. Si vous n’êtes pas expert, vous devez comprendre qu’avant d’afficher une page, un navigateur lit le code HTML reçu. Avant de pouvoir afficher quoique ce soit à l’écran , il a besoin de le connaître entièrement. Et le temps qui est nécessaire à le faire est plus ou moins long selon la complexité et la conformité de ce code. Sans surprise, donc, un code compliqué, une structuration de code bâclée dégraderont nettement le taux de rebond des pages d’un site mobile.
    Très important également (en deuxième position), le temps de chargement d’une page affecte aussi son taux de rebond.
    Que l’on comprenne bien, le temps de chargement est le temps que met un navigateur à recevoir l’entièreté du code et des éléments d’une page. Il n’est pas entièrement corrélé au temps d’affichage de la page, puisque l’affichage d’une page peut commencer partir du moment où tout le code HTML et CSS a été reçu (voir plus haut). En principe, l’utilisateur n’a pas la perception de ce temps de chargement, puisque ce n’est pas ce qu’il voit. Et pourtant, d’après SOASTA, il s’avère qu’il existe un lien fort entre ce temps de téléchargement et le taux de rebond d’une page. Plus ce temps est important, plus le taux de rebond est élevé ! Comme le dit Tammy Everts, la responsable de l’étude, ce résultat parait totalement contre-intuitif, mais il est parfaitement avéré.

    Autres trouvailles

    Certaines découvertes révélées sont aussi assez surprenante. Ainsi, les performances d’un site ne serait pas affecté par les critères matériels de la connexion comme le modèle de téléphone utilisé, récent ou ancien, l’OS, la bande passante, mais aussi la vitesse de connexion ! Et plus surprenant encore, le temps d’apparition du premier élément de la page ne semble pas non plus jouer un rôle dans ces performances. Ce n’est pas parce que vous affichez plus vite une page que votre site convertira mieux !

    Conclusion

    Sans surprise, la qualité de la programmation d’un site mobile joue sur sa performance commerciale. On pourrait sans doute tirer d’ailleurs la même conclusion pour tous les sites webs.
    La nouveauté de cette étude est qu’elle montre que ce ne sont pas forcément les paramètres auxquels on était en droit de s’attendre qui influent sur cette performance et que, malgré les croyances persistantes qui existent dans ce domaine, il va falloir reconsidérer l’optimisation « technique » des pages d’une manière nouvelle.
    Mais ce qui reste le plus fondamental à mes yeux, c’est la corrélation directe qui existe et qui a été démontrée entre la simplicité visuelle des pages et leurs performance. C’est vraiment la conclusion que les ingénieurs de Google qui ont participé à l’étude ! Plus un site est simple visuellement, plus il convertira ! Voilà de quoi remettre en question pas mal de sites ecommerce mobiles !

    Pour en savoir plus :

    Voir la vidéo de présentation de l’étude

  • Application : faut-il forcer les utilisateurs à se créer un compte ?

    Pourquoi il n’est pas si facile d’engager les utilisateurs à créer un compte, même si un service est gratuit.

    On ne peut pas forcer un utilisateur à se créer un compte

    Créer un compte peut être un frein pour certains utilisateurs

    Lorsque vous proposez un service en ligne, que ce soit par un site web desktop ou par une application, votre premier enjeu sera d’arriver à séduire vos premiers utilisateurs. Pour cela, vous pouvez mettre en ligne un site web expliquant le concept de votre service, puis espérer que les gens s’inscrivent sans avoir essayé l’application ou le service.
    Ou bien, vous pouvez faire encore mieux et plus rapide, en proposant directement aux potentiels utilisateurs de votre service de l’utiliser gratuitement. C’est évidemment la meilleure solution pour recruter des utilisateurs, mais cela suppose d’accepter qu’une utilisation gratuite soit faite de votre service (ce qui a un coût).

    Rassurer, toujours rassurer

    Nous pensions que cette solution pouvait générer automatiquement de l’inscription, mais un test récent avec un de nos clients, a montré que ça n’était pas aussi simple. Offrir gratuitement un accès à une application, ce qui suppose une inscription, peut quand même effrayer certains utilisateurs, qui refusent, par nature, de laisser des informations personnelles pour accéder à un service.
    Etant donné qu’il est difficile de faire autrement que d’en passer pour une inscription, cela suppose qu’il faut savoir préparer minutieusement le terrain psychologique.
    Vous trouverez ci-dessous deux vidéos extraites des tests utilisateurs sur mobile menés avec Karos, notre client. Comme vous le constaterez la déception est forte de ne pouvoir utiliser l’application sans s’inscrire. Et le refus de le faire plutôt catégorique, malgré les slides pédagogiques installées en début d’application.
    Nos conseils, toujours les mêmes, malgré l’évidence :

    • Expliquez le bénéfice qu’il y a à s’inscrire
    • Rassurez sur le fait qu’il est facile de supprimer son compte
    • Rassurez également sur le fait que les données ne seront pas utilisées dans un cadre commercial
    • Garantissez, quoiqu’il en soit, sur la sécurité absolue de votre application

    Et vous, avez-vous déjà constaté le même phénomène sur votre application ?

  • Comment adapter rapidement un formulaire au mobile

    Les formulaires sont inévitables sur un site eCommerce pour rechercher un produit, réserver un voyage ou pour renseigner son adresse de livraison dans le tunnel de commande. Depuis un mobile, ces formulaires mal adaptés deviennent des freins importants à la conversion. Alors faut-il s’adapter à ces nouveaux appareils et comme le faire ? Voici un début de réponse.

    La manière de consulter internet évolue

    La Fevad a indiqué que les ventes sur internet mobile ont augmenté de + 150% en 2012 et représentent 6% du chiffre d’affaires réalisé en 2012, soit presque 3 milliards d’euros.
    Les ventes de PC chutent de 13,9% au premier trimestre 2013, la plus forte baisse depuis près de vingt ans selon l’institut de recherche IDC. Une des raisons possibles est la hausse impressionnante des ventes de tablettes tactiles qui aujourd’hui surpassent celles des ordinateurs comme le démontrent ces courbes :

    Les ventes d'appareils tactile supérieures au PC.
    Source

    Le nombre d’utilisateurs mobile va selon une estimation dépasser les utilisateurs pc à partir de fin 2013 :

    L'usage des appareils mobiles supérieur à l'ordinateur autour de 2014 ?
    Source

    S’adapter dès aujourd’hui est stratégique pour les années à venir. Imaginez votre business dans 2 ans avec un trafic composé de 40% d’utilisateurs mobiles, comment réagirait-il ? Pouvoir naviguer confortablement depuis n’importe quel type d’appareil va peut-être devenir un argument pour les internautes. (suite…)