Peut-on vraiment encore créer des expérience utilisateurs digitales innovantes sur les sites de ecommerce ?

Après tout, ces sites font tous la même chose et, à peu de choses près, on y trouve toujours les mêmes fonctionnalités. Pas étonnant qu’ils finissent tous par se ressembler. Le noir et blanc sobre dans la mode, les sites colorés et criards chez les discounters. Les menus de navigation en haut au centre, les listes produits en colonnes ou en lignes. A peu de choses près, l’internaute finira toujours par retrouver les mêmes schémas d’interface, la même prototypie (pour comprendre ce terme, lire notre fameux article Walmart vs Amazon).

Avantage : en adoptant la même structure d’interface, les sites de ecommerce sont plus faciles à utiliser et à comprendre pour les utilisateurs, car ils utilisent tous les mêmes canons. Le temps d’apprentissage pour l’utilisateur devient quasi nul et il peut se concentrer sur l’offre, pas sur comprendre comment fonctionne l’interface.

Inconvénient : plus les sites se ressemblent, moins ils ont de personnalité et moins ils ont de capacité à se différencier.

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

Et, à vrai dire, les marges de manoeuvres pour créer une expérience originale, neuve, inventive et efficace ne sont pas énormes. Pourtant, on peut encore y arriver ! La preuve avec Greatjonesgood.com et Femmeandfierce.nl, deux sites de retail « qui font bien le job », si je puis m’exprimer ainsi. Voyons voir donc par quels subterfuges graphiques et interactifs, ils y parviennent :

La couleur, nouvel éminence suprême de l’expérience utilisateur

Première différence qui saute aux yeux, la couleur n’est plus bannie. Elle s’affiche en fond de page, sans complexe, et vient chasser le sempiternel blanc, couleur neutre par excellence, que l’on trouve encore sur la plupart des sites. Il a même disparu des photos de Femmeandfierce.nl, remplacé par des teintes pastels et chaleureuses, « girly » ? Pire encore ! Le sacro-saint noir des typos a été outrageusement remplacé par un rouge bien primaire, sorti tout droit d’une affiche vintage des années 70 !

Greatjonesgood.com est moins audacieux, mais parie sur une palette vintage à souhait, rappelant (le pire ou le meilleur) de l’âge des pantalons à pattes d’éléphant.

Le monde est-il prêt par une telle débauche visuelle ? Sans doute pas sur les grands sites mainstream, mais sans doute oui, sur tout ceux qui voudront faire autrement que leurs concurrents, tant qu’ils ne sont pas encore dans les sentiers du commerce de masse.

La typo, principal élément de l’identité visuelle, se fait plus douce

Retour aux basics ! Ou plutôt aux rivages anciens de l’affiche imprimée et de ses caractères fondus au plomb et légèrement approximatifs, arrondis par l’usure, onctueux dans la forme, souples et féminins. Sus aux typos dures ou trop « UX », trop parfaites ! Voici des typos nouvelles, qui tranchent avec les habitudes clean des design system à la Google et font croire à un design simili-vintage, simili-bio. Bref, à un retour à plus de douceur.

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

Des petites animations, juste pour le plaisir !

On n’avait pas vu ça depuis les pages de gifs animés de la fin des années 90 : des animations qui ne servent à rien, qui ne sont là que pour le plaisir des yeux, qui ne cherchent pas à vous impressionner ni à vous vendre quelque chose, mais qui sont simplement bonne à vous procurer du plaisir, de l’amusement et de la joie. C’est juste rustique, simple et drôle. Et on en redemande encore !

De la photo et du dessin

Qui l’eut cru ? Le dessin, ou plutôt les éléments dessinés, reviennent en force. Avec assez d’habileté sur Greatjonesgoods.com où ils viennent se superposer à la photo ou même la remplacer. Soulevez le couvercle des marmites et vous serez surpris. Encore une fois, il ne s’agit pas de ces illustrations, chères à Google, policées, trop honnêtes pour être authentiques, calibrées au pixel près, mais bien de bons vieux dessins tracés à la main, sans algorithme pour lisser le trait, peut-être, scannés, puis collés comme des images de classe sur un grand Canson coloré. On peut aimer ou pas, mais l’effet est réussi. Voilà enfin quelque chose de nouveau et de différent qui donne un petit ton amateur sympathique, et accroche le regard.

Des photos « gorgeous » !

Même s’il n’y a rien de nouveau sous le soleil, place est faite à la beauté des photos, à la pêche visuelle et à l’éblouissement du regard. C’est vrai sur les deux sites et encore plus particulièrement sur Greatjonesgoods.com. Les photos d’illustration sont somptueuses (presque trop) et submergent le cerveau d’émotions. Si vous n’avez pas faim en regardant ces photos, c’est que vous venez juste de déjeuner, non ?

Simplicité, toujours la simplicité

Point commun des deux sites. La simplicité que l’on retrouve partout. De la page d’accueil jusqu’à a fiche produit. Et même dans le tunnel de commande. Les deux sites proposent des tunnels sans création de compte, permettant un achat en 2 étapes ! C’est de l’optimisation pure ! Et enfin, l’abandon du compte client, qui, dans le fond, ne sert plus vraiment à grand chose aujourd’hui.

En conclusion

Ces deux sites renouvellent le genre en terme d’expérience utilisateur. Ils proposent une interface, certes, organisée de façon classique, mais avec un habillage graphique qui tranche avec les grandes tendances habituelles. Oui, il est donc possible de créer de nouvelles expériences dans le commerce détail en jouant sur des facteurs différenciants sans pour autant abandonner les canons habituels des interfaces de sites ecommerce.

La question est : pourquoi certains de vos utilisateurs ne voient parfois pas ce qui est juste devant leurs yeux

En ergonomie, il est vraiment essentiel de comprendre une chose : il n’est pas possible de porter son attention sur deux choses à la fois.. Et c’est particulièrement vrai lorsqu’il s’agit du regard. De toute évidence, à moins de souffrir d’un grave défaut de strabisme, vous ne pouvez pas regarder à deux endroits en même temps. Mais beaucoup plus étonnant encore, vous pouvez très bien aussi ne pas voir une information qui se trouve juste devant vos yeux.

C’est le phénomène de l’attention sélective !

Lorsque le cerveau traite les informations qu’il reçoit par les yeux, il est capable de reconstituer l’ensemble des éléments d’une scène et d’en former un tout intelligible et possédant un sens. Montrez une photo de sapins, de maisons, et de vallées à quelqu’un et il sera immédiatement capable de vous dire ce qu’il s’agit d’un paysage de montagne, même, éventuellement, en n’en regardant qu’une partie. (c’est la capacité du cerveau à imaginer quelque chose qu’il ne voit pas, mais dont il est capable d’évaluer la probable signification).

Ce travail du cerveau, simple en apparence, est en réalité extrêmement complexe et s’accomplit en quelques millièmes de secondes sans même que nous en ayions conscience. Avant que nous réalisons ce que nous voyons, notre cerveau le sait déjà. Cette capacité cognitive exceptionnelle fait que nous nous servons essentiellement de nos yeux pour nous déplacer dans notre environnement et interagir avec lui.

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

Et pourtant, malgré cette incroyable capacité, nous pouvons quand même rester totalement aveugle à quelque chose qui est placé devant nous. Parfois, un utilisateur peut « ne pas voir » un message d’alerte écrit en gros et en rouge en plein milieu d’un écran !!! Et c’est un fait très fréquent !

Dans la vidéo suivante, il est demandé à une utilisatrice de se créer un compte sur un site de jeu en ligne. Malgré une taille conséquente et un placement optimum, elle ne voit le bouton qu’au bout de quelques longues secondes.

[youtube width=800]https://youtu.be/h-CqKihZ3tY[/youtube]

Ce phénomène curieux, cette incapacité apparente, s’explique en réalité très bien et est due au fait que notre capacité à traiter une information de manière consciente est très limitée.

Pour le dire simplement et très approximativement, nous ne pouvons voir consciemment qu’une seule chose à la fois sur un point précis et limité de notre champ de vision.

Faites donc l’expérience en vidéo ci dessous et vous vous en rendrez très vite compte.

[youtube width=800]https://youtu.be/ubNF9QNEQLA[/youtube]

Un objet en plein dans notre champ de vision peut très bien ne pas être vu du tout !

Et quand on est designer, ne pas connaître ce mode de fonctionnement de notre cerveau peut conduire à d’importantes erreurs de conception. Et à ne pas faire voir de message important à certains moment du parcours utilisateur ou bien à ne pas arriver à attirer l’attention de ce même utilisateur.

Comment doit-on déjouer les pièges de l’attention sélective ?

L’attention sélective peut nous jouer des tours dans plusieurs cas.

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

Lors de l’envoi de message d’erreur.

C’est typique des problèmes de conception d’un formulaire. Un utilisateur remplit un formulaire, il le valide. Et rien ne se passe. Du moins en apparence. Car, en vérité, un message d’erreur a été affiché à un endroit où son regard ne portait pas, et il ne l’a pas vu.

