Comment aider les utilisateurs à se repérer dans la diversité des informations contenues sur une page web ?

Psychologues, chercheurs en ergonomie cognitive et designer ont réfléchi à la manière d’améliorer la présentation des informations sur l’écran. Nous pouvons nous appuyer sur leurs recommandations concernant l’ergonomie de la lecture pour sélectionner et produire des contenus de qualité, accessibles pour tous.

L’ergonomie de la lecture recouvre différents aspects que nous allons aborder dans ce module : d’abord l’utilisabilité de l’interface, c’est à dire la facilité d’apprentissage et d’utilisation du système ; puis la mise en forme du texte (typographie) ; enfin, des aspects liés au contenus, notamment les facteurs visuels et sémantiques, qui facilitent la détection de l’information.

Ce module comprend deux activités.

Analysez l'ergonomie de l'application tablette du Journal Le Monde

L’application du Journal Le Monde regroupe trois interfaces de lecture, le site d’information en continu et le journal, au format pdf ou en mode tactile. La première est gratuite, les deux autres ne sont accessibles qu’aux abonnés du journal Le Monde.

site d'information en continu du journal Le Monde

avant dernière version de l’interface

application Le Monde

dernière version de l’interface

 

A l’aide de la grille d’analyse, analysez l’ergonomie de l’interface du site d’information en continu. Appuyez-vous sur les documents présentés dans l’onglet Ressources. Rédigez vos réponses dans le blog ci-dessous.

 Grille d’analyse

 

 

 

 

 

Visualisez une page d'accueil en Treemap

Perception visuo-spatialeDessinez à la main une « visualisation en Treemap » de la page d’accueil de ces trois sites, Ludovia magazine, Liminaire, L’Internaute. Selon vous, l’organisation des blocs d’information permet-il un bon repérage de l’information ? Rendez-vous sur le blog de l’activité. 

Treemap est un mode de représentation visuel habituellement employé pour afficher des informations hiérarchiques. On répartit l’espace de représentation (l’écran ou le papier) entre les différentes entités de l’arborescence et on associe à chacune d’entre elles un rectangle dont la taille et la couleur reflète des attributs, tels que la récence ou l’importance d’une information.

BACCINO, Thierry, DRAI-ZERBIB, Véronique. L’usage des tablettes numériques : évaluation ergonomique

L’Internaute est un site d’information en ligne, Liminaire est un blog littéraire créé par Pierre Ménard, auteur, Ludomag, un « media on line » sur le numérique éducatif.

 Accéder à la page d’accueil de L’Internaute

 Accéder à la page d’accueil de Liminaire 

  Accéder à la page d’accueil de Ludomag

Blog, L'application du journal Le Monde

  • Analyse Chantal

    By on 30 juin 2015

    Analyse Chantal

    Interface

    • Intéressons-nous d’abord à l’interface du site d’information en continu. Comment circule-t-on dans l’application ? Y a-t-il un menu ?
      Où est-il positionné ?

    L’Interface du Monde.fr est une page web à fenêtres multiples.

    Circulation :   – sur un ordinateur, la circulation est verticale pour la lecture, et l’accès aux informations se fait en cliquant sur les onglets, liens hyperlinks.

    • sur la tablette, même système mais on utilise le doigt pour dérouler la page et clicquer

     

    Menu : – le menu de la page est situé en haut de page web et est  presenté sous la forme d’une barre d’onglets. Ces onglets correspondent ~ aux Rubriques du journal papier. De même pour les sous-menus correspondants aux rubriques de chaque Rubrique

    Gestuelle

    • Quels sont les gestes sollicités pour la navigation ? Sont-ils intuitifs ?

    Voir « circulation »  au –dessus, donc gestuelle intuitive

    L’organisation des informations sur l’écran

    • Décrivez la « carte » ou  « page-écran » (Jiminy Panoz) de la page d’accueil de la rubrique International ? Qu’en pensez-vous en termes d’ergonomie ?

    La page d’acceuil de cette rubrique Internationale est très effective car chaque article est introduit par une image couleur et une légende explicative courte. L’ ensemble est clair et lisible, intuitif

    • Combien y a-t-il de « cartes » différentes pour les rubriques ?

    La page est découpée en 3 colonnes  et l’information le plus « importante » du moment est introduite sur 2 colonnes. Les autres infos principales  sont sur une seule colonne. 7  articles sont ainsi présentés par page.

    Les autres articles de cette rubrique sont accessibles en fil de la page. Certains correspondent à des articles  de compte-rendu, d’entretien, de recits, de blogs ; d’autres sont classés par région géographique, mais toujours avec le découpage des 3 colonnes

    L’importance de la publicité : plusieurs encarts publicitaires encadrent la page en haut, à droite  et en bas. On ne peut leur échaper

    • Quelle est l’importance de l’image, de la vidéo ? Comment sont-elles intégrées et positionnées par rapport au texte ?

    Les images sont des accroches pour les articles. La majorité des articles est accompagnée d’une image.

    Quand il sagit d’une vidéo, c’est indiqué clairement avec le logo de la touche PLAY

    • Quels sont les modes de lecture sollicités, lecture horizontale/lecture verticale ? Où ? Pourquoi ?

     

    On passe d’articles en articles par une lecture horizontale ou verticlae, mais dans chaque article la lecture se fait de maniere verticale. Cela permet au lecteur une grande liberté dans son choix de lecture. Il navigue avec les yeux  au gres des images puis s’arrète ou non sur un article pour le lire.

    • Observez  les recompositions de texte (résumé de l’article/texte intégral)

    Le résumé de l’article sous une image (le plus souvent) doit insister la lecture à aller plus loin dans sa lecture et donc de cliquer sur l’image pour lire le texte intégral.

    Structure d’un article

    • Evaluez la « lisibilité », et la « readability » (Thibault Mahé) du contenu. Choix des polices, taille de corps, interlignage, hiérarchisation visuelle du contenu…

    La cohérence de chaque page et de chaque article est rassurante pour le lecteur.

    Une application originale ?

    • Cette application se démarque-t-elle d’autres applications de presse en ligne ? Est-ce que vous pourriez synthétiser les choix éditoriaux en matière d’ergonomie de la lecture ?

    Le Monde.fr a choisi de faire naviguer ses lecteurs avec une accroche très iconigraphique. Les liens vers les articles complets sont associés à ses images ou aux légendes et indiquent implicitement au lecteur qu’il aura de plus amples détails en allant plus loin.

    Comme chaque rubrique est organisée de la même manière, le lecteur peut s’y reytrouver facilement être fidéliser à ce nouveau format de lecture de  l’information

    2
    Formation sur la lecture numérique
  • L’application du journal Le Monde

    By on 4 mai 2015

    Est-ce que vous pourriez synthétiser les choix éditoriaux en matière d’ergonomie de la lecture après avoir rempli la grille d’analyse ? Cette application se démarque-t-elle d’autres applications de presse en ligne ?

    2
    Formation sur la lecture numérique

