10 meilleures pratiques de mise en page de blog pour 2022 - Ne laissez pas les mises en page maladroites ruiner votre UX

Publié: 2022-04-30

Un concepteur d'expérience utilisateur avisé a déclaré : « un bon design est invisible ». En d'autres termes, si vous ou vos utilisateurs remarquez la mise en page de votre blog ou l'expérience utilisateur, il s'agit probablement d'une mauvaise conception.

Pensez à tous les sites Web, applications et plates-formes que nous utilisons quotidiennement. Pensons-nous consciemment à l'interface utilisateur et à l'expérience ?

La meilleure interface utilisateur (UI) et expérience utilisateur (UX) est celle qui ne nous empêche pas d'atteindre nos objectifs, qu'il s'agisse de commenter une publication Instagram, de naviguer dans une publication de blog longue ou de saisir des données dans une application Web.

Un blog bien conçu est essentiel pour les propriétaires d'entreprise de commerce électronique à bien des égards. Par exemple, ils génèrent du trafic vers un site et contribuent à établir la confiance avec des clients potentiels. Ils aident également à promouvoir les produits et services, générant des opportunités de croissance plus tard.

Malheureusement, si vous avez une conception maladroite, vous constaterez rapidement que les gens seront moins susceptibles de rester et de lire votre contenu. Cela signifie qu'aucune des bonnes choses mentionnées ci-dessus n'est susceptible de se produire.

"Le voyant est le message." Cela signifie que la manière dont vous diffusez votre contenu est tout aussi importante que la qualité du contenu lui-même.

Étant donné que votre blog est une partie importante de votre entonnoir marketing, une bonne UI/UX affectera certainement les visiteurs de retour et les revenus.

Cet article de blog passera en revue certaines des meilleures pratiques de mise en page pour 2022 qui maintiendront l'engagement des utilisateurs, reviendront pour en savoir plus et recommanderont votre blog à d'autres.

10 meilleures pratiques de mise en page de blog pour UX en 2022

La technologie, y compris les meilleures pratiques Web, semble changer chaque semaine. Et avec les nouvelles technologies, de nouvelles façons passionnantes de consommer du contenu s'offrent à vous.

Les utilisateurs sont désormais habitués à consommer du contenu en courtes rafales, que ce soit via les réseaux sociaux ou en lisant des blogs sur leurs téléphones.

La mise en page de votre blog doit s'adapter à ces changements et être facile à lire, peu importe où et comment quelqu'un le consomme.

Voici quelques conseils à garder à l'esprit lors de la conception de la mise en page de votre blog pour une UX optimale.

Conseil n° 1 : Utilisez une approche centralisée de « centre d'apprentissage »

Écrire longuement sur un sujet particulier est un excellent moyen d'établir une autorité thématique sur Google et de faire confiance à votre public.

Cependant, la façon dont vous organisez ce contenu sur votre blog est tout aussi importante que le contenu lui-même.

Disons que vous avez écrit tout ce qu'il y a à savoir sur la collecte de fonds pour les organismes sans but lucratif. C'est génial. Mais à quoi cela sert-il à un prospect à but non lucratif si le contenu pertinent n'est pas balisé, non catégorisé et entrecoupé d'un tas d'autres sujets ?

Ce n'est pas idéal pour l'utilisateur qui souhaite consommer tout votre contenu sur un sujet spécifique en une seule fois. Il est bien préférable d'avoir une approche cumulative où tout ce qui concerne ce sujet est organisé en un seul endroit - nous appelons cela l'approche du « centre d'apprentissage ».

Cette approche est un excellent moyen d'augmenter l'engagement. Il permet aux utilisateurs de trouver et de consommer facilement tout le contenu que vous avez sur un sujet particulier sans se lancer dans une chasse au trésor sur tout votre site Web. Cela vous permet également de faire la promotion croisée d'autres éléments de contenu et d'augmenter le temps passé sur votre site.

De plus, l'approche du centre d'apprentissage augmentera probablement le nombre de pages par session.