Pour éviter ce biais, il est donc indispensable de trouver un moyen d’attirer son regard sur un autre point de l’écran, à l’endroit du message.

Pour des raisons de sélection naturelle, l’être humain repère très bien des changements dans son champ de vision. Cette faculté lui permettait, à une certaine époque, pour des raisons de survie, de repérer une proie dans la savane ou de repérer un danger. Cette capacité doit être exploitée en provoquant un changement dans l’interface qui lui fasse changer son point d’attention.

En général, les designers se contentent d’afficher un nouvel élément (le message d’erreur de notre formulaire), mais cela peut ne pas suffire. En effet, le cerveau est plus ou moins doué et repère plus ou moins bien certains changements.

Un changement de forme ou de couleur, par exemple, est nettement moins bien perçu qu’un mouvement.

C’est pour cela que si vous voulez vraiment attirer l’attention d’un utilisateur sur un endroit de l’écran hors de son point de focal, vous devez utiliser une petite animation. C’est par exemple le cas lorsqu’un utilisateur ajoute un produit au panier. On peut envoyer à son cerveau le fait que son action a bien été prise en compte en agitant légèrement et brièvement le panier.

Dans la vidéo ci-dessous, le panier s’agite légèrement afin, à la fois, de confirmer la bonne prise en compte de l’action de l’utilisateur, mais également d’attirer son regard vers un autre point de focalisation.

[youtube width=800]https://youtu.be/9IYFEdC7ZH4[/youtube]

Pour un formulaire, cet artifice n’est pas le meilleur. La bonne méthode en la matière est de faire scroller l’écran automatiquement à l’endroit de l’erreur et d’y afficher un message (dans une couleur d’alerte) à côté de l’endroit où l’erreur doit être corrigée. Vous utilisez le mouvement et le changement de couleur pour focaliser l’attention et déjouer le problème de l’attention sélective de l’utilisateur.

Retenez également que ces micro-animations sont moins utiles sur smartphone. En effet, un écran plus petit rentre plus largement dans la zone de focalisation de l’attention et nécessite moins d’artifices pour obtenir les mêmes résultats que sur un grand écran plat.

Le cas des bannières invisibles

Lorsque l’on connait le fonctionnement de l’attention sélective, on peut être tenté de la déjouer pour s’en servir à ses propres fins. C’est le cas de la publicité, par exemple. Alors qu’une personne est en train de lire un texte dans une page, vous pouvez être tenté d’attirer son attention avec une bannière publicitaire.

Pour cela, le meilleur moyen est de placer cette bannière sur son parcours oculaire. Dans un article de blog, par exemple, en plein milieu de l’article. Cela revient exactement au même que d’imposer une page de pub au milieu d’un film. Mais dans le digital, les choses se passent un peu plus subtilement qu’à la télévision.

Car, paradoxalement, plus vous tentez d’attirer l’attention par les moyens usuels : clignotement, mouvement, couleurs tranchantes et criardes, visuels sexys, plus vous risquez, au contraire, de détourner le regard. C’est le phénomène depuis longtemps décrit de « banner blindness », d’aveuglement aux bannières.

De la même manière qu’un cerveau ne peut pas voir un élément hors de son champ d’attention sélective, il peut tout aussi bien se rendre aveugle à quelque chose qu’il a pourtant devant les yeux. Le processus ne relève pas du même mécanisme, mais plutôt d’un apprentissage culturel qui fait que les humains apprennent des interfaces. Et apprennent notamment à éliminer de leur champ d’attention tout ce qui a peu de chance de les intéresser. Comme de la publicité, par exemple. Ou plutôt comme quelque chose qui ressemble à de la publicité.

Cela devrait vous faire vraiment réfléchir à la manière dont vous essayez d’attirer l’attention sur quelque chose dans un site.

La capacité du cerveau a détourner votre attention de ce qu’il ne juge pas utile est épatante !

Dans les sites de ecommerce, il n’est pas rare de voir ce que l’on appelle des bannières publicitaires internes, censées vous renvoyer sur une promotion interne du site. Or, ces bannières souvent produisent l’effet inverse que celui désiré. A cause de la capacité du cerveau à trier instantanément ce qui l’intéresse ou ne l’intéresse pas, ces bannières sont automatiquement ignorées si elles ressemblent trop à de la publicité et deviennent, en quelque sorte, invisibles, même si l’utilisateur a le nez dessus.

A contrario, plus une bannière ne ressemble pas à une bannière, plus elle a de chances d’être repérée et d’intéresser l’utilisateur. C’est le principe des publicités Adwords qui se « camouflent » en lien « naturel » pour être cliquées. C’est ce qui a fait et fait encore la fortune de Google.

Autre exemple, sur le site de Skift, un magazine spécialisé dans le marketing du voyage, des bannières d’abonnement à l’email sont systématiquement placées dans les textes des articles de blog. Leur mise en forme sans fioriture, sans animation, sans intention d’attirer l’attention, possèdent, contre toute attente, un fort potentiel d’attention, justement parce qu’elles ne ressemblent pas à des bannières.

Sur les sites d’information, on trouve désormais de manière systématique des publicités « déguisées » en accroche d’article. Leur objectif étant de se faire cliquer, cette approche, comme nous l’avons déjà vu, se révèle efficace. Mais jusqu’à un certain point. Avec le temps, il est toutefois probable que les internautes apprennent à ne plus voir ces publicités. Leur emplacement récurrent, la typologie des accroches textuelles, le petit panneau « publicité » seront autant de signes pour le cerveau pour apprendre à les éviter et à passer dessus le regard sans en prendre conscience.

Conclusion

Comprendre les mécanismes cognitifs du cerveau devrait être la base du métier d’UX Designer. Or, beaucoup ne les connaissent pas. Et pourtant, les maîtriser est fondamental pour créer des interfaces calibrées au millimètre qui répondent à des objectifs parfaitement clairs et permet à un site ou une application de remplir son rôle au sein d’un business model.

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

 ;

Savoir attirer l’attention sur un point particulier de l’interface, éviter d’avoir des éléments fondamentaux rendus invisibles par de mauvais artifices graphiques, sont des techniques qui s’apprennent et s’expérimentent en fonction de chaque cas. Comme le montre l’effet des banner blindness, les apprentissages humains sont permanents et la capacité de ces derniers à repérer et à déjouer les pièges cognitifs que les designers leurs proposent également permanents. En design, s’il existe des règles de bases fondamentales, il faut toujours y ajouter une couche culturelle de comportements qui viennent systématiquement contrebalancer les mécanismes primaires du cerveau humain.

C’est d’ailleurs l’intérêt principal des tests utilisateurs que nous pratiquons sur chaque projet chez Wexperience, que d’arriver à détecter ces mécanismes automatiques qui naissent des pratiques quotidiennes du digital. Ne pas s’appuyer sur ces observations issues du réel finira toujours par vous entraîner vers des erreurs de conception.

Le design de sites webs peut-il prendre en compte des préoccupations écologiques ? Et si oui, pourquoi faudrait-il le faire ?

Je ne sais plus où j’ai lu ça, mais il paraîtrait que lancer une requête Google consommerait autant d’énergie que de presser une orange. Quand on connaît le nombre de requêtes quotidienne sur Google, on se dit que ça fait beaucoup de jus d’orange. Et beaucoup de jus d’orange pour rien quand on connaît le niveau intellectuel général de ces requêtes 🙂

 

 

En fait, cet exemple bien connu n’est que la partie visible de la consommation d’énergie du digital (en 2025, Internet consommerait 20% de l’électricité mondiale). La multiplication des serveurs et des objets connectés depuis 20 ans ne trahissent pas une vérité pourtant évidente : le digital consomme énormément d’énergie et, sans doute, pour la plus grande quantité, pour une utilité fort douteuse (si vous n’êtes pas convaincu par cette idée, consultez un peu le niveau de conversation sur les réseaux sociaux).

 

De fait, les sites webs qui sont créés de nos jours sont de plus en plus énergivores. Quand on regarde le poids des pages des sites des années 90, à celui d’aujourd’hui, il s’est multiplié par plus de 15 fois. La faute au raffinement graphique qui est permis aujourd’hui grâce au CSS, au poids des scripts qui sont attachés aux pages, mais aussi aux médias eux mêmes, la vidéo en particulier, qui en devenant consommés à haute dose encombrent la bande passante du web et génèrent une consommation électrique énorme.

 

 

Mais cela engendre un autre inconvénient : la quantité de données utilisées pour afficher une page web de nos jours finit par impacter négativement la performance de ces pages. Plus une page est lourde et utilise de scripts, plus elle est lente à télécharger et moins bonne est l’expérience utilisateur. J’en avais déjà parlé sur ce blog. Faire la chasse au poids des sites internets devrait être une obsession.

 

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

 

Mais quel rapport avec le design ?

 

Plus un design est simple, plus il améliore l’expérience utilisateur, moins il consomme d’énergie

Le design est totalement lié à ce poids des pages.

 

