Benchmark court, sur le site Lemonde.fr réalisé dans le cadre de la licence Webdesign.

1. Benchmark LeMonde.fr Refonte du site lemonde.fr But Le site du Monde est aujourd’hui l’un des plus anciens à ne pas avoir subi de refonte, ce Benchmark à pour but de répondre aux problématiques qui devront être prise en compte lors de la refonte du site. Méthode Afin de répondre aux problématiques, 9 sites, concurrents directs ou sites d’actualités vont être étudiés afin de dégager des bonnes pratiques qu’il faudra ensuite intégrer lors de la refonte. Résultat Ce document est le résultat des 5 études menées (correspondant aux 5 problématiques) et résume, aux travers de différents exemples, les points essentiels à retenir.

2. Choix des sujets d’études 5 grandes problématiques. Comment placer et intégrer la publicité pour la rendre discrète mais efficace ? Nerfs de la guerre, les publicités formatent souvent la mise en page des sites d’informations et les font vivre. Comment mettre en avant certaines informations (actus chaudes, dossier) ? Les actualités chaudes et les dossiers doivent générer un grand nombre de clic, il faut donc les rendre plus attrayants. Comment mettre un maximum d’informations sans surcharger la page ? Problème récurrent, la mise en page d’une très grande quantité d’information fait appel à des astuces ergonomiques. Comment faire le lien avec le journal papier et/ou un abonnement en ligne ? Obtenir des abonnés (payant) est l’un des but des sites d’information, pluiseurs pratiques permettent d’y parvenir. Quels services et interactions proposer pour se démarquer des blogs ? Les blogs rencontre un franc succès, mais l’on peut profiter des nouveautés introduites par ceux-ci pour attirer les internautes.

3. Sites étudiés 9 sites pour représenter les sites d ’actualités en ligne. Le Figaro (www.lefigaro.fr) Principal concurrent du Monde sur Internet, Le Figaro propose un site plus moderne avec des stratégies intéressantes. 20 minutes (www.20minutes.fr) Plus grands quotidien gratuits Français, 20 minutes est ici le représentant de la presse gratuite. Clubic (www.clubic.com) Clubic est l’un des plus gros sites d’actualités informatique français, et sans doute le plus moderne d’entre eux. Il tempo (www.iltempo.it) Quotidien numéro 1 en Italie, Il tempo propose un site assez ancien mais qui a su évoluer. El paìs (www.elpais.com) Plus gros quotidien d’Espagne, El paìs propose un site plutôt original. BBC Beta (www.bbc.co.uk/home/beta) Future page d’accueil du site de la célèbre chaîne anglaise, BBC beta est actuellement le plus évolué techniquement. Times online (www.timesonline.com) Times online est la version en ligne du très grand journal Times, le plus lu en Angleterre. International Herald Tribune (www.ith.com) Journal très réputé aux Etats Unis, l’ITH possède un site Internet sobre, riche et efficace. Washington Post (www.washingtonpost.com) Dernier journal de ce corpus documentaire, le Washington Post possède un site au design moderne et bien étudié.

4. Etude 1 Comment placer et intégrer la publicité pour la rendre discrète mais efficace ? Habiller la page Le site clubic.com opte parfois pour un habillage complet de sa page d’accueil aux couleurs d’un produit, d’une marque, ou comme ici, d’un jeu. Cette pratique permet de mettre une publicité de très grande dimension avec un très fort impact sans occuper l’ espace intérieur de la page. On remarque également que malgré une présence très marquée, la publicité gêne moins le visiteur, elle se fond au site. Seul inconvénient, ce type de publicité est couteux à mettre en place et ne génère pas de clic. Publicité par onglets Avec ce procédé, le site Il Tempo peut mettre trois pubs dans le même espace, un peu comme il l’aurait fait avec du contenu éditorial. Evidemment la pub présente sur l’onglet présélectionné a beaucoup plus d’impact. Cela permet de ne pas trop dénaturer le design du site tout en faisant passer la publicité pour de l’information. Banner blindness Les bannières de pub utilisent des codes visuels particuliers (tailles, animations, couleurs). Le visiteur fait abstraction de tous blocs reprenant ces codes. Pour qu’une publicité soit la plus discrète possible, il ne faut pas qu’elle reprenne ces codes.

5. Etude 1 Comment placer et intégrer la publicité pour la rendre discrète mais efficace ? Trompe l’oeil Certaines publicités du Figaro.fr peuvent être considérées comme des trompes l’œil. En effet ces publicités se trouvent au milieu des listes d’articles et sont de la même taille que les visuels illustrant les différents sujets. De plus, elle reprennent les codes graphiques des visuels du Figaro (exemple la publicité pour la collection Woody Allen et le visuel pour les Enquêtes Figaro). Ainsi la pub paraît invisible et intégrée au contenu. Ce type de pub génère un grand nombre de clic. Seul problème, l’annonceur doit adapter le graphisme de ses publicités aux sites , ce qui représente un coût supplémentaire. Publicité surdimensionnée On trouve en bas de page du site 20minute.fr une bannière de 984 pixels de large par 402 pixels de haut. Bien que surdimensionnée, cette pub s’intègre plutôt bien au site car elle fait office de séparation en le contenu et le pied de page. Publireportage Initié par les magazines, le publireportage a fait son apparition sur le Web dans les blogs. Cette forme de publicité déguisée dans des articles est un bon moyen d’ajouter du contenu publicitaire sans dégrader l’aspect visuel du site. Au site ensuite, en fonction de sa ligne éditoriale, de préciser qu’il s’agit d’un publireportage.

