Le Monde.frBenchmark

Quel but pour notre analyse ?• Permettre de repérer et d’allier

esthétique, ergonomique et accessibilité dans un site d’information.

– Repérer les conventions (format publicitaire, navigation principale …)

– S’inspirer des innovations technologique des concurrents (intégrations de vidéos, audio, podcast…)

– Penser un espace attractif qui facilite la recherche de l’information (slides, moteur de recherche, icones…).

Comment allons nous procéder?• Prendre un échantillon de concurrents

divers mais restreints.

• Repérer en chacun de ces concurrents les éléments qui nous semblent pertinents ou novateurs.

• Résumez les conventions fonctionnalités que pourrait intégrer Lemonde.fr

• Emettre des hypothèse en matière d’ergonomie.

Les conventions : Les espaces publicitaires• La place de la publicité relève plus de la

convention.

Publicité prise sur libération.fr

- Le bandeau publicitaire est par exemple placé en entête soit au dessus du graphisme identitaire du site, soit au dessous.

- Bien que cette place soit discutable (car elle dénature l’homogénéité de la page) elle semble être adoptée par une majorité de site informatifs de type presse en ligne.

• Une publicité positionnée sur le côté droit.

Capture prise sur 20minutes.fr

- Ce type de publicité est également utilisé de manière conventionnelle plutôt sur le côté droit et le centre-droit de la page.

- Cette disposition passe plus inaperçu dans la page que le bandeau publicitaire. Le carré publicitaire se fond mieux au milieu des autres espaces destinés à l’information.

Les conventions : La navigation• La navigation principalement utilisée est

une barre horizontale située très souvent en dessous du logo du site. Ce type de barre semble être acceptée par bon nombres de sites.

Navigation des sites Libération.fr et 20minutes.fr.

- Ce type de navigation est très pertinente pour un modèle occidental car la lecture s’effectue de gauche à droite puis ligne après ligne lorsque le menu est déroulant.

• Un type de navigation très pertinente est celle du site Elpais.com car elle propose une barre principale de menus et ses sous menus sur une barre secondaire.

- La lecture s’effectue également de gauche a droite et correspond bien aux attentes d’une lecture horizontale. Enfin on peut noter la présence d’un espace de recherche directement intégrée à la barre de navigation.

- Voici un mode de navigation verticale qui nous est proposé par le Nytimes.com, ce type de navigation positionné sur le côté gauche de la page n’est pas immédiatement visible, ce qui peut faire perdre de la pertinence à ce menu.

- En revanche une fois le menu découvert, l’arborescence de l’information y est claire et concise.

C’est pourquoi il serait préférable d’intégrer ce type d’élément en tant que widget installable ou déroulant afin qu’il ne soit pas un obstacle à la recherche d’information.

Une navigation chronologique grâce à un calendrier peut s’avérer utile pour la recherche d’archives

C’est par exemple ce que propose le Nouvelobs.com. Cependant ce type de navigation peut vite devenir un gadget pour la simple lecture d’un quotidien.

Les espaces de recherche• Voici la façon dont plusieurs sites ont

justifiés l’intégration d’un moteur de recherche.

Libération utilise un moteur de recherche interne et externe à son site et vient y greffer une « auto-publicité » pour attirer l’œil de clients potentiels.

Libération assure la visibilité de son moteur de recherche en le positionnant à côté de son logo.

Les sites 20minutes et Nytimes proposent également des moteurs de recherche.

- Celui de 20minutes disposent d’une newsletter et du moteur de recherche à proprement dit. Celui du Nytimes joue encore plus sur la sobriété et propose une unique fonction de moteur de recherche. Le site Indymedia.org de Paris est un site

d’information très brouillon. Cependant on peut remarquer un espace de navigation peu commun autres sites qui propose un menu synthétique « tout en un » permettant à l’utilisateur de jongler avec les thématiques et divers médias qui lui sont proposés.

Icones et repères graphiques• Parfois des symboles, icones, images

valent mieux que de long discours et surtout facilitent la lecture de la page.

– Ces symboles nous renvoient à notre culture et évoquent donc de manière intuitive des habitudes, des objets de la vie courante.

– Le site Elpais joue avec les icones, l’image de la TV nous renvoie au programme TV, la bobine de film nous mène à une section film/cinéma.

• Le but du jeu n’est pas de remplir la page de

symboles car cela aurait pour effet de réduire la fluidité de lecture.

– Un simple indicateur de temps comme sur le Nytimes peut faire l’affaire car il allie sobriété et clarté.

– Il en va de même pour l’utilisation du graphique pour symboliser un article concernant la bourse. Le site Elpais gère bien son organisation des symboles.

