web-dev-qa-db-fra.com

Comment améliorer la lisibilité du corps de texte?

J'ai toujours du mal à juger de la lisibilité de mon site et il y a tellement d'informations contradictoires. J'ai donc pensé demander des options ici. Pourriez-vous s'il vous plaît jeter un coup d'œil à mon site et me faire savoir si la lisibilité est bonne?

http://www.forex4noobs.com/forex-education/

Veuillez ignorer les titres verts et noirs dont j'ai encore besoin pour jouer avec ceux-ci. J'ai besoin de conseils sur le corps du texte principal.

Les paramètres actuels sont les suivants:

font-family:"myriad-pro-1","myriad-pro-2",HelveticaNeue,Helvetica,Arial,serif;
font-size:14px; 
line-height:1.43em; (roughly 20px)

Tout conseil sur la façon d'améliorer la lisibilité serait grandement apprécié.

website-designusabilityfontlegibilityfont-sizes
7
Nick

Le plus gros problème est l'accent visuel perdu par la couleur vive (dans ce cas le vert). Vous pouvez dire "ignorer l'autre couleur", mais c'est le plus gros problème de lisibilité! Il est donc difficile d'améliorer avec succès la lisibilité sans travailler sur cette couleur.

  • Le menu de gauche est très contrasté, ce qui distrait le lecteur de la zone de texte principale. Je réduirais considérablement le poids visuel du menu en supprimant ou en réduisant la couleur d'arrière-plan verte des éléments de menu.
  • La couleur verte utilisée par les en-têtes est trop brillante/contraste faible et la rend difficile à lire. Il reçoit également moins d'emphase visuelle car il est souvent situé directement au-dessus d'un gros en-tête noir et gras. Mais cet en-tête noir est en fait un sous-en-tête au vert. Envisagez de changer les couleurs et d'agrandir l'en-tête le plus important pour suggérer plus clairement la bonne hiérarchie. Je voudrais également assombrir un peu le vert; J'ai du mal à le lire et je ne suis pas au soleil (je n'ai pas non plus une mauvaise vue).
  • Le titre de la page est un peu invisible, encore une fois parce qu'il est vert. Faites-le noir ou une autre couleur qui saute aux yeux et agrandissez-le. Ajoutez une marge entre l'en-tête et le corps du texte - les espaces permettent de mettre l'accent sur les choses.
  • Ajoutez des espaces entre les paragraphes de texte et les sous-en-têtes, pour souligner à nouveau que vous entrez dans une nouvelle section.
  • Ajoutez beaucoup d'espace en bas de la page après le contenu pour ne pas avoir à porter mes yeux au bas du moniteur juste pour lire la page. L'espace ici permettra également à mes yeux de se reposer au lieu de tout entasser ensemble.
  • Le choix et la taille de la police de votre corps principal sont assez corrects, tout comme la hauteur de la ligne. Envisagez d'augmenter légèrement la hauteur de ligne entre les paragraphes.
  • Pourquoi utiliser Verdana et Arial au hasard? Améliorez la lisibilité en respectant une seule police. Une bonne règle d'or consiste à simplifier les polices à une par famille (par exemple, serif/sans-serif). Cela ne s'applique qu'au texte que vous lisez; les concepteurs devraient évidemment être libres de choisir des polices à d'autres fins.

J'ai changé quelques choses en utilisant l'inspecteur de Webkit pour vous donner une idée de ce dont je parle:

enter image description here

Remarque: quelque part en cours de route, les images du menu ont disparu; ce n'était pas intentionnel. Garde les! Ce sont d'excellents indicateurs de chapitre.

13
Rahul

Ma première impression est que vous devez augmenter les espaces entre la fin du texte et les nouveaux en-têtes, le site donne une impression "lourde", beaucoup de texte est sur un espace assez petit. Des espaces blancs, des images ou autre chose non textuel sont souvent utilisés pour éclaircir les sites.

4
Henrik Ekblom

Tout d'abord, j'aime l'analogie avec les ninjas. Je veux dire, vous ne pouvez pas vous tromper avec les ninjas.

Cependant, il semble que vous essayez d'en faire trop sur une seule page. Divisez votre message en plusieurs pages et réduisez vos informations en un ou deux paragraphes succincts. Ensuite, fournissez des liens vers les informations plus détaillées.

Menez avec des déclarations qui incitent le lecteur à en savoir plus. Votre première question en est un excellent exemple. Je recommande d'augmenter sa police pour attirer l'attention du lecteur.

Vous souhaitez rejoindre notre Forex Ninja Academy?

Si vous connectez le lecteur à votre message initial, il cliquera automatiquement pour continuer à lire.

Bon travail!

2
Dubs