En somme, plus un design est simple, moins il contient d’animations, d’image hautes déf et nécessite de scripts, plus il est rapide à télécharger et à utiliser. Et, in fine, plus il est écologique. C’est une nouvelle fois la démonstration qu’il faut tendre vers la simplicité (cf notre article comparatif entre Walmart et Amazon).

C’est pourquoi, et même si il ne faut sans doute pas atteindre à un tel extrême, le site Lowtechmagazine.com devrait pouvoir servir d’inspiration à votre design.

 

Ce site est un modèle de déconsommation. Un code HTML simple. Pas de scripts. Pas de requêtes serveurs. Un design sobre et simple. Et, si vous voulez tout savoir, un site « qui s’éteint » quand il n’y a plus assez d’énergie solaire pour alimenter le serveur qui l’héberge (je vous l’avais dit, c’est extrême).

 

 

C’est peut-être trop, mais vous le constaterez par vous même, Lowtechmagazine.com est extrêmement facile à utiliser. L’organisation de la page est réduite à la plus grande simplicité et les temps de téléchargement sont quasiment instantanés. Pareil pour la version mobile.

 

Le premier site écologique au monde. Et sans doute surtout un site comme on en faisait autrefois 🙂 Et il n’empêche qu’avec l’augmentation la bande passante, de la puissance des ordinateurs et des smartphones, il est probable que la plupart des sites actuels sont plus lents que ceux des années 90. Le patron de Snapchat ne s’est-il pas plaint lui même que son app fonctionnait plus vite il y a quelques  années sur son iPhone 4S que aujourd’hui sur son iPhone X dernière génération ? (lire : Snap CEO Sets Goal of Profitability in 2019 ou sur notre blog : Peut-on réussir sans design d’expérience ?)

 

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

Pour moi, le web design, en général, est allé trop loin et à profité des progrès technologiques pour se laisser paresser dans l’outrance en oubliant la performance et l’expérience utilisateur. Et c’est bien pour cela que chez Wexperience, désormais, nous nous attachons à créer des pages dont le design permet un affichage plus rapide. Et, du coup, à créer des sites plus écologiques !!!

 

Il y a toujours une bonne raison à faire toujours plus simple.

 

Via Fastcompany

Photo du jus d’orange par Pâmela Lima sur Unsplash

 

Quand on s’appelle Snapchat, un défaut d’UX coûte cher, très cher

Que montrent les aveux « fuités » du CEO de Snapchat sur le redesign raté de son app en 2018 ?

Comme il le dit lui même, Snapchat n’a pas assez testé, s’est précipité et n’a pas écouté assez ses utilisateurs en mettant sur le marché une nouvelle version . Sachant que pour une société comme Snapchat, c’est la fréquence d’usage qui compte. C’est l’addiction des utilisateurs. Lorsque l’on souhaite qu’ils utilisent 10 à 15 fois par jour une application, celle-ci dépend d’une expérience utilisateur irréprochable. Dans laquelle il ne doit y avoir aucun grain de sable, aucune crispation, aucun frein. Lorsqu’un ado utilise Instagram, il ne doit pas réfléchir. Tout doit lui paraître fluide et instantané. Ses seuls efforts doivent être concentrés sur sa créativité et sa seule récompense doit être le plaisir.

Mais Snapchat s’est plantée et n’a pas tenu compte assez de ceux-ci, résultant en une fuite massive, probablement chez le voisin d’en face… Instagram.

 

Quand les habitudes sont un business model

Cette histoire est inspirante, car elle rappelle à bon escient l’importance de bien comprendre ses utilisateurs et de savoir prendre en compte leurs habitudes.

Comme vous l’aurez peut-être constaté pour vous même, il est extrêmement difficile de changer d’habitudes. Même quand on est jeune.

Les perturber conduit souvent au désastre et j’ai déjà vu des refontes de site qui avaient complètement échoué, car elles avaient fi des habitudes de leurs utilisateurs fidèles.

 

Quand nous attaquons une mission de refonte de site chez Wexperience, nous constatons toujours le même phénomène : avec le temps, nos clients finissent toujours par détester leur site ou leur app. A force de l’améliorer jour après jour. A force d’en parcourir les moindres recoins et d’en connaître tous les défauts, il n’en ont plus qu’une image complètement distordue et négative. D’où le besoin exprimé de refondre. Pas forcément justifié pour les bonnes raisons.

 

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

 

Les tests utilisateurs pour tout comprendre

Pour mieux comprendre ce qui se passe sur un site, en plus des web analytics (dont nous nous occupons aussi via notre agence parisienne, Digitaleez,), nous conduisons un test utilisateur sur l’existant.

Cela permet à nos équipes de prendre contact avec l’expérience vécue par les utilisateurs du site et de mieux connaître la marque. Mais pas seulement.

C’est aussi, tout d’abord, le moyen indispensable pour savoir ce qui ne va VRAIMENT pas sur le site, ce que les utilisateurs ne comprennent pas, n’arrivent pas à faire, ou n’aiment pas. C’est ce qui nous sert d’inspiration pour la suite.

Mais c’est aussi, et c’est important, de savoir ce qui va BIEN. Ce que les gens aiment sur un site. Ce à quoi ils sont habitués et qu’ils n’ont pas envie de voir changer. Ce qui est satisfaisant pour eux.

 

Je me souviens du temps où j’étais un habitué des logiciels Power Point, Word et Excel. A une époque, chaque nouvelle version amenait une nouvelle interface qui me faisait maudire Microsoft. Je ne m’y retrouvais jamais. Et dès que j’ai pu m’échapper leur écosystème, je l’ai fait.

 

En ecommerce, on ne peut pas se permettre de laisser s’échapper ses clients en changeants leurs habitudes. Il n’y a qu’un clic de souris ou un toucher de doigt pour aller chez le concurrent.

Pour ces raisons, il est absolument indispensable de ne jamais se lancer dans une refonte de site ou d’application sans faire de tests utilisateurs. Car c’est le seul moyen pour connaître les VÉRITABLES usages de vos clients et d’éviter de trop s’en éloigner lors d’une refonte. Les webs analytics ne permettent absolument pas d’avoir cette connaissance, contrairement à ce que beaucoup de gens pensent.

Un site n’est JAMAIS  totalement à jeter à la poubelle

Et ce n’est pas parce que vous n’aimez plus votre site que vos clients ne l’aiment plus non plus. Vous seriez même très étonné.

Et pourtant, c’est exactement l’erreur qu’a humblement reconnu le PDG de Snapchat. Cette erreur lui a coûté très cher, parce que tout son business model est basé sur l’expérience utilisateur. Heureusement, ça n’est pas aussi vrai lorsque vous vendez des chemises ou des pantalons. Ceci étant, écouter et respecter ses utilisateurs compte quand même beaucoup et vous ne devez JAMAIS faire l’économie de vous intéresser à eux ans le moindre détail. L’expérience utilisateur aujourd’hui est bien plus que de mettre de l’huile dans les rouages, c’est parfois les rouages eux mêmes ! Et ce ne sont pas des AirBNB, Uber, Amazon ou Apple qui me démentiront !

 

PS : cette semaine, je vous parlerai aussi de l’influence de la marque sur l’expérience utilisateur. Question : la marque compte-elle moins que l’expérience utilisateur ?

 

Photo par Thought Catalog sur Unsplash

Google, dans la future nouvelle mouture de Google Assistant, semble s’orienter vers l’abandon partiel des interfaces de type chatbot. Le constat de l’inconvénient des chatbots, que Google fait, était assez prévisible, au fond. Ils ne permettent que des interactions linéaires simples et ne sont pas du tout adaptés à délivrer des expériences compliquées.

 

Pourquoi alors y a-t-il eu un tel engouement pour ces soi-disant interfaces naturelles ?

 

La première idée, qu’il faut se mettre à l’esprit, est que les chatbots n’ont jamais pu et ne pourront pas être des substituts à des êtres humains qui dialogueraient avec d’autres être humains en langage « naturel ». Aujourd’hui, c’est flagrant avec les enceintes intelligentes, il apparait clairement qu’aucune IA (technologie largement utilisée par les enceintes et les chatbots) n’est capable de tenir une conversation. Au mieux, ne parviennent-elles qu’à interpréter des ordres simples et les exécuter. Dès qu’une action devient complexe et contient plusieurs informations, l’IA est perdue.

 

Et les chatbots ne font pas mieux que les enceintes.

La plupart des chatbots ne sont que des mascarades de formulaire

C’est d’ailleurs pour cela que la plupart d’entre eux ne sont, en réalité, que des formulaires déguisés en forme de dialogue. Quand la place est laissée à l’utilisateur pour s’exprimer et entrer des mots au lieu de pousser sur des boutons, c’est pour recevoir une information bien cadrée. Si elle sort du cadre, le chatbot est perdu. En résulte une avalanche de dialogues absurdes et la sensation indue d’une technologie non aboutie.

 

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

Alors si les chatbots ne sont que des formulaires déguisés, pourquoi avoir adopté cette forme d’interaction ?

