UX/UI design
23/03/2020
Tour d'horizon des FAQs et centres d'aide (UX Design) - Comparatif et recommandations
La situation est inédite et délicate pour tou·te·s. Le confinement, imposé pour lutter contre la pandémie du Covid-19, nourrit toutes les anxiétés. Notre équipe, en charge des interfaces, a dû répondre à plusieurs demandes de conception de FAQ de la part de nos clients. Nous publions ici les résultats de nos premières analyses et proposons un panorama des différents modèles de FAQ disponibles... Accompagné de nos recommandations. Bon courage à nous tou·tes·s !
1 - Twitter : la FAQ"classique"
Le centre d'assistance de Twitter se présente comme une FAQ avec des questions triées par catégories et sous-catégories. Notre équipe a trouvé la navigation sur le côté intéressante - notamment le changement de couleurs pour indiquer à l'utilisateur où il se trouve. Nous avons apprécié le bouton "back to top" qui apparait lorsque nous faisons défiler la page. Nous sommes plus sceptiques avec le moteur de recherche sans auto-complétion et le choix d'avoir une page par catégorie / réponse qui nous oblige à revenir en arrière.
Ce qu'on aime le + :
- Les questions groupées par catégories permettant de trouver facilement ce que l'on cherche ;
- Les grandes catégories sur le côté qui suivent le défilement de la page - Repères dans la FAQ ;
- Les raccourcis vers les questions fréquentes ;
- Le bouton "back to top" lorsque le scroll dépasse un certain seuil sur la page ;
- Le changement de couleurs pour indiquer la catégorie liée ;
- Le système d'ancre pour naviguer facilement entre les catégories.
Ce qu'on aime le - :
- Le nombre de questions / catégories un peu trop important ;
- Une page par réponse qui oblige à revenir en arrière pour retrouver les catégories ;
- Le moteur de recherche sans auto-complétion et donc peu efficace.
2 - Youtube : la FAQ "épurée"
support.google.com/youtube/?hl=en-GB#topic=9257498
Le centre d'aide google présente une page d'accueil claire et accessible, un moteur de recherche efficace, des catégories et sous-catégories à dérouler. Dommage que les pages internes ne soient pas aussi réussies et que l'on se perde rapidement en navigant entre les catégories et sous-catégories...
Ce qu'on aime le + :
- Le moteur de recherche et son auto-complétion ;
- Le design de l'interface de la page d'accueil, simple et efficace ;
- Le nombre de catégories sur la page d'accueil ;
- Les barres (repères) déroulantes pour afficher les sous-catégories et le fond bleu pour soulager la quantité d'information ;
- La partie “communauté” / forum consacré à l'entreaide ;
- Le sous-menu avec les catégories dans les pages internes pour naviguer d'une catégorie à une autre.
Ce qu'on aime le - :
- Le design des pages internes, moins efficace et structuré ;
- Le nombre trop important de catégories / sous-catégories / questions qui contribue à nous égarer.
3 - Mcdonalds : la FAQ format "vignette"
mcdonalds.com/gb/en-gb/help/faq.html
McDonalds a innové en présentant sa FAQ sous forme de vignettes. L'idée est originale. Nous apprécions l'affichage direct de la réponse à une question, ainsi que les filtres pour trier les catégories. Par contre, on s'éloigne quand même du format "FAQ" auquel nous sommes habitués. Le choix des vignettes, dont le format est un peu imposant, gêne notre expérience.
Ce qu'on aime le + :
- Le moteur de recherche avec auto-complétion ;
- Le concept original des vignettes ;
- Le système de filtre par catégories ;
- L'affichage des réponses sur la vignette - l'accès direct à la réponse.
Ce qu'on aime le - :
- Paradoxallement, le format choisi alourdit la page et réduit le nombre d'informations disponible à l'oeil ;
- Le système de filtre par catégories qui cache les catégories. Les questions se retrouvent mélangées lorsque l'on séléctionne plusieurs catégories.
4 - Whatsapp: notre coup de 
Voici la nouvelle référence pour notre équipe. On aime le design simple et efficace, la facilité d'utilisation de cette FAQ et son moteur de recherche performant, les questions rangées par catégories et surtout le nombre de catégories limité ainsi que la mise en avant des questions fréquentes en page d'accueil. Bref, nous avons quasiment tout aimé ! Seul bémol, le fait d'avoir une page par question et donc de ne pas pouvoir naviguer directement entre les questions / catégories directement.
Ce qu'on aime le + :
- Le moteur de recherche avec auto-complétion très performant pour trouver rapidement sa question ;
- Le design simple et efficace ;
- L'ordonnancement des questions, rangées par catégories et leur nombre réduit (8 en page d'accueil);
- La mise en avant des questions fréquentes par catégorie sur la page d'accueil pour accélérer l'expérience ;
- Les barres déroulantes et la couleur de fond pour repérer la navigation et accentuer l'accessibilité aux informations.
Ce qu'on aime le - :
- La mise à disposition des réponses sur des pages qui empêche de naviguer entre les catégories.
5 - UxBeginner : la FAQ "one page"
Enfin une FAQ "one page" ! Ce format permet de disposer de toutes les informations sur une seule page sans avoir besoin de naviguer entre les questions, de revenir en arrière etc. Le système d'ancre sur les catégorie et de box déroulantes pour afficher les réponses aux questions permettent à cette FAQ d'avoir toutes les réponses "au même endroit". Dommage qu'il n'y ait pas de moteur de recherche et que les catégories ne soient pas "stickés" pour suivre la navigation sans être obligé de revenir en haut pour les retrouver.
Ce qu'on aime le + :
- La catégorisation et le nombre réduit des questions (4 seulement) ;
- Le regroupement de toutes les informations sur une seule page
- Le système de box déroulante pour afficher les réponses aux questions et ne pas surcharger la page.
Ce qu'on aime le - :
- L'absence de moteur de recherche ;
- Les catégories qui ne suivent pas le scroll, ce qui oblige à remonter en haut de la page ou de la faire défiler pour les retrouver.
6 - On fait quoi pour le climat : la FAQ "site web"
On triche un peu sur celle-ci car c'est un site qu'on aime beaucoup chez bluedrop.fr (surtout Marion) et qui est un peu construit "comme une FAQ". Son moteur de recherche et sa navigation sur le latérale sont, entre autres, ses grands atouts. Par contre, pourquoi ne pas avoir mis les catégories dans la barre latérale ?
Ce qu'on aime le + :
- Le superbe design du site et des animations / interactions ;
- Le moteur de recherche avec auto-complétion ;
- La mise en avant des questions les plus fréquentes en page d'accueil ;
- Les questions organisées par catégories ;
- La navigation latéraile qui permet de passer d'une question à une autre facilement.
Ce qu'on aime le - :
- L'impossibilité de passer d'une catégorie à une autre sans repasser par l'accueil.
Pour conclure, nos recommandations pour une bonne FAQ
Grâce à ce comparatif, nous avons pu dégager des bonnes pratiques pour concevoir une FAQ efficace qui permette à l’utilisateur d’obtenir rapidement et facilement des réponses à ses questions. L'expérience doit être rapide. Nos recommandations se basent notamment sur des principes issus de la psychologie que vous pouvez retrouver dans nos articles
"Les lois de la Gestalt appliquées au Design" et "La psychologie appliquée au design".
- Notre première recommandation est de mettre en place un moteur de recherche, si possible avec une fonctionnalité d'auto-complétion, pour la FAQ (surtout si votre FAQ a beaucoup de contenu).
- Notre seconde recommandation est de respecter, si possible, la loi de Jakob qui encourage d'adapter les outils aux habitudes de navigation de l’utilisateur (problème sur la FAQ de McDonald). Si l'innovation est intéressante, l'interface et le fonctionnement de votre FAQ doit tout de même utiliser les codes répandus.
- Pour continuer, nous conseillons de regrouper les questions par catégories surtout si la FAQ comporte beaucoup de questions (attention de bien nommer les catégories). On sait que plus l’utilisateur a de choix, plus son temps de réponse sera important (loi de Hick). Nous conseillons également de ne pas multiplier le nombre de catégories et de réponses par catégorie (loi de Miller qui souligne la capacité limitée de notre cerveau à retenir plus de 7 éléments).
- Après nos recherches, nous avons également apprécié les FAQ “One page” qui permettent de naviguer facilement et rapidement entre les catégories et questions. Nous préconisons donc de mettre la FAQ sur une page avec un menu / sous-menu stickés (loi de Fitts). Enfin, un petit changement de couleurs dans le menu pour savoir dans quelle catégorie l’utilisateur se trouve et on commence à avoir une FAQ efficace (effet Von Restorff).
- Dernière recommandation, afficher les questions fréquentes dès le début de la FAQ. Cela peut faire gagner énormément de temps et évite à l’utilisateur les efforts pour parcourir la FAQ à la recherche de sa question.
Voilà pour nos recommandations qui ne sont évidemment pas universelles et qui doivent être adaptées à chaque projet en fonction des objectifs, des besoins des utilisateurs etc.
Voici l'illustration de notre démonstration :
Et vous, c’est quoi pour vous une bonne FAQ ? quelles sont vos références ?
N’hésitez pas à nous laisser un petit commentaire pour en discuter ! :)
Alexandre Pons - UX Designer