6. Etude 2 Comment mettre en avant certaines informations (actus chaudes, dossier) ? Ajouter un visuel L’ IHT a opté pour le choix d’illustrer, avec un visuel, uniquement les articles à mettre en avant. Ainsi l’article se détache des autres avec un impact visuel nettement plus important. La taille du visuel, assez importante joue également un grand rôle. Encadrés Classique mais toujours très efficace, encadré une information importante ou un dossier à mettre en avant permet de sortir le contenu de l’encadré du reste de la page. L’effet est d’autant plus efficace que le reste du contenu est du texte. Le Times online va encore plus loin en incluant au sein de ses encadrés un visuel prédominant et seulement deux titres. Enfin, la forme, la couleur et les différents habillage de l’encadré permet de mettre plus ou moins en avant l’information (un cadre rouge ressortira plus qu’un gris). Visuels chartés Afin de faire ressortir les images liens vers ses dossiers, lefigaro.fr les décline selon la même chartre graphique (un dégradé + visuel à gauche + deux niveaux de titre). Ce procédé permet de mettre en avant les dossiers que les internautes identifient en un coup d’oeil.

7. Etude 2 Comment mettre en avant certaines informations (actus chaudes, dossier) ? Jouer sur la mise en page Beaucoup de sites se contentent de grossir le titre et le visuel de leur première actualité tout en gardant un flot d’information reprenant la même mise en page. Le times online propose une alternative intéressante. Comme pour l’ IHT il propose un visuel uniquement pour l’information à mettre en valeur, mais il va encore plus loin. En effet, au lieu de proposer des articles à la suite sur la même largeur que l’article principal, il divise ensuite cette largeur par trois. On réduit ainsi la hauteur de la page, mais surtout, on augmente l’impact visuel du premier article, illustré et trois fois plus large. Citations Souvent présentes dans la presse, des citations peuvent être placées sur une page pour amener l’internaute à lire un dossier. Ici l’IHT utilise des guillemets de grande tailles et une police plus importante pour faire ressortir une citation. Les titres Tous les sites du corpus jouent sur la mise en forme des titres pour mettre une actualité en avant. Taille de police, graissage, couleurs soutenues, sous et sur lignage … permettent de faire ressortir un titre. Placement Le placement au sein de la page est primordial. Ainsi le haut de la page est réservé aux actus chaudes. A l’inverse on trouve moins d’informations importantes en bas de page.

8. Etude 3 Comment mettre un maximum d’informations sans surcharger la page ? Carrousels Onglets Comme le carrousel, cette technique permet de multiplier le nombre d’informations au sein d’un même bloc mais cette fois-ci avec une navigation par onglets. El pais par exemple multiplie par 4 la quantité d’informations au sein de ce bloc avec 4 onglets. Hauteur de page Une des meilleurs techniques pour augmenter le nombre d’informations et d’augmenter la taille de la page. Le scroll étant bien assimilé cela ne présente que peu de risques. Attention tout de même à ne pas trop dépasser des 3200 pixels de haut.