L’argument principal des défenseurs des chatbots est que le dialogue permet d’engager plus facilement l’utilisateur. Ce premier argument est vrai. Il y a quelque chose de fun à dialoguer avec une machine. Et le petit côté quizz interactif des chats augmente cette sensation.

 

Le deuxième argument, c’est que les chatbots dédramatisent les formulaires, justement. Il est plus facile d’engager quelqu’un en lui posant des questions de manière amusante qu’en lui montrant une pleine page de formulaire. Pour des populations cibles jeunes, l’argument est imparable.

 

Enfin, troisième point : les chatbots s’adapteraient à un mode de communication privilégié des internautes.

C’est vrai aussi. Nous passons notre temps à dialoguer en ligne. Pourquoi alors, ne pas s’adapter à cet usage et proposer des interfaces ou le dialogue est roi ?

 

D’où l’engouement de beaucoup pour les chatbots. Avec la promesse d’interactions améliorées grâce à l’IA, leur réputation était faite.

 

Mais aujourd’hui, comme les responsables de l’UX de Google l’avouent eux mêmes, les chatbots pâtissent en réalité de sérieuses limitations qui les rendent, dans une certaine mesure, caduques.

 

Dans la nouvelle version de Google Assistant, en plus des bulles de dialogue, vont apparaîtrent des « cartes » d’information. Sous-entendu des bon vieux gros morceaux d’interfaces qui auront la capacité de se mettre à jour, exactement comme de véritables interfaces de sites webs ou d’apps. Ces morceaux resteront affichés à l’écran et l’espace réservé au dialogue avec le chatbot sera diminué.

 

Pire encore ou mieux encore, cela dépend du point de vue qu’on adopte, en cas de nécessité, Google Assitant transmettra le dialogue à d’autres applications Google. Exemple : vous recherchez un trajet sur une carte ? Google Assistant vous renverra sur Google Maps plutôt que d’afficher une bulle de dialogue. De fait, c’est la renaissance du concept de multiples apps, une app par besoin, plutôt que d’une application qui fait tout (comme c’est la volonté affichée de Google Assistant). Pour quelle raison ? Parce que les besoins spécifiques de chaque app ne peuvent pas, de manière générale, être retranscrits en dialogue sous forme de bulles.

 

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

Mieux encore, cette nouvelle orientation est la démonstration que le dialogue seul ne peut se substituer à toutes les interactions et que les enceintes intelligentes auront toujours besoin de montrer des images et des « morceaux d’interfaces » pour fournir un service complet à l’utilisateur. Ce retour en arrière de Google démontre que nous ne sommes pas débarrassés des écrans et des interfaces visuelles, tactiles ou pilotées à la souris. L’avenir montre, au contraire, que la multiplication des manières d’interagir avec le digital est en cours et que celle-ci vont devoir se combiner les unes avec les autres, et que les cas où le vocal, le visuel, ou le tactile, s’utiliseront seuls seront des exceptions et non pas la norme.

 

Dans votre réflexion pour fournir des services digitaux à vos utilisateurs, vous devez intégrer cette donnée et ne jamais vous laisser séduire par la promesse de soi-disant révolution technologique. Le vocal ne remplacera pas le visuel. Les chatbots ne remplaceront pas les tableurs Excel 🙂 Vous devez, au contraire, savoir combiner les moyens d’accès à votre offre digitale en fonction des contextes et des utilisateurs. A la différence des années 2000, les entreprises modernes du digital doivent être capables de proposer ce polymorphisme et savoir répondre à toutes les formes de demandes.

 

Cela a un coût bien plus élevé que de devoir faire un simple site web. Et cela nécessite une organisation qui soit capable de piloter et visualiser un ensemble de dispositifs interconnectés entre eux.

A l’heure actuelle, à part Google, je ne connais aucune société ayant réussi à atteindre un tel niveau d’intégration.

 

Via Fastcompany

 

Photo par Priscilla Du Preez sur Unsplash

 

Comment la personnalisation devrait s’intéresser plus au service client qu’au prix ?

Tous les matins, j’avale un croissant pour le petit déjeuner.

Je ne l’achète pas systématiquement dans la même boulangerie. Ca dépend un peu de l’heure ou de l’endroit où je vais. Cette variabilité dans mon comportement me permet de voir que tous les boulangers servent un peu de la même manière les croissants. Systématiquement, ils le prennent avec des pincettes, le glissent dans un sachet, y ajoutent une serviette en papier (dans le sachet ou à l’extérieur) et encaissent.

Quant à moi, je m’empresse de sortir le croissant du sachet et à l’avaler. Le sachet et les serviettes filant directement à la poubelle, de manière fort peu civique, je l’avoue.

Mais un jour, j’ai été surpris. Mon « super » boulanger de la rue de l’Alma à Roubaix, où se trouvent les bureaux de Wexperience, qui me donnait aussi toujours un sachet, a fini par remarquer avec finesse que je mangeais mon croissant tout de suite après qu’il me l’ait donné. Pas idiot, il s’est dit que je préférais peut-être avoir mon croissant sans sachet ni serviette. Et comme je lui ait dit oui, désormais, il est le seul à me proposer ce « service personnalisé » et à me donner mon croissant, dans la main, prêt à être englouti tout de suite.

La personnalisation devrait être aussi simple que le sourire que vous adresse un commerçant quand il vous reconnait

C’est exactement ce que devrait être la personnalisation sur un site marchand !

Observer un comportement, puis y apporter une réponse précise qui rend plus agréable la vie de l’internaute.

Il ne s’agit pas, comme vous l’avez vu, de vendre plus. Il s’agit de rendre plus heureux.

Deux bénéfices ressortent de l’action de mon boulanger.

1. Le fait qu’il m’ait reconnu accroît mon estime personnelle et ma confiance en lui. Il me connaît et je le connais. Nous nous rapprochons et améliorons notre relation. Et je pense qu’un site web ou une application peuvent tout à fait simuler ce genre de rapprochement. Le bénéfice pour lui en est évident.
2. Il a su percer à jour mon attention pour l’environnement en comprenant qu’en ne me donnant plus de sachet, il répondait à mon besoin de ne pas utiliser inutilement de matière première. Là aussi, le bénéfice est évident pour lui, car il me montre par son action que nous partageons des valeurs communes. Rapprochement, encore.

Ce qu’a fait mon boulanger n’a rien d’extraordinaire et on pourrait trouver des milliers d’exemples similaires dans le commerce de proximité. Et tous, en tant que client, apprécions ces gestes de nos commerçants.

Alors comment se fait-il que nous ne les retrouvions jamais sur les sites webs ou les applications ? Comment se fait-il que la personnalisation soit toujours orientée sur les prix et sur l’augmentation du panier moyen, et rarement (mais vous me démentirez peut-être) sur le service client ?

Je suis persuadé que c’est une piste intéressante de travail pour améliorer la conversion.

Et si il était impossible de personnaliser une interface il y a quelques années, il existe désormais des solutions techniques qui permettent d’augmenter la valeur émotionnelle d’une interface en la personnalisant, justement, en apprenant à connaître l’internaute et en se basant sur son comportement habituel.

Dans une ère où tout le monde cherche à gagner des précieux points sur ses concurrents, voilà sans doute une vraie piste d’exploration.

Photo par matthew Feeney sur Unsplash

Le temps des apps est terminé. Vive les Progressive Web App (PWA) !

Dans cet article, vous découvrirez pourquoi il n’est plus nécessaire de développer une app mobile pour vos clients grâce aux Progressive Web App, un nouveau standard qui mêle site web et app, permet de réduire les coûts de maintenance et augmente vos performances.

Les apps, en 2018, comptaient encore pour 80% de l’usage d’Internet sur mobile. Toutefois, ce chiffre est à prendre avec des pincettes, quand on sait qu’en moyenne, en France, chaque utilisateur, n’utilise que 9 apps sur son smartphone quotidiennement, et essentiellement des apps de réseaux sociaux, de messagerie, et, en fait, leur navigateur.

A l’origine, il y a l’iPhone et l’appstore. Dès le début, l’engouement des entreprises a été immense pour ces petites applications, les apps, qui, au fil du temps, se sont démultipliées et ont envahi nos téléphones.

Inconvénients des apps

Pourtant après plus de 10 ans de bons et loyaux services, il semblerait bien que le temps des apps soit terminé, du moins en partie.

Très rapidement, les inconvénients des apps sont apparues.

• Non compatibillité des plateformes et, in fine, besoin de développer deux versions d’une même application (une pour iOS, une pour Android)
• Coûts de développements  et de maintenance plus élevés que pour un site web classique
• Visibilité sur l’appstore de plus en plus difficile
• Hormis dans certains cas, manque flagrant d’adhésion des utilisateurs pour de nombreuses apps. En moyenne, seulement 9 apps par utilisateur sont utilisés quotidiennement.

• 

Et ce ne sont que quelques points, on pourrait en trouver d’autres.