L'usage des tablettes numériques : évaluation ergonomique

Lecture avec tablette Thierry Baccino et Valérie Drai-Zerbib, décrivent les critères qui permettent d’apprécier l’utilisabilité d’un support, puis les propriétés qui confortent l’utilisabilité d’une interface :

  • « l’intuitivité perceptive » de l’organisation des informations sur l’écran, avec deux notions clés, « le principe de similarité » et la notion « d’affordance »;
  • et « l’intuitivité cognitive », « qui renvoie aux actions/situations connues de l’utilisateur.

BACCINO, Thierry, DRAI-ZERBIB, Valérie. L’Usage des tablettes numériques : évaluation ergonomique

La discrimination visuelle et sémantique : pour la conception ergonomique du contenu de sites web

Gestalt : principes de compositionL’objectif de l’étude de Laure Leger, Charles Tijus et  Thierry Baccino est de déterminer les facteurs visuels et sémantiques qui permettent à l’utilisateur de parcourir le contenu d’une page avec le plus de succès possible, soit pour identifier rapidement l’information recherchée, soit pour s’apercevoir qu’elle ne s’y trouve pas. A partir d’études expérimentales, ils montrent l’impact des facteurs visuels que sont l’agencement spatial des mots à l’écran et le nombre de mots qui présentent une propriété visuelle particulière, mais aussi l’impact des facteurs sémantiques que sont la typicalité du mot cible recherché et la distance sémantique entre le mot cible et les mots qui l’entourent.

La conclusion (p.104) formule des recommandations pour l’organisation des éléments à l’écran pour la conception de sites web, et des recommandations d’ordre perceptif et sémantique.

LÉGER, Laure, TIJUS, Charles, BACCINO, Thierry. La Discrimination visuelle et sémantique : pour la conception ergonomique du contenu des sites web

 

De l'usage des tableaux numériques interactifs

Le laboratoire LUTIN, à la demande du Ministère de l’Education nationale et du Ministère de l’Enseignement Supérieur et de la Recherche, réalise une étude qui porte sur trois dimensions fondamentales de l’activité de lecture, la visibilité, la lisibilité, la compréhension textuelle. Les recommandations pour les Tableaux Numériques Interactifs, concernant ces trois dimensions peuvent être appliquées à d’autres situations de lecture, sur d’autres supports (tablette, PC…); elles sont récapitulées dans l’annexe 1.

LUTIN. La lecture sur tableaux numériques interactifs (TNI)

Design du livre numérique

