UX#02 - Conception d'un blog

par

Le concept du blog existe depuis 1994, lorsqu’un étudiant du MIT - Claudio Pinhanez - créa un journal en ligne. Aujourd’hui, ils génèrent une grande partie du trafic Internet via un peu plus de 150 millions d’adresses différentes. Tous les jours sont rédigés, publiés, consultés et partagés plus de 4 millions d’articles. De nombreux lecteurs consultent des blogs quotidiennement, depuis leur PC ou leur mobile.

Il existe un bon nombre outils permettant de créer un blog personnel ou professionnel en 1h. Un Wordpress avec un thème gratuit, un nom de domaine et pouf, c’est en ligne.

Quelles sont les composantes essentielles pour faire un blog efficace ? Existe t-il des squelettes qui sortent du lot ? C’est ce qu’on va voir, à travers le découpage des fonctionnalités d’un blog et du réagencement prévu pour notre propre blog !

Structure d’un article

Avant de designer quoique ce soit, il faut savoir ce que l’on doit agencer. Malgré la quantité d’articles produits quotidiennement, la structure d’un blog n’est pas très complexe.

Chaque article va être composé des informations suivantes :

  • ID - Identifiant numérique, généré par le système et invisible pour l’auteur et l’utilisateur
  • Date de création - Souvent générée par le système, puis modifiable par l’auteur
  • Intitulé
  • Alias / URL - Constituera l’adresse pour consulter l’article
    • Ex : 2019/01/ux-02-conception-blog
    • Pour : https://www.webexmachina.fr/article/2019/01/ux-02-conception-blog.html
  • Image - Optionnelle pour le fonctionnement, mais obligatoire pour accrocher vos visiteurs
  • Accroche - Limitée à un certain nombre de caractères de votre choix
  • Contenu

Voilà. C’est tout ce dont vous avez besoin pour qu’un article fonctionne. Bien évidemment, il y a beaucoup d’autres choses que l’on pourrait ajouter, mais ce ne seront pas des éléments utiles pour l’ergonomie.

Composantes majeures

Tout comme la structure, il y a peu de blocs essentiels pour faire tourner un blog. On va en avoir 2 : une liste et un lecteur.

Liste d’articles

Le concept est simple, c’est la liste de vos articles, dans leur ordre de création. Vous devez adapter le design en fonction de votre capacité de publication. Votre priorité est de mettre en avant vos derniers articles, et de laisser le temps aux visiteurs de les consulter avant qu’ils disparaissent, poussés par les plus récents.

Si vous publiez 5 articles quotidiennement, il semble pertinent d’avoir ces éléments du jour en avant, et de laisser les 10 précédents sous un autre format, moins captivant, mais toujours accessibles rapidement.

Si vous publiez un article à la fois - comme nous - l’intérêt va se porter sur le dernier publié, les autres étant tous en retrait par rapport à lui.

Concernant le style de la liste, il y a un assez grand choix. Si vos titres sont assez parlants, vous pouvez vous contenter de n’afficher que le titre et le visuel, dans une grille classique ou masonry. Si vous aimez faire des accroches, la grille est toujours possible, mais on gagne très vite en hauteur, ce qui rend le tout un peu trop confus.

Dans tous les cas, on doit avoir un lien vers l’article, qu’il soit sur tout le bloc ou sur un bouton “Lire l’article”.

Grille classique
Masonry
Grille classique - Avec accroche

Quand les articles s’accumulent, pour éviter d’en avoir trop d’un coup, on met en place une pagination.

La pagination classique consiste à afficher des pages de 15/30 articles d’un coup, jusqu’au premier article publié. On clique sur un bouton et on change de page. On peut également mettre en place un “Infinite Scroll”, qui consiste à charger les articles au fur et à mesure que l’on descend dans la page, à la manière des réseaux sociaux.

Pagination classique
Infinite Scroll

Il n’y a pas de meilleure façon, je trouve toutefois que l’Infinite Scroll est très fluide mais fait un peu plus brouillon car on ne sait jamais vraiment où on est dans la liste. Cela demande également plus de développement, car il y a plein de subtilités à respecter pour ne pas planter son SEO. La pagination classique n’est ni jolie, ni originale, mais elle est simple, efficace, peu chère et ne pose pas de soucis de SEO. Elle fait le job quoi.

Lecteur d’articles

Bien qu’on ait une URL précise par article, ils seront toujours agencés de la même façon, grâce à un et un seul lecteur. Il y a quelques consignes à respecter avant de jouer avec le design :

  • On doit avoir le titre dans une balise <h1>
  • Le contenu de l’article doit être le plus lisible possible
  • On doit rediriger ou générer une page 404 si aucun article n’est trouvé
  • On doit avoir un bouton permettant de revenir à la liste

Un lecteur doit se focaliser sur l’accessibilité de l’article. Son seul job est de faire en sorte que l’article soit lu en intégralité. Pour cela, le contenu ne doit pas être encastré dans une page compliquée, et il ne doit pas être interrompu.

Honnêtement... C'est infâme.

Les annonceurs rémunèrent bien les blocs placés en grand dans la page, car ils ont la certitude que ceux-ci seront vus et bénéficieront de toute l’attention d’un visiteur concentré.
Mais cela sort ce dernier de sa lecture, avec un visuel, bien souvent flashy et qui n’a rien à voir avec la choucroute.

Si pub il doit y avoir, il est plus intelligent de prévoir une colonne de blocs annexes à l’article, sur la droite de la page et d’y insérer les pubs souhaitées.