Il y a 3 ans, Google, a décidé de faire évoluer le concept d’app en créant les Progressive Web Apps (PWA).

Il s’agit, techniquement parlant, d’une solution intermédiaire entre les apps et les sites webs mobiles en HTML.

Qu’est-ce qu’une PWA ?

Une PWA, c’est un peu le meilleur des deux mondes : celui des apps et des sites webs.

D’un côté, la PWA permet d’accéder à des fonctionnalités réservées aux apps, de l’autre, la PWA est un site web avec tous ses avantages :

• Accès immédiat, puisque pas besoin de télécharger l’intégralité de l’app
• Compatibilité universelle avec toutes les plateformes et tous les navigateurs
• Développement en HTML =  réduction drastiques des coûts de maintenance et de développement
• Technique de référencement naturel (SEO) classique
• Responsive (adaptabilité à tous les types d’écrans, du smartphone à l’ordinateur)

En plus de cela, du fait de ses caractéristiques d’app, la PWA bénéficie d’autres avantages :

• Possibilité de consultation hors ligne
• Intégration du système de notifications tout comme une vraie app
• Ergonomie améliorée, plus interactive, plus proche des capacités des vraies apps
• Possibilité d’afficher la PWA sur l’écran du smartphone comme une app
• Temps de chargement réduits :. d’après les statistiques de Google, une PWA mettrait en moyenne trois fois moins de temps à charger qu’un site web normal.

Est-ce compatible avec iOS ?

Comme souvent dans le monde digital, les plateformes n’adoptent pas toutes à la même vitesse les standards (surtout quand c’est un acteur privé qui les définit). Apple ne l’avait donc pas adopté dans un premier temps, ce qui freinait un peu lors adoption, mais ça n’est désormais plus vrai. Et à part quelques détails techniques, un navigateur sous iOS (système d’exploitation des téléphones Apple) interprétera de la même façon une PWA que sous Android (système d’exploitation de Google, qui représente plus de 90% du parc des téléphones en France).

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

Une PWA : encore un développement en plus ?

Pas du tout  ! La bonne nouvelle, c’est que la PWA va être une continuation de votre site web actuel. Une continuation améliorée qui devra répondre à des nouveaux standards en terme de code. Autrement dit, développer une PWA ne reviendra pas à redévelopper entièrement votre site web actuel, mais simplement à l’améliorer et à l’adapter pour être conforme à un nouveau standard.

Pourquoi vous faudrait-il une PWA ?

Cela peut paraître une question technique, mais pas du tout. La PWA est une question économique et stratégique.

Réduction des coûts

Son avantage le plus intéressant est que, pour une bonne partie des entreprises, elle va permettre de ne pas avoir à faire d’application (app) ou même de s’en débarrasser. Les coûts de communication digitales vont donc se réduire et se reporter sur les coûts de maintenance et d’évolution du site web.

• Augmentation des performances business

• Etant donné que les apps nécessitent soit une communication particulière, soit un référencement dans les app stores, soit un passage par le site web, il est clair que toutes ces étapes vont être éliminées, puisque l’accès à vos services ou à vos produits se feront de manière centralisé par le site web et en accès direct via une url unique, pivot de votre communication. Nous avons listé quelques use cases d’amélioration de la performance ci-dessous.

En réalité, dans la plupart des cas, la PWA peut aisément remplacer une app. Nous avons d’ailleurs fait un tableau du marché pour mieux vous aider à vous rendre compte de l’utilité ou inutilité des apps.

Cas utilisateurs

Il est dur de se convaincre de passer à une nouvelle technologie. Dans ce cas, rien de mieux que quelques exemples pour bien en discerner les contours. Google, inventeur et chantre des PWA, nous donner sur son blog spécifiques quelques cas utilisateurs intéressants.

George.com : augmentation de 31% du taux de conversion

George.com est une marque de mode au Royaume Uni. Insatisfait de son taux de conversion sur mobile, la marque a commencé à songer à refondre son site. En intégrant dans sa démarche de conception la dimension technique des  PWA, elle a entamé une démarche de refonte de site agile, mêlant réflexion UX et technologie pour aboutir à un nouveau site mobile entièrement PWA.

Les résultats d’après Google sont éloquents :

• Temps de téléchargements divisés par 3,8
• Diminution de 50% du taux de rebond
• 20% de pages vues en plus par visiteur
• Augmentation de 31% du taux de conversion

Cdiscount : augmentation de 50% de la part des ventes sur mobile

Accompagnée de Google, Cdiscount a singulièrement réussi à adapter ses performances mobiles. Après un audit et des recommandations d’optimisation ergonomiques, le ecommerçant bordelais a ensuite modifié le code de son site mobile pour atteindre le standard PWA. Comme on peut le découvrir, de nombreuses procédures d’organisation de projet ont également contribué à améliorer les performances du site.

Les résultats ont également été probants, bien que moins spectaculaires (normal pour un site déjà très avancé et à très fort trafic) :

• Diminution de 10% du taux de rebond
• Accès à la 2ème place du classement des sites les plus rapides en France
• Temps de chargement divisés par 2

Aliexpress : +104% de taux de transfo !!!

Aliexpress, qui est en train de devenir un des leaders du ecommerce en Europe, est aussi passée au PWA. Et les résultats sont étonnants, comme nous l’apprend le blog litefy.com. Une des raisons pour passer au PWA était « de pouvoir investir dans une expérience web sur tous les navigateurs webs, Un investissement important, mais qui paiera malgré les évolutions des navigateurs webs » d’après Lijun Chen, le directeur de l’équipe mobile d’Aliexpress.

Le taux de conversion sur les nouveaux visiteurs a augmenté de 104%.

Mais les PWA ne sont pas destinées qu’au ecommerce, loin de là :

Google cite plusieurs autres cas, comme :

• Voot.com : une plateforme de vidéos qui a réduit le taux de chargement de ses pages de 80%
• Dans l’immobilier, Google s’est également chargé de conduire la transformation de Housing.com vers les PWA avec des résultats très probants

Faut-il pour autant tirer sur les apps et les abandonner totalement ?

Pas du tout, mais une analyse fine vous permettra de prendre une bonne décision à ce sujet :

1. Votre app utilise-t-elle des fonctionnalités natives aux smartphones qu’on ne peut pas avoir sur un site web ? Si oui, la réponse est toute cuite. Vous devrez garder votre app.
2. Votre app permet-elle d’apporter un véritable plus en terme d’expérience utilisateur ? Il est plus dur de répondre à cette question et un test utilisateur pourra y apporter un éclairage. En complément à cette question, il faut également se poser celle de la fréquence d’usage. Les apps, on le sait, trouve leur sens dans un usage intensif et, pour cette raison, tirent parti des possibilités qu’elles offrent en terme d’ergonomie pour optimiser l’efficience des utilisateurs. Si vous êtes dans ce cas, l’app garde encore tout son sens

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

Comment passer aux PWA ?

Wexperience peut vous accompagner sur le sujet des PWA en mettant en place une démarche projet bien établie qui comprend :

• Un audit de l’existant via des tests utilisateurs, mais également en mesurant les principaux kpi de votre site via les web analytics (pour mesurer l’avant et l’après, mais aussi installer de véritables tableaux de bords de visualisation de l’UX en matière de vitesse de téléchargement, de pages vues, etc.)
• Un travail de conception ergonomique consistant à améliorer la clarté, la légèreté des pages webs
• Un travail de développement consistant à coder les nouvelles pages selon les normes des PWA

Pour en parler, consultez-nous ou contactez directement Cyrille Pattyn : cyrille@wexperience.fr

Plus sur le web :

• L’avis technique de Guillaume, notre CTO, sur les PWA : Progressive Web App / Support et compatibilité du Web App Manifest
• De nombreux exemples de refonte en PWA par Google : https://developers.google.com/web/showcase/
• Le cas Cdiscount en détail : Cdiscount optimise son UX mobile et et de de 50% la part de ses ventes sur mobile.
• Le cas Ali Express en détail : Alibaba et Ali Express upgrade into a PWA.
• Un article de Google sur les PWA : Pourquoi les Progressive Web App sont faites pour vous.
• Tout sur les PWA pour iOS : Progressive Web App on iOS are here.

Photo by rawpixel on Unsplash

Un bon UX design doit toujours aller plus loin que le simple « C’est bien »

Je trouve qu’en UX, on se contente trop souvent d’appliquer des bonnes règles, des bonnes méthodes, et qu’on s’estime trop souvent heureux lorsque l’expérience utilisateur est fluide et que les choses se passent sans trop d’anicroches.

Mais pour moi, un bon UX design doit aller plus loin que cela et doit arriver à aboutir le plus possible à transcender l’expérience client en réinventant les concepts auxquels nous sommes habitués. Cela veut dire : fournir la même fonction, la même utilité, mais en transformant la façon de le faire par l’utilisateur, de manière à provoquer chez lui la surprise, enchantement et le ravissement. Et que ces trois émotions lui donnent envie de revenir à votre site web, de réutiliser encore une fois votre app. Bref, qu’il tombe amoureux de votre produit 🙂

