9min
L’étape du design est cruciale durant la conception d’un blog. Elle vient donner vie aux projections et décisions élaborées durant la définition de votre stratégie. Enfin, vous matérialisez vos idées et vous pouvez vous projeter sur un produit fini. Mais il reste encore plusieurs inconnues à résoudre. Et quelques pièges à éviter.
On vous livre nos conseils et bonnes pratiques pour réussir le design de votre blog B2B sur HubSpot. Vous serez alors à même d’identifier les points faibles de vos maquettes et les éléments de vigilance à communiquer à votre designer. Notre objectif : vous éviter les aller-retour et déconvenues pour garantir la fluidité et le succès de votre projet.
Avant d’entrer dans le vif du sujet, répondons à la question suivante. Quelle méthode adopter pour réaliser le design de son blog ? A minima, nous vous conseillons de réaliser des wireframes pour les modèles de pages importants de votre blog. Ces wireframes devront avoir une approche “Mobile First”, et être pensés avant tout pour un affichage sur smartphone. Ensuite, si vous avez le temps et le budget nécessaire, procédez à la création de maquettes graphiques pour appliquer votre identité graphique à votre blog.
Pages d’index, les fonctionnalités clés à ne manquer
Les pages d’index désignent les pages de votre blog qui servent à lister vos articles. Cela correspond à minima à l'accueil, aux catégories et aux pages auteurs. Avant de se pencher sur les détails et spécificités de chaque index, examinons leurs points communs.
Les listings d’articles :
Sur vos pages d’index, vous voulez faire remonter une ou plusieurs listes d’articles classés par ordre chronologique (du plus récent au plus ancien). L’erreur fréquente est d'afficher un nombre trop restreint d’articles. En faisant cela, vous augmentez la pagination de votre blog et complexifiez inutilement sa navigation. N’ayez pas peur d’afficher au minimum 12 articles par page d’index.
Pour ce qui est de vos aperçus d’articles dans les listings, leur contenu peut varier en fonction de vos besoins et choix graphiques. Mais voici quelques pistes possibles :
- L’image à la une : intéressante graphiquement et très efficace pour générer de l’engagement si elle est bien utilisée. Mais, est-ce que son usage est pertinent vis-à-vis des sujets traités sur votre blog ? Est-ce que vos éditeurs auront les compétences, les outils et le temps nécessaire pour les créer ? Enfin, concernant son format, il faut savoir que sur HubSpot, l’image à la une va être utilisée (hors développements spécifiques) comme visuel de listing, visuel d’ouverture de l’article et visuel de partage sur les réseaux sociaux. Il faut donc être attentif au format et à la résolution du visuel exploité.
- Le titre : dans vos maquettes, testez plusieurs formats de titres. Des titres courts, des titres longs, avec des symboles, avec des mots très longs… Anticipez au maximum le comportement de vos titres. Si vous souhaitez les utiliser comme ancre de lien vers votre article, pensez également à designer leur comportement au survol et au clic.
- La catégorie : afficher la catégorie peut être intéressant dans deux cas. Si vos pages d’index ne permettent pas d’identifier rapidement la catégorie des articles affichés. Ou, si vous voulez associer plusieurs catégories à un article. Comme pour le titre, pensez à maquetter l’affichage de vos noms de catégories dans plusieurs contextes (nom court, nom long, nom avec plusieurs mots, au survol et au clic).
- Le résumé : par défaut, le résumé est extrait du début de l’article. Votre design doit établir une règle claire concernant la longueur maximale du résumé (en nombre de mots ou de caractères). Et son comportement lorsque l’extrait est trop long ou absent.
- La date de publication : évaluez l’utilité de cette information pour vos visiteurs. Elle va dépendre du type de contenu que vous voulez publier. Par exemple, sur un blog avec une majorité de contenus evergreen, afficher une date de publication pourrait envoyer un signal négatif à vos lecteurs (contenu obsolète, blog peu maintenu) et limiter leur engagement.
Le temps de lecture : une métrique très pratique pour les lecteurs, à déployer en fonction de la nature de vos contenus. - L’auteur : une information qui peut-être intéressante à mettre en avant. Surtout si vos auteurs sont réputés pour leur expertise.
- Les compteurs : de vues, de partages ou du nombre de commentaires… Il s'agit de métriques à double tranchant. Si vous avez une communauté active sur votre blog, n’hésitez pas à les exploiter. À l’inverse, si vous n’avez pas une activité et un engagement suffisant, évitez de les diffuser.
- Le lien “Lire l’article” : Si vous estimez que cet élément est nécessaire pour comprendre comment consulter votre contenu, c’est le signe qu’il est temps de retravailler l’affordance de votre listing 😉
Le fil d’Ariane :
Trop souvent oublié, pourtant son intérêt n’est plus à démontrer. Amélioration de l’expérience utilisateur, optimisation du taux de rebond et gain en visibilité dans les résultats des moteurs de recherche... Le fil d’Ariane est un outil simple pour vos visiteurs que vous avez tout intérêt à intégrer sur vos index de blog. Il sera une aide précieuse pour comprendre la structure de votre blog (et, plus généralement, de votre site).
La navigation :
Vous pouvez utiliser sur vos pages d’index une navigation secondaire afin de circuler rapidement entre vos différentes catégories. Son format sera dépendant du format de blog que vous aurez choisi. Mais pensez à la faire simple, intuitive et évolutive. Elle devra pouvoir permettre l’ajout de nouvelles catégories sur votre blog au fil du temps.
La pagination :
La spécificité de vos pages d’index, c’est qu'elles sont paginées. Elles ont une page principale puis, en fonction de la volumétrie de contenu à afficher, une page 2, 3, 4, etc. Vous devez bien évidemment maquetter cet élément de navigation essentiel.
Son rôle est de permettre à vos visiteurs de remonter dans l’historique de vos contenus et d’identifier rapidement la page sur laquelle il se trouve. Vous devez penser son apparence lorsqu’il y a peu de pages présentes dans la navigation ou à l’inverse beaucoup.
Idéalement, en plus de permettre d’accéder à des numéros de pages spécifiques, la pagination comportera des liens pour passer à la page suivante ou atteindre la page précédente. Enfin, lorsque vous avez une pagination importante, permettre d’atteindre rapidement la première ou la dernière page est un plus.
Les Call to action :
Vos pages d’index peuvent être des points de conversions intéressants. Si vous disposez d’une newsletter, vos pages d’index sont l'endroit idéal pour inciter vos visiteurs à s’inscrire. Cependant, pour optimiser les temps de chargement de vos pages, évitez d’intégrer directement votre formulaire d’inscription, ou différez son chargement à une action de l’utilisateur.
Le champ de recherche :
Si vous avez un blog avec une volumétrie conséquente, et que cette option n’est pas déjà disponible sur votre site, vous pouvez envisager l’intégration d’un moteur de recherche sur votre blog. Disposé sur vos pages d’index, il nécessitera de créer un template d’affichage des résultats. Mais cela peut être une aide à la navigation très efficace pour vos visiteurs.
Vous cherchez une plateforme pour héberger votre blog B2B ?
En seulement 30 minutes, on vous montre comment générer du trafic et des leads en utilisant HubSpot CMS.
Les bonnes pratiques pour le design de vos pages d’index
Bien, nous avons fait le tour des éléments communs à vos différentes pages d’index. Penchons-nous maintenant sur le rôle de chacune et ce que vous devez chercher à obtenir avec vos maquettes. Car toutes vont avoir une utilité, que ce soit pour vos visiteurs ou votre stratégie de référencement naturel.
L’index de blog :
C’est le point d’entrée de votre blog. Il doit permettre rapidement de comprendre la thématique qui va être traitée par vos contenus. Si vous avez prévu d’aborder des thématiques très variées, il pourrait être utile de créer un blog différent pour chacune d’entre elles.
En fonction de votre stratégie et du format que vous aurez choisi, son design sera plus ou moins complexe. Mais idéalement, il devra comporter un titre unique ainsi qu’une description. Vous aurez un listing permettant d’identifier rapidement vos derniers articles et les différentes catégories de votre blog.
Mais n’hésitez pas également à mettre en avant vos contenus populaires. Ou à pousser les articles que vous souhaitez voir performer grâce à une rubrique “le choix de la rédaction”. Si vous avez une newsletter, c’est le bon endroit pour en faire la promotion. Mais pensez aussi aux ressources ou landing pages que vous souhaitez booster.
L’index de catégorie :
Votre index de catégorie doit venir illustrer votre expertise sur des thématiques plus spécifiques. C’est pourquoi il est important que vous ayez effectué un travail de classification approprié lors de la phase stratégique. Des articles sur des sujets trop variés vont donner une impression de catégorie “fourre-tout”. À l’inverse, en étant trop spécifique, vous prenez le risque d’avoir des difficultés à créer suffisamment de contenus.
Toujours est-il que vous devez prévoir dans vos maquettes un titre et une description pour votre index de catégorie. Ils doivent permettre à vos lecteurs d’identifier rapidement les sujets abordés et les angles utilisés. Vous pouvez également faire remonter des liens vers des pages statiques de votre site qui se rapportent à votre thématique. Essayez de faire vivre votre index de catégorie et évitez le syndrome de la catégorie “garage”.
Enfin, comme pour votre index de blog, vous pouvez utiliser votre index de catégorie pour faire remonter des ressources et contenus contextualisés. Par exemple, à travers l’usage d’un Call to action en lien avec votre catégorie pour pousser une landing page de conversion stratégique.
L’index auteur :
On le néglige souvent, mais votre index auteur peut pourtant soutenir vos efforts d’acquisition d’autorité. Surtout si les auteurs qui publient sur votre blog sont des experts concernant les sujets qu’ils traitent. En mettant en avant leurs profils, vous renforcez la confiance de vos lecteurs en vos contenus.
Vous pouvez rester sobre pour ce qui est du design de votre index auteur. Affichez clairement l’identité de votre auteur, éventuellement son rôle au sein de votre entreprise, et mettez en avant sa biographie. Elle peut être succincte, mais idéalement elle doit permettre de comprendre en quoi son parcours fait de lui un expert. Et, évidemment, listez tous les articles publiés par votre auteur.
Enfin, n’hésitez pas à utiliser vos index auteur pour faire un peu de networking. Si ce dernier dispose de réseaux sociaux, surtout professionnels, où il est actif, mettez les avant. Vous renforcerez l’autorité perçue de votre auteur, et mécaniquement celle de votre blog.
Être efficace dans le design de son article de blog
Il est temps de se pencher sur le cœur de votre blog, ses articles. Lorsque vous allez maquetter votre modèle d’article, vous devrez être attentif à plusieurs points. Ne soyez pas économe et, si possible, tenez compte des différents formats de contenus prévus lors de la phase stratégique.
Qui peut le plus peut le moins. Envisagez dès à présent les exceptions qui pourraient se présenter lors de la rédaction et l’intégration de vos articles. Testez votre design avec différentes tailles de titres, avec des contenus courts et longs, avec beaucoup ou peu/pas de visuels… Ces essais vous éviteront de possibles déceptions. Et ils amélioreront grandement la compréhension et la maîtrise de votre contenu.
Mais surtout, restez attentif aux basiques.
Travailler son introduction
L’introduction de votre article, c’est tout ce qui se trouve au-dessus de la ligne de flottaison. Les éléments que votre lecteur verra en arrivant sur votre contenu, avant même d’avoir commencé à scroller. Souvent, c’est ce qui va lui donner envie de continuer sa lecture.
Prenons le cas d’un visiteur qui arrive sur votre article depuis un moteur de recherche. Il doit pouvoir comprendre rapidement sur quel type de contenu il vient de tomber et quelles informations il va trouver. Votre design doit permettre d’accéder à ces éléments sur grand et petit écran.
Si vous souhaitez exploiter un visuel à la une sur vos articles, prenez le temps de vous poser certaines questions pour orienter vos choix graphiques.
- Est-ce que tous vos contenus pourront être illustrés ?
- Est-ce que vos intégrateurs auront les compétences pour choisir ou créer les visuels adéquats ?
- Est-ce que le format de visuels à la une choisi s’adapte correctement à vos listings d’articles ?
- Est-ce que votre visuel à la une fonctionne bien lors de partages sur les réseaux sociaux ?
Un corps d’article aéré et lisible
Votre objectif principal doit être de produire un design qui va faciliter la lecture et l’assimilation de vos contenus. Pour cela, quelques règles à respecter.
- Préférez une typographie simple avec une taille comprise entre 16 et 21 pixels.
- Ne négligez pas les espaces blancs. Aérer autant que possible les différents “blocs” (paragraphes, titres, listes, etc…) de votre article.
- Limitez la largeur de vos lignes de texte pour simplifier la lecture. 70 caractères maximum sont une bonne mesure.
- Différenciez vos niveaux de titres pour structurer efficacement votre contenu.
Vous devez tenir compte, là encore, des différents formats d’articles envisagés lors de la phase de design. Si vous souhaitez un style spécifique pour vos articles de type liste ou comparatif, faites une maquette. Ne vous reposez pas, par exemple, sur un composant ou un modèle de page déjà présent ou désigné sur une autre section de votre site.
Vos articles ne sont pas des pages comme les autres. Et ce qui fonctionne sur une page ne fonctionnera pas forcément sur un article.
Des fonctionnalités utiles à designer
Certaines fonctionnalités peuvent être intégrées à vos articles pour améliorer leur compréhension, leur navigation et leur conversion. C’est le cas par exemple d’un sommaire on-page qui permettra à vos utilisateurs d’accéder rapidement au contenu qui l’intéresse.
Vous pouvez également mettre en avant certaines méta-informations utiles. Les principales sont :
- La date de publication de l’article.
- La date de mise à jour de l’article.
- La durée de lecture estimée.
- La/les catégorie(s) où l’article est publié.
Pensez à prévoir des styles particuliers pour la mise en avant d’informations utiles et/ou importantes. Cela aidera vos lecteurs à mieux identifier les éléments clés de vos contenus. Et vous permettra de diffuser des call to action plus efficaces.
Pour finir, n’oublions pas les classiques “Articles associés”. Habituellement en bas de page, juste après le contenu de l'article, ils sont très souvent générés automatiquement par votre CMS. Ils vont être utiles pour capter l’intérêt de votre lecteur et le garder un peu plus longtemps sur votre blog.
Et si vos éditeurs pouvaient décider des articles à mettre en avant sur chaque article ? Cela peut être intéressant pour proposer des liens plus qualitatifs vis-à-vis des thématiques traitées. C’est pourquoi il peut être utile de prévoir dans vos maquettes un espace ou un style particulier pour afficher une liste d’articles bien spécifiques.
Comment gérer la phase de design de son blog ?
Si vous voulez éviter les allers-retours et l’épuisement, procédez par itérations. Ne travaillez pas vos templates comme des blocs figés. Partez plutôt des différents items qui les constituent. En commençant par les plus standards, ceux que vous allez retrouver de manière globale sur votre blog. Puis progressivement, travailler le design de vos éléments spécifiques, ceux qui répondent à des besoins particuliers.
Communiquez régulièrement avec les différents acteurs du projet. N’attendez pas le dernier moment pour leur présenter la version “finale” de votre design. C’est le meilleur moyen pour devoir défaire et refaire vos maquettes. Interrogez les développeurs sur la faisabilité de vos idées. Questionnez les rédacteurs et intégrateurs sur leurs pratiques. Challengez vos décideurs sur leurs attentes.
Enfin, confrontez-vous constamment à votre stratégie. Elle doit être le fil conducteur de vos décisions. Demandez-vous si vos choix en termes de design servent les enjeux et objectifs définis ? Ce n’est pas le cas ? Alors, dépriorisez votre action et concentrez-vous sur l’essentiel. Créer un blog qui attire, convertit et fidélise.
Vous cherchez une plateforme pour héberger votre blog B2B ?
En seulement 30 minutes, on vous montre comment générer du trafic et des leads en utilisant HubSpot CMS.