– Lemonde pourrait intégrer ses symboles du flux rss, pour que chacun puissent suivre l’actualité de façon très synthétique. Le pdf pourrait être utilisé en vue de sauvegarder un article comme certains blogs le proposent.

• Les symboles permettent également de capter

l’attention de l’internaute afin de le guider vers des sections à caractère plus commercial.

- Voici 3 manières différentes d’appréhender la vente de la revue en version pdf ou papier.

- Courrier International utilise un style assez « tape à l’œil » composé de couleur vives de typographie grasses. Ce type d’approche ne correspond pas trop à ce que doit véhiculer Lemonde.fr.

- Lemonde doit se rapprocher plutôt de Elpais qui utilise l’icône d’un journal couplé du nom de sa marque. Ceci permet Elpais de rester à la fois sérieux et pertinent.

- Enfin 20minutes utilise un style très propre, épuré mais qui à mon sens n’est pas assez intuitif pour l’usager.

- Lemonde devrait également placer une section « abonnement » dans sa barre de navigation principale.

L’intégration des médias• Il faut penser internet aujourd’hui comme

une source d’information riche en média. On ne peut plus désormais se rendre sur un site sans trouver du son de l’image de la video…

- Lemonde.fr pourrait opter pour plus de medias au sein de son site. Ceci le rendrait tout de suite plus attractif et l’utilisateur sera alors plus tenté de lire un article accompagné d’un complément sonore, imagé ou vidéo.

- Mais il ne faut cependant pas tombé dans l’excès, l’abus de media nuirait à la bonne lisibilité de la page.

• Quelques exemples d’incorporation de media

dans la page Le site 20minutes propose de visionner l’actualité en images à l’aide d’un slide.Ceci est un moyen d’informer l’utilisateur tout en lui offrant un élément de distraction.

Dailymotion propose un Wall-video interactif et entièrement configurable il permet par exemple de régler son comportement.

En ce qui concerne la vidéo, Elpais reprend quelque peu l’idée de wall, à ceci près qu’il n’est pas configurable pour l’utilisateur. Cependant ce type d’élément est intéressant dans le sens où il est intuitif pour l’utilisateur.

Le Nytimes a intégré un slide de navigation afin de visualiser rapidement l’information que l’on désire regarder.Le plus souvent une image et un titre sont utilisés pour toucher l’internaute quasi-intuitivement.Sur le site en question cette barre horizontale est utilisée en milieu de page. Le reste de la page est quand à lui plutôt sobre.

Libération utilise une frame Multimédia qui propose un résumé du média selectionné et permet de choisir le type de media (audio, video…)

Le site de MSN utilise dans sa page une navigation de l’information par slide avec images et titres à la une.

Le Figaro propose des encadrés par thème avec une photo. Ceci est une autre manière de capter l’attention de l’utilisateur.

Indymedia propose un menu synthétique « tout en un » permettant à l’utilisateur de jongler avec les thématiques et divers médias qui lui sont proposés.

On peut donc accéder à l’information par le biais de divers medias.

Présenter un article

La présentation d’un article doit être simple et accrocheuse.Libération compose ses présentations d’articles d’un titre, d’un chapeau, et d’une photo.

20minutes propose une présentation d’articles trop simplifiée pour un site comme le monde. Le titre ou la photographie ne sont pas assez explicites.

Elpais construit la présentation de manière claire et concise, dans ce cas il n’y a pas d’image d’utilisée mais on aurait pu penser le même type de présentation avec l’ajout d’une image, d’un symbole.

• La présentation des articles sur la page

d’accueil est primordiale.

• Elle doit inciter le l’utilisateur à lire les articles qui l’intéresse et doit motiver la curiosité de ce dernier.

• Les pages du site d’information et notamment la page d’accueil doivent être au maximum accessibles et utilisables (par un maximum de personnes et de machines).

• L’interface doit être simple, utiliser des symboles culturellement commun à la population visée.

• Afin de toucher un large public et ne pas se voir dépasser technologiquement, Lemonde devra également user d’une multitude de media (audio, vidéo, images) car internet offre bien plus de possibilités multimédia qu’un journal papier.

• La barre de navigation pourra être

horizontale et située en dessous de l’entête. Elle devra à la fois être claire et concise. La barre de navigation du site Elpais est un bon exemple.

• Dans un soucis d’accessibilité le titre des articles devra être par défaut assez gros pour être vu par tout le monde sans tomber dans l’excès comme le site 20minutes où dans ce cas précis le public visé est désireux d’accéder à une information rapide sans prendre forcément le temps de lire les articles.

• Un point important que devra développer Lemonde est la vente de son journal papier en version PDF. Lemonde devra rendre sa boutique facile d’accès et l’achat plus intuitif. La boutique actuelle est un peu brouillon et ne donne pas forcément envie d’acheter.