Cela n’est pas simple, je vous l’accorde. Et atteindre ce nirvana demande nécessairement de déployer une énergie qui nous est rarement accordée. Pourtant, travailler à cette réinvention permanente de l’expérience client (ou utilisateur) sera ce qui vous permettra de toujours proposer une expérience meilleure que celle de vos concurrents.

Exemple.

Réinvention de la calculatrice

https://imgur.com/QrG8v8g

On ne peut pas dire que les interfaces de calculatrice aient beaucoup évolué au fil du temps. Un clavier de calculatrice de 1968 ressemble exactement à un clavier de calculatrice de 2018. Et ce n’est pas la digitalisation des écrans qui y a changé grand chose. Prenez votre smartphone, lancez la calculatrice, et vous découvrirez ni plus ni moins que le bon vieux clavier que vous avez sûrement découvert pendant votre scolarité.

Alors si on vous demandait aujourd’hui de réinventer le clavier de la calculatrice, comment vous y prendriez-vous ? Et pensez-vous que vous pourriez y arriver ? La plupart des gens vous répondraient : pourquoi s’embêter ? Il n’y a rien de nouveau à faire dans le domaine du calcul et ça n’aurait aucun intérêt : une calculatrice sera toujours une calculatrice.

Eh bien, détrompez-vous !

En 2014, Microblink, une société croate, lançait Photomath, une application qui pourrait bien « révolutionner » la manière de faire des maths, dirait Steve Jobs s’il était encore parmi nous. « Révolutionnaire », peut-être pas, mais bluffante, oui. Dans Photomath, il n’y a plus de clavier. Le clavier, c’est l’appareil photo. Vous scannez une formule sur un bout de papier et Photomath vous la résout presque instantanément ! Ça a un côté presque magique vraiment et c’est très amusant.

Que se passe-t-il lorsque vous utilisez Photomath ?

Vous continuez à faire du calcul, mais la façon de le faire change entièrement.

Vous n’utilisez plus le clavier (même si vous pouvez et devez parfois encore le faire). Vous vous concentrez sur votre feuille de papier, vous la grattez avec frénésie en tentant de résoudre un problème. Et quand vous avez besoin de faire un calcul, vous sortez votre app, et sans avoir rien à taper au clavier, celle-ci vous sort un résultat.

Même résultat qu’avec une calculatrice, mais expérience différente. Et expérience innovante !

Je ne sais pas si Photomath est un hit, mais ce que je sais, c’est qu’elle montre parfaitement qu’on peut toujours « disrupter » les choses (même si j’ai horreur d’utiliser ce mot là, tant on en abuse). Et cette possibilité de « disrupter » existe toujours et dans tous les cas. Que vous fassiez un site de ecommerce, une app d’informations, il existe toujours une possibilité de faire mieux et de nouveau que ce qui existe. Et de faire quelque chose qui surprenne vos utilisateurs.

Rappelez-vous de cette phrase de Rebecca Sinclair, l’ex Directrice UX de AirBNB : « Vous devez savoir avoir le courage de créer quelque chose de mieux que ce que le client aurait imaginé lui même« .

Le « courage ». Retenez bien ce mot, car c’est celui dont vous aurez souvent le plus besoin lorsque vous devrez convaincre votre client de « changer les choses », d’inventer quelque chose de différent. Bref, de faire du nouveau. Car souvent la nouveauté fait peur et implique de prendre des risques. Et peu de gens aiment prendre des risques.

Il est toujours possible de « réinventer la roue »

Photomath nous montre qu’il est toujours possible de « réinventer la roue ». Cette possibilité n’est pas toujours présente. Elle n’est pas toujours spectaculaire. Elle peut souvent ne concerner qu’une toute partie de l’expérience utilisateur/client que vous offrez. Mais elle existe toujours. Et il faut que vous sachiez la découvrir et mettre en oeuvre les moyens de la découvrir. Le Design Thinking et la conception centrée utilisateur n’ont pas été inventés pour rien.

Innover ne veut jamais dire « écouter son imagination ». Innover veut dire : savoir observer, connaître la technologie, faire collaborer les cerveaux autour de vous, co-concevoir avec vos clients, tester et tester encore. Et alors, souvent, apparaitra la lumière. Celle qui fera surgir des solutions innovantes, nouvelles, transcendantes qui feront que l’expérience utilisateur sur votre site ou votre app sera « inoubliable », « mémorable », et que vous pourrez tirer les bénéfices qui découlent de ces deux mots, comme une pluie d’or sur votre chiffre d’affaire 😉

Excellente journée !

Pourquoi les horodateurs de la ville de Brive se moquent de l’ergonomie et pourquoi vous ne pouvez pas faire la même chose avec votre site web

 

Quand je vois l’interface de cet horodateur, croisé pendant mes vacances du côté de Brive la Gaillarde, en Corrèze, je me demande bien comment les ingénieurs qui l’ont conçu, ont pensé à son design. Et j’imagine bien les réunions qui ont donné lieu à ce cauchemar ergonomique :

 

« Et le clavier, on le met où le clavier ?

– Ben, là, en bas, y reste de la place.

– Mais ça rentre pas.

– Pas grave, tu changes la forme et ça rentrera.

– Ok. Et les boutons ? On met pas de libellés ?

– Non, on les mets sur l’écran, comme ça on peut écrire en plusieurs langues.

– Ah super, mais c’est pas très intuitif du coup.

– Mais si, il suffit de le savoir.

– Ah ouais, t’as raison.

– Par contre, on est obligé de mettre autant de textes sur un petit écran ?

– Ah, je sais pas, moi, c’est le cahier des charges !

– Ok ! »

 

Un cas d’école pour les ergonomes

Si l’on voulait montrer tout ce qu’il ne faut pas faire en ergonomie, cet horodateur constituerait un très bon cas d’école. Prix cachés, instructions incompréhensibles, guidage nul, clavier non conventionnel : la liste des erreurs perpétrées bat des records. Et pourtant, nul doute que la ville de Brive, qui tire des revenus de ces affreuses machines, n’en soit pleinement satisfaite. Ce qui n’est pas surprenant. Lorsque vous voulez garer votre voiture et rester dans le droit chemin, payer 1€ pour 1h de stationnement vaut bien un effort. Un effort qui n’est rien comparé à la somme dont vous devriez vous acquitter si vous vous retrouviez en flagrant délit de non paiement pour stationnement. Et tant pis si vous devez passer deux ou trois minutes pour y arriver.

Ce raisonnement , ce calcul, c’est amusant, c’est exactement le même que celui que vous faites lorsque vous décidez d’acheter quelque chose en ligne. Plus votre désir (ou votre obligation) est grand, plus vous êtes prêt à franchir les obstacles pour l’assouvir. Si vous voulez acheter le dernier iPhone X, rien ne vous arrêtera ! Pas même le tunnel de commande sans fin de Apple.com

Dans les deux cas, vous répondez à une injonction, une injonction si forte que vous êtes prêt à tout faire pour y répondre.

Nous sommes la proie de nos désirs

La différence est que, sur un site de ecommerce, votre injonction n’est pas de risquer de prendre une amende. En revanche, il est, dans ce cas, celui de ne pas pouvoir assouvir votre sacro-saint Désir consumériste ! Ce dernier téléphone à la mode. Ce voyage. Cette jupe. Tous ces objets que les fabricants font reluire dans les vitrines des magasins et des sites webs provoquent en vous un besoin irrésistible : celui de posséder, comme dans la vidéo de la célèbre série IT Crowd, ci dessous.

 

 

Et lorsque l’objet de vos désirs vous aura mis le grappin dessus, le seul obstacle qu’il y aura entre vous et lui, hormis le contenu de votre porte-monnaie, sera l’effort que vous serez prêt à accomplir pour le posséder. A ce sujet, vous noterez qu’on peut prendre le désir dans les deux sens : il peut être une attirance. Mais il peut aussi être une crainte : ne pas voir à temps le dernier film à la mode, rater une super promo, ne pas assister au concert de [mettez le nom de votre idole préférée].

 

C’est le principe même du marketing que de créer ce désir. Et, par conséquence, c’est rôle de l’ergonome (ou de l’UX designer), de permettre de l’assouvir le plus rapidement possible.

 

Il est possible de se passer d’ergonomie, mais…

Et pourtant, on le voit bien, il est possible de se passer d’ergonomie pour faire « cracher les gens au bassinet ». Ce n’est pas la ville de Brive qui me démentira. Mais alors pourquoi tant de sociétés continuent quand même à investir des millions dans l’UX et l’ergonomie ?

 

Parce qu’un site web n’est pas un pré carré. Un acheteur aura toujours le choix d’aller voir ailleurs, sans aucun effort supplémentaire. Et non seulement, il risque de trouver moins cher, mais en plus, si c’est plus facile à faire, alors il le fera chez votre concurrent.

 

Ça vous dit quelque chose ?

 

