La crédibilité, un moyen accessible dans vos efforts de création d’une expérience utilisateur agréable

Qu’est-ce qui fait qu’un site web ou une application donne à une marque une image empreinte de crédibilité et suscite la confiance chez l’utilisateur ?

Je n’ai pas étudié à Standford au Persuasive Tech Lab, mais j’ose quand même inventer une formule : E + E + P = C (Existence + Expertise + Professionnalisme = Crédibilité).

La formule repose sur des ingrédients accessibles, simples, parfois d’une évidence déroutante. L’intérêt est tout de même grand de les rassembler ensemble et de les actualiser car les études sérieuses à ce sujet sont étonnamment peu nombreuses, pas faciles à débusquer, alors que les astuces de blogueurs sont très éparpillées.

Ainsi donc, pour obtenir la confiance de vos visiteurs ou utilisateurs, il faut que ceux-ci aient parfaitement confiance dans votre existence, dans votre expertise et dans votre professionnalisme.

 

La confiance dans votre existence

Qui se cache derrière ce site Web, cette application ? La question n’est pas paranoïaque. Les gens sont sensibilisés depuis longtemps à la confidentialité de leurs informations personnelles et à la sécurité de leurs outils de travail. Voici quelques trucs pour rassurer les utilisateurs à l’effet qu’il y a quelqu’un de respectable derrière votre site :

  • Intégrer votre adresse civique de façon bien visible. Vous prouvez ainsi que vous avez un vrai local d’entreprise.
  • Intégrer des photos de vous-même ou des employés de l’entreprise.
  • Vous travaillez dans un bel immeuble ? Montre-le.
  • Intégrer des liens vers vos profils LinkedIn et autres réseaux sociaux. Vous démontrez ainsi votre existence par vos échanges passés avec d’autres vraies personnes.
  • Numéro de téléphone, adresse courriel ou formulaire, faite en sorte qu’il soit simple et facile de vous contacter. Apple le mentionne aussi dans son guide de développement d’applications.
  • Publier des témoignages de gens qui ont travaillé avec vous. Même si la plupart des gens vont interpréter ces témoignages avec un grain de sel, cela renforce cette notion de validation sociale de votre respectable existence.
  • Maintenez le contenu de votre site à jour. Imaginez le contraire ? L’utilisateur aura un doute que vous êtes toujours en affaires. La publication d’un blogue est l’outil idéal pour projeter cette perception.

 

La confiance dans votre expertise

L’expertise de cette entreprise pour ce service ou ce produit est-elle vérifiable ?

  • Si vous êtes membres d’une association ou d’un ordre ou possédez une certification, affichez-le.
  • Mais il faut aller plus loin, si vous voulez vous démarquer de vos compétiteurs. Il vous faut publier cette expertise, par des articles de blogues exposant votre discours (oui, en effet, c’est exactement ce que je fais ici) ou des descriptions de cas pratiques.
  • Si vous avez gagné un prix à un concours, vous démontrez une reconnaissance de vos pairs dans votre industrie.
  • Qui a déjà acheté des produits ou services de votre entreprise ? Publiez au moins des noms. Cela peut contribuer à démontrer le niveau de votre expertise.

 

La confiance dans votre professionnalisme

