Un site média performant, c’est avant tout une expérience de lecture réussie. Pour ça, il est nécessaire d’apporter un soin particulier au fond comme à la forme. Ces derniers mois chez Intuiti, nous avons eu la chance de travailler sur plusieurs sujets de conception dans ce domaine.
En retour d’expérience, nous vous proposons d’aborder dans cet article quelques bonnes pratiques à adopter pour concevoir un média à même d’émerger parmi la pluralité d’offres déjà existantes.
1. Travailler la ligne éditoriale
Vous aurez beau proposer le site le plus élégant, avec les concepts de navigation les plus fluides, si le contenu n’est pas au rendez-vous, personne ne reviendra sur votre site. Comme le disait l’auteur américain Jeffrey Zeldman, spécialiste du web design “Content precedes design. Design in the absence of content is not design, it’s decoration” (Traduction libre : le contenu arrive avant le design. Le design en l’absence de contenu n’est pas du design, c’est de la décoration)
Avant de se lancer dans la création d’un nouveau média, il est nécessaire de réfléchir à un concept éditorial original et à une tonalité qui permettront de sortir du lot. Le design viendra ensuite mettre en valeur ce concept.
On essaiera au maximum de travailler le rapport fond/forme. Cela peut aller de la structure du site au simple clin d’oeil. C’est pour cette raison qu’il est primordial de travailler le design du site avec du contenu réel qui permettra d’être au plus proche du rendu final.
Prenons un exemple pour illustrer ce principe de travail éditorial. Nous avons accompagné Petit Web, acteur très identifié pour sa newsletter sur l’innovation numérique, lors de la refonte de son site. Ce dernier a donc été construit en capitalisant sur ce format de prise de parole : la page d’accueil reprend le contenu de la dernière newsletter publiée. Ce parti pris permet de proposer une continuité dans l’approche éditoriale, donne des repères aux lecteurs, et permet de se démarquer parmi les autres sites média.
Autre exemple, le nouveau site du Printemps, utilise le format “média” de manière originale. Au-delà d’un site e-commerce classique, l’utilisateur arrive d’abord sur un format magazine, qui décrypte les tendances, mêlant culture, mode, musique et sujets de société, avant d’amener au produit. Cette partie média permet ici d’installer le Printemps dans un vrai univers de marque, en dépassant la dimension mercantile.
2. Catégoriser vos contenus
Il est probable que vous fassiez le choix d’aborder des thématiques variées sur votre site média. Les expliciter sous forme de grandes catégories permet à l’utilisateur de mieux s’orienter sur votre site. De la même manière, il est recommandé de faire remonter les articles les plus populaires, afin que l’utilisateur puisse avoir un aperçu convaincant des sujets traités. Ces deux actions permettront aux internautes découvrant vos contenus de cerner tout de suite quels types de sujets vont être abordés, et donc de savoir si les contenus l’intéressent.
Nous avons récemment travaillé à la création d’un site média à destination de professionnels, experts sur des domaines scientifiques précis. Le site, généraliste, traitant d’une dizaine de domaines différents, laisse la possibilité de naviguer à l’intérieur d’une thématique particulière, et de trouver tous les contenus en lien. Ce système permet de faciliter la navigation interne, et d’être sûr de montrer en priorité à l’utilisateur les contenus précis susceptibles de l’intéresser. Pour exemple, des contenus vont traiter de médecine, quand d’autres vont traiter de physique quantique. Ces contenus experts ne s’adressent pas au même public. Chacun doit donc facilement pouvoir trouver “la branche” qui va l’intéresser. L’objectif derrière est de l’inciter à l’explorer grâce à des rebonds vers des articles traitants de sujets connexes. En s’assurant de montrer à l’utilisateur plus de contenus susceptibles de lui plaire, on augmente nos chances de le voir revenir.
3. Garantir le confort de lecture
Nous le disions en introduction, l’expérience de lecture est l’enjeu premier du design d’un site média.
Bien sûr la mise en page s’intègre dans un système de grille mais pas seulement en raison de la contrainte du responsive. Dans le cas d’un média on pousse cette idée plus loin et les principes défendues par Josef Müller-Brockmann dans les années 50 sont encore d’actualité.
Il existe plusieurs bonnes pratiques ergonomiques, héritées de la presse papier, pour assurer un meilleur confort de lecture :
- Proposer une interligne confortable
- Utiliser une taille de polices suffisante
- Limiter les variations de tailles et de graisses des polices de caractères
- Limiter le nombre de caractères par ligne (maximum 70 pour un article)
- Ferrer le contenu à gauche plutôt que le justifier
- Éviter les “distractions” (bannières, encarts publicitaires…) pour concentrer l’attention de l’utilisateur sur le contenu de l’article
Ces 4 éléments permettront de limiter la fatigue visuelle. L’utilisateur aura moins d’efforts à faire, ce qui rendra la lecture plus agréable.
4. Soigner la typographie
La typographie est l’élément central de ce genre de site, elle a même une dimension identitaire. Le site faisant parti d’un écosystème global, confronté à des contenus variés sur les réseaux sociaux, une police singulière permet de distinguer rapidement le média.
Un soin tout particulier est à apporter aux choix typographiques : cohérence avec la marque, style/connotation, déclinaisons, lisibilité, complémentarité, originalité.
5. Proposer un contenu digeste
La majorité des utilisateurs commencent par lire de manière partielle. On parle de lecture en “F” (comme fast), concentrée d’abord sur le haut de page, puis sur les titres. La lecture exhaustive est rare, surtout lorsque l’utilisateur est encore en phase de “repérage”, et qu’il cherche des contenus susceptibles de l’intéresser.
Pour l’aider dans cette phase de scan, plusieurs astuces :
- proposer un format “chapô” qui permet d’introduire de manière explicite et synthétique ce dont va traiter l’article
- utiliser des intertitres dont la lecture permet d’avoir un résumé du propos
- fragmenter le contenu en formats digestes : paragraphes, citations, illustrations… qui vont créer des points d’accroche pour l’oeil, rythmer, rendre l’article plus facile à scanner.
6. Structurer par le blanc
Contrairement à des sites institutionnels ou e-commerce où l’image a une part importante, un site média se structure principalement par le texte et le blanc tournant.
Ainsi on joue beaucoup sur des principes de fréquence et de répétition des espaces de respiration pour créer du rythme dans la page. Ils permettent en outre de comprendre de manière intuitive la hiérarchie de l’information : rubriques, articles, titres, chapô etc.
À l’image d’un logo qui doit pouvoir fonctionner sans artifice (couleurs ou effets superflus) on aborde ce genre de mise en page de la façon la plus sobre possible en évitant au maximum d’y ajouter des “béquilles graphiques” : séparateurs, couleurs, images…
7. Donner des repères de lecture
Pour que l’utilisateur puisse s’orienter à travers la proposition d’articles, il peut être intéressant d’annoncer un temps de lecture estimé. A celui-ci pourra venir s’ajouter la mention “déjà lu”, si l’utilisateur a déjà consulté l’article. Ainsi il sera plus simple pour l’utilisateur de se repérer.
Les articles long ne sont pas à proscrire, au contraire. En revanche, quelques bonnes pratiques peuvent guider l’utilisateur dans sa lecture. Il sera par exemple recommandé d’intégrer un sommaire. En effet, celui-ci donne une vue rapide du fond et permet un accès facilité aux sections qui vont davantage intéresser l’utilisateur pressé.
On appréciera aussi l’ajout d’une jauge d’avancement, permettant à l’utilisateur de savoir où il en est dans l’article, et lui donnant un sentiment de contrôle.
8. Travailler une iconographie réaliste
Nous l’évoquions plus haut, il est primordial de travailler le design du site avec du contenu réel qui permettra d’être au plus proche du rendu final.
Ce principe permet également d’avoir une idée précise des ressources iconographiques disponibles. Si on crée un site sur la base de visuels très impactant et que les budgets ne suivent pas, cela permet de vite s’en rendre compte.
C’est d’ailleurs un poste de dépense souvent sous estimé. La fréquence de publication et la quantité d’articles inhérents à ce type de site nécessitent une quantité de visuels non négligeable. Au même titre que la ligne éditoriale ou son design, la direction artistique image a un impact fort sur l’identité d’un média.
S’il n’y a pas d’équipe dédiée ou peu de ressources pour produire ces visuels on aura tendance à se tourner vers des banques d’images gratuites souvent stéréotypées et limitées sur certains sujets. Si l’illustration des articles est de surcroît faite de façon littérale en regard des sujets traités, l’éditorial aura du mal à soutenir l’ensemble.
Néanmoins il y a des ressources ou des approches auxquelles on ne pense pas forcément : les fonds gratuits ou tombés dans le domaine public des bibliothèques publiques ou universitaires, des musées, des banques d’images d’archive (qu’on peut détourner en les mélangeant avec des visuels récents).
Il y a également l’alternative de l’illustration (pouvant se faire à partir de photos). Ces choix seront déterminés par les orientations de la ligne éditoriale.
Le plus simple est de ne pas se limiter dans la direction artistique du site sur un type de média particulier et privilégier une approche ouverte qui permettra une plus grande liberté de choix (photo couleurs, noir & blanc, illustrations, vidéo, voir Gif ou meme). Des sites comme The Economist ou The New Yorker appliquent ce principe avec succès.
9. Sensibiliser les contributeurs aux bonnes pratiques de rédactions
Autre point à prendre en considération, la contribution des articles. Si les équipes de rédaction ou les personnes en charge de la contribution du site ne sont pas un minimum formées, elles vont avoir tendance à tomber dans un travers assez répandu : l’approche Powerpoint et ses inévitables bullet points. Ils viendront casser l’alignement à gauche de l’article et nuire à la lisibilité sans rien apporter dans la hiérarchisation de l’information.
Un détail technique qui a son importance : il peut être judicieux de limiter les possibilités d’édition du texte (taille, graisses etc…) en back office si l’on veut conserver une cohérence globale dans le temps.
10. Valoriser vos auteurs
Si vous avez recours à des intervenants extérieurs pour la rédaction de vos articles, il convient de valoriser leurs profils : nom, poste, mini bio notamment. En effet, c’est aussi la qualité des intervenants qui permettra de donner du crédit au propos, et susciter de la préférence pour le site.
Pour exemple, sur le site à visée scientifique sur lequel nous avons travaillé, des experts vont régulièrement prendre la parole sur des sujets pointus. Référents dans leur domaine, ils servent de caution, et légitiment le positionnement expert du site. Ils sont donc mentionnés dès les listes d’articles. En effet, leur seul nom pourra inciter à la lecture du contenu.
Nous avons également prévu de leur dédier des fiches auteurs, qui permettent de retrouver l’ensemble de leurs contributions sur le site.
11. Inciter à la diffusion des contenus
Il peut être difficile d’émerger parmi la diversité de l’offre média. Pour y travailler, il est donc important de peaufiner les organes de conversion, permettant la diffusion des contenus.
Il est primordial de rendre les actions de partage sur les réseaux sociaux visibles et accessibles tout le temps. Pour favoriser leur utilisation, on permettra à la fois de partager un article, comme une citation. En effet, cette action est à valoriser, car un utilisateur qui partage une oeuvre à la diffusion du contenu, en devient l’ambassadeur.
Pour travailler la diffusion, il est également nécessaire d’être suffisamment incitatif sur la mise en avant de la newsletter : expliciter ce que l’utilisateur va recevoir et à quelle fréquence.
12. Peaufiner l’expérience mobile
La consommation de média se fait typiquement en mobilité, pour combler un moment d’attente. Le mobile sera un format à soigner tout particulièrement, aussi bien sur l’ergonomie des écrans, que sur la fluidité de navigation. Attention aux temps de chargement !
Le mot de la fin
La création d’un site média est un exercice d’épure qui nécessite une grande précision. Vous avez encore des doutes sur les décisions à prendre ? Quelques tests utilisateurs en phase de conception devraient vous aider à y voir plus clair (lire à ce sujet l’article « Pourquoi il est indispensable de mener des tests utilisateurs lors de votre refonte : 3 exemples où ça a fait toute la différence.«
Et si un accompagnement sur la refonte de votre site média vous intéresse, n’hésitez pas à nous contacter 🙂 On vous présentera quelques réalisations de sites par Intuiti
