Dans le précédent billet, j’ai exposé l’élément central du futur site internet TvPatMat: la notice de présentation d’une vidéo. Ce billet va expliquer comment la notice a évolué depuis sa première version au regard des interrogations qui ont émergé pendant les tests.

1ère version de la notice

Cette première version respecte les souhaits que j’avais émis et exposés précédemment.

Sur cette base, j’ai effectué des tests et recueilli les avis de collègues de mon laboratoire. Ce qui m’a amené à repenser l’organisation de la notice au regard des plusieurs problèmes soulevés.

L’articulation vidéo/texte

Je me suis demandé comment les visiteurs allaient consommer les différents contenus de la notice. S’ils sont sur la notice, c’est qu’ils ont envie de voir la vidéo ; toutes les autres sections du site renvoient vers les vidéos et incitent à les regarder. Mais comment vont-ils se comporter? Vont-ils regarder intégralement la vidéo avant de lire le texte que j’ai rédigé afin de les aider à la comprendre? Vont-il lancer la vidéo et en même temps qu’ils la regardent lire le texte?

Je n’ai pas la réponse à mon interrogation. Je ne sais pas comment les visiteurs vont organiser leur consommation des contenus sur une notice, principalement parce que je ne connais pas les comportements des utilisateurs en ligne. Et de toute manière, il y en a certainement des comportements différents selon les utilisateurs.
D’un point de vue d’organisation sur la page, il est vite apparu qu’il serait complexe de mettre en regard vidéo et texte de manière horizontale. Cela aurait été possible avec une très courte description, mais pas avec la taille que je m’étais fixée. La décision de placer le texte sous la vidéo a aussi l’avantage d’aérer la page, même si elle oblige à scroller pour passer de l’un à l’autre, réduisant peut-être la possibilité de voir et lire en même temps, mais qui sait.

Le problème de la couleur

Dans mon esprit, l’encart jaune dans la colonne de droite était l’annexe au texte qui s’étale sur plus de la moitié gauche de la page sous le titre “description”. Or on m’a signifié que le jaune attirait l’attention et donnait le sentiment que c’est cet encart qui était important. Pour rappel, ce choix du jaune-orangé s’explique par la charte graphique que j’ai établie.

A l’inverse, pas de problème avec l’encart gris qui, du fait de sa couleur et de sa position en bas de la page, ne risque pas d’être pris pour l’élément central. J’ai ainsi compris que la couleur contribuait à la hiérarchisation des contenus dans une page.
J’ai bien conscience que tous les visiteurs/utilisateurs/lecteurs (à vous de décider) ne liront pas l’intégralité du site, que beaucoup picoreront. Mais, s’il y a bien une section que je veux qu’ils lisent, c’est la section “description”. Ainsi que je l’ai exprimé à des collègues, “c’est ça que je veux que les lecteurs lisent”. C’est là que résident les éléments les plus importants pour comprendre le sujet (le patrimoine, son histoire, ses évolutions).
A la lumière de ces retours, j’ai donc procédé à des modifications pour que les visiteurs soient incités à lire prioritairement la section centrale de la page (il va de soi que ma méthode est totalement empirique, n’étant pas formé à ces questions, et pour rappel il s’agit du premier site web que je réalise). S’ils ont au moins lu cette section, alors que j’estime qu’ils ont lu l’essentiel.

La répartition spatiale des contenus

Ce problème a émergé de pair avec le premier. Dans la première version de la notice que j’avais établie, l’organisation présentait des problèmes de lisibilité.

D’une part, mettre sur le même plan horizontal la description des vidéos et mes commentaires engendre un effet très négatif: le texte est trop présent et écrasant. Or il est fondamental de ne pas décourager le lecteur par d’énormes pavés de texte (c’est l’une des raisons pour lesquelles je me suis imposé une limite de signes).
D’autre part, j’avais placé dans la section inférieure des pages les sections que je considérais secondaires : celles qui permettent de naviguer à l’intérieur du site, les renvoi vers d’autres pages et des petits compléments. Or il en résultait un problème de lisibilité, une accumulation de petits éléments mal arrangés. Ce qui, là aussi, nuisait à la lisibilité et risquait d’amoindrir l’intérêt du lecteur, qui serait moins incité à dérouler la page dans sa totalité vers le bas.

A la lumière de ces problèmes, j’ai procédé à des modifications qui ont permis de mettre au point un nouveau template des notices. Les sections sont toutes présentes, mais leur organisation a été revue.

2e version de la notice

Mieux signaler la hiérarchie des contenus

La section principale est maintenant mieux identifiée: la police est plus grosse et la section s’étale sur une plus large portion de la page, ces deux modification améliorant en outre le confort de lecture.
Mes commentaires sont désormais dans un encart gris clair et non plus jaune, et positionnés juste en dessous de la section principale; de cette façon elle apparait bien secondaire en ordre d’importance.
J’envisage aussi (si j’en ai le temps) d’intégrer des petites icônes qui pourront aussi contribuer à mieux indiquer l’importance des sections.

Une colonne à droite avec les sections secondaires

Un collègue m’a conseillé de répartir les liens (internes et externes) dans une colonne à droite à la façon des suggestions de lecture YouTube ou les renvois vers d’autres articles sur les sites de presse en ligne. J’ai trouvé cette remarque très pertinente: en effet, autant s’inspirer des sites existants afin de ne pas perturber l’utilisateur dans ses habitudes de navigation.
Cette modification permettait d’autant plus facilement de réduire la largeur de cette colonne pour laisser plus de place aux sections les plus importantes, à gauche.

Des sections au titre plus explicites et accrocheurs

Ceci doit contribuer à résoudre plusieurs problèmes: encourager à la lecture, mieux identifier les contenus et mieux signaler leur hiérarchisation.

Tous ces changements permettront, je l’espère, de susciter davantage l’intérêt du lecteur, de le retenir pour qu’il voie les différents contenus proposés dans la notice, et surtout de lire ce que j’ai envie qu’ils lisent en priorité.

Comme d’habitude, la section commentaire vous est ouverte et je lirai avec intérêt les avis et retours d’expérience dans le design d’un site.

---

---