À quoi cela ressemble-t-il en pratique ? Vous pouvez consulter le blog de MatterApp pour de bons exemples. La société, qui propose une application qui donne des félicitations et des commentaires aux équipes sur le lieu de travail, a regroupé son contenu de pilier et de cluster sous six catégories sur une seule page. La page contient tout ce qu'un utilisateur aurait besoin de rechercher pour en savoir plus sur son produit.

Conseil n°2 : Tirez parti des éléments « collants »

Les humains sont paresseux. Par conséquent, l'un des principaux principes de conception est d'ajouter le plus de valeur tout en faisant travailler l'utilisateur le moins possible.

L'utilisation d'éléments "collants" sur la page est l'un des meilleurs moyens de faciliter cela et d'augmenter l'engagement sur votre blog.

Les éléments collants restent visibles à l'écran lorsque les utilisateurs font défiler vers le bas. Cela signifie qu'ils sont toujours accessibles sans que l'utilisateur ait à revenir en haut de la page.

Par exemple, si vous avez un appel à l'action pour vous inscrire à votre liste de diffusion, l'utilisation d'un élément collant garantira qu'il est toujours visible et à portée de main.

Vous pouvez en voir un exemple sur le blog de HubSpot . La société utilise un appel à l'action collant dans le coin inférieur droit de l'écran qui encourage les utilisateurs à s'inscrire à leur liste de diffusion.

Vous pouvez utiliser des éléments collants à diverses autres fins, telles que :

  • Boutons de médias sociaux
  • Menus de navigation
  • Barres de recherche
  • Widgets de chat en direct

La modération est la clé ici. Trop d'éléments collants peuvent rendre la page écrasante et encombrée, ce qui finira par nuire à l'expérience utilisateur.

Conseil n° 3 : aller droit au but

Avoir un contenu long est essentiel pour générer du trafic vers votre blog et bien se classer sur Google. Cependant, la plupart des lecteurs veulent des réponses rapides et ne veulent pas vous entendre parler sans cesse des vertus de vos produits ou services.

Par exemple, si vos utilisateurs veulent simplement la réponse à la question "qu'est-ce que l'écriture de blog", la plupart des résultats de recherche pour sa requête impliquent la lecture de guides longs et complets. Bien que les guides répondent aux questions, votre utilisateur devra parcourir un long contenu pour trouver la définition.

Un autre exemple consiste à parcourir un long article de blog sur Pinterest pour accéder aux ingrédients et aux étapes de la recette. Dieu merci, les experts culinaires utilisent des liens qui vous amènent directement à la recette, n'est-ce pas ?

Ces exemples sont indéniablement chronophages et frustrants pour la plupart des utilisateurs, ce qui est la quintessence d'une mauvaise expérience utilisateur. Alors, utilisez plutôt les boîtes de résumé rapide des articles pour aller droit au but.

Avoir de petites boîtes contenant le résumé de l'article entier est pratique et constitue un excellent moyen de faire gagner du temps à vos utilisateurs ou lecteurs. Bien que les encadrés de résumé soient ajustables pour s'adapter au contenu n'importe où, les placer au début de l'article est un excellent moyen d'élaborer la réponse ou le contenu pour les lecteurs.

En prime, répondre clairement et simplement aux questions des utilisateurs augmentera la probabilité que Google vous place dans son résultat convoité "extrait de code", qui est le meilleur résultat dans un SERP Google qui met en évidence la réponse à la question d'un utilisateur.

Conseil n° 4 : utilisez une conception de carte de blog

Pour garder votre blog frais, vous êtes probablement en train de créer beaucoup d'articles - bravo ! Continuez comme ça.

Cependant, cela peut rapidement entraîner un encombrement visuel, en particulier lorsque vous essayez de mettre en évidence tous vos nouveaux articles en même temps sur la page principale de votre blog.

Alors, quel est le meilleur équilibre entre présenter des articles sur la page principale de votre blog sans submerger l'utilisateur ? Quelle doit être la taille des vignettes de blog et des liens d'articles ?