Eh oui, c’est exactement sur ce principe que fonctionne Amazon. Meme si les offres n’y sont pas toujours les meilleures, c’est pourtant chez le géant américain que finissent une bonne part des achats en ligne en France.

Et l’ergonomie joue une grand rôle là dedans. On ne le répétera jamais assez : l’expérience utilisateur/client est une obsession chez Amazon. Et des années d’investissements dans ce domaine depuis sa création ont fait de ses sites et de ses apps de redoutables machines à cash. Demandez à votre entourage pourquoi ils achètent chez Amazon. La réponse, la plupart du temps, sera : « Parce que c’est pratique. »

L’UX/l’ergonomie n’est pas un investissement d’un jour

Alors, évidemment, il n’est pas question de vouloir concurrencer Amazon. Vous ne disposez certainement pas de ses moyens, ni de ses budgets, et vous n’avez certainement ni les ressources humaines, ni le temps, pour arriver au même niveau d’expérience utilisateur. Mais, en revanche, vous pourrez toujours faire mieux que vos concurrents qui ne s’intéressent pas à l’UX/l’ergonomie et qui pensent, comme les designers des horodateurs de la ville de Brive, qu’on n’a pas besoin de s’en occuper, puisqu’il y aura toujours des clients qui seront prêts à faire des efforts pour payer.!

 

C’est fou ce qu’un horodateur peut être inspirant, non ?

 

Attendez, ne partez pas !

Et à propos d’Amazon, n’oubliez pas de venir me rejoindre le 26 septembre à Lille pour une présentation gratuite et exclusive de la première étude UX sur les assistants vocaux commercialisés en masse désormais en France : Amazon Echo et Google Home. Vous serez surpris ! Inscription ici !!!

 

PS : Et pour ceux que ça intéresse, la photo de fond de l’article est une vue de la Vallée de la Dordogne, près de Brive 🙂

Cet article vous donne de nombreux conseils pour améliorer la vitesse réelle et perçue d’un site mobile.

Comment optimiser la perception de la vitesse d’un site web mobile

D’après Google, la perception de la vitesse de chargement d’une page, de son affichage, de la vitesse de réaction d’une interface et de sa fluidité font partie du critère le plus important de l’expérience utilisateur.

Qu’elle soit bonne ou mauvaise, dans tous les cas, elle a un impact significatif sur l’engagement des utilisateurs et sur leur satisfaction. Meilleure est cette perception, meilleure sont les performances du site.

Dans cet article, écrit d’après une étude très complète de Awwwards.com et Google à télécharger gratuitement , nous allons voir :

1. comment les humains perçoivent la vitesse quand ils surfent sur un site web mobile
2. comment optimiser la perception de vitesse et de fluidité d’un site web mobile

La perception de la vitesse dépend de plusieurs facteurs extérieurs

Assez curieusement, la perception de la vitesse de l’application peut être perçue différemment selon les situations. Certaines personnes vont avoir l’impression que le site est plus long qu’il ne l’est réellement. Pour d’autres, ça sera l’inverse.

L’étude de Google et Awwwards dénombre 4 facteurs extérieurs affectant la perception de la vitesse :

• L’état émotionnel
• L’âge
• Le lieu d’utilisation
• Et, ce qui est appelé dans l’étude, l’Effective Use, c’est à dire le moment où un site semble effectivement utilisable

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

D’un point de vue factuel, il apparait tout de même que la plupart des humains réagissent de la même manière à la vitesse et à la réactivité d’une interface. Plus ces temps sont longs, plus les chances d’abandon sont grandes. Le plus simple est de retenir ce chiffre : 53% des utilisateurs abandonnent un site si les temps de téléchargement ou de réaction excèdent 3s.

Google a pu déterminer une corrélation directe entre la perception de la vitesse et certains indicateurs très intéressants :

• Meilleure est la perception de la vitesse, plus grande sera la propension d’un utilisateur à retourner sur un site
• Meilleure est-elle, plus grande sera la satisfaction (d’après une autre étude , l’UX contribue à 31% au Net Promoter Score)

11 conseils pour optimiser la vitesse de votre site

N°1 : Affichez d’abord le contenu au dessus de la ligne de flottaison

C’est une pratique très courante sur les sites de ecommerce. Une étude de Norman Nielsen Group a récemment montré que 74% passée du temps sur une page l’était sur les les deux premières hauteurs d’écran. Optimisez le code d’une page de manière à afficher en priorité ce qui se trouvera tout de suite visible à l’écran. Travailler sur cette optimisation demande beaucoup de connaissances techniques et de réglages fins du code et si, nous pourrions en dérouler le détail ici, nous préférons vous orienter, avant d’aller plus loin dans cet article, vers cet excellent document de travail : Time to First Meaningful Paint, à consulter gratuitement.

N°2 : Activez plus rapidement le « tap »

Toujours dans l’optique de parer à l’impatience de l’utilisateur, une autre technique consiste à pouvoir activer plus rapidement le « tap ». Par défaut, il existe un délai d’environ 350ms qui suit toujours un « tap » (un toucher de l’écran du bout du doigt). Ce délai existe pour que l’écran puisse éventuellement recevoir un « double-tap », mais cette fonction n’étant pas systématiquement nécessaire, il est dès lors possible de la retirer parfois.

Cela peut se réaliser très simplement en modifiant  le code de la page.

Ainsi, en ajoutant dans l’entête de page, la balise :

<meta name=’ »viewport » content= »width=device-width »>

Vous parviendrez au résultat attendu. Ce code n’est pas le même pour tous les navigateurs. Renseignez-vous !

N°3 : Rendez l’utilisateur actif

Google a séparé les utilisateurs en 2 types : les passifs et les actifs. Il est primordial de faire passer les « passifs » en  « actifs », les premiers ayant tendance à sous-estimer la vitesse et la réactivité de l’interface de 36% par rapport à ce qu’elle est réellement. L’état passif se déclenche lors de temps d’attente prolongés, qu’il est possible d’estomper selon Google. Plusieurs techniques existent pour lutter contre cet effet :

Affichez un petit jeu vidéo ou une petite animation interactive pendant un temps de traitement long est un bon moyen de garder l’utilisateur actif. Exemple : ce palmier que vous pouvez secouer avec votre souris sur un site évènementiel (désolé, on n’a pas trouvé d’exemple sur mobile, mais vous saisissez l’idée).

Animez vos feedbacks : les feedbacks sont des signaux émis par le système pour montrer qu’il a bien réagi à votre demande. Souvent, ces feedbacks n’apparaissent pas assez rapidement et laissent l’utilisateur s’impatienter. Il est pourtant simple grâce au css et au js de créer des mini-animations qui transformeront les feedbacks en moment de plaisir visuel et réactiveront votre utilisateur.

Utilisez la bonne barre de téléchargement : pour les temps de téléchargement les plus courts, utilisez les spinners (vous savez, ces petites animations tournoyantes). Elles ne sont pas indispensables, mais permettent une continuité de l’expérience utilisateur. Dans le cas de temps de téléchargement plus long, utilisez alors une barre de téléchargement.

N°4 : Utilisez les techniques de démarrage préemptives

Ces techniques de démarrage consistent à démarrer une tâche avant même que l’utilisateur ne la démarre. En voici quelques exemples.

Téléchargez de assets sur la page de login. La page de login demandant toujours un peu de temps à l’utilisateur pour parvenir à son but, il est très facile d’en profiter pour commencer à télécharger des éléments de l’écran suivant pour gagner du temps.

Téléchargez des contenus sur des états précédents. Lors de tâche ou de processus longs, vous pouvez anticiper le téléchargement d’éléments suivants en sachant que l’utilisateur passera forcément dessus. Cette technique s’applique très bien à des formulaires. Un formulaire à plusieurs pages pourra être chargé pendant que l’utilisateur remplit les champs.

N°5 : Anticipez la complétion d’une page avec des images progressives

Une autre technique pour donner l’impression de fluidité à l’utilisateur est de commencer à montrer des éléments d’interface avant qu’ils ne soient totalement chargés. C’est une vieille technique du web qui est revenue à la mode avec l’arrivée du mobile.

Des images progressives sont des images compressées avec un algorithme (comme le jpg) qui charge l’image en strates successives. Oui, oui, vous savez, ce sont ces images affreusement pixellisées qui s’affinent au fur et à mesure du temps (et qui ont donné lieu à pas mal de blagues).

N°6 : Utilisez le design optimiste

Le design optimiste est une technique de design un tantinet audacieuse qui consiste à présenter une tâche non terminée comme terminée ! Oui, tout à fait ! L’avantage est qu’elle donne l’impression à l’utilisateur que la tâche a été exécutée avec succès immédiatement, alors, qu’en réalité, elle est reportée à plus tard. Evidemment, il ne faut pas que le système plante !

C’est exactement ce que fait Twitter, par exemple. Lorsque vous likez un tweet, cette action n’est pas stockée directement en base de donnée, mais seulement quelques instants plus tard. Cela permet de ne pas ralentir le « flow » utilisateur tout en prenant en compte une action qui requiert du temps de requête.