Vous existez et avez démontré votre expertise. La partie n’est pas gagnée. Il vous faut de plus démontrer que vous êtes professionnel. Plus subjectif, c’est l’image globale de votre site Web qui est soit empreinte de professionnalisme, soit d’amateurisme. C’est là que ça devient intéressant :

  • Un site Web doit se télécharger en un éclair, surtout sur un appareil mobile. Pour ce faire, il vous faut éviter comme la peste les gabarits disponibles sur Themeforest et impliquer un vrai développeur.
  • Arrangez-vous pour qu’il n’y ait aucune faute d’orthographe. À nouveau, au besoin, faite relire par quelqu’un d’autre. Apple le souligne dans son guide de développement d’applications.
  • Les pages doivent êtres faciles à lire, claires, lisibles
  • Un site qui est laid, qui intègre des photos et des icônes de sources bon marché fera des merveilles pour démontrer votre amateurisme.
  • L’intégration d’une politique de remboursement, de protection de la vie privée démontre le respect que vous avez envers vos clients.
  • Éviter les liens morts et les erreurs applicatives.
  • Mais si jamais vous en avez oublié un, un lien mort dis-je bien, ayez une belle page d’erreur 404 avec un message qui apaise, voir amuse votre utilisateur et qui lui permet de trouver ensuite vite son chemin vers son bonheur.
  • Assurez-vous d’avoir des titres de pages ("title") et des meta descriptions cohérentes dans vos pages. Ces informations représentent votre image de marque dans les résultats de recherche de Google.
  • Publiez dans la langue du marché local visé, pas seulement en anglais. Cette étude qui date déjà depuis 2012 montre les effets positifs de publier des applications en plusieurs langues.
  • Toujours dans le monde des applications, quoique cela s’applique aussi aux sites Web, si vous vendez une application ou un logiciel, faites un effort pour publier des captures d’écrans de haute qualité. Votre utilisateur prendra possiblement 5 secondes maximum pour investiguer votre application, il ou elle ne lira possiblement rien d’autres que le titre de l’application, et constatera le nombre de petites étoiles que vous avez récolté. Ensuite, ce sont ces captures d’écrans qui feront la différence.
  • Éviter de faire des vidéos si vous ne croyez pouvoir livrer un haut niveau de qualité. Vous aurez alors l’effort contraire à celui escompté.
  • Imaginer, je n’ai même pas encore mentionné qu’il vous faut une conception graphique haut de gamme. C’est même l’un des meilleurs investissement que vous pourrez faire. Mais vous aurez besoin de faire tout le reste de toute façon avant d’arriver à un Design de qualité et contemporain. Et attention, avoir une image professionnelle, ne veut pas dire sérieuse ou ennuyante.
  • Ne lésinez pas sur les détails relatifs à ce Design, mais aussi relatifs à la fluidité des interactions, des actions prises par l’utilisateur. Une simple petite animation de transition, particulièrement dans un environnement d’applications, donne, entre autre chose, une touche professionnelle à votre application. À nouveau, Apple le souligne dans son guide de développement.
  • Certaines couleurs pourraient êtres privilégiées. Oui, je sais, ça commence à être restrictif toutes ces directives, mais sachez que la couleur verte pâle est celle qui procure un sentiment de confiance. Ce court article de Forbes présente les rudiments de la psychologie des couleurs.

La psychologie des couleurs

La roue des émotions de Robert Plutchik (Crédit photo: Wikipedia)

 

Comme on peut le voir, la plupart des bonnes pratiques suscitant la confiance et favorisant la crédibilité de votre site ou de votre application sont sommes toutes très accessibles et ne sont pas réservées qu’aux grandes marques aux poches profondes. Et plusieurs sont simples à implanter. Elles peuvent pourtant non seulement procurer une expérience plus agréable car rassurante à vos utilisateurs, mais aussi générer des améliorations tangibles de vos métriques préférées : taux de conversion d’un formulaire; taux de fréquentation d’un site ou d’utilisation de votre application; etc.
Et la formule que l’on doit se rappeler est tout simple: E + E + P = C. Il faut aussi voir le présent article souvent car tout y est.

Les indicateurs de localisation dans le contexte mobile

Gens regardant leur téléphone mobile

L’un des principes d’utilisabilité numérique bien connu consiste à faire en sorte que les utilisateurs comprennent toujours bien où ils se retrouvent dans l’arborescence d’un site Web.

Parmi les moyens disponibles au concepteur dans un contexte d’ordinateur de bureau, on utilisera parfois le fil d’Ariane (ou "breadcrumbs"), pour venir à la rescousse de l’utilisateur égaré. On s’assurera dans un site dense en contenu que le menu de gauche, si menu de gauche il y a, présente une hiérarchie de couleur évidente et des indentations pour aider l’utilisateur à se situer dans le site.

Mais ces moyens ne sont pas disponibles dans le contexte mobile. Il n’y a pas de place pour ça dans une telle interface utilisateur.

Le contexte mobile, par la petitesse de son interface, l’absence d’effets de survol et par la proximité gestuelle entre le simple clic et le défilement de l’écran, présente non seulement un défi de localisation dans l’arborescence du site ou de l’application, mais peut de plus engendrer un plus grand nombre de clics erronés.

 

"Merde, ou ai-je cliqué" ?

Négligée, mais efficace, l’utilisation des transitions par CSS représente une façon éclairante pour l’utilisateur de comprendre non pas le chemin parcouru après un clic, mais le chemin qu’il ou elle s’apprête à parcourir dans la ou les prochaines secondes.