Eh bien, il n'y a pas de réponse claire et nette à cette question, mais nous savons au moins que l'approche la plus efficace est la mise en page de la "carte de blog". En ce qui concerne les spécificités, nous recommandons d'étudier et de reproduire les pratiques des sites d'édition réputés.

Medium.com fournit un excellent exemple de ce format.

L'utilisation d'une conception de carte de blog présente de nombreux avantages, notamment les suivants :

  • Ils sont faciles à numériser et à digérer.
  • Ils nous permettent de reconnaître, de rappeler et de lire facilement les informations importantes.
  • Ils vous permettent d'inclure beaucoup d'informations sans submerger l'utilisateur.
  • Ils peuvent être facilement réorganisés et réorganisés, ce qui est idéal pour une conception réactive.
  • Ils fournissent un espace blanc suffisant, ce qui les rend visuellement attrayants et faciles à naviguer.

Cependant, les mises en page doivent avoir des tailles de police et des images différentes pour distinguer clairement les éléments les moins importants et les plus importants. Cette tactique rend le design plus lisible pour les lecteurs.

De plus, vous pouvez inclure les éléments suivants dans la conception de la carte.

  • L'image sélectionnée
  • Auteur du blog (image)
  • Catégorie
  • Titre du Blog
  • Liens de partage social
  • Date de publication
  • Extrait du blog
  • Bouton En savoir plus

En gardant cette liste à l'esprit, regardons la page d'accueil de Medium :

Remarquez chaque « carte » et toutes les informations associées. Presque tous les articles de blog contiennent au moins les éléments suivants :

  • Titre du Blog
  • L'image sélectionnée
  • Auteur du blog
  • Image de l'auteur du blog
  • Date de publication
  • Temps de lecture
  • La possibilité de mettre la publication en signet pour plus tard

Vous n'avez probablement jamais remarqué tous ces éléments auparavant, n'est-ce pas ? Cependant, vous appréciez probablement leur existence. C'est un exemple parfait d'un grand design invisible.

De plus, l'une des meilleures pratiques recommandées par les experts en marketing entrant d'Impact pour organiser les articles dans la mise en page de la carte de blog consiste à les mettre en colonnes de deux ou trois.

Cela dépend des informations que vous présentez, mais dans l'ensemble, cela maximise le nombre de messages affichés simultanément.

Conseil n° 5 : incluez le temps de lecture

Lors de la création de contenu, vous voulez que les gens restent et le lisent. Mais si vos lecteurs ont l'impression de ne pas avoir le temps, ils passeront probablement à autre chose. C'est pourquoi l'une des meilleures choses que vous puissiez faire est de leur dire exactement combien de temps votre article prendra à lire.

Cette tactique est particulièrement importante si votre public cible est composé de personnes occupées qui sont toujours en déplacement. En leur donnant une estimation du temps de lecture, vous avez mis en place une stratégie qui donne au lecteur une longueur d'avance sur l'engagement de temps qui est également plus susceptible de le ramener pour un contenu facile à digérer en de courtes périodes.

Donc, si vous voulez que les gens restent et lisent votre contenu, dites-leur exactement combien de temps cela prendra. Cet acte simple augmentera l'engagement et gardera les gens sur votre site plus longtemps.

Astuce #6 : Utilisez les espaces blancs à votre avantage

L'espace blanc, également appelé espace négatif, est l'espace autour des éléments d'une page. Il est important d'utiliser des espaces blancs dans votre mise en page pour piquer l'intérêt visuel du lecteur et attirer l'attention sur un contenu spécifique.

Trouver le bon équilibre entre les espaces blancs est essentiel pour créer une mise en page bien conçue. Trop peu d'espace peut donner l'impression qu'une page est à l'étroit et occupée, ce qui peut être écrasant pour les utilisateurs. D'un autre côté, trop d'espaces blancs peuvent donner l'impression qu'une page est inachevée ou non professionnelle.

Par exemple, TikTok utilise beaucoup d'espace blanc. La quantité qu'ils utilisent peut sembler ridicule sur un site Web d'entreprise, mais c'est parfait pour attirer toute l'attention sur la vidéo sur la page.