Design du livre numériqueJiminy Panoz est auteur, développeur et designer indépendant. Ses livres et son blog développent une réflexion très riche sur le design de l’ebook.
Si le livre numérique est un flux, comment gérer la pagination de ce flux, sans reprendre les techniques de mises en page papier et sans dérouter le lecteur ? Son livre Design du livre numérique (Walrus) tente de répondre à cette problématique.
L’écran doit être pensé comme une carte où l’on positionne des contenus en respectant des critères d’intégrité, de cohérence ou de logique. Ces différentes zones de la carte sont à la fois différenciées et tenues ensemble par des espaces blancs.
Le contenu doit être considéré comme un ensemble de blocs, et mettre en page consiste alors à disposer ces blocs de manière hiérarchique et harmonieuse.
Le rythme est également central dans l’organisation du contenu :

« Aussi, nous considérons le flux comme une partition dont le designer est le chef d’orchestre : il doit gérer le tempo (rythme vertical et horizontal), recourir à des pauses pour souligner l’importance de l’information (espace blanc avant une carte) et recourir à des montées en puissance (citation faisant office de point d’ancrage dans l’articulation du texte). Le plus grand risque est bien évidemment de trop morceler le contenu et d’en rendre la lecture pénible. » (chapitre Le livre numérique est un flux paginé)

Pour Jiminy Panoz, le livre numérique doit s’inspirer du web design pour se renouveler. Le chapitre sur Les apps-magazine nous éclaire sur les choix qu’il préconise en matière de composition et d’interactivité. L’échec de nombreux éditeurs de magazines numériques auprès des lecteurs est patent; pourquoi ? Le magazine papier est transposé en magazine numérique, sans que les contenus et la mise en page soient modifiés. Le magazine est allourdi de nombreux contenus multimédia et d’une forte interactivité avec laquelle le lecteur aura du mal à se familiariser . Pourtant d’autres éditeurs, comme TRVL ou The Magazine (Marco Arment) optent pour un autre modèle.

Lire le chapitre sur les apps-magazine

PANOZ, Jiminy. Design du livre numérique. Ed. Walrus, 2013

Design et architecture de l'ebook

Design et architecture de l'ebook Dans cet ouvrage, entre essai et manuel, Thibault Mahé met en lumière les enjeux de la lecture numérique :

« Déterminer ces nouvelles conventions en fonction des expériences des utilisateurs : là est peut-être l’essentiel de l’ebook designer. Organiser, structurer, architecturer le texte. »

Et ce travail de l’ebook designer s’appuie en particulier sur l’art de la typographie; la  « macrotypographie », c’est à dire le formatage, la mise en forme et le classement du texte, et la « microtypographie », soit le travail sur la forme de la lettre.

Tout est passionnant dans cet ouvrage. Pour les activités, je vous recommande en particulier la lecture des chapitres Typographie de l’ebook et Des éléments d’Ebook Design.

 Téléchargez le livre au format epub

MAHÉ, Thibault. Design et architecture de l’ebook. 2014

Ressources complémentaires

 Lire sur le web, une révolution cognitive

Thierry Baccino est professeur de psychologie cognitive des technologies numériques à l’université Paris 8, directeur scientifique du Laboratoire LUTIN (Laboratoire des usages en technologie Numérique). Découvrez son article p. 53

Touch app

L’article est déjà un peu ancien, 2011. Mais en dégageant trois modèles de production, Web App, Touch App, Paper App, qui renvoient à trois modèles ergonomiques, il constitue une excellente introduction au langage des applications.

TABLETTE TACTILE.NET. Design et ergonomie des applications presse sur iPad

 La nouvelle application du Monde est-elle un échec ?

Publié le 20 juin 2014, peu après la première grosse mise à jour opérée par le groupe de presse, cet article du Journal du net relaie les vives critiques d’une partie des lecteurs. Cet article vous permettra de comprendre le projet initial et les modifications qui ont été apportées depuis.

JOURNAL DU NET. La nouvelle application du Monde est-elle un échec ?

Psychologues cognitifs et designers mettent au centre de leurs préoccupations l’expérience utilisateur. Ils préconisent des interfaces et une navigation qui ne nécessitent pas un long apprentissage et s’appuient au maximum sur les habitudes qu’aura acquises le lecteur sur l’interface générique de son navigateur, de sa tablette ou de son smartphone.

Recommandations pour l’organisation des contenus :

On ne pense plus page, mais carte et architecture de blocs d’information.

L’organisation des contenus, pour faciliter leur compréhension rapide, doit respecter des lois perceptives, développées par les psychologues gestaltistes, et des règles de typographie, liées à la lisibilité et à la hiérarchisation visuelle du contenu.

La recherche d’une plus grande ergonomie des contenus contribue à améliorer leur accessibilité, pour tous, et en particulier pour des personnes qui rencontrent des difficultés de lecture. On comprend donc très bien l’intérêt de cette démarche dans le cadre d’apprentissages personnalisés.

 

 

Blog, Visualisation en Treemap

  • Visualisation en treemap

    By on 4 mai 2015

    Ludovia magazine, Liminaire, L’Internaute. Selon vous l’organisation des blocs d’information permet-il un bon repérage de l’information ?

    1
    Formation sur la lecture numérique