Bien sûr, pour procurer une expérience agréable, il faut utiliser la technique avec retenue et subtilité.

 

Démonstration

J’ai produit un exemple pour démontrer clairement la différence de l’expérience utilisateur avec et sans la présence d’une animation de transition. Bon, ne regarder pas le code, c’est du bidouillage de premier ordre fait à partir d’un prototype Axure, c’est dans un iframe, les images ne sont pas optimisées, ce qui fait que le tout n’est pas très performant "techniquement" sur tout autre support qu’un ordinateur de bureau, mais c’est juste pour la démonstration.

Dans cet exemple, seul le bouton "Trucs et conseils" est cliquable. Imaginons donc que vous cliquez sur ce bouton par erreur, avec votre pouce. Allez-y, essayez le bouton dans les deux situations.

 

Situation A : SANS transition animée.

Situation B : AVEC transition animée.

N’est-ce pas concluant comme expérience ? Dans la situation B, l’utilisateur a le temps de comprendre où il ou elle vient de cliquer. Normal, nos yeux sont naturellement attirés par le mouvement. Et en plus, l’animation de la transition apporte une touche ludique agréable dans l’expérience utilisateur, ce qui ne gâte évidemment rien.

 

Après avoir cliqué

Pour une application ou un site Web mobile, il peut être pertinent de recourir au typique chevron vers la gauche, pour indiquer à l’utilisateur qu’il ou elle peut "remonter" d’un niveau dans l’arborescence de l’application. C’est le retour du bouton de la "page précédente" dans l’interface. À utiliser sans gène quand le contexte s’y prête.

 

En conclusion

Les interfaces d’applications ou de sites mobiles génèrent plus d’erreurs de clics, c’est normal. Dans ce contexte, l’utilisation des transitions animées au moment d’un clic dans une interface mobile et du chevron, après le clic, représentent des outils de navigation importants qui permettent à l’utilisateur de se situer dans l’architecture d’information de l’application ou du site mobile. Un parcours de navigation plus clair, mène à une expérience utilisateur plus agréable.

 

La conquête du hamburger

Icône du hamburger

Les appareils mobiles ne dominent pas encore les visites de votre site Web ? Je vois régulièrement des statistiques de fréquentation du site montrant plus de 20 % de visites en provenance des appareils mobiles. Ça augmente lentement, mais régulièrement d’une année à l’autre…

20 %, c’est probablement aussi le pourcentage des gestionnaires de site Web qui se préoccupe de l’apparence de leur site dans un appareil mobile. Qu’a cela ne tienne, le mobile va s’insérer dans l’ordinateur de bureau et le portable de ces 80 % de récalcitrants qui ne vivent que sur leur portable, malgré eux, par la voie du Design visuel d’interfaces. Une simple petite icône, le hamburger, ces trois petites lignes toutes simples, mène cette charge vers la conquête de l’espace visuel PC.

Oui, oui, je vous le dis, cette petite icône sera éventuellement dans toutes les interfaces de site Web, sur mobile comme sur PC.

« Hérésie ! » Clameront les puristes réactionnaires du Design d’expérience utilisateur. « Mcdonaldisation de la fine cuisine moléculaire ! » Entendrez-vous de la bouche de ces mêmes nobles concepteurs. On peut comprendre. « À quoi bon faire des tests d’utilisabilité et d’oculométrie en laboratoire s’il n’y a qu’un seul élément de contenu dans la page ?!« 

Pour ma part, j’applaudis cette conquête, car j’y vois là la conquête de la simplicité et de l’efficacité. En effet, vous avez peut-être été déstabilisé la première fois que vous avez vu le hamburger s’aventurer dans les terres hostiles des sites pour PC, royaume des onglets horizontaux, des mégas menus apparaissant en survol de souris sans qu’on le veuille, des logos en haut à gauche de l’écran. Puis vous l’avez reconnue. Vous avez immédiatement su à quoi il servait. Un premier clic, et hop, le menu de navigation apparait. Un deuxième, et hop, il disparait. En un seul clic de souris, vous avez désormais la possibilité comme utilisateur de nettoyer votre interface, de l’épurer, de faire le grand ménage. Pourquoi diable se passer de ce coup de serpillière instantané ?

Moi, je dis « longue vie au hamburger ! » Oui, bien sûr, il faut tout de même porter une attention particulière à la présentation du repas. Il y a la coutellerie, l’assiette, les entrées, le reste du repas… L’art de la table demeure bien vivant et la gourmandise, ce n’est pas la même chose que la goinfrerie.