En général, il est préférable d'utiliser trop d'espace plutôt que trop peu d'espace. Cela aidera à créer un look propre et spacieux qui est agréable pour les yeux.

Ainsi, lorsqu'il s'agit de mises en page de blogs, les espaces blancs sont votre ami. Cela peut aider à attirer l'attention sur un contenu spécifique et rendre votre mise en page plus attrayante visuellement.

Conseil n° 7 : n'ayez pas de barres latérales encombrées

C'est une erreur courante que font de nombreux blogueurs. Ils remplissent leurs barres latérales d'icônes de médias sociaux, d'opt-ins, de publicités et d'autres indésirables aléatoires.

Cette pratique donne non seulement une mauvaise image de tout, mais elle peut aussi être déroutante et accablante pour les visiteurs.

Cela donne également l'impression que vous vous souciez davantage de vendre quelque chose que d'ajouter de la valeur à vos clients, ce qui va à l'encontre de l'objectif même du contenu informatif et de renforcement de la confiance.

Ne traitez pas votre barre latérale comme un tiroir à bric-à-brac. Au lieu de cela, respectez l'essentiel, comme les icônes de médias sociaux et les opt-ins. Cela aidera à créer une apparence plus simple, facile à naviguer et à améliorer l'expérience utilisateur.

Conseil n° 8 : Utilisez la typographie à bon escient

La typographie est l'apparence du texte sur une page physique ou numérique pour les curieux. Cela implique également de manipuler la police de caractères pour rendre la forme écrite lisible et attrayante lorsqu'elle est affichée.

Cet arrangement implique généralement de prendre des éléments de conception tels que la longueur des lignes et des mots, l'espacement, etc., ou la taille des points et de les ajouter ou de les manipuler pour les rendre agréables à l'œil et plus digestes.

Pour un meilleur impact, il est essentiel d'utiliser la typographie à bon escient dans votre mise en page. Vous créez un intérêt visuel et attirez l'attention sur un contenu spécifique lorsque vous le faites.

Par exemple, vous voudrez toujours utiliser des polices plus grandes pour les titres et des polices plus petites pour le corps du texte. Ou vous voudrez peut-être utiliser une police différente pour les titres.

Idéalement, les tailles de police comprises entre 17px et 21px sont considérées comme adaptées aux lecteurs numériques. Certaines tailles de police sont naturellement plus grandes que d'autres.

De plus, il est bon de limiter le nombre de polices que vous utilisez sur une page à trois au maximum. Par exemple:

  1. Utilisez le premier style de police pour le titre des articles.
  2. Utilisez le deuxième style de police pour les titres des barres latérales.
  3. Utilisez le troisième style de police pour le corps du message.

Et un dernier conseil, assurez-vous que vos polices sont sécurisées pour le Web. Sinon, ils risquent de ne pas se charger sur certains appareils. Google Fonts est un référentiel gratuit de polices Web, et c'est toujours une valeur sûre.

Conseil n° 9 : intégrez des articles connexes

Une autre façon d'amener les gens à rester et à lire votre contenu consiste à incorporer des articles connexes dans votre mise en page.

Les articles connexes sont des liens vers d'autres articles de blog (internes et externes) dont le sujet ou le sujet est similaire. En incluant ces liens, vous pouvez garder les gens engagés et lire votre contenu pendant de plus longues périodes.

Pour trouver des articles connexes, vous pouvez utiliser un plugin comme Yoast SEO. Ce plugin analysera votre article de blog et vous suggérera des articles connexes à inclure.

Vous pouvez également effectuer une recherche manuelle en accédant à Google et en recherchant "site [mot clé du sujet] : [votresite.com]". Tant que Google indexe votre site, cela révélera toutes les pages et tous les articles de votre site contenant ce mot-clé.

Par exemple, si nous voulions voir toutes les pages que nous avons écrites sur le thème des blogs, je saisirais la recherche suivante dans Google : "site de blogs : skuvault.com".

Les pages qui en résultent sont probablement d'excellents candidats pour l'interconnexion.

Astuce n°10 : Utilisez des images de haute qualité

