Étude d'ergonomie : Un journal dont vous êtes le héros - ou comment adapter les journaux aux utilisateurs
13 octobre 2015
Des sites d'actualité souhaitent s'adapter à l'utilisateur, en proposant des journaux que l'utilisateur peut personnaliser. Nous allons étudier si les utilisateurs veulent de cette fonctionnalité… Y aurait-il autre chose d'important à corriger d'abord ?
Pendant mes études, j'ai fait parti d'une équipe qui s'est intéressée à une problématique des sites d'actualité.
Dans cet article, vous verrez le processus étape-par-étape liée à cette étude.
Contexte
Le domaine de la presse est en pleine crise, et les professionnels cherchent à prendre un autre tournant. Plusieurs d'entre eux ont pris contact avec la start-up Reador, spécialisée en Web Sémantique, afin de créer des journaux configurables par l'utilisateur.
Au cours de cette étude, nous allons nous pencher sur cette fonctionnalité : de quoi l'utilisateur a-t-il besoin pour cela, et comment la présenter. Il existe aussi une autre problématique : pourquoi les sites de presse sont-ils de moins en moins visités ?
C'est avec Reador que nous allons réaliser cette étude, à l'issue de laquelle nous allons :
- analyser l'existant ;
- comprendre les utilisateurs vis-à-vis des sites d'actualité ;
- proposer une maquette, qui à la fois présente la fonctionnalité et propose des améliorations de l'existant ;
- présenter une maquette finale, avec nos conclusions sur cette étude.
Étape 1 : Analyser l'existant
Gordon Ramsay sait qu'une salade César grillée est une mauvaise idée, sans jamais l'avoir essayée lui-même. Nous commençons donc par analyser les sites de presse existants, afin d'envisager plusieurs pistes préliminaires.
Nous avons analysé :
- des sites de presse traditionnels, par exemple : Le Monde, L'Express ;
- des sites d'actualité, par exemple : madmoizElle ;
- des sites regroupant l'actualité de sites externes, par exemple : Reador, Google Actualités ;
- et une extension Chrome SNARC, aggrégateur sémantique de news.
Ces sites sont accessibles selon plusieurs médias. Smartphone, ordinateur, tablette, et tout dispositif pouvant aller sur internet. Cette variété de dispositif offre une multiplicité d’interfaces pour ces sites. Notre analyse s’est principalement portée sur le dispositif ordinateur.
Nous avons remarqué que les sites analysés avaient souvent des interfaces chargées. Nous ne pouvons révéler tout le détail de cette étude publiquement. Nous pouvons cependant mentionner quelques points :
- Certaines images placées en Carrousel servent à mettre en avant des articles. Nous les avions interprétées comme des publicités, et donc comme du contenu indésirable. Il semblerait que les utilisateurs aussi soient gênés par les carrousels.
- Certains sites ont plusieurs barres de navigation horizontales, parfois jusqu'à 4, dont au moins la moitié passe complètement inaperçue.
Petit jeu : de toutes ces barres de navigation, quelle est la seule vraiment regardée ?
Nous avons donc des premières impressions. Celles-ci nous permettront de préparer des questions à poser aux utilisateurs à l'étape suivante.
Étape 2 : Comprendre l'utilisateur
La demande initiale est liée à l'ajout d'une nouvelle fonctionnalité. Nous souhaitons savoir ce que les utilisateurs en penseront. Avant cela, il existe une question plus capitale :
Pourquoi les journaux en ligne sont-ils délaissés ?
Manquent-ils de fonctionnalités ? En ont-ils trop ? S'agit-il d'un problème de présentation ? Beaucoup de questions que l'on peut se poser.
Nous allons donc organiser des rencontres avec des utilisateurs :
- D'abord, un utilisateur nous présente comment il accède à des informations.
Nous allons observer l'utilisateur. Son comportement révèle des indices importants pour les étapes suivantes. - Ensuite, nous allons interroger l'utilisateur sur les étapes qu'il vient de réaliser.
Nous avons des sujets pour lesquels notre équipe peut préparer des questions, et d'autres sujets qui apparaîtront pendant la discussion. Il est important de laisser de la place à l'improvisation. - Enfin, nous allons lui demander son avis concernant la personnalisation de son journal. Ceci est une étape délicate, car à simplement demander « pensez-vous que tel élément est bien ? », un réflexe inconscient nous pousse à approuver notre interlocuteur. Les questions doivent être préparées en conséquence.
Nous avons aussi réalisé un sondage, afin d'obtenir l'avis d'utilisateurs que nous ne pouvions pas rencontrer physiquement.
À la suite des entretiens et du sondage, nous avons pu voir différents usages pour chercher de l'information, et surtout différentes raisons qui y mènent :
- certains utilisateurs cherchent des sujets de discussion ;
- d'autres ont besoin d'un type d'information précis, à titre personnel ou professionnel : les résultats du loto, résultats sportifs, l'économie digitale… ;
- ou sont curieux de toute l'activité récente, quelle qu'elle soit ;
- il y a aussi ceux qui recherchent une distraction, et de ce point de vue il y a toujours des actualités à lire ;
Nous avons ainsi pu réaliser un persona représentant notre utilisateur cible, intéressé par la fonctionnalité de journal à la carte. Nous allons maintenant créer des maquettes adaptées à ce persona précis.
Étape 3 : La maquette de la perfection
Le but de l'étape précédente était de voir quels étaient les éléments à ajouter ou supprimer d’un site de presse, tout en y intégrant les fonctionnalités de Reador.
Maintenant, nous allons proposer une interface qui permet à chacun de personnaliser son site de presse. Ainsi, les utilisateurs pourront réaliser un journal correspondant à leur goût, filtrer les articles (ce que l'on veut, ce que l'on ne veut pas, etc.), et partager des articles lus via les sites de réseaux sociaux.
Chaque membre du groupe ayant des solutions différentes aux éléments à ajouter et supprimer, nous avons d'abord réalisé une période d'AB testing destinée aux membres de notre groupe, avec des maquettes réalisées via Axure et des prototypes codés en C# ou HTML/CSS/Javascript, selon ce qui était le plus rapide à réaliser à chaque fois.
Cette première étape interne a permis de développer puis d'écarter beaucoup de propositions, notamment :
- utiliser du drag&drop pour ranger les mots-clés qui nous intéressent ou qu'on souhaite écarter : le drag&drop ne nous a pas semblé assez intuitif pour ce cas d'usage ;
- la fonctionnalité de sauvegarde d'article a été écartée, car tous les utilisateurs utilisent déjà un système extérieur au site pour cela : historique du navigateur, favoris Twitter, favoris du navigateur…
- avoir des filtres "obligatoire", "optionnel" et "interdit" : inspirés de la recherche avancée de Google, les filtres "obligatoire" (AND) et "interdit" (NOT) sont facilement compris, mais le filtre "optionnel" (OR) où l'on met en avant un article dont l'un des mots-clés est "optionnel" est peu évident. Les maquettes sans ce "optionnel" se sont révélées plus claires d'utilisation.
- bien que 40% des utilisateurs sondés disaient utiliser les boutons de partage sur les réseaux sociaux, plus on leur dédiait de place et plus on perdait de vue le but premier du site : lire de l'information.
Ce qui va sans dire, va encore mieux en le disant. © Charles-Maurice, prince de Périgord
Après ces périodes d'essai en interne, il restait encore des questions sans réponse tranchée. Il est donc temps de demander à nouveau à l'utilisateur son avis. Nous avons créé deux maquettes, chacune présentant une réponse différente aux questions en suspend : une en C# et une en HTML/CSS/Javascript. Nous avons ensuite trouvé des utilisateurs correspondant au persona réalisé précédemment, pour obtenir leur avis.
Étape 4 : C'est la maquette finale
On pourrait répéter à l'infini ce processus de test utilisateur et de maquettage, chaque test utilisateur permettant de soulever de nouvelles questions. Il vient un moment où la quantité de retours d'utilisateurs est suffisante pour un résultat exploitable. Après les tests utilisateurs précédents sur nos maquettes, nous avons pu combiner le meilleur des deux maquettes, pour nous retrouver avec une maquette finale satisfaisante.
Page d'accueil
Notre maquette représente un site d'actualité qui va à l'essentiel : des thèmes généraux, un nuage de mots-clés filtrés ou à filtrer, une zone de recherche permettant de filtrer d'autres mots-clés à la demande, et les actualités.
Nous avons gardé une barre de navigation, car les utilisateurs sont habitués à sa présence. Cette barre de navigation propose en fait des thèmes : si on sélectionne le thème Sport, le mot-clé Sport est ajouté au nuage avec le filtre "Obligatoire". Cela permet de faire la transition entre l'interface dont l'utilisateur a l'habitude, et la nouvelle fonctionnalité.
Après les tests utilisateurs, nous avons remarqué à quel point il était important de leur offrir un site qui soit 100% utilisable au clic uniquement. Certaines fonctionnalités peuvent nécessiter une entrée texte, via le clavier, mais cette fonctionnalité doit rester accessible (même partiellement) via la souris. Ceci est un point à vérifier lors de l’intégration de la maquette.
Filtrage "Sport : Obligatoire" activé
En rendant le mot-clé Sport obligatoire, on ne voit plus que des actualités en rapport avec la demande de l'utilisateur.
On peut aussi ajouter des mots-clés au nuage via le champ de recherche à droite du nuage, où l'utilisateur choisit explicitement quel filtre utiliser avec ce mot-clé. Enfin, on peut passer la souris par-dessus un mot du nuage de mots, comme on peut le voir sur la prochaine image.
L'avantage du nuage de mots, c'est qu'il permet d'afficher beaucoup de mots à la fois, dans un espace visuel plus réduit. Il est aussi possible de personnaliser le nuage de mots par rapport au design du site : certains ont des nuages de mots en 3D, d'autres ont conçu des designs uniques.
Trois états différents pour un mot-clé
L'apparence change en fonction de si le mot-clé n'est pas utilisé, possède le filtre Obligatoire ou le filtre Interdit. Selon son état, lorsqu'on passe la souris par-dessus un mot, on peut choisir d'appliquer le filtre Obligatoire, le filtre Interdit, ou retirer le filtre en cours. L'affichage par infobulle permet de présenter ce choix à l'utilisateur sans avoir à prévoir d'espace visuel dédié, et c'est comme ça qu'on peut présenter plusieurs mots-clés sous la forme d'un nuage de mots.
Consultation d'un article
Pendant les tests, certains utilisateurs qui commençaient à lire un article devenaient perdus s'ils n'avaient pas de header surchargés de barres de navigation, comme ce qui se fait habituellement. Nous avions le choix entre respecter les habitudes de l'utilisateur et surcharger son interface, ou bien faire apparaître l'article de journal en pop-in, afin de garder le contexte de l'utilisateur encore visible en arrière-plan, tout en permettant de se concentrer uniquement sur l'article à lire. Ce comportement a été inspiré de Facebook, et de plus en plus de sites l'utilisent également.
Pour quitter la lecture de l'article, tous les moyens sont possibles : l'action Retour du navigateur, la croix en haut à droite de l'article, cliquer sur la zone blanchie autour de l'article, ou le bouton Échap du clavier. Ça ne coûte pas grand-chose de les prendre en compte, et permet à tous les utilisateurs d'utiliser le geste qui lui vient à l'esprit.
La contribution de Reador est de déterminer des mots-clés pour un article donné, mots-clés que nous affichons à la fin de l'actualité. Ceux que l'utilisateur a déjà manipulés via des filtres sont affichés en tant que tel. Tout comme avec le nuage de mots, on peut manipuler les filtres avec les mots-clés affichés.
Notre étude a montré que les utilisateurs ne sont pas rebutés par une absence de fonctionnalité, mais par une abondance de celles-ci et la présence d'informations parasites. Si le site doit garder des publicités, il faut que celles-ci soient le moins intrusives possible. La publicité étant non désirée par les utilisateurs, cette maquette serait plus adaptée pour un modèle d'abonnement payant.
C’est ce que nous avons remarqué lors des ajouts de mots-clés. Le nuage de mots permet à l’utilisateur d’avoir accès aux recherches souhaitées, sans avec à taper un texte complet dans un barre de recherche. Ce nuage de suggestion doit rester clair, et essayer de suivre le cheminement logique de l’utilisateur. C’est à dire, porter un soin particulier au changement des mots dans le nuage, de façon à ce qu’ils soient en accord avec le thème, tout en offrant la possibilité soit de l’élargir, soit de le diminuer.
Concernant l'aspect général de l'interface, l'utilisateur semble adapté aux sites de presse existants. Il n'est nul besoin de revoir l'affichage existant pour regagner des utilisateurs. En revanche, il faut que l'ajout de fonctionnalités se fasse sans modification importante des habitudes de l'utilisateur.
Le nuage de mots-clés, contenant des suggestions, semble assez clair aux utilisateurs pour être vu comme un moyen de recherche. Une indication texte sommaire permettra de rester clair dans l’utilité de ce nuage de suggestion.
Épilogue
Cette étude a été l'occasion d'appliquer une démarche IHM complète, à la fois pour pousser la mise en place d'une fonctionnalité, et aussi pour identifier des améliorations possibles. Les rencontres avec les utilisateurs ont été l'occasion de beaucoup apprendre, aussi bien des habitudes d'utilisation des sites d'actualité, que sur le plan humain.
Bien que nous n'ayons eu aucun retour sur l'utilisation de cette étude, nous avons pu remarquer que Le Monde a ajouté un mode de lecture zen quelques mois après cette étude, qui permet d'afficher un article et seulement un article, allégeant l'interface de toute la surcharge visuelle. Ce mode zen ne possède aucune publicité, comme suggéré plus haut, et est accessible pour les abonnés. Coïncidence ? … Qui sait ?
Classé dans : Non classé