kiouv.fr utilisabilité et bonnes pratiques sur le Web

ReadWriteWeb a fait récemment un article sur le partenariat de login entre Facebook et AOL, appelé « Facebook Wants to Be Your One True Login ». Résultat : ils se sont retrouvés en n°1 sur la recherche « Facebook login » sur Google.

Ainsi, des milliers d’utilisateurs, utilisant Google comme une barre d’adresse (ce que Chrome fait tout seul, je rappelle), se sont retrouvés sur ReadWriteWeb au lieu de Facebook. Ne comprenant pas le nouveau design de Facebook, ils n’ont pas hésité à faire savoir leur mécontentement dans les commentaires de l’article (lisez en qq uns).

Mythique. ReadWriteWeb a été obligé de mettre un disclaimer dans l’article. Et a publié une analyse.

CONCLUSION : ne jamais surestimer les utilisateurs.

Source : UXmag

On continue la rubrique emploi de ce blog qui commence à ressembler à tout sauf à un blog sur l’utilisabilité et les bonnes pratiques ! Mais comme dit précédemment, je travaille à la refonte, plus orientée Twitter-like et photo.

Donc, Digitas recrute un architecte d’information / designer d’interaction. C’est le poste que j’occupe là-bas actuellement, et c’est pas peu dire que les projets proposés sont intéressants et enrichissants.

Tous les profils seront consultés, n’hésitez pas à me contacter.

Ouh là là, c’était plein de poussière là dedans !

Bon, désolé, accaparé par Paris Web et mon boulot (et surtout mon boulot depuis 2 mois), j’ai vraiment rien foutu, et ce blog est resté tout vide de vie. C’est moche.

Mais je m’y remets ! Et ce pour plusieurs raisons :

• Paris Web va bientôt (mais alors très très bientôt) sortir son nouveau site, annonçant le lancement des hostilités pour Paris Web 2008. \o/
• Mon nouveau travail que j’ai me nourrit plus en réflexions. Normal, je suis désormais “Architecte de l’information” (peufpeufpeuf), je suis donc confronté (à peu près) tous les jours à des problématiques en ergonomie, accessibilité, archi de l’info, utilisabilité…
• notabene va pas tarder à se foutre de ma tronche, et (geekette) va surenchérir la prochaine fois que je la verrai.
• Faut que je me sorte un peu les doigts du cul

Je tiens par la même occasion à signaler les excellents sites de Vincent Valentin  (HTML Zen Garden) et Eric Daspet (Performance Web). Voilà 2 nouvelles sources d’informations et de savoir de très grande qualité.

Après plusieurs mois sans signe de vie, je commençais à me dire que le projet UX Zeitgeist si intéressant était mort dans l’oeuf. Mais Lou Rosenfeld (oui, le même qui a écrit le pavé sur l’architecture de l’information) vient d’annoncer aujourd’hui même que le projet était officiellement lancé. Concrètement, Rosenfeld Media va maintenant ouvrir le service à une participation plus large, pour nourrir la base de données des livres (oui, on pourra en poster en langue autre que l’anglais), proposer des nouveaux sujets, et intégrer la base des professionnels de l’UX. Pour un item donné, UX Zeitgeist parcourt différentes sources d’information, et regroupe toutes ces données sur la fiche de l’item. Après l’analyse de toutes ces données, l’item est classé par rapport aux items similaires. Prenons un exemple avec un bouquin, l’excellent Don’t Make Me Think : A Common Sense Approach to Web Usability , de Steve Krug. Sur sa fiche, on peut parcourir les sources qui parlent du livre :

