Comment concevoir un contenu lisible pour le Web

Concevoir du contenu, c'est plus que faire quelque chose de beau. Vous devez créer un design que les gens liront réellement et les aider à dialoguer avec le contenu. Parfois, c'est plus facile à dire qu'à faire.

Les gens ont généralement une capacité d'attention limitée et vous ne devez pas vous attendre à ce qu'ils digèrent chaque mot à l'écran. Mais vous pouvez utiliser certaines techniques de conception et certains éléments pour aider les utilisateurs à lire le plus possible.

Établir une hiérarchie avec taille et échelle

Une conception lisible commence par plusieurs niveaux de texte. L'établissement d'une hiérarchie de pensées aidera les utilisateurs à parcourir le texte.

Les grandes tailles sont un repère visuel qui indique aux utilisateurs de lire une certaine chose en premier parce que c'est le plus important. Les yeux de la plupart des utilisateurs passeront naturellement des éléments les plus grands aux plus petits, créant ainsi un flux visuel agréable.

Les yeux de la plupart des utilisateurs passeront naturellement des éléments les plus grands aux plus petits, créant ainsi un flux visuel agréable.

Tirez le meilleur parti des balises H2, H3 et H4 de la conception et créez une échelle cohérente pour les sous-titres pouvant être utilisée pour fractionner de gros blocs de texte.

La création d'une échelle avec des emplacements et des tailles de texte cohérents facilite encore davantage la navigation dans le texte. Cela est vrai tant pour le contenu de forme longue que pour le contenu abrégé de pages d'accueil, tel que Narrative, ci-dessus.

Notez que la page d'accueil comporte quatre niveaux de texte distincts dans la zone des héros. Il y a un gros titre en couleur, avec un court extrait ci-dessus. Ensuite, le contenu du corps a un style avec une ligne supplémentaire en gras pour l’accentuation. La plupart des utilisateurs verront les mots dans cet ordre: titre, texte en gras, corps du texte, extrait de titre en raison du poids, de la taille et de l'échelle du lettrage.

Choisissez des polices lisibles

Bien qu'une conception amusante d'une police de caractères ou d'un script élaboré puisse être très amusante à concevoir, ce n'est pas toujours le meilleur choix pour l'utilisateur final.

Les polices lisibles sont les plus susceptibles d'être lues.

Voici pourquoi:

  • Les polices très lisibles sont plus faciles à numériser.
  • Les lettres sont faciles à voir dans différentes tailles.
  • Les lettres ne fonctionnent pas ensemble et ne créent pas d'espaces ou de formes inconfortables.
  • Ces caractères sont couramment utilisés et faciles à utiliser pour les utilisateurs. (Même les types de caractères similaires, mais n'appartenant pas à la même famille, semblent familiers à la plupart des utilisateurs.)

Les caractéristiques d'un caractère lisible comprennent:

  • Poids standard - ni trop épais ni trop fin
  • Hauteur x commune - ni trop courte ni trop haute
  • Lettres plus arrondies - pour que le? O? a une forme circulaire
  • Peu ou pas oblique
  • Des lettres qui ne sont ni trop proches ni trop éloignées

En regardant ces caractéristiques, vous pouvez voir que presque toutes les catégories de types incluent probablement une option lisible. Vous n'êtes pas obligé de coller uniquement aux empattements ou aux empattements; un mélange d'autres caractères est en fait bien. Assurez-vous simplement de tester les mots que vous prévoyez d’utiliser dans cette police pour vous assurer qu’ils sont faciles à lire.

Contenu de pile pour les personnes qui numérisent

Le contenu empilé revient à la hiérarchie. Mais avec un élément supplémentaire, pensez au texte et aux éléments non textuels lorsque vous empilez du contenu.

Si l'utilisateur voit un bloc de texte et une image à l'écran, l'image est presque toujours la première chose qui attire son attention. Il est donc important d'empiler les éléments de manière à aider les utilisateurs à les parcourir d'une image à l'autre. texte.

Alzheimers New Zealand, ci-dessus, utilise l'empilement pour amener les utilisateurs au titre principal. Notez comment le texte est positionné au centre de l'image avec trois personnes. Votre œil s’adresse d’abord aux visages, puis passe au cercle subtilement animé contenant du texte. Ensuite, ils se dirigent vers le bloc de texte plus petit, plus secondaire.

Et voici le problème: tout cela s’est passé si rapidement lorsque vous avez vu cette image que vous n’y aviez peut-être même pas pensé. La plupart des utilisateurs scannent la totalité de l'écran de la même manière lorsqu'ils décident d'interagir avec le contenu ou non.

Play Up Visuals

Jouez des éléments visuels en les intégrant à d’autres éléments pour un design plus immersif.

Vous voulez vraiment vous assurer que les utilisateurs voient votre contenu? Intégrez le texte et les éléments visuels de manière significative. Créez une image de héros qui utilise un visuel intéressant, une association de couleurs inhabituelle ou une combinaison d'animation et de lettrage pour inciter les utilisateurs à faire une pause.

L'erreur que font parfois les concepteurs est de séparer chaque élément dans sa propre boîte ou son propre espace. Jouez des éléments visuels en les intégrant à d’autres éléments pour un design plus immersif.

Octavo Designs, ci-dessus, a une page d'accueil dans laquelle vous ne pouvez pas éviter d'être attiré. Pour commencer, il y a une vache très drôle sur un fond coloré. Le texte fait vraiment partie de l'image. (Elle touche en réalité les cornes de la vache.) Cette combinaison de visuels et de texte attire les utilisateurs vers le contenu et les incite à vouloir davantage.

Gardez les lignes (et les pensées) courtes

Lors de la planification de la conception, réfléchissez en petites rafales. Chaque page ou écran doit se concentrer sur une seule pensée et sur des blocs de texte simples et faciles à lire.

Structurez et organisez les pensées des utilisateurs de manière à encourager la lecture:

  • Utilisez des paragraphes d'une à trois phrases
  • Incorporer des listes à puces
  • Utilisez des sous-titres pour séparer de gros blocs de texte
  • Inclure des liens pour l'interactivité
  • Points saillants ou en gras
  • Éditer toute copie pour plus de clarté

Créer un point focal

Chaque conception devrait avoir un point focal. Le point central est la partie de la conception que presque chaque utilisateur verra en premier. C'est souvent très visuel ou contraste avec d'autres éléments à l'écran.

Le point focal doit définir le concept et les raisons pour lesquelles les utilisateurs doivent en prendre soin.

Dans l'exemple ci-dessus, Abingworth utilise un blob rose vif comme point focal. Il attire l'attention à cause de sa couleur et de sa curiosité (qu'est-ce que c'est?) Et parce qu'il contraste avec l'espace blanc et ouvert de l'autre côté de l'écran.

Le point central de la conception doit être votre meilleure image, illustration ou animation et se rapporter à la messagerie clé. Le point focal doit définir le concept et les raisons pour lesquelles les utilisateurs doivent en prendre soin. Comme il s’agit du premier endroit où les utilisateurs vont regarder, cela donne le ton pour savoir comment (et si) ils vont interagir avec la conception.

Conclusion

Créer du contenu que les utilisateurs liront réellement est plus qu'un simple texte à l'écran. C’est une combinaison d’écrits et d’éléments visuels qui attirent les utilisateurs, les aident à avoir un aperçu de la conception puis décident de continuer à interagir avec elle.

Bien que cela semble beaucoup, tout cela se produit en quelques millisecondes. Des recherches ont montré que la plupart des utilisateurs avaient l'attention d'un poisson rouge - 8 secondes - en profitant au maximum de son contenu facile à lire.