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 !
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.
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.
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
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.
Les tests utilisateurs « faits maison » pêchent souvent par manque de méthodologie
De l’humble avis des spécialistes de l’UX, rien ne vaut un test utilisateur, la meilleure méthode pour bien comprendre et analyser une interface de site web ou d’application (ou d’intranet). De plus en plus employés dans les grandes entreprises, les PME-TPE restent méfiantes vis à vis d’un outil qui leur paraît coûteux et lourd à mettre en oeuvre. Et souvent la tentation est grande pour elles de faire soi même le test avec les moyens du bord.
Personne ne nie la valeur d’une approche « guerilla », comme on se plait à le dire, mais que cela n’empêche pas d’adopter un minimum de méthodes ou de contraintes. C’est souvent là que les tests utilisateurs « faits maison » pêchent.
Le recrutement des testeurs est fait parmi les collègues
Aucun protocole de test n’est écrit
La récolte des données se fait sans prise de recul
La conduite des tests est faite sans respecter le minimum des bonnes pratiques en la matière
En apparence « facile », le test utilisateur nécessite beaucoup de préparation
Les biais sont nombreux et un simple article de quelques lignes ne suffirait à les énumérer tous. Et pourtant, il ne m’est pas si rare d’entendre encore des chefs de projets, des directeurs ou d’autres responsables, balayer du revers de la main une proposition élaborée de test utilisateur en affirmant haut et fort qu’ils le feront eux mêmes, comme si cela était aussi facile que de tirer un penalty au foot.
C’est une véritable erreur de penser qu’une personne non préparée à la conduite de test utilisateur pourra arriver à tirer des résultats sensés d’une méthode qui, à première vue, parait abordable à tout le monde, mais qui, en réalité, nécessite une bonne préparation, ainsi que des techniques de conduite d’entretien et d’analyse plus poussées qu’elles n’en ont l’air à première vue.
Pourquoi cela ?
Il suffit pour se rendre compte de la difficulté de mener un test de lire l’abondante littérature qui y est consacrée. Je ne citerai que deux ouvrages qui ont ma préférence, mais qui en disent suffisamment long sur ce qu’il faut faire et en pas faire en la matière.
Rocket Surgery Made Easy, de Steve Krug (malheureusement pas traduit en français)
Méthode de design UX, par Carine Lallemand et Guillaume Gronier. Excellente compilation de nombreuses méthodes UX
N’importe quel esprit intelligent se rendra compte alors de l’inanité de vouloir conduire un test sans connaître un minimum les méthodes qui permettent de recueillir des enseignements valables.
Faut-il être un spécialiste pour faire un test utilisateur ?
La bonne nouvelle est que : non. Bien au contraire ! Tout le monde peut faire des tests à conditions de suivre la bonne méthode. Et c’est même ce que nous recommandons pour peu que les personnes menant les tests aient conscience qu’il s’agit plus de tests de routine, de validation d’interface, d’exploration, que de tests permettant d’élaborer une feuille de route d’optimisation ou de réaliser un audit complet de site internet.
La frontière entre les deux est ténue, mais elle est bien perceptible.
Tester un prototype rapidement réalisé avec 2 ou 3 personnes étrangères à votre société peut être extrêmement enrichissant.
Tester un parcours de commande sur un site ecommerce avec quelques clients (même à distance) peut vous apprendre beaucoup plus que vous ne l’imagineriez.
Oui, une équipe non experte, peut tout à fait mener ce genre de projets. Que vous soyez dans une startup, une PME ou même une petite équipe projet au sein d’un grand compte, faites-le !
Pour tout savoir sur le sujet des tests utilisateurs, découvrez notre recette 5 étoiles by Wexperience ! Pour la télécharger, cliquez ici 👈
En 17 ans, les moteurs de recherche sur les sites de ecommerce se sont considérablement améliorés
Le Nielsen Norman Group (NNG° vient de sortir un nouvel opus à sa collection des Ecommerce User Experience Series, alors profitons-en ! Cette fois ci, il s’agit de l’optimisation des moteurs de recherche sur les sites de ecommerce et le constat fait par NNG est qu’en quelques années, cette fonctionnalité indispensable s’est beaucoup améliorée chez les marchands. Mais quelles sont les bonnes pratiques pour aider les internautes à trouver le bon produit rapidement ? Revue de détail !
Quelques best-practices
Champ de recherche, soyez conventionnel
Un bon exemple de champ de recherche sur le site FNAC.COM version desktop. D’une couleur plus sombre que le reste de la page, positionné en haut, il est facilement trouvable par les internautes.
D’une manière générale, désormais, le champ de recherche (sur les écrans dits « desktop », pour ordinateur de bureau) doit être placé en haut de l’écran, près de la navigation. Pour permettre de l’identifier, un libellé explicite n’est plus nécessaire (bien que ça ne soit pas un mal non plus), sa position dans la page l’aidant le plus souvent à l’identifier. Avec le temps, les internautes cherchant le champ de recherche ont simplement besoin de trouver un long champ texte pouvant contenir plusieurs mots clés accompagné d’un bouton avec une icône loupe. Sur les sites mobiles, parfois, on ne trouve que le bouton « loupe » et cela suffit également amplement pour identifier le champ de recherche.
N’utilisez plus de recherche avancée
Cette fonctionnalité, à l’exception de sites spécialisés (recherche de vol ou réservation d’hotel) tend à disparaître et est remplacée par l’apparition de filtres et de tris (navigation à facettes). La recherche avancée avait tendance à produire trop de résultats insatisfaisants et les utilisateurs se sont mis à l’éviter. En revanche, ne pas proposer la navigation à facette constitue une erreur et est devenue une vraie convention d’utilisation pour tous les internautes.
Les filtres à facettes doivent être adaptés au produit recherché et pas simplement afficher des critères généralistes.
Autosuggestions
Tout comme la navigation à facette est devenu un standard, la suggestion de termes de recherche sous le champ de recherche est devenue une exigence incontournable pour tous les internautes. Bien réalisée, elle les aide à gagner beaucoup de temps pour parvenir à leur objectif. Mais NNG nous signale que sur beaucoup de sites, cette fonctionnalité ne remplit pas toujours son office (dans seulement 23% des cas). En effet, même si des termes sont suggérés pendant la frappe, les internautes ont tendance à ne pas sélectionner ces suggestions et continue à taper entièrement leur terme de recherche. Toutefois, il semblerait que le moteur d’autosuggestion les aide à découvrir ce qui est présent dans l’offre du site. Elle joue donc bien un double rôle : facilitation et découverte.
Outre les mots clés, certains moteurs de recherche suggèrent également des produits ou des catégories de produits. NNG signale que ce qui a été une mode pendant un certain temps, puis avait eu tendance à disparaître, revient tout de même en force à l’heure actuelle (sur mobile ou desktop) et sous forme de ce que l’on appelle des mégamenus, c’est à dire de larges panneaux déployés sur toute la largeur de la page (sur desktop).
Un bon exemple de moteur de suggestion de termes de recherche. Les fautes d’orthographe sont prises en compte et ne constituent pas un obstacle à la recherche.
Ce qu’il reste encore à améliorer
Si l’étude de NNG montre que l’offre moyenne de sites en matière de moteurs de recherche s’est beaucoup améliorée au cours des 17 dernières années, elle entraîne une nécessité pour les marchands d’être encore plus pertinents et efficaces. Il ne suffit plus d’offrir l’autosuggestion ou la navigation à facettes, et plusieurs erreurs communes entâchent encore l’expérience utilisateur telle que NNG l’a noté :
Des champs de recherche pas encore assez visible, parfois représentés par l’icone loupe sur les sites desktop ou bien à l’intérieur du menu de navigation sur les sites mobiles
Pas assez d’assistance ou d’aide à la correction pour tout ce qui concerne les erreurs de frappe, les fautes d’orthographe ou les synonymes
Des présentations non standardisées des pages de résultat
Des filtres présentant des résultats inadéquats
Nous espérons que ce premier résumé sur les moteurs de recherche vous aura intéressé et pour en savoir plus, rendez-vous sur la page de NNG pour acheter leur étude complète.
Pour notre part, vous pourrez retrouver plus de best-practices en téléchargeant nos présentations sur les sites webs mobiles dans notre page Ressources.
Le design graphique ne serait-il qu’une couche de peinture destinée à faire beau ?
Pendant longtemps, les pages de sites webs étaient créées dans des logiciels de graphisme comme Photoshop ou Illustrator (ou dans d’autres solutions graphiques plus ou moins aptes à remplir ce rôle). Mais l’habitude est désormais prise de passer par une phase de « wireframing » sous des logiciels spécialisés, c’est à dire une phase de conception détaillée ou la « couche graphique » d’un site n’est pas intégrée. Un « wireframe », c’est une maquette de page sans les couleurs, les effets graphiques, les photos et autres médias. C’est un plan qui indique où sont placés les différents éléments d’une page et qui permet, notamment, de pouvoir faire rapidement des modifications lors de la phase de conception sans recourir à des logiciels, comme ceux cités au début de cet article.
Et quand on voit certains « wireframes » aujourd’hui, c’est à se demander s’il reste encore nécessaire d’y ajouter une couche de design graphique.
On image, à tort, que le design graphique n’est là que pour transcrire l’identité de marque
Mais tout de même, le design graphique joue bien un rôle d’importance ! Tout d’abord et de toute évidence, il permet de retranscrire en « images » l’ADN de la marque et son identité graphique. On aurait donc bien du mal à s’en passer. Toutefois à ce premier rôle s’en rajoute un deuxième : celui de finaliser l’ergonomie d’une interface. L’ergonomie d’une interface, ce n’est pas que du fil de fer. C’est aussi des couleurs, des formes, des animations, des styles de police de caractères où chaque élément va jouer un rôle précis et déterminé. Et bien souvent, les tenants d’un projet l’oublie et on bien du mal à argumenter leurs choix. Ce qui est bien dommage, car tout cet apport graphique n’est jamais gratuit et peut très bien s’expliquer rationnellement, contrairement à la magie noire, l’astrologie ou bien l’art.
Regardons cela un peu dans le détail…
Le wireframe
Les maquettes de conception détaillée, comme celle-ci, permettent de concevoir de manière détaillée l’architecture d’information d’une page
Comme vous pouvez le voir, la maquette ci-dessous n’est pas utilisable en exploitation commerciale, mais pourtant, d’une certaine manière, tout ce qui peut permettra à l’internaute de l’utiliser est déjà là : les contenus sont les contenus définitifs, l’organisation et la hiérarchisation de l’information est parfaitement définie. Certaines couleurs sont déjà posées.
C’est à partir de ce genre de maquettes que Wexperience réalise des tests utilisateurs, preuve que l’internaute peut se débrouiller sans l’identité graphique de la marque. C’est aussi ce type de document qui va être fourni au designer graphique (UI/Web designer) dont le rôle va consister :
à appliquer l’identité de la marque,
à parfaire l’ergonomie de la page.
En général, une telle maquette est accompagnée de spécifications écrites qui décrivent les interactions (vers où pointent les liens, où il y aura des interactions, quels sont les contenus dynamiques, etc) et qui permettent aussi au designer graphique de mieux s’imprégner des contraintes techniques du projet.
Pourquoi certains boutons sont en bleus ?
Pas nécessairement pour qu’ils soient bleus dans la maquette finale 🙂 En réalité, cette couleur (ou une autre) sert à indiquer que certains points de l’interface devront ressortir de manière particulièrement visible. Ici, ce sont les boutons d’actions (CTA) principaux. Et c’est normal, puisque cette page est destinée avant tout à générer de la demande de devis et que ces boutons emmènent justement vers cette fonctionnalité du site.
Comme vous pouvez également le voir, il n’y a pas de photos. Et c’est normal ! A ce stade, les photos n’apportent rien à la conception de la page. Et comme elles requièrent un temps de recherche assez long, elles ne sont pas intégrées.
La maquette graphique
Des visuels d’ambiance qui augmentent l’attractivité de la page
Les photos jouent un rôle dans l’ergonomie de la page. Ici, elles sont essentiellement destinées à rendre plus humaine l’interface, à attirer le regard grâce à un potentiel émotionnel faisant appel à nos souvenirs liés autour de la famille. Rien de tel que les émotions pour capter l’attention d’un utilisateur, surtout lorsqu’il s’agit d’une offre aussi peu attrayante que des produits de complémentaire santé. Plus les photos sont grandes, plus leur pouvoir d’attraction est important. Pour cette raison, dans le corps de la page, leur taille a été augmentée par rapport aux préconisations du « wireframe ».
Utilisation des couleurs pour focaliser l’attention
La charte de GSMC comprend des couleurs vives que l’on aurait pu choisir de minimiser. Au contraire, nous nous sommes reposés dessus pour créer des grands blocs (comme des blocs de Duplo) pour, encore une fois, capter l’attention et scander la page d’un rythme doucement soutenu. N’oubliez pas que sur un écran, tous ces blocs ne sont pas vu en une fois, mais apparaissent au fur et à mesure de son déroulement à l’écran.
Le bleu marine pour l’action
C’est une couleur de la charte graphique qui a été choisi pour les boutons d’actions principaux. Tout ce qui est en bleu marine sur la page guide donc vers la demande de devis. Et cette couleur sera systématiquement utilisée pour tous les boutons d’action principaux du site. On respecte ainsi une des préconisation des critères de Bastien et Scapin : la cohérence.
Animations
Nous avons parlé jusqu’à maintenant de design graphique, mais lors de la livraison d’un projet, il existe aussi une dimension rarement évoquée dans les articles de blog. Il s’agit du travail de recherche sur les interactions et les animations. Comme il n’est pas possible de le réaliser sur des wireframes, celui-ci est réalisé à part sur Principle, un logiciel dédié.
Animer un site est devenu essentiel pour celui qui veut créer une expérience utilisateur (UX) plus mémorable. Et ce n’est pas la dernière roue du carrosse ! Bien au contraire ! Nous considérons, chez Wexperience, qu’elle est indispensable pour fournir un travail complet qui servent tous les objectifs, y compris les objectifs de conversion (ici, la génération de leads).
Conclusion
Il est indispensable de comprendre que le design n’est pas de la décoration. Si vous pensiez qu’il ne s’agissait que d’ajouter une couche de peinture sur des murs blancs, vous devriez, au contraire, comprendre, que la conception graphique, telle que nous la pratiquons, vient renforcer les qualités ergonomiques d’un site, et sont appliquées dans un but unique, celui de l’amélioration des kpi liés à la marche des affaires. Et il faut aussi ajouter à cela une dimension mal comprise souvent : l’animation, qui, savamment intégrée, vient renforcer les qualités ergonomiques de l’interface en augmentant ses qualités émotionnelles.
Les tests utilisateurs à distance complètent-ils ou remplacent-ils les tests en labo ?
La question peut se poser, car, implicitement, la notion de test utilisateurs à distance semble impliquer des économies de coûts et des gains de temps par rapport à un test utilisateur en studio (ou en labo). Mais cela n’est pas si simple.
A l’origine, il y avait les tests utilisateurs en labo. Pour une raison simple, la bande passante Internet jusqu’au début des années 2010 permettait difficilement d’enregistrer en live le flux vidéo d’un test à distance. Ou, du moins, certainement pas avec le niveau de qualité nécessaire pour obtenir une bonne analyse.
Aujourd’hui, et les technologies, et les équipements des particuliers permettent sans aucun problème de mettre à distance ce protocole.
Alors pourquoi, si le coût est moindre et le gain de temps évident, faudrait-il continuer à faire des tests en labo ?
J’aimerais répondre ici simplement et sans à priori.
Attention à ce que recouvre vraiment le terme de test utilisateur !
Tout d’abord, que l’on comprenne bien ce qu’est un test utilisateur dans les règles de l’art.
Ce sont une série d’entretiens individuels, que l’on dit « facilités », c’est-à-dire que les taches sont indiquées par un expert UX qui s’efforce de ne pas biaiser le comportement des utilisateurs, (guidés) par un expert UX selon un plan de test déterminé dans un laps de temps déterminé.
Ces tests sont dit qualitatifs dans la mesure où il a été depuis longtemps démontré qu’un panel de 5 testeurs minimum pouvaient suffire, à minima, pour commencer à récolter des informations importantes sur la qualité de l’expérience utilisateur d’un site ou d’une application. Au delà de 12 testeurs, nous sommes dans la plénitude du test. Il n’est donc pas nécessaire d’en embaucher plus pour aller plus loin. Promettre de faire un test avec 30 ou 40 personnes n’a pas de sens et n’apportera pas de résultats supplémentaires.
La facilitation est également un aspect primordial de ces tests. Elle consiste essentiellement à préparer psychologiquement le testeur, à lui expliquer les tâches si nécessaires, à lui poser des questions, le faire parler, et éventuellement, à le sortir d’une impasse s’il est bloqué. Autre avantage du facilitateur : sa simple présence permet d’assurer que les tâches sont exécutées pleinement et pas à moitié terminée si personne n’est là pour accompagner le testeur.
Une fois cela dit, un test utilisateur à distance est la même chose qu’un test in situ.
Dans tous les cas, une fois les enregistrements terminés, alors s’annonce un travail d’analyse, très long (chaque enregistrement doit être revu), mais qui permet de prendre le temps de la réflexion et de recroiser sereinement les données d’observation afin de fournir un rapport d’analyse et de recommandations.
C’est ce que nous faisons chez Wexperience et c’est ce qui fait notre plus-value.
Des tests sans enregistrements entraînent le risque fort d’une analyse biaisée sans prise de recul
Par exemple, certaines agences ou UX researcher indépendant peuvent très bien faire des tests uniquement en prise de note (sans enregistrement). Si cette méthode peut faire gagner du temps, elle ne va pas assez loin dans l’analyse en profondeur d’une interface. Les enregistrements permettent de prendre du recul et de ne pas se fier qu’à la seule mémoire ou prise de notes. Une trace inaliénable reste disponible et cette source d’information est incomparablement précieuse.
Quels sont dès lors les avantages du test à distance ?
Ils permettent de rassembler des groupes d’individus qui pourraient être autrement difficile à rassembler (essentiellement du point de vue géographique)
Ils permettent d’avoir une souplesse dans les horaires de passation d’entretiens, ce qui peut être adapté pour certains profils professionnels
L’observation du test par des personnes tierces peut-être faite depuis n’importe quel endroit
Les utilisateurs sont dans leur environnement avec leur matériel, dans une situation plus naturelle qu’en labo
Mais ils présentent aussi des inconvénients :
D’abord la qualité de la relation entre le facilitateur et l’utilisateur est très nettement dégradée. Un entretien par Skype ne vaut pas un entretien en face à face. A distance, beaucoup de signaux comportementaux échappent au facilitateur. Il en résulte que l’interprétation des actions de l’utilisateur peuvent plus facilement être biaisés.
La qualité des enregistrement est nécessairement moins bonne. In situ, par exemple, nous pouvons ajouter l’eye-tracking et la qualité des enregistrements ne souffre pas des problèmes de bande passante (certains utilisateurs peuvent avoir des connexion de mauvaise qualité, etc.)
Le matériel utilisé change d’un utilisateur à l’autre, ce qui ne facilite pas les comparaisons. L’intérêt du laboratoire, notamment, est de pouvoir éliminer les effets parasites dûs à des conditions d’expérience différentes
La motivation de l’utilisateur peut être moindre.
Pourquoi quand même faire des tests utilisateurs à distance ?
Bien que chez Wexperience, nous restons des fervents adeptes du test en labo, les tests à distance peuvent parfois être nécessaire :
Pour des raisons de timing. Le temps de recrutement et d’organisation des sessions de test peut être raccourci assez drastiquement avec le test à distance
Pour des raisons géographiques, tout simplement, si vos utilisateurs se trouvent dispersés dans toute l’Europe, pas la peine d’essayer de les faire venir au même endroit.
Conclusion : les tests à distance, oui, mais pour un travail en profondeur, le moins souvent possible
Tester in situ reste la voie royale des test. C’est celle qui permet de faire ressortir au mieux les points forts et les points faibles d’une interface.
La facilitation ne devrait jamais être esquivée lors d’un test utilisateur. Une grande partie de leur valeur repose sur la présence humaine auprès du testeur.
Les tests à distance sont recommandés pour des raisons de timing (si le délai est vraiment très serré) ou des raisons géographiques.
Une démonstration de dialogue homme/machine bluffante !
Tout le monde a été bluffé hier, et sera encore bluffé pendant quelques jours, par l’incroyable démo que Google nous a offert lors de sa keynote. Une prise de rendez-vous téléphonique par Google Assistant avec une vraie employée d’un vrai salon de coiffure.
Bluffant, parce que, apparemment la personne en face, celle du salon de coiffure, n’a pris conscience à aucun moment qu’elle parlait avec une machine.
Bluffant, parce que le dialogue était d’une fluidité qu’aucune machine du marché actuellement n’est capable d’obtenir.
Bluffant, parce qu’aucun accroc ne s’est glissé dans la conversation, Google Assistant comprenant tout ce que lui disait la personne du salon de coiffure, jusqu’à ses intonations de voix.
Bluffant, surtout par la capacité des gens de la Sillicon Valley a nous éblouir avec des démonstrations, à mon avis, loin des réalités du marché, mais si impressionnantes et réussies qu’on en oublie, justement, que ça ne sont que des démonstrations. Et si vous avez un doute là dessus, relisez un peu les articles sur la première démo de l’Iphone en 2007 par Steve Jobs qui n’avait été en réalité qu’un énorme bricolage, car rien, de rien, ne fonctionnait en vrai sur l’iPhone ce jour là.
Cette technologie verra-t-elle vraiment le jour sur le marché ?
Mais au delà de cet effet publicitaire, faut-il dès lors quand même s’interroger sur les promesses d’une telle technologie et croire qu’elle envahira les plateaux téléphoniques des services de relation client d’ici quelques années ?
C’est, en fait, plus que certain. La phase de maturation sera longue, car parler comme un humain demande beaucoup d’apprentissage, et aussi beaucoup de puissance machine. Et je ne suis pas sûr que nous en soyons déjà à ce stade d’industrialisation de la parole humaine. Mais oui, on peut le croire, demain, nous nous adresserons en grande partie à des machines dans nos relations avec les marchands ou les services publics.
Mais le changement sera long et progressif, plutôt que brutal, comme beaucoup pensent le croire.
D’abord, pour des raisons de résistances humaine. On ne va pas jeter à la poubelle des milliers de jobs comme cela (en tout cas, il faut l’espérer). Et d’autre part, parce que la technologie de reconnaissance vocale et de parole progresse par petits pas plutôt que par à-coups. Et enfin, parce qu’il est probable qu’en réalité, machines et humains se côtoieront plus qu’ils ne se remplaceront pour prendre en charge la relation client. Et en somme, ça ne sera pas si différent que ça d’aujourd’hui où déjà une partie des traitements sont automatisés par email ou par chat.
En tout cas, bravo à Google pour cet exploit technologique ! Et attendons de voir ce que vont répondre ses concurrents : Amazon, Apple, mais aussi les géants chinois (et pourquoi pas aussi les européens pour le peu qu’ils s’en donnent les moyens).
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.
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, en mode ligne, permet d’afficher jusqu’à 6 produits à l’écran. Avantage ou pas ? But fait dans la simplicité́ et a raison !
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. Chez 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
Chez 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.
Retour écrit du dernier webinar d’Olivier Sauvage sur l’optimisation de votre fiche produit sur un site web mobile. Le replay est encore disponible à cette adresse.
Pourquoi vous parler des best practice sur les sites mobile ? C’est tout simplement parce que depuis cette année en France, le trafic mobile à dépasser le trafic desktop. Chose qui est arrivé il y a déjà quelques années aux Etats-unis.
Et si vous êtes e-commercant, il est grand temps de penser votre site de manière mobile. Vous découvrirez donc dans cet article de nombreux exemples qui vous aideront à revoir la conception de votre fiche produit.
Que doit faire la fiche produit pour augmenter le taux de transformation ?
La fiche produit dans un site e-commerce est quelque chose de très important. Pour expliquer son importance, basons-nous sur le principe « AIDA » (vieux principe de marketing) qui consiste à dire que lorsqu’on veut convaincre et vendre quelques choses à quelqu’un, on va donc passer par quatre étapes :
Attirer l’attention
Susciter l’intérêt
Rassurer
Engager.
Séduire
La première étape est la séduction. Pourquoi est-elle importante ? En C2C, les internautes portent rapidement un jugement sur les produits, et votre rôle en tant qu’e-commerçant et de bien les mettre en valeur et attirer l’attention pour les mettre dans un état émotionnel fort pour les engager.
Agrandissez la taille d’écran en utilisant des photos immersives
En étendant le fond de la photo au fond de l’écran, vous donnerez à l’utilisateur l’impression qu’il y a plus d’espace sur l’écran qu’il n’y paraît. Utiliser ce procédé permet de stimuler l’émotion et de capter mieux l’attention.
Dans les trois exemples ci-dessous, nous pouvons voir que le produit est posé sur un fond qui recouvre quasiment toute la surface de l’écran ce qui permet une vraie mise en avant du produit.
Faites zoomer facilement
Activer le zoom doit être simple, rapide et doit permettre de naviguer facilement entre les différentes vues du produit.
Le zoom s’active par un « tap », puis permet de zoomer encore plus dans le produit en utilisant le « pinch ».
Il est même possible de passer d’une vue à l’autre du produit par « slide » latéral. Attention, toutefois à bien tester cette fonctionnalité qui utilise le même geste que le history back du navigateur.
Montrer bien vos couleurs
Rendez-bien compte des couleurs. Le produit coloré, c’est mieux que les pastilles colorées.
Pour le confort, faites des zones de clics assez grandes (contre-exemple à droite, les zones sont trop petites et trop proches).
Par exemple sur ce site, les différentes couleurs du produit donnent plutôt l’impression qu’il s’agit de différents modèles. Une icône est même difficilement compréhensible.
De plus, quand le rapport taille réelle/taille d’affichage est vraiment grand, créez des vignettes produites plus grandes quitte à prendre plus d’espace sur la page.
Ici, un système de scroll horizontal pourrait être utilisé pour afficher plus de vignettes.
Multipliez les vues
Multiplier les vues est important, mais il faut rendre la visualisation facile (plus vous avez de photos, mieux c’est).
Les petits points créent des problèmes de pointage à cause de leur trop petite taille. Mieux vaut utiliser les vignettes comme sur le zoom à gauche.
Les vues inutiles sont à proscrire.
Ce qui peut-être intéressant sur un écran d’ordinateur de bureau peut ne pas l’être sur un mobile, comme ici les vues latérales du produit qui n’apportent rien en terme d’information et font perdre de la place à l’écran.
Des mots pour séduire et capter l’attention
Les phrases doivent être courtes et de quelques mots seulement. L’interlignage doit être suffisamment espacé pour qu’on donne de l’air au texte. Evitez les titres de plus de 2 lignes.
Vous pouvez utiliser des textes sur des images, bien que sur écran, cela ne soit pas conseillé. Dans cet exemple, cela fonctionne, car le blanc du texte contraste suffisamment.
Pour avoir encore d’astuces pour améliorer vos fiches produits, vous pouvez télécharger la présentation en lien avec ce webinar en cliquant sur ce joli bouton.
➡ Retour écrit du dernier webinar d’Olivier Sauvage sur l’optimisation de la conversion sur un site web mobile. Le replay est encore disponible à cette adresse. Aujourd’hui, malgré un usage de plus en plus intense des smartphone, le taux de transformation des sites webs mobiles reste faible. Dans cet article, nous essaierons de voir pourquoi et de vous donner des conseils simples et pratiques pour lutter contre l’abandon de panier dans le tunnel de commande mobile. C’est aussi un usage très particulier, qui est assez différent de ce qui est fait sur un ordinateur. Le mobile est utilisé environ 80 fois par jour. On le regarde bien plus de fois, mais avec des temps d’attention qui sont très faibles (inférieur à 30 secondes et parfois, ce sont des micros interactions de quelques secondes seulement). Cela peut expliquer en grande partie pourquoi le taux de conversion sur mobile reste faible : on a beaucoup plus de mal à se concentrer sur le mobile que sur un ordinateur.
Alors pourquoi le taux de transformation sur mobile reste faible ? Plusieurs points peuvent l’expliquer :
l’interface est peu confortable (trop petite, instable, sensible)
elle est considérée comme peu sûre en termes de sécurité des données
l’attention est plus faible
temps de charge lié aux mauvaises conditions de connexion (en déplacement, en zone non couverte)
Patience très faible des utilisateurs.
Vous vous dites que c’est peine perdue.. Mais non ! Nous allons vous montrer ce que l’ergonomie permet de faire pour améliorer le taux de transformation sur mobile.
Rendre l’interface confortable
Tout d’abord, il existe différentes manières de tenir et d’utiliser son smartphone. Même si les manières de tenir et d’utiliser un téléphone sont assez variables (et dépendent de la taille du téléphone lui-même), il existe tout de même dans l’écran des zones plus ou moins privilégiées pour les interactions. Manifestement, le haut de l’écran est une zone moins facile à atteindre dans de nombreux cas d’utilisation. Encore une fois, c’est d’autant plus vrai avec les grands smartphones.
Agrandir les éléments de saisie
Le formulaire est une des étapes les plus difficiles à passer dans les tunnels de conversion sur la plupart des sites mobiles. Pour améliorer cette étape, il suffit d’appliquer la loi de Fitts qui dit que “le temps requis pour atteindre une cible est fonction de la distance de cette cible et de sa taille. Plus la cible est éloignée et petite, plus c’est long de bouger d’une position de repos vers cette cible.”. Le site américain ao.com est un très bon exemple de l’application de cette loi : les champs de texte et les boutons sont grands en utilisant toute la largeur de l’écran. Cela permet à l’utilisateur de saisir facilement ces informations avec son index ou avec son pouce.
Simplifier la saisie
Une autre façon de faire est d’adapter le clavier en fonction des informations qui doivent être saisis. Sephora et Starbuck proposent d’utiliser des claviers contextuels pour le numéro de téléphone, le code postal, les e-mails. On augmente ainsi le confort et le temps passé à remplir un formulaire. Ce système est aujourd’hui proposé sur la plupart des sites e-commerce, mais est absent lorsqu’il s’agit de rentrer son code postal.
Guider
Pour améliorer le confort, on va utiliser des règles d’ergonomie et notamment les règles de guidages (Bastien et Scapin). Le guidage consiste à aider un utilisateur à remplir un formulaire, à lui donner des indices pour le remplir. Les marques Starbuck et Carrefour aident leurs utilisateurs à créer le mot de passe idéal par le biais de pop in. Celles-ci vont les guider, mais aussi rassurer l’utilisateur dans la création de son mot de passe.
Aider l’utilisateur à remplir les formulaires
Autre astuce qui n’est pas encore très répandue est de pré remplir les champs pour que gagner en rapidité. Dans les exemples ici, il s’agit de l’adresse en se basant sur la saisie des premiers caractères. Attention à ne pas aller trop vite cependant et à attendre que suffisamment de caractères soient saisis avant de faire une proposition. Il est également possible de proposer la géolocalisation du mobile pour aller encore plus vite.
Adapter les éléments d’interface au mobile
Les e-commerçants font des sites mobiles qui sont en fait des sites web responsives qui découlent directement du site web desktop. Malheureusement il y a souvent des éléments du site desktop qui ne correspondent pas du tout au mobile. Sur cet exemple de site américain, les boutons de choix de quantités changent en fonction de l’affichage. Sur mobile, les menus déroulants sont remplacés par des boutons plus/moins plus faciles à utiliser avec le doigt (et surtout plus rapides).
Vos emails aussi doivent être responsive
Lorsqu’un utilisateur créé un compte sur un site mobile, demande un changement de mot de passe, un mail de confirmation lui est alors envoyé. Il est impératif de vérifier que cet email ai un format adapté à l’affichage sur un écran mobile. Sur cet exemple, le mail est totalement illisible et nécessite une action de zoom par l’utilisateur. L’expérience utilisateur est alors totalement dégradée, ce qui donne une impression de mauvaise qualité à l’utilisateur.
Pour avoir encore d’astuces pour améliorer la conversion, vous pouvez télécharger la présentation en lien avec ce webinar en cliquant sur ce joli bouton.
La refonte de site, totale ou partielle, est un chantier long et compliqué qui présente des risques. Pour assurer sa réussite, il faut savoir mettre en place une méthode bien rodée. C’est cette méthode, que nous appliquons avec nos clients, qui vous est présentée ici, à travers le cas de Oney Bank, leader du crédit à la consommation en France.
Les risques de la refonte
Bien que l’optimisation permanente des front-office soit désormais la règle, il existe encore de nombreux cas de sites webs ou mobiles qui nécessitent une démarche de refonte complète. Autrement dit, une démarche qui nécessite à la fois une étude en profondeur des ressorts du succès d’un site, mais qui remette également en question son apparence et son UX.
Mais cela ne se fait pas sans risques et les écueils sont nombreux qui risquent de mener à un projet innabouti, peu efficient, voire contre-productif dans certains cas.
Ne pas aboutir
Nombreux sont les cas où le projet, démarrant en fanfare, finit par s’enliser dans les sables mouvants d’interminables réunions, de prises de décisions reportées, de manque de budget ou carrément de manque de personnel.
Être trop long
Le monde digital avançant à la vitesse du vent, les projets trop long voient finalement remettre en question leurs propres objectifs quand la conception, par lenteur, vient à proposer des solutions déjà dépassées lors de leur mise en production.
Être trop cher
Un projet de refonte, s’il n’est pas maîtrisé peut vite aboutir à des surcoûts et des dépassements budgétaires qui peuvent mettre de la tension au sein des équipes et mettre en danger même son aboutissement.
Rater ses objectifs
La route est longue entre le début et la fin d’un projet et les détours fréquents. Et si le projet n’est pas accompagné d’une vision globale stratégique, il peut vite s’éloigner des objectifs initiaux. Résultat, il risque d’aboutir à un simple lifting par manque de clairvoyance ou bien alors à un résultat en opposition avec les objectifs de départ.
Les pouvoirs de l’UX peuvent-ils aider à sauver un projet ?
L’UX à la rescousse
Une refonte doit donc, dès le départ, se contraindre à un processus métier et à une organisation qui permet de contourner tout ces risques ou, tout au moins, à les amoindrir. L’UX, qu’on peut aussi assimiler à la conception centrée utilisateur, mêlée de méthodes agiles, va permettre justement de mener à bien un projet de refonte avec un maximum de résultats garantis ! C’est la méthode que nous utilisons chez tous nos clients et qui donne entière satisfaction.
Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur notre nouvelle offre « refonte de site », cliquez ici
Pourquoi l’UX ?
Les méthodes de l’UX sont, au départ, basées sur l’ergonomie, c’est à dire sur l’observation des utilisateurs pour en tirer des conclusions. Observer les utilisateurs et leurs actions permet de se faire une opinion très proche de la réalité de ce qui se passe en réalité sur un site ou une application. Mieux que les web analytics, qui nécessitent beaucoup de ressources et de temps pour en tirer parti, l’UX permet à partir de méthodes peu onéreuses, simples et efficaces, de comprendre parfaitement les envies, les besoins et les craintes d’une population cible et de déterminer les moyens d’améliorer la satisfaction simplement en travaillant l’apparence et l’organisation des interfaces.
Les personas sont un outil très utilisés dans la conception centrée utilisateurs
Plus encore, l’UX oblige à raisonner et à s’organiser de manière tout à fait nouvelle, en se plaçant du point de vue de l’utilisateur, pour mener un projet. Dans le web, comme en informatique, c’est la méthode la plus efficace. Une approche centrée utilisateur permet non seulement d’accélérer le temps de production d’un projet, mais également d’en améliorer grandement la qualité du point de vue de l’utilisabilité et de l’efficacité économique, tout en en réduisant les coûts de correction et de maintenance. C’est à se demander pourquoi tout le monde ne le fait pas, encore aujourd’hui.
(cf Benefits of User-Centered Design)
Le cas du projet Oney
Oney Bank, société de crédit à la consommation, acteur majeur sur ce marché, cherchait à améliorer la notoriété de ses offres et surtout à augmenter l’efficacité de leur présentation sur son site de marque. A savoir : Oney est partenaire de grandes marques de distribution et la plupart de ses clients entrent par le biais d’un achat à travers ces marques (par du crédit-conso en fin de parcours d’achat ou, plus simplement, comme moyen de paiement sur un site de ecommerce).
Oney se doit, comme tous ses concurrents d’informer et de rassurer sur son identité, sur ses offres, et sur son image, qui ont un impact particulièrement important dans les métiers d’argent. Si la confiance n’est pas au rendez-vous, la clientèle fuit.
Une des pages de l’ancienne version du site, avant la refonte
Nos conseils pour bien réussir un projet de refonte
Objectifs et bilan
Un des points les plus primordiaux d’un tel projet est d’en fixer les objectifs et de s’y tenir. Sans objectifs clairement partagés de bout en bout de la chaîne de production, il sera difficile de monopoliser et de rassembler chacun dans le même état d’esprit au cours du projet.
Pour mieux vous faire saisir le travail accompli, nous nous attacherons ici à vous décrire le projet de refonte de la fiche produit de l’assurance vie. Comme tout produit financier, l’assurance vie est un produit compliqué qui nécessite à la fois clarté et rassurance. Qui plus est, comme beaucoup de produits financiers, le produit est soumis à des contraintes légales qui rendent parfois « impraticables » ou illisibles certaines informations.
Le protocole que nous mettons en place est itératif. Il a pour principe de laisser le temps au temps et d’ajuster par itérations courtes les différentes maquettes que nous livrons au client, et cela, en fonction des avis des utilisateurs qui sont testés à échéances régulières.
Comme vous pouvez le voir – et c’est très important – le projet est « entrecoupé » de tests utilisateurs. Et c’est là réellement que réside notre principale source d’innovation et d’inspiration. C’est bien lors de ces sessions avec les clients finaux que nous arrivons à déterminer dans le détail ce qui pourrait permettre d’améliorer l’expérience utilisateur, et, in fine, la performance commerciale de la page, comme nous le verrons à la fin de cet article.
Le protocole de test consiste en une série d’interviews individuels d’une heure environ.
Notre conseil : toujours mener un test utilisateur sur l’existant afin d’obtenir une vision objective de l’UX sur l’interface testée. Conduire ensuite ce même test à différentes phases du projet afin de pouvoir comparer les évolutions apportées.
Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur notre nouvelle offre « refonte de site », cliquez ici
Dans ce genre de projet, trois tests sont menés :
Un premier test d’apprentissage et de bilan. Il est mené sur l’existant et permet aux équipes UX de prendre connaissance du métier d’Oney, mais également de se faire une opinion objective du comportement des utilisateurs sur le site (qu’il soit mobile ou desktop). A noter : les résultats de ce test sont mixés avec d’autres axes d’analyses comme :
Les Web Analytics (partie menée par Digitaleez, notre partenaire)
Les personas clients
Les experience maps
les cartes de chaleurs : clicmap, scrollmap
Et plus encore, en fonction de ce que le client est capable de nous livrer
Analyse page Oney : le premier test utilisateur va pouvoir permettre de renforcer l’équipe de conception dans ses convictions et rationnaliser l’analyse d’un point de vue utilisateur final
Un deuxième test de validation des premières hypothèses de refonte. Ce deuxième test est réalisé sur un prototype construit à base de wireframes (maquettes fil de fer sans design graphique). Malgré la difficulté pour les utilisateurs finaux de se projeter dans ce qui n’est qu’une ébauche, les enseignements à retirer de ce genre de test sont extrêmement riches et permettent de s’engager à ce stade du projet dans la bonne voie sans le moindre doute. C’est aussi à ce stade que les fausses pistes sont éliminées.
Exemples de wireframes : plus d’une centaine ont été produite pour la version desktop et la version mobile
Le dernier test est conduit sur les pages habillés graphiquement (soit sous forme de maquettes prototypées, soit déjà montées en HTML). Ce dernier test est essentiel pour se rassurer et valider l’intégralité de la phase de conception. Il est encore temps de faire des correctifs à moindre coût avant la phase finale de développement.
Les maquettes, les wireframes ou les prototypes sont partagées entre les équipes sur Invision
Les tests utilisateurs ne sont pas le seul outil que nous utilisons. La phase d’analyse comprend aussi l’étude de données quanti (web analytics, scrollmap, clicmap) associé à la création d’outils centrés utilisateurs (Personas, Experience maps).
Un questionnaire pour mesurer l’UX
Les tests ne sont pas la seule source d’information pendant la phase de conception. Afin d’avoir une vision plus exhaustive de l’expérience client, nous y ajoutons systématiquement un questionnaire d’évaluation Attrakdif qui permet d’avoir une mesure objective de l’expérience utilisateur dans toutes ses dimensions.
Le questionnaire Attrakdif est un questionnaire simple que les utilisateurs peuvent remplir en moins de 3mn
Soumis à chaque utilisateur en fin de de test, il est un élément indispensable de la conception. Comme vous pouvez le voir sur le schéma ci-dessous, les progrès accomplis entre la version de départ non optimisée et la version finale du projet sont indéniables. Quasiment tous les critères de l’expérience utilisateur ont été améliorés.
Plusieurs Attrakdif ont été réalisés sur les wireframes, le site original et le site final. Ce schéma montre la progression très nette de l’UX sur les différents parcours utilisateurs testés.
Des gains jusqu’à 20% sur le coût d’un projet classique
Pourquoi la méthode centrée utilisateur fait-elle gagner du temps et de l’argent ?
La mise en place d’une telle méthodologie peut paraître lourde, gourmande en temps, chère. Au contraire, c’est tout l’inverse ! Cette démarche fait gagner de l’argent à tout le monde sur plusieurs facteurs :
Le temps du projet est limité : grâce à la conception centrée utilisateur couplée à un mode de développement agile, la durée du projet est restée raisonnable et aucun dépassement de temps n’a été constaté.
Economie : le surcoût du projet à cause de l’apport de compétences UX est en réalité gommé par le premier critère (respect des délais), mais aussi par la livraison d’un résultat bien plus satisfaisant en terme de qualité de développement. Il a été montrée par A+B (ref) que l’économie réalisée se situait aussi au niveau des coûts de maintenance et de correction, notoirement réduits grâce à une UX appropriée et adaptée aux besoins utilisateurs (cf the ROI of User Experience)
Performance : comme nous allons le voir pour terminer cet article, le taux de transformation de demande de souscription à l’assurance vie a grimpé de manière significative suite à la refonte.
Les allers et retours, qui font peur à toutes les agences, sont intégrés au budget dès le départ. Il n’y a donc pas de surprise non plus à ce niveau
Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur notre nouvelle offre « refonte de site », cliquez ici
Finalisation et mesure de la performance
Une fois validées les maquettes finales, celles-ci sont montées en HTML puis envoyées aux équipes de développement qui disposent alors de documents précis, fiables et testées. Sur ce type de projet, toutes les pages sont conçues par Wexperience. Cela veut dire que presqu’aucun écran n’échappe à la main créatrice de nos équipes. Adopter ce niveau de précision permet d’éviter par la suite toute dérive entre le moment de la livraison des maquettes et leur montage. De la même manière qu’au cours de la phase de conception, cette manière de faire diminue aussi les aller et retours entre les équipes techniques et les équipes de conception. La mesure de la performance de la nouvelle version s’effectue par un test A/B classique. L’ancienne version est testée versus la nouvelle, rien d’extraordinaire !
Plusieurs kpi sont mesurés, mais nous gardons l’oeil sur le plus important, qui est le taux de transformation.
Sans dévoiler de résultats prévis, le test a montré plusieurs améliorations notoires :
Des taux de clic beaucoup plus forts sur les call-to-action principaux
Mais aussi et surtoutdes taux de remplissage du formulaire de souscription allant parfois jusqu’à +10% !! Quand on rapporte ce gain au nombre de visiteurs du site, le résultat n’est pas négligeable.
La page finale après refonte du produit d’assurance vie d’Oney. La part belle est faite à l’émotion, la clarté, la simplicité et la transparence qui sont des critères fondamentaux de la conversion sur ces types de site.
Chez La Redoute :
Chez Zalando :
Une autre façon de faire est d’adapter le clavier en fonction des informations qui doivent être saisis. Sephora et Starbuck proposent d’utiliser des claviers contextuels pour le numéro de téléphone, le code postal, les e-mails. On augmente ainsi le confort et le temps passé à remplir un formulaire. 
