web-dev-qa-db-fra.com

Rayures zébrées pour le corps du texte?

Le consensus général est que le zèbre rayant une table permet un peu plus facilement aux gens de savoir sur quelle ligne ils se trouvent ... mais cette réduction des taxes cognitives n'est-elle que pour les lignes de table? Je reviens au moins parfois en arrière en lisant une ligne de texte précédente.

J'ai zèbre rayé ne page d'article et je me demande si c'est un avantage supplémentaire ou juste quelque chose d'intéressant mais pas mieux que la façon dont les gens lisent presque tout le reste?

10
Christos Hayward

Le but du zébrage est (avec un succès discutable) de connecter des éléments dans une rangée qui sont distants ... souvent comme vous le verriez dans un tableau et où la numérisation (plutôt que la lecture ligne par ligne) est souvent un objectif.

Item                             Item                   Item

Mais un paragraphe de texte n'a pas un tel problème - les lignes de texte, elles-mêmes, font le lien pour vous. Et l'espacement des lignes approprié et réfléchi est toute la division dont vous avez besoin entre les lignes.

Donc, je dirais que le zébrage pour un paragraphe de texte est une tentative de résoudre un problème inexistant avec une solution destinée à un contexte entièrement différent.

9
DA01

Je pense que vous essayez de résoudre un problème de lisibilité dans le mauvais sens.

La longueur de ligne (mesure) est votre vrai problème. Le nombre généralement conseillé pour une mesure lisible est d'environ 60 à 70 caractères. Réduisez la mesure à environ 60% de sa longueur actuelle et vous constaterez que vous avez beaucoup moins de problèmes. L'autre façon de le résoudre est une taille de police plus grande ... ce serait vraiment moche.

L'ajout de lignes alternées nuit à la lecture de votre exemple. Dans un tableau, cela fonctionne parce que vous identifiez des unités discrètes. Son utilisation pour les lignes de texte isole des unités arbitraires (sauts de ligne) dans un texte en cours d'exécution. Ce n'est pas du tout utile.

cas d'espèce.
Voici un rapide avant et après sur votre page. J'ai simplement réduit les paragraphes à 64% de la div contenant. Cela m'a permis de ramener le leader de 2em à 1,7.

Current

64% width and 1.7em leading

23
plainclothes

La lisibilité est tout

Smashing Magazine a mené une étude typographique pour la meilleure expérience utilisateur . Ce qu'ils ont trouvé, ce sont des arrière-plans propres et clairs avec des traitements de type standard qui fonctionnent le mieux. Les gens auront généralement plus de facilité à lire ce qu'ils connaissent. Il n'y a pas de règle unique pour le nombre de caractères par ligne. Cela dépend de la quantité de copie, de la taille en points de la copie et de l'utilisation.

Dans votre exemple, vous utilisez des lignes super longues qui rendent plus difficile pour le lecteur de passer de l'extrême droite à la ligne suivante à gauche. Bien que l'ajout de couleurs différentes entre les lignes soit un peu gênant, vous avez également augmenté la hauteur de ligne, ce qui a plus d'impact sur la lisibilité que l'arrière-plan.

Un espacement de ligne extrême (interligne) conduit à un double espacement

Double-espacement a également un impact. Si vous regardez des articles écrits pour l'école, ils demandent généralement de les faire à double interligne pour généralement deux raisons:

  1. Les professeurs ont l'habitude de lire en double interligne
  2. Il offre à l'enseignant la possibilité de commenter entre les lignes.

Pour la plupart des gens normaux qui n'ont pas l'habitude de lire à double interligne, il est plus difficile à lire.

10
AbsoluteƵERØ

L'utilisation de rayures zébrées dans un paragraphe n'est pas une bonne idée . Le zébrage est une solution pour améliorer la lisibilité des données tabulaires et même cela est un domaine débattu - http://alistapart.com/article/zebrastripingdoesithelp

Il n'y a pas de structure répétitive dans les mots d'un paragraphe, ce qui est une bonne chose car cela rend les lignes plus faciles à distinguer. Lorsque vous utilisez des rayures zébrées sur des lignes alternées, vous appliquez un motif répété et le rend plus difficile à lire pour l'utilisateur.

Quelques articles pour vous aider à améliorer la lisibilité de votre site Web:

3
rk.

Quelques suggestions:

  • Utilisez différentes polices/couleurs pour le fil d'Ariane et le contenu du corps. Cela a la même apparence et il n'est pas facile de différencier le début des sections
  • Séparez les sections, le titre et le contenu afin qu'il soit plus facile de remarquer le scan au cas où l'utilisateur ne voudrait pas tout lire
  • N'ajoutez aucun fond (zèbre) aux images, c'est juste du bruit pour les yeux
  • Vous aimerez peut-être aussi une section distincte, un arrière-plan différent, etc.

Voici quelques règles générales du corps du texte:

Longueur du texte Écrire pour le Web est une tout autre chose que d'écrire pour imprimer. Les utilisateurs veulent des morceaux de texte plus petits. Ils ne lisent presque jamais une page entière, au lieu de cela, ils recherchent des mots clés. Par conséquent, si vous devez ajouter beaucoup de texte, faites-le de manière à ce qu'il ne semble pas que ce soit un texte long et long. Sectionnez-le.

Sections Divisez votre page en sections, afin que l'utilisateur puisse voir rapidement de quoi il s'agit et cela lui fera lire le contenu.

Leading Comme pour la conception d'impression, jetez un œil à votre interligne. Un point de départ serait un interligne de 12 pixels ou plus pour une taille de police de 10 pixels.

Largeur Est suggérer une longueur comprise entre 12 et 16 mots par ligne.

Polices Bien sûr, les paris sont Tahoma et Verdana (tous deux conçus spécialement pour une utilisation à l'écran), tous deux avec une disponibilité de plus de 90% sur OS X et Windows.

Basé sur:> Introduction à une bonne ergonomie - peterpixel

2
Rosie