• Les ventes sur Amazon
• Les professionnels enregistrés sur le Zeitgeist qui le nomment dans leurs favoris
• Les blogs qui en parlent (via Google blog search)
• Les podcasts qui en parlent (via Everyzing
• Les mentions du livre dans les publications sur l’expérience utilisateur (via Rollyo)

L’outil utilise également ces sources pour publier des informations en relation avec le livre :

• Les ventes croisées d’Amazon
• Les favoris reliés sur del.icio.us
• Les mots clés reliés sur del.icio.us
• Les livres également présents dans les favoris des membres de LibraryThing qui ont choisi le livre
• Les livres taggés similairement par les membres de LibraryThing

Ces mini-feed sont mis à jour quotidiennement ou hebdomadairement selon les sources.

On retrouve vraiment ce côté mini-feed à la Plaxo ou Facebook sur les fiches des professionnels. Sur la fiche d’Andrew Boyd, par exemple, on connaitra en temps réel (ou presque) les livres sur lesquels il a collaboré, les nouveaux billets de ses blogs, ses favoris dans del.icio.us (va falloir pouvoir filtrer, sinon ça va être le bordel, là), et tout ce qui fait mention d’Andrew dans les livres sur Amazon, Google Books, les blogs, les podcasts, les publications, et les favoris del.icio.us.

Cet outil pourrait vite s’avérer être une mine d’or si les professionnels de l’expérience utilisateur, et dans un cadre plus large, les designers d’interaction, les architectes de l’information, les experts en utilisabilité, en accessibilité, les ergonomes, viennent à s’inscrire sur UX Zeitgeist, pour enrichir les bases de sujets et de livres, et pour partager ce qu’ils pensent, lisent, et écrivent. Rosenfeld Media ne cache pas les avantages qu’il va pouvoir en tirer : mieux identifier ses clients potentiels et connaitre les sujets en vogue, pour publier au plus près des attentes de la communauté. Du gagnant-gagnant, en somme.

Je vous conseille les lectures du blog et de la FAQ pour en savoir plus.

Edit : et maintenant, ya même ma pomme et celle d’Amélie !

La dématérialisation des services déclenchée par le boum du e-commerce a soulevé une problématique : comment permettre à l’utilisateur de trouver des réponses à ses questions et ainsi contribuer à sa satisfaction lors de la visite ?

Les e-marchands répondent de manières différentes à cette problématique : FAQ, simple mail, formulaire de contact, sont parmi les principaux moyens utilisés. À cela viennent s’ajouter les hotlines téléphoniques, les hotlines par chat, et même les assistants virtuels, nouvelle mode depuis quelques mois. Afin de faire un tour d’horizon des différentes solutions, j’ai analysé les processus de contact de 6 grands sites marchands désignés meilleurs sites e-commerce 2007 (via) dans leur catégorie par la FEVAD :

• FNAC.com
• NikeId
• Annonces Jaunes
• La Redoute
• Ikea
• Yves Rocher

Pour vivre heureux, vivons cachés

Premier constat : tous les sites ne clament pas haut et fort leur envie d’aider le chaland. Chez Ikea, on croise deux fois Anna, l’agent conversationnel, avant de tomber sur le lien “Contactez-nous”, qui ne mène même pas vers un formulaire, mais vers un chat… Chez NikeId, tout comme chez Annonces Jaunes, il faut descendre jusqu’en bas de page pour trouver une main tendue.

Chez FNAC.com, Yves Rocher, et La Redoute, le bouton d’aide/contact est en bonne place dans la navigation secondaire.

Plus j’en mets, plus t’en as

L’addition d’une FAQ, d’un formulaire de contact et d’un agent conversationnel, par exemple, est un moyen efficace de minimiser les contacts entre l’utilisateur et le site, et c’est un système gagnant-gagnant : l’utilisateur a sa réponse plus vite, le marchand a moins de gestion de clientèle à fournir.

Sur l’échantillon, FNAC.com et La Redoute ont très bien implémenté ce système. L’utilisateur dispose de beaucoup d’outils pour trouver sa réponse, et s’il ne trouve pas, il peut alors contacter le service clientèle. J’émets un bémol tout de même pour FNAC.com : pourquoi diable ouvrir une nouvelle page pour afficher cette rubrique d’aide ? Rien ne le justifie, et un clic sur un hyperlien vers le site FNAC.com fait qu’on se retrouve avec 2 fenêtres du même site…

NikeId l’a mal mis en place : pourquoi l’utilisateur s’embêterait-il à chercher sa réponse quand le moyen de contact est disponible immédiatement et que les questions/réponses sont aussi mal agencées et si inutilisables ? (ils connaissent pas la molette de la souris chez Nike ?)

Pas de ça chez Annonces Jaunes, Yves Rocher, ou Ikea. Chez Annonces Jaunes, les aides sont bien cachées dans le bas de page, et en deux parties : une rubrique questions/réponses bien fournie sur 4 écrans de hauteur (!) et un formulaire de contact qui va à l’essentiel. Il faut dire qu’Annonces Jaunes bénéficie d’une architecture de l’information bien fichue et a semé des aides contextuelles bien identifiées un peu partout sur son site.

Même partage chez Yves Rocher, à la différence que cette fois, ce sont les FAQ qui sont bien maigres et le formulaire qui est une vraie fiche d’état civil ! J’y reviendrai.

Ikea a mis en place 3 systèmes : le chat, l’agent conversationnel, et la FAQ. Hé non ! Pas de formulaire de contact, pas la trace d’un tout petit mail. À la place, Ikea a choisi de privilégier le contact par téléphone, par service et par magasin. Testé sous Firefox, le chat ne se lance tout simplement pas, et les liens promis par Anna, l’agent conversationnel, ne s’ouvrent pas. En gros, sur le site d’Ikea, pour obtenir une information, il faut avoir un peu de temps devant soi. Un chat ou un appel téléphonique prennent du temps, voire même coûtent de l’argent à l’utilisateur, tandis que la FAQ est franchement bordélique. À vouloir gagner en documentation, Ikea a perdu en clarté.

Plus t’en mets, plus j’en ai

Encore faut-il que l’utilisateur soit enclin à laisser son adresse postale pour trouver une réponse à une information qu’il n’a pas pu trouver sur le site ! Les formulaires de contact sont là pour aider l’utilisateur, pas pour récolter des informations sur lui. Un formulaire trop dense à de fortes chances de rebuter l’utilisateur, donc de provoquer son insatisfaction, donc d’en faire un client potentiel perdu. Et même un tout petit champ autre que l’email, l’objet, et le message, est superflu. Néanmoins, il est désormais d’usage de demander la civilité et le nom de l’internaute dans le but de personnaliser le message.

Chez Ikea, au moins c’est simple, il n’y a pas de formulaire. Les seules solutions de réponse “humaine” ou “humanisée” sont le chat ou l’appel direct en magasin. Je ne sais pas trop quoi penser de cette approche de la relation client en ligne, juste que c’est beaucoup trop commercial à mon goût. Si quelqu’un a un avis ou un retour sur cette expérience, je suis preneur.

Chez les autres commerçants, pas mal de bonnes pratiques volent en éclat. Chez FNAC.com, ce doit être un joyeux bordel de maintenir tous ces formulaires de contact : Il y en a 9 différents, additionnés à 2 adresses email. L’utilisateur qui veut poser une question sur la disponibilité d’un CD et l’ouverture de la billetterie d’un spectacle doit se fendre de 2 remplissages de formulaires. M’est avis que ça ne doit pas arriver souvent, et que le service client de FNAC.com doit du coup se retrouver avec des questions sur la billetterie dans le workflow de mailings des CD.

Chez NikeId, sûrement embarrassés de leur site full flash, ils ont préféré ouvrir un formulaire HTML dans un popup. Passé cette aberration technique, l’utilisateur fait face à un formulaire un peu riquiqui (surtout au niveau du champ “message”) où aucun champ n’est superflu. Par contre, vous pouvez envoyer un message sans objet, ce qui doit être très pratique à gérer. NikeId fait ici peu de cas de la capacité à écrire intelligiblement des utilisateurs de son propre site. Une liste déroulante avec des thèmes prédéfinis aurait très simplement permis à l’utilisateur de classer son besoin sans avoir à mettre un objet incompréhensible par NikeId.

Chez Yves Rocher, le formulaire s’ouvre sur un layer à fond gris, permettant à l’utilisateur de focaliser son attention sur les informations à compléter. Et c’est à ce moment-là qu’il se rend compte qu’il doit sortir sa fiche d’état civil pour espérer une réponse de la part du site. En quoi connaitre l’adresse postale de l’utilisateur va-t-il aider Yves Rocher ? Même chose pour le numéro de téléphone : tous les utilisateurs ne veulent sûrement pas pouvoir être appelés, même pour avoir une réponse à leur question. Si Yves Rocher souhaitait vraiment avoir ces informations, il aurait fallu le demander simplement par une phrase d’introduction, et en ne mettant pas ces champs comme obligatoires à la validation du formulaire.

C’est un peu la même chose chez La Redoute, mais dans une moindre mesure. Le champ “code postal” est obligatoire, et on se demande bien pourquoi. Le gros point positif du formulaire de contact de La Redoute est que la provenance de l’utilisateur a été tracé (voir le champ d’adresse Internet de votre navigateur). La Redoute sait donc dans quel contexte d’interrogation ce message lui est adressé.

En fait, le seul vrai formulaire de contact, à mon sens, est celui d’Annonces Jaunes. Aucun message perturbateur, pas de champ superflu, une tabulation bien ordonnée, une gestion simple mais habile des erreurs de remplissage, des champs utiles et légitimes aux yeux de l’utilisateur. Encore que le nom et la civilité…

Utilisateur satisfait = client content

Bon ok, ce n’est pas aussi simple que ça. Nous évoluons dans un domaine où les stats nous apprennent tous les jours des choses qu’on n’a pas envie d’entendre. Je ne souhaite pas m’attarder sur ce point sans données concrètes analysées suite à des tests utilisateurs. Seulement, si l’on s’appuie sur une bonne dose de bon sens et un certain respect des conventions, un utilisateur aura beaucoup plus de chances de satisfaire ses interrogations sur le site de FNAC.com que sur NikeId.

Dans ce panel des meilleurs sites e-commerce 2007, s’ils remplissent très bien leurs principales fonctions, c’est à dire être un relai d’une marque ou d’un distributeur sur Internet, et même s’ils sont primés pour ça, beaucoup de choses restent à faire pour la satisfaction de l’utilisateur soit totale en toute circonstance. De plus, une analyse plus poussée du fonctionnement des formulaires (gestion des erreurs, intégration au site, accessibilité) montrerait bien d’autres lacunes, et cela pourra faire l’objet d’autres articles.

On peut cependant dégager quelques bonnes pratiques (complètement subjectives) qui sont mises en œuvre :

• La section d’aide ou de contact est visible et identifiable;
• Le formulaire de contact s’en tient au strict nécessaire en matière de demande d’informations à l’utilisateur;
• Les parcours sont optimisés par des FAQ, qui mènent au formulaire de contact utilisé dans un contexte identifié.

La perfection n’existera certainement pas dans le domaine de la satisfaction client. Néanmoins, l’application de bonnes pratiques et de règles simples d’ergonomie peuvent permettre d’atteindre un niveau élevé de satisfaction.

PS : Si certains d’entre vous ont un avis ou un retour sur les agents conversationnels, çà m’intéresse. Parce qu’à part tester leur capacité à comprendre des insultes (la demoiselle virtuelle de FNAC.com, en plus d’être mignonne, est sacrément rancunière !), je n’ai jamais poussé l’expérience et l’analyse pour faire ressortir les pour et les contre de ces systèmes.

Et merci à Vincent pour la relecture !