Si vous utilisez des illustrations, c’est une bonne idée de les remettre avant le contenu. C’est un processus permettant à l’utilisateur de savoir qu’il est dans la bonne page et fera office d’introduction à l’article, pourvu que le visuel soit bien choisi.

Enfin, c’est optionnel pour que le blog remplisse son objectif, mais depuis quelques années, c’est impensable d’avoir un article blog: Vous devez prévoir des boutons de partage.
Il existe des petits plugins qui automatisent ça très bien, comme JSSocials (celui utilisé sur notre blog) ou RRSSB. Il existe aussi des services complets, comme Addthis, qui fournissent des stats additionnelles sur l’usage de ces boutons.

Fonctionnalités complémentaires

Une fois que cette base liste/lecteur est en place, on peut la compléter avec différentes fonctionnalités. Un site internet est globalement un chantier permanent, tous ses axes sont améliorables, visuellement ou techniquement.

Recherche / Filtres

Très utile quand on a un blog diversifié et/ou dense, une barre de recherche et quelques filtres permettent d’accéder facilement et rapidement à une sélection d’articles précis.
C’est cependant un outil à double tranchant car si on n’atteint pas une parfaite pertinence, la fonctionnalité sera au mieux délaissée et au pire passera pour un bug.
Il est possible de ne mettre en place que des filtres sélectionnables, pour réduire le panel de mots-clefs et s’assurer cette pertinence.

Il est conseillé de créer un champs “tags”, qui permet de sélectionner des mots-clefs pour chaque article. Que ce soit pour les filtres ou la recherche textuelle, cela canalise les articles à afficher.

Articles similaires

Un des problèmes que l’on rencontre dans les stats d’un blog est que nos visiteurs viennent d’un partage sur les réseaux sociaux, puis quittent le site après avoir lu l’article.
C’est un peu frustrant quand on a plein d’autres articles qui pourraient les intéresser !

L’idée est donc d’offrir la possibilité de consulter des articles similaires. Cela fonctionne un peu comme la recherche ci-dessus, sans la possibilité de saisir les mots-clefs.
On prend les tags de l’article courant, et on “recherche” les articles les plus pertinents, par rapport à ces tags.

Une autre possibilité est de permettre la sélection directement des articles similaires, à la mano, mais c’est vite fastidieux quand on a un grand volume d’articles.

Commentaires

Grâce aux réseaux sociaux, les visiteurs ont l’habitude de laisser leur opinion sur les articles mis en ligne. Facebook permet d’ailleurs d’avoir une sorte de widget de commentaires que l’on retrouve fréquemment, à côté d’un flux de commentaires plus classiques.

Il n’y a rien de complexe dans l’ajout de commentaires pour un blog. Cela crée de l’interaction et de l’engagement avec vos visiteurs et théoriquement c’est positif. Toutefois, c’est assez imprédictible et demande de la modération. Un mauvais commentaire peut donner une mauvaise impression générale aux autres visiteurs.

Newsletters

Enfin, la dernière option d’un blog est de proposer un abonnement aux newsletters. C’est un sujet à part entière que l’on va survoler ici, car il faudra plus qu’une section pour expliquer les possibilités d’une newsletter.

Dans notre article, on va simplement avoir un champ d’inscription à la newsletter, pour être averti des prochaines publications. Il est tout à fait possible - selon votre capacité de production - de programmer des newsletters automatisées. Hebdomadaires ou mensuelles, elles récapitulent l’ensemble des articles publiées sur une période donnée.

Attention toutefois, avec la RGPD, les règles concernant l’abonnement à une newsletter doivent être respectées à la lettre.

Cas concret - Refonte de notre blog

Rien ne remplace la pratique, donc pour illustrer tout ce qu’on a pu dire précédemment, on va étudier la refonte prévue de notre blog ! On a pas tout mis car nous n’avons pas un grand blog ou parce que certaines fonctionnalités ne nous intéressent tout simplement pas, et on expliquera pourquoi :)

Liste - Affichage PC
Liste - Affichage Mobile

Le premier changement est de fusionner les deux listes prévues à la base. Il se trouve que nous n'écrivons pas assez d'articles essentiels pour remplir la colonne et qu'elle déséquilibre la page. De plus, l'utilisation du fullscreen surcharge l'espace disponible, donc nous revenons à une colonne centrée, moins large.

Au sein même des blocs, les petits tags contenant la date et la catégorie de l'article ne sont pas du tout satisfaisant visuellement. Ce pourquoi ils ont été transformés en marqueurs triangulaires colorés, avec une icône pour associer la couleur avec la catégorie. La catégorie sera également répétée textuellement dans le bloc, sur la droite de l'accroche, en dessous de la date.

La pagination restera ainsi et pour l'instant, nous ne sommes pas encore fixés sur la pertinence d'une recherche.

Lecteur

Notre lecteur est globalement satisfaisant, donc peu de choses vont bouger. La seule chose qui va changer sera l'ajout d'articles similaires, permettant aux utilisateurs de poursuivre leur navigation.

Ni les commentaires ou les newsletters n'ont retenus notre attention également, car cela demande du temps et nous n'avons pas les ressources en interne pour gérer ça comme nous le souhaiterions.

Voilà qui conclut notre article sur la conception d'un blog ! Il y a encore beaucoup de possibilités que nous ne pouvons évoquer sans faire un roman mais comme tout système : faites une base solide et faites la évoluer au fur et à mesure de son utilisation.

Ne perdez pas de vue que le design doit servir l'utilisateur, et que malgré la nécessité de rentabiliser une activité, bourrer un blog de pubs fera fuir tout le monde. Faites simple, efficace et la suite s'écrira toute seule.