9. Etude 3 Comment mettre un maximum d’informations sans surcharger la page ? Le site bbc propose des boîtes de contenu dépliantes qui permettent de réduire leur taille. Ainsi l’internaute dispose d’un grand nombre d’informations mais peut à tous moment en masquer pour faire le tri. Footer Le pied de page (ou Footer comme on l’appelle couramment) est l’endroit idéal pour placer des infos que l’on considère moins importantes. C’est aussi le meilleur emplacement pour afficher des listes de liens renvoyant au contenu (cela permet à la fois de faire un rappel mais aussi d’améliorer le référencement naturel. Enfin, depuis l’avènement du Web 2.0 et des « mega-footer », il est possible d’y mettre une foule d’informations sans que l’utilisateur l’ignore. L’exemple du Figaro ci contre est sans doute le plus représentatif de la quantité d’informations que peut contenir un pied de page. A lui seul, il fait plus de 1000 pixels de haut. Footer Boite dépliable Mise en page Une bonne mise en page est évidemment le point essentiel pour placer un maximum d’informations sur une page. La mise en page par colonne semble la plus judicieuse. Tous les sites étudiés contiennent au minimum 3 colonnes. Ces colonnes peuvent elle-même être divisé en sous colonnes. Les blocs (encadrés) sont également intéressant pour placer l’information, tout comme les listes verticales (d’actualité par exemple) et horizontales (de liens). Il est également important de bien séparer les parties sur la hauteur du site (avec la couleur de fond par exemple), ainsi on crée une continuité visuelle qui incite au scrolling

10. Etude 4 Comment faire le lien avec le journal papier et/ou un abonnement en ligne ? Le figaro a une stratégie très développée pour mettre en avant son offre journal papier et ses abonnements en ligne. En effet, celui-ci contient une colonne, à droite du site, entièrement dédiée à toutes ces offres. On retrouve un classique lien d’abonnement mais d’autres modules plus intéressants dont une offre découverte permettant d’accéder au journal au format pdf, ou le carnet du jour, regroupant des petites annonces. Plus bas on retrouve des dossiers, mais aussi des promotions sur d’autres produits du figaro (livres…) Enfin l’habillage visuel sobre mais très contrasté (noir) permet de mettre fortement en avant cette colonne dédiée. Aperçu du journal Colonne dédiée Il tempo propose sur la page d’accueil de son site, des visuels de certaines pages du journal du jour (en fonction de différents sujets). Au clic, on accède à des extraits des articles proposés sur cette page. Seul bémol, aucun liens d’abonnement n’est proposé Listing El pais propose sur sa page d’accueil, un bloc regroupant une liste des articles présents dans le journal. Certains sont téléchargeables au format pdf. On trouve aussi une liste de différentes informations et offres relatives aux éditions El pais et aux produits sponsorisés

11. Etude 5 Quels services et interactions proposer pour se démarquer des blogs ? Customisation La customisation d’un site peut lui permettre de se démarquer des blogs d’informations. Dans ce domaine, bbc news à mis en place une solution très élaborée. En effet, il est possible de choisir entre différents styles pour l’affichage du site mais également de les modifier. On peut aussi déplacer les blocs, les déplier / replier et choisir ceux à afficher. Au final, l’utilisateur se crée sa page idéale, contrairement au blogs ou tout est défini. Le contenu « People are coming for your content », voilà une phrase que l’on peut lire dans de nombreux livres sur l’ergonomie Web. Oui, cela peut paraître évident mais le contenu et le point numéro 1 de visite d’un site. C’est pourquoi les sites d’informations doivent se démarquer des blogs d’informations par leurs contenus et qualités rédactionnelles avant tout. Permettre le tri Le site clubic.com propose à l’utilisateur de trier les news en fonction de ses préférences et selon plusieurs niveaux. Un point qui permet de concurrencer les blogs spécialisés dans un domaine particulier. RSS à gogo Comme les blogs, les sites d’informations / actualités doivent proposer des flux RSS pour être lus dans des lecteurs de flux. L’ITH propose un flux par catégorie d’actualités, soit au total 14 flux.

12. Etude 5 Quels services et interactions proposer pour se démarquer des blogs ? La communauté Voilà sans doute l’aspect qui fait le succès des blogs face aux sites d’informations classiques et vieillissants : la communauté. Pour se démarquer des blogs, une communauté doit être crée sur le site. Pour cela les commentaires autour des articles ne sont que le premier pas. Le Times online permet d’envoyer ses propres articles (views). L’ITH, lui, met en ligne les emails reçu sur un article et de partager celui-ci via des digg-like. Enfin, 20minute.fr va encore plus loin en proposant une plateforme de blog pour ses lecteurs, et, en affichant, les plus actifs, sur sa page d’accueil. Outils d’articles Inclure une boîte à outils est un moyen efficace de se démarquer des blogs. En effet, on peut proposer encore plus d’outils que ceux proposés par les plugins des blogs. La boîte à outils de l’ IHT propose des fonctions de base comme envoyer l’article par e-mail ou l’imprimer. Des fonctions d’accessibilité tel qu’écouter l’article (pour les non voyant ou si l’on ne veut pas lire), le passer dans un format 3 colonnes (moins de scroll) grossir la taille des textes. Et enfin des fonctions avancées comme la traduction en 5 langues ou partager l’article sur les plus gros sites de partages.

13. Etude 5 Quels services et interactions proposer pour se démarquer des blogs ? Jeux Gratuité Pour divertir ses visiteurs, El pais propose des jeux vidéos en ligne. Un moyen original de garder l’internaute plus longtemps sur le site mais qui peut aussi le fidéliser L’un des succès des blogs est bien évidemment la gratuité de ceux-ci. En proposant du contenu de qualité gratuitement, vous attirez à la fois énormément de visiteurs et vous incitez le lecteur à s’abonner. Plus le contenu est fermé, plus son impact sera faible. Goodies Météo, cours de la bourse, caricatures, jeux, résultat sportif, player radio et / ou mp3, programmes TV… Autant d’information et de petit modules, qui s’apparentent au widget des blogs, et qui rendent un site d’informations à la fois très complet et surtout indépendant. Tout avoir sous la main est un point positif pour l’internaute. Attention cependant à ne pas noyer l’informations principal au milieu de modules moins importants. Multiplateforme Point qui aurait pu faire un sujet d’étude à lui seul, rendre votre site multiplateforme, permet de se démarquer des blogs, rarement propices à une utilisation mobile. De plus, à l’image de l’accessibilité, qui aurait aussi put faire office d’un sujet d’étude, cet aspect est en plein boom. Enfin, c’est aussi l’occasion de se faire un bon coup de pub.