Mais mieux qu’un « like », un téléchargement « optimiste » est une action encore plus belle 🙂 Plutôt que de faire attendre un utilisateur le téléchargement d’un fichier (en mode ascendant), faites-lui croire que le fichier a été presqu’immédiatement téléchargé et laissez le continuer  à faire ce qu’il a à faire ensuite. Cette technique peut être réalisée grâce aux Web Workers qui sont des script javascript qui exécutent des scripts en tâche de fond dans une page HTML.

Evidemment, cela suppose que l’utilisateur ne quitte pas trop vite la page et qu’il soit informé comme il se doit en cas d’échec du téléchargement.

N°7 : Créez des animations fluides et optimisées

Pour qu’une animation soit perçue comme totalement fluide, chaque image ne doit pas apparaître plus de 16ms, ce qui veut dire qu’une bonne animation doit être réglée à 60img/s. C’est un premier point, mais ça n’est pas le seul.

Tout étant question de psychologie comme nous l’avons vu au début de cet article, il y a un autre moyen de jouer sur la perception de la fluidité et de la vitesse des animations. Comme nous le rappelle Awwwards, il existe quatre type de transitions de mouvement (« easing », en anglais, c’est quand même beaucoup plus court).

• L’easing linéraire : c’est un mouvement sans accélération ni décélération ni au début ni à la fin du mouvement. C’est l’easing, par défaut. Assez désagréable et sans saveur, il est ressenti comme mécanique et peu humain.
• L’ease-in : L’animation commence lentement et accélère
• L’ease-out : l’animation commence très rapidement et décélère
• L’ease-inout : c’est la conjonction des deux animations précédentes

En fonction des circonstances, il est recommandé de jouer sur ces différents types d’accélérations.

Pour ce qui concerne les interactions avec l’interface :

• L’ease-out est recommandé pour tout ce qui requiert une réaction instantanée : menus, boutons.
• L’ease-in est recommandé pour les fenêtres d’alerte.

Pour ce qui concerne les animations :

• L’ease-inout est recommandé pour les animations courtes. Lors d’animation longues, elles donnent l’impression
• Par ailleurs, ce type d’effet ne doit pas dépasser les 200 à 500ms pour ne pas être perçues comme trop longues.

N°8 : Optimisez le code de vos animations

Le travail d’ergonomie des animations ne se fait pas que dans la composition de l’animation, mais aussi dans le code. Voici encore quelques recommandations, toujours d’après Awwwards, pour y voir clair.

Certaines propriétés sont plus gourmandes en ressources, mais également en temps d’exécution. Pour l’animation de propriétés CSS, Awwwards recommande de n’utiliser sur mobile qu’exclusivement les propriétés : opacity et transform.(rotate, translate, scale).

N’animez pas les propriétés qui affectent les layers : width, height, padding, margin.

N’animez pas les propriétés qui affectent le Paint : color, background, background-image, border.

(attention, ça va devenir un peu technique)

Le javascript peut également être optimisé. Voici les conseils que donnent Awwwards.

• Utilisez RequestAnimationFrame
• Evitez SetTimeOut et setInterval
• Evitez de changer les styles inline sur chaque image de l’animation
• Déconnectez les évènements des animations
• Evitez les boucles de reflow et de repaint
• Utilisez les accélérations de la carte graphique avec les transformations 3DMatrix

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

N°9 : Adoptez une stratégie de conception collaborative

L’optimisation de la perception de la vitesse semble être essentiellement un travail d’optimisation du code. Ce n’est pas ce que nous dit Awwards. Selon eux, il semble, au contraire, essentiel, de sensibiliser très en amont les UI/UX designers à ces problématiques. Et je pense qu’ils ont tout à fait raison. Les obliger à penser en terme de performance les fera envisager leur contribution au projet d’une autre manière et participer à une performance globale qui affecte également la performance business d’un site.

Mais pour parvenir à cette implication, il semble nécessaire de créer un Budget de performance.

Le budget de performance pour rendre vos sites aussi rapides qu’une fusée

Le budget de performance est un ensemble de contraintes que vous allez pouvoir appliquer à vos pages en fonction de votre cible utilisateurs et du matériel dont elle dispose (des vieux Android achetés en supérette ou des iPhone X dernier cri).

Plutôt que d’entrer dans la théorie, je vous propose d’aller calculer vous même ce budget en vous rendant sur performancebudget.io. Saisissez le temps de téléchargement que vous estimez nécessaire à obtenir la meilleure expérience utilisateur, puis saisissez le type de connexion sur laquelle surfe vos internautes et hop, c’est parti !

Voici le résultat :

Voilà, vous avez compris ! Comme vous pouvez le constater, avec des données aussi faciles à mesurer, tout le monde peut participer, le but du jeu étant de ne pas dépasser le poids indiqué (600ko). Amusez-vous bien !

N°10 : Utilisez les bonnes pratiques des apps

Les vrais apps (développées pour iOs et Android) recèlent des bonnes pratiques qu’il peut aussi parfois être utiles de réemployer pour encore améliorer la perception de fluidité d’usage d’un site.

Barre de progression de chargement lorsque le site est affiché en plein écran

Les Progressive Web App (PWA : nous reviendrons sur ce sujet prochainement) permettent d’afficher un site web en plein écran. Cela implique très notablement que les boutons du navigateur ne sont alors plus affichés. Pour cette raison, il devient intéressant d’afficher des barres de chargement qui viennent pallier à ce manque et qui, si elles ne sont pas  présentes, risquent de rendre l’expérience utilisateur moins fluide, l’utilisateur n’ayant pas de feedback sur les moments où des pages se chargent ou pas.

Continuité de chargement en utilisant des templates squelettes

Oui, des templates squelettes ! C’est un peu curieux comme terme, mais ça définit assez bien de quoi il s’agit.

Un des problèmes de nombreux sites web est le temps de latence d’affichage d’une page lorsque l’utilisateur clique sur un bouton. En général, la page reste affichée de manière statique tant que le contenu de la page suivante n’a pas commencé à être envoyée. Ce qui peut être extrêmement énervant pour l’utilisateur.

Pour éviter cet effet, essayez toujours de donner la sensation que la structure du site web est stockée entièrement sur le terminal utilisé et que seul le nouveau contenu est téléchargé à chaque requête.

Pour simuler cette impression, c’est là que les templates squelettes font leur office. Affichez-les en premiers avant de télécharger le contenu final de la page (ces templates ayant été téléchargés au préalables avant même que le bouton n’ait été cliqué).

Sauts de page intempestifs

Mais oui, vous les connaissez ces sauts de pages intempestifs, lorsque vous téléchargez une page et qu’au fur et à mesure de l’apparition des images, toute la page saute. Cela est due au fait que la dimension des images n’a pas été incluse dans le code HTML qui la décrit et doit être « devinée » par le navigateur lorsque l’image est finalement réellement téléchargée, provoquant ce fameux saut de page intempestif.

N°11 : Optimisez et priorisez les scripts css et javascript

L’habitude a été prise depuis longtemps d’accompagner chaque page HTML d’une farandole de scripts CSS et javascript. Si cela ne pose, à priori, pas de problème, pour les ordinateurs les plus rapides avec de bonnes connexion, comme l’explique Addy Osmani, ingénieur chez Google, en revanche, cela est moins vrai sur des machines moins évoluées avec des connexions moins rapides, et notamment sur mobile. Les script prennent du temps à télécharger et du temps à être compilés. Sur certains vieux appareil, cela peut entraîner un temps d’activation de la page allant jusqu’à plus de 19s, C’est donc un point crucial à aborder avec attention.

Pour cela, Awwards nous fournit plusieurs bons précieux conseils :

Ne téléchargez que le code minimal nécessaire. Tronçonnez votre code javascript et CSS en blocs et ne téléchargez dans certain cas que les blocs absolument nécessaires.

Préchargez sur la page les éléments critiques. Pour cela, utilisez la balise <link rel= »preload »> et décidez quels sont les médias à télécharger en priorité.

Intégrez le code CSS le plus indispensable à votre page directement dans le header de la page.

Conclusion

L’optimisation de la perception de la vitesse est un vrai sujet : à la fois design et à la fois technique. Pour les sites à fort volume de trafic, c’est un enjeu essentiel, car il peut se chiffrer directement en CA effectif. Pour tous les autres sites, n’oubliez pas que Google indexe désormais les pages en fonction de la vitesse, et que votre capacité à fournir dans toutes les situations des pages dans des conditions acceptables pour l’utilisateur, influera sur votre positionnement. Tout le monde est donc concerné par cette problématique. Alors, qu’attendez-vous pour vous mettre au travail ?

Sources des illustrations

• Menu de rechargement liquide par Rawmedia
• Barre de téléchargement sur Boingboing
• Easeout sur Bonobo
• Animation de VisiUtah
• Animation AirBNB
• Photo de la foule dans une gare par Timon Studler sur Unsplash
• Photo d’illustration de l’article par Mathew Schwartz sur Unsplash