Il est crucial d'utiliser des images de haute qualité et non ringardes dans la mise en page de votre blog. C'est parce que les gens sont des créatures visuelles qui ont tendance à s'intéresser davantage aux images qu'au texte.

En fait, des études ont montré que les gens sont plus susceptibles de se souvenir des informations si elles sont présentées à côté d'une image.

Ainsi, lorsque vous choisissez des images pour vos articles de blog, assurez-vous qu'elles sont de haute qualité et pertinentes par rapport au sujet traité.

Faites de votre mieux pour éviter les photos génériques. Parfois, c'est aussi simple que d'effectuer quelques modifications sur une photo existante pour la rendre plus personnalisée.

Pexels est un excellent endroit pour trouver des photos gratuites et élégantes .

Autres façons d'améliorer l'expérience utilisateur de votre blog

Outre les dix conseils que nous avons répertoriés, voici d'autres moyens d'améliorer l'UX/UI de votre blog :

  • Choisissez un design scannable : Bloguer est très différent de l'écriture d'un livre ou d'un article académique. Vous pouvez rendre la mise en page du blog lisible en écrivant des sections courtes et précises, en évitant les longs paragraphes, en séparant le texte avec des en-têtes et des images pertinentes et en organisant les sections à l'aide de sous-en-têtes et d'en-têtes.
  • Marquez votre mise en page : L'image de marque est la clé du marketing d'une entreprise prospère, et cela fonctionne de la même manière pour la mise en page de votre blog. Le blog que vous créez doit refléter l'ambiance et l'apparence de votre marque. Cela signifie que si votre page d'accueil a un thème ou un design simple, c'est une bonne idée de le conserver pour la mise en page de votre blog.
  • Utilisez l'alignement vertical : Les éléments mal conçus ressortent comme un pouce endolori. Par exemple, lorsque les images et le texte semblent déplacés par rapport au reste de la colonne, cela devient une distraction et ne semble pas professionnel. De plus, les paragraphes et les photos doivent avoir la même largeur pour une continuité visuelle.
  • Inclure une barre de recherche : si vous avez beaucoup de contenu sur votre site, il peut être difficile pour les internautes de trouver ce qu'ils recherchent. Il est important d'inclure une barre de recherche dans la mise en page de votre blog. De cette façon, les gens peuvent trouver rapidement et facilement les informations qu'ils recherchent.
  • Mettez en surbrillance les auteurs de votre contenu : Si vous avez plusieurs auteurs sur votre blog, il est important de mettre en évidence leurs noms et d'inclure une photo de haute qualité à côté de leurs publications. Cette approche humanise tout et aide à établir la confiance avec vos lecteurs. Cela leur permet également de trouver facilement d'autres contenus du même auteur et aide Google à déterminer votre EAT (expertise, autorité, confiance).
  • Rendez votre site adapté aux mobiles : Nous sommes en 2022. Il n'est pas négociable de vous assurer que la mise en page de votre blog est adaptée aux mobiles. Heureusement, toutes les mises en page de blog modernes de fournisseurs réputés (WordPress, Squarespace, Shopify) incluent une mise en page adaptée aux mobiles dès la sortie de la boîte. Si vous n'avez pas de mise en page adaptée aux mobiles, vous avez des problèmes au-delà de la portée de cet article.

Voilà! Utilisez ces conseils pour créer une mise en page de blog géniale qui incite les lecteurs à revenir pour en savoir plus.

N'oubliez pas le contrôle des stocks

Si vous suivez nos conseils et mettez en œuvre ces conseils UX, préparez-vous à une augmentation du lectorat, du trafic et des ventes (de rien !).

Si vous êtes une boutique de commerce électronique, vous aurez besoin d'un bon système d'inventaire pour gérer cette croissance.

SkuVault existe pour aider les entreprises de toutes formes et tailles à optimiser et rationaliser le travail fastidieux lié au contrôle des stocks.

Cliquez ici pour plus d'informations sur les façons spécifiques dont nous accompagnons les propriétaires d'entreprise pour les aider à accroître leurs résultats (et à sauver leur santé mentale).