L’avènement du « Überentwerfer »

Nietzsche

J’ai eu une petite pensée pour Nietzsche récemment. En fait, mon profond athéisme fait que j’y pense régulièrement, mais là n’est le propos de ces lignes. L’une de ses célèbres citations va comme suit : « Aussitôt qu’on nous montre quelque chose d’ancien dans une innovation, nous sommes apaisés. » Ainsi en est-il de l’utilisabilité, la chose ancienne, et de l’expérience utilisateur (ma traduction de User Experience, mais en moins James Bond.), la chose innovante.

La discipline de l’expérience utilisateur est sur toutes les lèvres de nos jours et c’est une excellente nouvelle. De vocable branché des agences numériques par lequel on réfère encore dans plusieurs cas au Design d’interface usager, la « science » de l’expérience utilisateur fait maintenant son entrée dans les entreprises du Québec. Réjouissons-nous mes frères et sœurs.

Les 40 ans passés comme moi se rappelleront que l’utilisabilité a connu ses heures de gloire au début des années 2000. Wikipédia la définit comme « le degré selon lequel un produit (ou un site Web, une Application) peut être utilisé, par des utilisateurs identifiés, pour atteindre des buts définis avec efficacité, efficience et satisfaction, dans un contexte d’utilisation spécifié ». Notez le mot « satisfaction » dans cette définition. Et puis, plus rien. Démodée, ringard, passée date, l’utilisabilité. Au diable les tests d’utilisabilité. De toute façon, personne ne mesure d’objectifs alors à quoi bon.

Puis, vient le « UX« … Ça c’est « cool » le UX. Oh, et aussi le « UI » (pour User Interface), le Design d’interface usager.

Wikipédia, à l’aide : « Contrairement à l’utilisabilité, [le concept de l’expérience utilisateur] n’est pas strictement pragmatique dans le sens ou il sous entend un impact émotionnel cumulé à un bénéfice rationnel, il est entendu que la démarche est bien de créer une expérience agréable. » En d’autres termes, l’objectif n’est pas ici d’atteindre un URL ou un ratio de pages par visite, au sens où Google Analytics l’entend. Et l’utilisabilité serait, elle, un sous-ensemble de l’expérience utilisateur.

En effet, l’expérience utilisateur cherche à faire en sorte que votre site Web ou application soit :

  • Utile à l’utilisateur
  • Désirable
  • Accessible pour tous les types d’utilisateurs
  • Crédible aux yeux des utilisateurs
  • Composé de contenus et de fonctions facilement repérable
  • Utilisable, ou facile d’utilisation
  • Contribuer à la mission du site ou de l’application

On n’est pas dans le flou artistique ici. On n’est pas dans les dessins. D’ailleurs, dans un contexte de réalisation de site Web ou d’application, je définis pour ma part le Design d’interface usager comme étant la discipline qui analyse et optimise :

  • Les contrastes
  • L’emphase à mettre sur les divers éléments de contenu
  • La quantité de ces éléments
  • Leurs proportions
  • Leur présence répétitive
  • L’équilibre
  • L’harmonie

À nouveau, le Design de l’interface utilisateur est également un sous-ensemble de l’expérience utilisateur.

On peut lister ces sous-ensembles ainsi :

  • La recherche utilisateur (Profil démographique, psychologique, définition de personas)
  • La stratégie de contenu
  • L’architecture de l’information
  • Le Design des interactions
  • Le Design de l’interface usager, le visuel
  • L’utilisabilité

L’avènement du « Überentwerfer »

Pourquoi se réjouir ? Parce que ces efforts constants de l’industrie visant à raffiner la discipline du Design de l’expérience utilisateur démontrent sa capacité de se renouveler et un désir de gagner en crédibilité qui va plus loin que de faire des beaux dessins. Les organisations qui ont intégré des postes de gestionnaire de l’expérience utilisateur sont, bien plus qu’innovatrices. Elles sont crédibles car elles cherchent à systématiser l’impact émotionnel de leur produit et à le mesurer.

Votre organisation peine encore à s’y retrouver et encore moins à justifier le développement d’un poste s’y afférant quotidiennement ? Suivez les conseils de Friedrich, insérez dans votre discours l’expression « utilisabilité », ça apaisera vos interlocuteurs. Et ils se sentiront à la mode.