Ça fait toujours plaisir de voir de belles lignes comme celles là !
Oui, on peut évaluer l’UX d’une interface !
L’Attrakdif est un questionnaire issu de la recherche en ergonomie qui permet d’évaluer de nombreux aspects de l’expérience utilisateur d’une interface.
Le graphe que vous pouvez voir ci-dessus montre l’avant/après d’un projet sur lequel Wexperience a travaillé. La ligne brisée jaune montre le résultat de l’attrakdif réalisé après un test utilisateur sur une interface en production.
La ligne brisée en bleu montre un Attrakdif réalisé après un test utilisateur sur les pages refondues de cette même interface.
Comme vous pouvez le voir, l’amélioration est évidente. Qui plus est, le deuxième test a été réalisé sur un prototype en wireframes, sans habillage graphique !
Nous conduisons de manière systématique ce genre de questionnaires pour montrer à nos clients les évolutions qui sont apportées à leurs interfaces.
Cela a l’avantage de les rassurer et de leur montrer que nous travaillons dans la bonne direction. Mais mieux encore, l’Attrakdif nous indique clairement sur quels axes nous progressons le plus ou le moins.
Ici, par exemple, ce sont les deux paramètres « présentable » et « maîtrisable » qui ont augmenté le plus, tandis que le terme « commun » est apparu pour ce qui est du design. Normal, puisqu’il s’agissait de wireframes.
Comme je l’avais déjà expliqué sur le blog Capitaine-commerce.com, l’UX a une place prépondérante chez Oui.sncf. Pas un projet ne passe pas entre les mains de leur très très grande équipe UX et j’ai d’ailleurs eu la chance de pouvoir assister à l’une de leur session de recherche, au sein de ce qu’ils appellent une Love Team et dont il me semble intéressant de faire part.
Travailler avec ses clients
Si vous continuez à concevoir des applications sans consulter vos clients, alors vous avez tort. L’UX passe nécessairement par des entretiens avec vos utilisateurs finaux, car ce sont eux qui possède la clé du succès d’une application. Ne pas les consulter c’est comme inventer inventer un vêtement sans jamais le faire porter par un mannequin. Vous risquez d’avoir des problèmes. La Love Team, qui est en fait un groupe de travail, est là pour ça. Lors de la session à laquelle j’étais invité, 6 utilisateurs avaient été convoqués, de tous âges et de toutes régions, et recrutés, sur la base du volontariat, au sein de la communauté #OpenVSC ou des réseaux sociaux. Ce sont donc plutôt des aficionados, des ambassadeurs et aussi et surtout de gros usagers.
Je ne peux pas vous parler des projets qui étaient étudiés, mais ce que je peux vous dire, c’est qu’au stade de conception où ils étaient, mieux valait l’avis d’utililisateurs « experts ».
Une méthodologie simple et éprouvée
Etant moi même « cobaye », j’ai pu me retrouver pour la première fois dans ma vie d’expert UX de l’autre côté de la barrière. Pour une fois, c’était moi le testeur. Au stade du projet, nous devions avec les autres utilisateurs donner notre avis et essayer des nouvelles fonctionnalités pour le site Voyages-sncf.com. Rien de bien sorcier. Les entretiens se déroulent de manière individualisés, de manière à recueillir le plus possible d’informations de chaque participant. Je suppose qu’à la fin, les données sont croisées de manière à en retirer une synthèse qui permettra de déterminer s’il faut, soit aboutir le projet, soit carrément l’abandonner.
Il faut bien avouer que tout le monde n’a pas les moyens d’abandonner un projet déjà développé. Et pour de nombreuses sociétés, cette phase passera plutôt par des tests sur des maquettes statiques que sur un projet développé qui a déjà coûté de l’argent en production de lignes de code.
Attrakdif me voilà !
J’ai été surpris de me retrouver face à un questionnaire Attrakdif, le même que nous utilisons aussi chez Wexperience. Mais cela prouve que cet outil produit récemment par deux chercheurs français, a trouvé sa place dans les outils d’analyse UX. Vu en tant que testeur, il apparait effectivement simple d’y répondre, même si parfois, les termes utilisés semblent très éloignés de la conception d’interface.
Conclusion
La séance de travail a duré environ 2h pour 2 projets. Ce qui est déjà beaucoup. Bon, c’est vrai que nous avons été choyés. Petits fours et boissons à volonté. Canapés confortables et cadre superbe (des bien beaux bureaux à La Défense). Ce qui montre aussi que soigner ses utilisateurs compte beaucoup dans la mise en oeuvre d’entretiens individualisés.
J’ai vraiment été heureux de pouvoir participer à cette expérience et j’en remercie Voyages-sncf.com. Même si les méthodes utilisées n’ont rien de surprenantes ni de particulièrement innovantes, elles m’ont montré à quel point chez un leader du commerce en ligne, l’UX était prise au sérieux et était intégrée dans les process de conception et d’évolutions du site et de l’application mobile Voyages-sncf.com.
Je me demande si tout le monde en fait autant. Et sinon, pourquoi ? Alors qu’il s’agit bien aujourd’hui de la base et du minimum pour concevoir des interfaces faciles à utiliser.
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.
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é.
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.
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.
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.
Les petites croix de fermeture des blocs sont à peine visibles
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.
Il se trouve tout en bas de la page. Il faut donc scroller pour le découvrir
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.
Pour Voyages-sncf.com, l’application mobile est un pilier stratégique de ses ventes et de sa relation client. Offrir une expérience utilisateur proche de la perfection est donc indispensable. Et, comme je l’ai expliqué sur Capitaine-commerce.com, les moyens déployés pour y parvenir sont impressionnants. On peut donc légitimement assumer que « le boulot est bien fait » et que l’application reflète un exemple à suivre, d’autant que Voyages-sncf.com « drive » le marché grâce à sa position de leader.
Quels sont les éléments à reprendre de cette dernière version ?
Le plus impressionnant : l’utilisation de la reconnaissance vocale
Même si elle ne rentre que doucement dans les moeurs (en France, mais aux Etats-Unis, elle est de plus en plus intégrée à la vie des américains), il ne faut pas douter qu’elle deviendra une habitude comme une autre d’ici un ou deux ans. Alors, autant s’y préparer le plus vite possible. Et c’est ce que fait Voyages-sncf.com en ayant intégré une partie de son chatbot dans la réservation de billet.
Il suffit de dire par exemple : « Je veux partir demain de Lille pour aller à Paris à partir de 10h » et l’app vous sortira toute une liste de résultats répondant à votre demande. Sans erreur !
Quand on y réfléchit, la performance technologique qu’il y a derrière est très impressionnante et repose sur la fameuse intelligence artificielle et le big data.
Une véritable simplification de l’interface
L’agence de voyages de la SNCF va là aussi dans le sens du marché en rendant son interface plus simple, composée de moins d’éléments, et plus facile à utiliser.
Mais comment ? Voyons un peu cela.
Un écran d’accueil limité à une fonctionnalité
La recherche est mise très en avant sur l’écran d’accueil et reflète la fonction principale de l’application. Elle est positionnée en bas d’écran pour pouvoir être plus facilement manipulée que si elle était en haut.
Un écran de recherche plus intuitif
Là aussi l’information a été limitée de manière à permettre à l’utilisateur de se concentrer sur sa tâche.
Les dates de voyages sont affichées sous forme d’onglets bien visibles en haut de l’écran. Le nombre de voyageurs apparait également clairement sous ces mêmes onglets. Toute l’information nécessaire à la composition du voyage est donc rassemblée dans la partie supérieure de l’écran pour permettre un rapide contrôle d’un coup d’oeil. La signifiance des boutons et l’affordance des éléments de l’interface sont bonnes. Il est, par exemple, assez aisé de deviner que l’onglet de date à gauche peut-être touché pour être modifié. Pour l’ajout de nouveaux éléments dans la commande, le signe « + » est systématiquement utilisé ce qui là aussi rend la compréhension de l’interface naturelle. Le nombre de couleurs est très restreint : bleu et blanc. Une photo évoquant un ciel bleu est « collée » en fond d’écran et crée la partie émotionnelle de l’interface, la promesse que les choses se passeront bien avec Voyages-sncf.com.
Un gros effort de lisibilité sur les résultats de recherche
Les résultats de recherche ont également été retravaillés de manière à rendre leur lecture plus rapide et plus simple. Le prix est le critère principal mis en avant en l’affichant en gras et dans une police de caractère de taille supérieure aux autres textes. Une couleur rouge-orange vive signale les prix promos. On ne peut donc pas les manquer.
Le second critère de choix est bien sûr l’horaire et de par sa position à gauche des blocs d’offres, on comprend que c’est lui qui ordonne l’ordre d’affichage. L’heure de départ est majorée par rapport à l’heure d’arrivée, encore une fois en jouant sur une taille de caractères plus grosse.
Grâce à une petite flèche grise très discrète située en bas à droite de chaque bloc, des détails sur chaque offre peuvent être affichés. Sont alors proposées les différentes options pour chaque offre, ainsi que le détail du trajet (services à bord du train, durée du trajet, changements). L’information affichée est limitée et l’espacement entre les éléments est important afin de contribuer encore plus à rendre cette simplicité évidente.
Une étape supplémentaire peut-elle nuire à la conversion ?
Le choix de la place dans le wagon a pris une importance nouvelle dans l’application en étant devenue une étape à part entière dans le processus de commande. Je ne peux dire si cela aura un impact négatif sur le taux de conversion, mais on peut supposer que le besoin et la demande ont été forts pour avoir apporté cette modification à une fonction qui n’était que secondaire auparavant.
Conclusion rapide
Il reste encore beaucoup à dire sur l’application de Voyages-sncf.com, mais quelques lignes de blog ne peuvent y suffire. Dans le meilleur des cas, une web analyse plus un test utilisateur complet permettrait réellement de connaître la qualité de l’UX et de trouver de nouveaux moyens de l’améliorer.
Ce qu’il faut en retenir est toutefois la volonté de vouloir simplifier l’interface tout en gardant sa complexité fonctionnelle. C’est aujourd’hui le challenge de beaucoup d’applications.
La page d’accueil de l’application est on ne peut plus limpide, grâce à un graphisme coloré, mais pas trop, et à une limitation volontaire du nombre d’éléments d’interface visible à l’écran
L’application mobile de La Poste permet d’accéder désormais à de nombreux services offerts par notre postier national : achat de timbres, envoi de recommandé, affranchissement de courrier. La Poste est bien entrée dans l’ère du digital, mais son application mobile est-elle à la hauteur de ses ambitions ? C’est ce que nous allons voir (vidéo en bas de page)
Une application au design simple et engageant
Le gros point fort de l’application, je trouve, c’est son design graphique. Simple : il est composé de couleurs douces, pastels, peu agressives, reposantes. Ce que j’appelle la densité d’informations à l’écran est faible : il y a peu ou pas beaucoup d’éléments visibles par page. On n’a pas entassé les liens, les images, les boutons, etc. pour en faire une bouillie informe.
Les espacements entre ces éléments sont suffisamment grands pour qu’ils se distinguent bien les uns des autres. La taille des éléments cliquables est suffisamment grande également pour que l’utilisateur n’ait pas besoin d’être trop précis pour les viser et donc pour qu’il n’ait pas besoin de se concentrer trop pour y arriver (économie d’énergie).
L’ensemble présente donc un aspect avenant et fédérateur qui prépare l’utilisateur à une bonne expérience. Que l’utilisabilité soit bonne ou pas, un premier bon point est de donner à l’interface cet aspect qui met en confiance, et, donnera à l’utilisateur une plus grande capacité de tolérance.
Dans la boutique, point trop de produits n’en faut. Les éléments d’interface sont grands et facilement cliquables. L’application en devient agréable à utiliser.
Une bonne structuration
Une application sera facile à utiliser d’autant plus que ses fonctionnalités et son architecture seront faciles à mémoriser.
De ce côté là aussi, c’est réussi. Des codes couleurs forts sont utilisés pour aider l’utilisateur à se repérer entre les différentes « grosses » fonctionnalités. Le menu principal de navigation ne comporte que 5 éléments. D’autres existent, mais sont affichés en gris, ce qui minimise leur importance et permet de diminuer la charge cognitive sur le cerveau de l’utilisateur lorsqu’il regarde l’écran d’accueil.
L’application utilise beaucoup d’icônes pour aider au repérage. Parfois signifiantes, parfois pas, elles sont censées aider à accélérer la reconnaissance des liens et des fonctions de l’app. Le cerveau allant plus vite à regarder les images simples qu’à lire des texte. Il y en a beaucoup, peut-être trop. Parfois, elles ne sont pas utiles, comme dans l’onglet suivre un envoi. Il n’est donc pas évident que les utilisateurs s’appuieront vraiment sur ces icônes pour accélérer leur navigation, d’autant que la fréquence d’utilisation pour un particulier ne doit pas être très élevée (combien de fois par an achetez-vous des timbres, envoyez-vous un colis ou un recommandé ?). Leur utilité n’est pas totalement avérée, mais, en tout cas, elles ne dégradent pas l’expérience utilisateur.
Si les icônes peuvent aider à la navigation, l’app en utilise peut être un peu trop. Qui mémoriserait toutes ces icônes ?
Vous reprendrez bien un peu de fun ?
Au fond, ce qu’il manque un peu à l’application de La Poste, c’est un peu de fun, un peu d’animation, un peu d’effets de surprise (je ne parle pas des bugs). La Poste peut très bien se permettre d’avoir une image un peu « amusante » et ça aurait certainement été une bonne idée d’introduire des micro-animations au survol ou au toucher sur certains éléments de l’interface. En effet, l’ensemble est très sérieux (notamment par l’adoption de graphismes « carrés »), trop sérieux.
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 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. Ecran de choix des préférences pour les femmes…
… 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 ! Vue zoomée sur un produit. Tout l’écran est occupé par la photo.
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. Lors du passage au paiement, Touch ID est proposé à l’utilisateur pour qu’il puisse s’identifier simplement.
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 :
Je suis sidéré. Rien que ça.
En tant que chef d’entreprise, je suis amené régulièrement à effectuer des démarches auprès de différentes services administratifs.
La plupart offrent aujourd’hui leurs services en ligne. Un beau progrès ! Sauf quand on voit le résultat et qu’on finit par se demander s’il y a eu la moindre intervention d’un ergonome ou d’un UX designer sur ces sites.
Voici quelques exemples :
Icônes à contre emploi
Hier, j’ai demandé à mes « amis » sur Facebook s’ils pouvaient me donner les fonctions des 4 icônes suivantes. Evidemment, personne n’a pu deviner. Même si je leur avais précisé que ces icônes se trouvaient dans l’alignement du nom de ma société et que j’étais sur la page pour effectuer des actions en relation avec cette société.
Tiens, à votre tour ! Quelles actions engendrent ces icônes selon vous ? (les réponses en bas de l’article)
Mot de passe oublié : pourquoi faire simple ?
J’aime aussi beaucoup le formulaire de rsi.fr pour retrouver son mot de passe. En matière de sécurité, on n’en fait jamais assez. Le RSI applique la règle à la lettre. A tel point qu’il en devient quasiment impossible de retrouver son mot de passe. Ceux qui connaissent et utilisent le site du RSI devraient pouvoir en témoigner. Moi, j’ai fini par éviter le site et à demander à ma comptable.
La cerise sur le gâteau, c’est que tous les champs sont marqués comme obligatoires, sauf celui du captcha….
La page de connexion introuvable
Personne ne connaît le FAFIEC. Normal, c’est l’OPCA du Syntec…. 🙂 Eh oui, ce sont des organismes que beaucoup d’entreprises doivent fréquenter pour leurs besoins en formation. Tout va bien. Depuis quelques temps les services du FAFIEC sont en ligne. Seul petit problème. Comment s’identifier. Je vous laisse essayer vous même sur leur site. Dites-moi combien de clics et de temps il vous a fallu pour trouver le bon endroit pour le faire 🙂 (et soyez honnête !)
Jeu : trouve comment t’identifier à ton site de formation professionnel préféré en moins de 3 secondes. Si tu y arrives, c’est que tu es déjà venu avant.
Ce ne sont que 3 exemples parmi d’autres. Le reste est à l’avenant.
Mais comment sont donc faits ces sites ?
Mais cela m’amène à m’interroger. Où sont passés les UX designers dans ces projets là ? Des tests utilisateurs ont-ils été faits ? Et qui a bien pu valider des interfaces aussi étranges que peu pratiques ?
Sur le web, il existe des conventions qui se forment peu à peu, mais qui, la plupart sont dictées par les sites américains. Lorsque vous concevez l’interface d’un site, autant utiliser ces conventions pour permettre aux visiteurs de votre site de s’y retrouver immédiatement.
Pour des raisons que je ne m’explique pas, la plupart des sites administratifs que je fréquente, en tant que chef d’entreprise, semblent avoir tourné la tête à ces règles et préférés créer leurs propres lois… en dépit du bon sens (arrrrrh, j’ai horreur de cette expression, mais pour le coup, elle s’applique parfaitement). Plusieurs explications peuvent être données :
Tout le monde s’en fout, on continue comme ça, et tant pis si les petits patrons, comptables, experts comptables continuent à galérer. Ils n’ont sans doute que ça à faire
Les personnes en charge du développement de ces sites n’ont aucune notion d’ergonomie ou d’UX, ou elles sont très insuffisantes au regard du besoin
Les chaînes de ces décisions dans ces organismes sont trop compliquées, avec trop de décisionnaires, et empêchent la mise en place d’une bonne UX (si je dis ça, c’est par expérience)
Il y a sans doute d’autres raisons, mais quelle qu’elles soient, il n’est pas insultant de dire que le niveau d’ergonomie de ces sites est nettement insuffisant :
au regard des standards du UX design actuel,
et même, au regard, de la maturité des utilisateurs cibles.
Et j’oserai jusqu’à dire au regard simplement de ce qu’un bon concepteur de site ferait à minima.
Et si je mettais un instant à la place d’une sorte de supra-directeur financier national, qui se mettrait à compter les heures perdues de tous les entrepreneurs, comptables et autres personnes amenées à utiliser ces sites, pour le bien public et la santé économique de notre pays, j’aurais tendance rapidement à me dire qu’il serait temps d’apporter une solution à une telle gabegie.
Mais peut-être que je suis en train de rêver ? Ou bien ? 🙂
Vous venez de conduire un test AB sur votre site, mais vous avez l’impression que les résultats en sont décevants :
Vous vous maudissez pour le temps perdu et vous promettez de mieux réfléchir pour votre prochain test et faire plaisir à votre chef qui attend des résultats, des résultats, rien que des résultats ! Par exemple :
Vous avez constaté un taux de rebond fort sur vos fiches produits de votre trafic SEO. C’est à dire que les gens trouvent bien votre site, le produit qu’il cherchait sur votre site, mais qu’ils repartent pour la plupart ailleurs aussitôt.
Visiblement, vous avez un problème, mais ce n’est ni votre prix, ni votre stock, ni un problème technique. Vous décidez donc d’améliorer l’attractivité de votre page en agrandissant la photo principale du produit, en ajoutant des vignettes et en rendant plus légère la charge visuelle de votre page.
Qu’allez-vous mesurer pour savoir si ces fiches produits plaisent plus ?
Le taux de rebond sera un bon indicateur, bien sûr. Le taux de clic aussi, ainsi que le taux de transfo. C’est là l’essentiel, me direz-vous. Mais qu’en tireriez-vous comme conclusion si ces indicateurs restent stables ? Devez-vous pour autant en tirer la conclusion que votre test est un échec ? Pas forcément. Vous devez au contraire scruter plus loin les résultats et essayer d’en savoir plus.
Par exemple, les gens cliquent-ils plus sur l’image principale ? Scrollent-ils plus dans la page ? Leur temps de visite est-il plus long ? Reviennent-ils plus souvent visiter votre site ensuite ? Et pour ceux qui visitent d’autres pages de votre site : quelles pages regardent-ils ? Ces indicateurs peuvent être positifs et signifier que votre refonte de fiche produit est un succès.
Si les gens regardent plus de produits similaires ou s’intéressent plus à vos conditions de livraisons ou à vos garanties, vous pouvez certainement en conclure que leur intérêt est également supérieur.
En test AB, vous ne pouvez donc pas :
Vous contentez de mesurer trop simplement la performance à partir de kpi trop évident. Vous devrez croiser les données et multiplier les mesures (attention cela demande plus de temps, et parfois vous devrez compter à la fois sur votre outil de test AB et votre outil d’analytics pour faire se travail, ce qui peut vite se révéler fastidieux
Ne pas prendre du temps de la mesure : certains comportement ne peuvent apparaître qu’au bout d’une semaine, voire beaucoup plus (ex : le taux de revisite). Arrêtez un test trop vite en se basant uniquement sur l’indicateur de confiance est une erreur. Derrière les chiffres se cachent des êtres humains avec des prises de décision parfois longues. Ne négligez pas ces données qui peuvent pourtant avoir une importance cruciale.
J’ai souvent l’occasion d’analyser rapidement des tunnels de commande et un des problèmes que je vois réapparaitre souvent concerne la commande sans création de compte.
Exemple d’un formulaire de commande sans création pouvant induire en erreur
En principe, elle est supposée faciliter l’acte d’achat en réduisant le nombre d’actions de l’utilisateur, mais aussi, et surtout, en le rassurant sur l’utilisation de ses données. Qui dit « commande sans création de compte » dit « pas de données sauvegardées et utilisées à mauvais escient ». Son intérêt est théoriquement plus grand pour séduire les personnes n’ayant jamais commandé sur votre site. Aux Etats-Unis, c’est depuis plusieurs années déjà une possibilité qu’offrent de nombreux sites. Et je me demande pourquoi elle a mis autant de temps pour apparaître chez nous.
Ce qui m’amène à publier cet article, c’est parce que je viens de tomber pour la deuxième fois sur un site proposant la « commande sans création de compte ». Mais la façon dont c’est amené est tellement maladroite que je me demande bien comment l’utilisateur peut s’y retrouver et comprendre ce que le site lui propose.
L’exemple que je vais vous montrer est pris sur un site utilisant Prestashop. Je ne sais pas si la « commande sans création de compte » est un plugin. Une chose est sûre, je l’ai déjà vue ailleurs et présentée de la même façon. Ce qui me fait dire qu’il doit y avoir un paquet de sites qui ont les mêmes défauts.
Qu’est-ce que ce formulaire peut générer comme questions pour l’utilisateur ?
Que va faire l’utilisateur s’il commande sur la première fois sur ce site ?
Instinctivement, son oeil va le porter vers le formulaire de commande de création sans compte. Mais que va-t-il faire lorsqu’il découvrira aussi qu’il doit entrer son adresse email pour créer un compte ?
Un utilisateur expert saura sans doute faire la différence. Mais une personne qui commande quelque fois sur Internet, plutôt sur des gros sites, aura sans doute du mal à comprendre ce qui lui est proposé.
Voici ce qu’elle pourrait se demander :
« Que signifie passer une commande sans se créer de compte ? »
« Comment fais-je pouvoir suivre ma commande si je ne crée pas de compte ? »
« Qu’est-ce qu’il vaut mieux faire ? Créer une commande avec compte ou sans compte ? »
« Quels sont les avantages et inconvénients de deux méthodes ? »
« C’est compliqué de devoir faire un choix comme ça. »
Outre cela, et comme les internautes vont souvent vite sur les sites internet, sans vraiment lire l’information, beaucoup d’entre eux pourraient remplir les deux formulaires, descendre tout en bas de la page, et valider leur commande sans créer de compte, alors qu’ils pensaient avoir choisir la commande avec création de compte.
Pourquoi ce formulaire peut induire l’internaute en erreur ?
Parce qu’il manque d’informations sur le choix qu’il y a à faire : avec ou sans création de compte. Qu’est-ce que ça change ?
Parce que le formulaire de commande sans création de compte étant visible, il attire inévitablement le regard. Il vaudrait mieux en réalité qu’il soit dissimulé et que l’internaute puisse le faire apparaitre en cliquant.
Parce que l’internaute, en réalité, ne devrait pas à avoir à se poser la question. Le choix devrait être réduit ici à : « Je suis déjà client » et « Je ne suis pas encore client ». La demande de création de compte devrait se faire à la fin du formulaire d’identification.
Incidemment, le fait que certains champs marqués d’une astérisque rouge, renforce l’impression qu’il faille absolument remplir le formulaire du bas pour avancer dans la commande.
Recommandations pour implémenter correctement un formulaire de commande sans création de compte
Il n’est jamais facile d’affirmer et de donner des solutions en ergonomie. Mais voici quelques conseils pour vous aider à concevoir une bonne page d’identification avec commande sans création de compte.
Créer une accroche pour mettre en avant ce mode de commande et expliquer ses avantages :
« Vous êtes pressé ? Pour aller plus vite, passez par la commande sans création de compte ! » ou « Vous êtes soucieux de vos données personnelles ? Nous les respectons avec la commande sans création de compte. »
Ajoutez une explication dans une box d’aide cachée, mais visible à la demande
« La commande sans création de compte vous permet de commander anonymement sur ce site. Mais ne vous inquiétez pas, nous pourrons quand même vous livrer et vous pourrez quand même suivre votre commande. Ensuite, nous vous oublierons 😉 »
Mettez la commande sans création de compte au dessus de la commande avec compte. Cela la rendra plus visible et elle sera plus utilisée. Vous pourriez ainsi espérer augmenter votre taux de transformation.
Ajoutez quand même la possibilité de créer un compte, en fin de formulaire de commande sans création de compte.
Si vous mettez un formulaire de création de compte sur la page d’identification, masquez le à l’affichage de la page. Ne le rendez visible que si le client le demande expressément.
Bien sûr, je vous recommande de tester ces différentes solutions à l’aide d’un test A/B ou multivarié. Et si vous obtenez des bons résultats, n’hésitez pas à nous les communiquer. Nous en parlerons sur notre blog.
Bonne journée !
Pourquoi il n’est pas si facile d’engager les utilisateurs à créer un compte, même si un service est gratuit.
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 ?
Vous vous maudissez pour le temps perdu et vous promettez de mieux réfléchir pour votre prochain test et faire plaisir à votre chef qui attend des résultats, des résultats, rien que des résultats !
