Pour les sites dont le contenu est le centre (sites de presse, site thématiques), un des leviers de performance est de multiplier le nombre de contenus vus par un même internaute. Pour cela, il faut constamment lui proposer d’autres contenus susceptibles de l’intéresser. Il s’agit donc d’accompagner efficacement son parcours utilisateur (ou « parcours de lecture ») au sein des contenus.
Plusieurs critères permettent d’optimiser la sélection des autres contenus à proposer. En voici une sélection que j’essaierai de tenir à jour avec les exemples trouvés en ligne. N’hésitez pas à me corriger ou à m’en signaler d’autres dans les commentaires.
Critères d’optimisation des parcours de lecture
selon le contexte du contenu
les étapes de lecture
la pagination, « à lire ensuite »
articles paginés sur nytimes.com
du même auteur
–
traitant de la même thématique
même rubrique, mêmes tags ou mots-clés
mots-clés liés sur 20minutes.fr
dans d’autres formats
même sujet mais dans d’autres formats. Ex : info flash, chiffres, vidéo, diaporama, animation, etc. Possible sous forme de « dossier »
contenus sous d’autres formats sur lemonde.fr
partageant une même méta-donneé
Ex. : même année, même lieu, même artiste, etc.
autres films partageant des membres du casting sur allocine.fr
de précision d’un élement du contenu
glossaire, page « topic »
accès aux pages globales « topic » sur nytimes.com
d’utilisation du contenu
par le biais de quizz, jeux, débats
selon le contexte des lecteurs
les contenus plus vus
–
contenus les plus lus sur figaro.fr
les contenus les plus partagés
envoyés par e-mail, partagés sur les réseaux sociaux
contenus les plus partagés via Facebook sur lemonde.fr
les contenus les plus commentés
contenus les plus commentés sur france24.com
les contenus les mieux notés, les plus recommandés
si une évaluation rapide est proposée aux lecteurs
selon le contexte personnel du viseur sur le site
l’historique du lecteur
les contenus déja consultés sur le site
le profil du lecteur
âge, sexe, adresse, profession, etc.
le statut du lecteur
Exemple : nouvel inscrit, abonné, primo-visiteur
les centres d’intérêt du lecteur
si déclarés lors de l’inscription
selon le contexte personnel hors site
les centres d’intérêt déclarés ou collectés sur un autre site
à partir des données utilisateurs Facebook par exemple
vos amis ont aimé, vous recommandent
–
recommandations des contacts Facebook sur nytimes.com
selon le contexte de provenance du visiteur
la requête saisie dans les moteurs de recherche
idenfication de l’expressoin de recherche à l’origine de la visite
le site référent
site de provenance du visiteur
la campagne ou le support de provenance
depuis un réseau social, de la publicité, un e-mailing, etc.
sans contexte
au hasard
–
article au hasard sur fr.wikipedia.org
Pas encore de commentaire pour Favoriser les parcours de lecture sur les sites de contenus : faut s'y mettre !
La Charte des Bonnes Pratiques d’Élevage est une démarche qualité du métier d’éleveur bovin en France. La Charte existe depuis 10 ans mais ne s’était pas encore dotée d’un site Internet dédié. C’est désormais chose faite depuis septembre 2011 : www.charte-elevage.fr.
Mon travail sur ce site a été réalisé dans un mode très ouvert et collaboratif puisque le client était representé par mon propre frère, Simon Fourdin, Chef de projet à l’Institut de l’Élevage. Cela nous a aidé pour itérer rapidement ensemble sur les choix de design et d’ergonomie.
Enjeux du projet
délais courts (site réalisé en un mois) ;
cible grand public et volonté de contenus pédagogiques servis par un design attrayant ;
interactivité pour aider la pédagogie ;
contenu administrable via l’outil de gestion de contenus préconisé : Drupal ;
Périmètre de mon intervention
découpage html / css à partir des pistes graphiques fournies par Simon ;
ajout d’une couche interactive pour mettre en scène les grands points de la Charte et proposer des quizz (à l’aide de la librairie JavaScript JQuery et des plugins PopIn et QTip) ;
paramétrage de l’outil de gestion de contenus Drupal (types de contenus et vues, extensions nécessaires à son usage) ;
intégration des maquettes sous Drupal et saisie du jeu de contenus initial ;
Rédaction du manuel utilisateur et de la documentation technique ;
Questions / Reponses avec Simon Fourdin, Chef de projet en charge du projet Charte des Bonnes Pratiques d’Élevage
Pourquoi un site web pour la Charte ?
Comme vous l’avez dit, la Charte des Bonnes Pratiques d’Elevage est une démarche qui met en avant les bonnes pratiques des éleveurs de bovins en France.
Elle a deux missions principales : faire progresser les éleveurs sur leurs pratiques et communiquer auprès du grand public sur le travail réalisé.
Le premier point est celui sur lequel on travaille surtout depuis la création de la Charte il y a 10 ans. Il y a eu des avancées remarquables.
Avec la dernière version qui vient d’être lancée, on a voulu se donner les moyens de travailler davantage sur le deuxième point, celui de la communication.
Un site web à destination du grand public et des éleveurs est l’un des premiers gros chantiers sur ces aspects « com ». Maintenant, il faut qu’on continue sur cette lancée !
Pourquoi passer par un indépendant ?
La décision de créer ce site a été prise tardivement, mais une fois la décision arrêtée nous voulions que le site soit opérationnel pour septembre, au moment du lancement de la dernière version de la Charte. Il nous fallait quelqu’un de disponible rapidement –ce qui n’est pas aisé l’été ! – et dans un budget raisonnable. Nous avons de plus l’habitude de travailler avec des indépendants (notamment pour les créations de documents).
Que retenir du projet et de la collaboration ?
Le fait d’avoir un seul intermédiaire est quelque chose d’appréciable. Un simple binôme maître d’œuvre/maître d’ouvrage permet d’avancer vite et bien, on perd le moins de temps possible sur la partie « gestion du projet » pour se concentrer sur le contenu et la forme. Cette efficacité a d’ailleurs été appréciée par l’ensemble des collaborateurs et des financeurs.
De notre côté, nous avons particulièrement apprécié la disponibilité du chef de projet, qui a toujours répondu dans les plus brefs délais.
Enfin, avec l’outil de gestion utilisé Drupal, nous avons un site extrêmement simple à utiliser ce qui va nous faciliter la vie pour les mois et années à venir !
A retenir
la collaboration rapprochée avec le client du site permet de « monter » ensemble le site, de tester rapidement plusieurs pistes et de les ajuster en direct ;
Drupal est un outil de gestion de contenu incroyablement souple dans les types de contenus possibles. Il est un peu surdimensionné pour un site comme celui de la Charte mais se prêtera très bien aux importants sites de communication ;
Pas encore de commentaire pour Projet charte-elevage.fr : La Charte des Bonnes Pratiques d’Élevage : faut s'y mettre !
La consultation de Twitter et la lecture des pages web ainsi collectées sont deux activités (au moins dans mon cas) séparées dans le temps. A l’ère du temps réel, il devient donc complexe de retrouver et de retweeter le tweet à l’origine de la lecture. Quelle est la valeur du « RT » quand la timeline s’efface plus vite que le temps nécessaire pour lire ce qu’elle propose ?
Twitter est un mine de liens vers des contenus de fond disséminés sur la Toile. Dans ma veille quotidienne, par exemple, il seconde parfaitement Google Reader. Le lecteur RSS me permet en effet de suivre les experts déjà identifiés dans mes domaines d’intérêt. Twitter, lui, apporte de l’inédit et de l’ouverture et permet parfois d’étoffer la liste des flux à suivre désormais sur Google Reader (vous suivez toujours ?).
1/Butiner sur Twitter, 2/Lire les articles collectés
Cette fois je m’y mets !
Mais concrètement, alors que Twitter me fait découvrir chaque jour une dizaine d’articles très instructifs, je faisais hier le constat que je ne les « retweetais » quasiment jamais pour les partager à mon tour. Mais pour comprendre pourquoi, petit retour sur les étapes de ma consultation de Twitter :
plusieurs fois dans la journée, je prends connaissance de tous les tweets remontés dans ma timeline depuis ma dernière consultation (sur une centaine d’abonnements, cela peut vite représenter 50 ou 100 nouveaux tweets à lire) ;
je les parcours rapidement et j’ouvre dans d’autres onglets les pages web susceptibles de m’intéresser ;
une fois tous les articles ainsi ouverts (immédiatement après ou lors d’une prochaine pause), je prends le temps de les lires de fond en comble ;
c’est seulement à ce moment là, que la valeur de l’article à mes yeux et la possibilité de le partager se dévoile ;
mais j’ai alors déjà perdu de vue le tweet initial dans ma timeline et souvent même oublié qui était la personne à l’origine de ce partage ;
me voilà bien marri !
Qui va mémoriser le tweet référent à ma place ?
Après réflexion et maintenant que Twitter généralise l’usage de son propre raccourcisseur d’url t.co, je me demande donc si il ne serait pas souhaitable que Twitter reproduise la barre de partage en haut des pages web liées (à l’image de ce que peut faire un service comme StumbleUpon – voir la copie d’écran ci-dessous). Ou, tout au moins, une option (car ces outils à frame ont d’autres inconvénients) qui mémoriserait le tweet initial, permettrait ainsi des ReTweets plus qualitatifs et plus posés. Qu’en pensez-vous ?
La barre de StumbleUpon en haut de la page proposée
Une autre question que cela pose est « Comment font ces utilisateurs Twitter qui retweent en pagaille dans un temps plus court que celui nécessaire pour prendre connaissance de l’article lié ? ». Comment ? Quand même pas ? Non ? Et si…
Pas encore de commentaire pour La fuite du temps réel sur Twitter : RT ou lire les articles de fond, il faut choisir ! : faut s'y mettre !
Pour remettre les mains dans le cambouis et faire mentir l’adage des cordonniers mal chaussés, j’ai entamé mes nouvelles activités en refondant mon site vitrine thomas-fourdin.net. Je vais décortiquer un peu ici les enjeux et les choix faits.
Le but de thomas-fourdin.net est de présenter mes activités, de faciliter le contact et de relayer mes contenus et mes actualités. La structure typique d’un blog est donc toute trouvée :
une page d’accueil statique pour la présentation ;
une autre page pour les options de contact ;
les billets pour les nouvelles.
Propulsé par, devinez quoi, WordPress..
Ça tombe bien, les sites de type « blog » sont les plus courants et l’outil tout désigné de gestion de contenus, WordPress, le CMS le plus utilisé au monde. J’ai donc abandonné l’ancien outil qui propulsait ce blog depuis 7 ans (Dotclear), avec les raisons suivantes en tête :
la communauté DotClear semble être bien moins nombreuse et avancer moins vite que celle de WordPress ;
avec le nombre d’utilisateurs qu’on lui connait, WordPress est entouré d’une ménagerie d’extensions qui permettent de faire un peu tout (souvent n’importe quoi) et toujours beaucoup plus qu’un simple blog ;
dans le même temps, la souplesse de l’outil et la possibilité dé bricoler facilement par dessus m’est très sympathique ;
enfin, et c’est sans doute la principale raison, l’interface de gestion de WordPress a toujours été plébiscitée par mes précédents clients, plus simple et conviviale à leurs yeux. Autant déployer pour soi même les solutions qu’on propose, non ?
Design et structure de page quand on n’est pas webdesigner
Pour le design, j’ai fait le pari de partir de la page blanche. Comme le webdesign n’est pas ma spécialité, j’ai principalement misé sur le contenu et les typographies pour un résultat très sobre (trop diront certains, je les connais) qui me plait bien et qui, d’après moi, me ressemble assez.
Côté structure de page, j’ai choisi un format plutôt étroit (720 pixels de large) pour, encore une fois, centrer la structure sur les contenus. Cette unique colonne centrale permet aussi de libérer de l’espace sur les côtés pour y glisser des informations de second rang. Enfin, ainsi conçue, la structure s’adapte ainsi tout naturellement pour proposer une expérience similaire sur mobile.
Pour la page d’accueil, je me suis très fortement inspiré de la page de présentation du produit BaseCamp[1] de l’agence 37Signals dont le travail et la philosophie m’attirent beaucoup. On peut même sans-doute parler de plagiat, je le reconnais bien volontiers et j’espère qu’ils ne m’en tiendront pas rigueur. Cette mise en page très longue qui présente les différentes promesses et les témoignages, appellée « long sale letter » leur avait elle-même été inspirée par un billet du site visualwebsiteoptimizer.com[2].
Ma page de présentation au format long sale letter
Pour la police, j’ai utilisé uniquement Georgia, parce que je la trouve esthétique et lisible à la fois en titre et en corps de texte. Je m’en lasserai peut-être bientôt et ce sera alors l’occasion de tester les nouvelles possibilités @font-face en matière de police de caractères.
La découpe (HTML5 / CSS3)
Côté intégration HTML / CSS, le site est développé en HTML5 même si cela se limite ici aux nouvelles balises sémantiques de structure.
Pour les CSS, je suis parti du framework CSS blueprint[3] pour ses fonctions de reset et de typographie. Cela permet en effet d’instaurer très facilement un rythme vertical agréable à l’œil. Pas de grille, en revanche, sur ce site puisque toujours une seule colonne. Pour le style des différents élements HTML et notamment pour certains éléments récurents comme les blocs d’infos, les citations, les messagesd’avertissements, les formulaires , j’ai beaucoup puisé sur le BootStrap[4] fourni par l’équipe Twitter.
Lancement (sans fanfare)
Pour la mise en ligne, j’ai du procéder à la migration des anciens contenus DotClear (100 billets). Pour cela, j’ai passé le flux RSS sous dotclear à 100 éléments et utilisé l’option d’import depuis un RSS dans WordPress (barbare mais efficace en l’absence de solution éprouvée pour une telle migration). J’ai aussi transféré tout le jeu d’images de contenus dans un dossier dédié WordPress puis remplacer les urls absolues des images directement dans la base de données avec une requête MySQL adaptée. Seul regret : les quelques commentaires esseulés sur l’ancien blog ont été malheureusement perdus dans la bataille.
La structure de permaliens étant différente entre l’ancienne version et la nouvelle, j’ai rapidement bricolé de faux templates pour récupérer la liste des urls des 100 billets originaux sous DotClear et celles des billets migrés sous WordPress. J’ai ensuite intégré l’ensemble des redirections, billet à billet, dans le .htaccess et ajouté les redirections nécessaires pour les flux RSS et les catégories principales.
C’est pas fini !
Me reste encore quelques manquements à corriger :
Pour coller à ma mise en page avancée des billets (et notamment les encarts débordants à droite), je suis toujours obligé d’éditer mes billets en HTML. Il faut que je creuse sur les options des éditeurs WYSIWYG disponibles dans WordPress ;
De la même manière, je fais toujours actuellement les « gestes typographiques qui sauvent » (espace insécable devant la ponctuation essentiellement) manuellement en HTML. Là aussi, il faut que je cherche une extension efficace pour cela ;
Pas encore intégré le moteur de recherche natif de WordPres ;
Allez, je m’y remets..
2 commentaires pour Projet : refonte de mon site thomas-fourdin.net
Quand le web personnalisé sonne la fin du web universel
Toujours plus précis, toujours plus riches, les outils de personnalisation et de recommandation s’adaptent aux préférences de chacun sans même toujours le préciser. Dès lors que les publicités mais aussi les actualités qui s’affichent sont relatives à votre profil, peut-on encore parler d’Internet universel ? L’efficacité publicitaire ne se construit-elle pas au détriment d’un Internet global ou chacun a normalement accès à toutes les informations plutôt qu’uniquement aux informations qui lui ressemblent ? C’est la question que pose Eli Pariser lors de la conférence TedEx.
Google : 23 questions à se poser pour éviter Panda
Google Panda, ça vous dit quelque-chose ? C’est le nom de la dernière mise à jour de l’algorithme de la recherche Google, censée démasquer et défavoriser les « fermes de contenu » (ces sites très denses de contenus de peu valeur conçus uniquement pour attirer les internautes). Google Panda est actuellement déployé dans le monde par phases et bientôt dans la version francophone du moteur. Mais cette mise àj our peut aussi dans certains cas désavantager des sites de bonne foi. L’occasion de se poser quelques questions sur la pertinence de ses contenus avec le blog Abondance !
Nouvelle bulle financière ? Facebook paye ses utilisateurs
Facebook a trouvé sa rentabilité financière mais la solidité de celle-ci dans le temps est encore à prouver. Les études actuelles montrent d’ailleurs que les publicités sur Facebook sont moins efficaces que sur d’autres supports. Mais pour autant, quand Facebook propose des crédits Facebook en échange de la consultation de publicité, ne reproduit-on pas les erreurs à l’origine de la première bulle Internet ?
Le Conseil National du Numérique, représentatif de l’Internet français ?
Le Conseil National du Numérique (le CNN français donc) a été lancé en avril par le gouvernement pour émettre des propositions sur l’univers numérique français. Il est depuis très décrié dans sa composition car il intègre presque uniquement des entreprises (fournisseurs d’accès, mastodontes, start-ups, éditeurs) qui semblent moins innovants que pressés de verrouiller leurs périmètres actuels. C’est en tout cas ce que pense (et il ne le cache pas) Cyroul dans cet article :
« Un des grands dangers d’Internet est ce phénomène très commenté qu’on appelle l’effet « chambre d’écho ». Les gens, s’inquiète-t-on, sont trop souvent en contact avec de gens qui leur ressemblent et ne rencontrent donc que des informations et des opinions qui renforcent leur avis préalables. »
Clive Thompson, éditorialiste du magazine Wired (via @InternetActu)
Mieux vaut en rire
La grossesse qui fait trembler l’Elysée reprit sur le site web de 20minutes.fr sans le context explicatif : blog.veronis.fr
Pas encore de commentaire pour Favoriser les parcours de lecture sur les sites de contenus : faut s'y mettre !
Étrennez les commentaires