Graphisme & web [Plan] > Texte et typographie > Le texte
Graphisme & web [Plan] > Texte et typographie > Le texte
Un site est réussi et agréable grace à :
Quand un contenu est brouillon, mal organisé, peu pertinent, le site s’en trouve pénalisé : on quitte le site ou on n'y revient plus...
Cette première partie traite de texte et mise en page. Des notions de typographie seront données en deuxième partie.
La lecture sur le web est une lecture sur un écran. La lecture sur écran est inconfortable et serait plus lente de 25% comparativement à la lecture papier.
Pour améliorer le confort visuel, on doit optimiser les couleurs employées, réduire la longueur du texte sur la page et structurer l'article.
On utilise de préférence les contrastes positifs (fond clair / caractères sombres). Cela est plus adéquat que le contraste négatif (fond sombre / caractères clairs).
La lisibilité dépends également de paramètres propres aux caractères :
La majorité des utilisateurs ne lisent pas les contenus des sites Internet. Mais ils "scannent", "survolent", "explorent", "balayent"… Quoiqu'il en soit, les caractéristiques du web font qu'on ne lit pas mot à mot.
La hiérarchie donnée à l’écrit fournie un guide pour le lecteur.
Il faut différencier les titres du reste du texte par des caractères plus gros, en gras, éventuellement dans une autre police ou couleur.
Les titres et sous-titres sont lus plus souvent que le texte dans des longs articles.
Le chapeau (ou chapô) est une accroche, située entre le titre et le corps du texte, qui présente et résume l'article.
Un chapeau est mis en valeur (en gras ou avec une autre police, par exemple).
L'article se compose de paragraphes courts et organisés du plus important au moins important pour le sujet concerné.
Chaque début de phrase contient des mots clés ou groupes de mots qui interpellent les lecteurs.
Pour favoriser le balayage du texte, aérez le texte en le segmentant en paragraphes courts.
Les paragraphes seront séparés par un espace ou interligne et sont rédigés sur le principe de la pyramide inversée qui présente l’essentiel dans le premier tiers de la première phrase.
Facilement balayable et constituant une fracture graphique dans la page, la liste attire l’œil et allège la page.
Pour être lisible facilement et remplir son rôle pleinement, chaque écran comptera une seule liste. La liste ne s’encombre pas d’articles en tête d’énumération, ni de la répétition d’un même mot en début de phrase.
Elle compte en général moins de 7 éléments.
D’autre part, chaque élément de la liste sera court pour remplir toute sa fonction de lisibilité. Si votre liste est composée de trop de texte, privilégiez plutôt les sous-titres.
Mettre un mot ou groupe de mots en gras, sans tomber dans l’excès, permet d’attirer le regard.
Le strict minimum est mis en gras. C’est ainsi que seul le mot sémantique sera mis en gras et pas l’article.
On privilégiera la mise en exergue des termes positifs, des actions, des mots clés.
Il s'agit des techniques de disposition graphique d'un contenu informationnel dans un espace donné (feuilles de papier, pages web…).
Elle succède au travail de collecte et de composition du contenu (composition de texte « au kilomètre », collection des illustrations et composants), et précède souvent le travail d'impression ou de publication.
Elle vise à représenter le contenu (textes, images, animations…) de manière hiérarchique et harmonieuse (équilibre des zones, des couleurs et des espaces, contrastes), afin de faciliter un parcours de lecture à plusieurs niveaux, avec un souci constant d'ergonomie.
La mise en page s'appuie sur une maquette ; pour le web, on parle de template.
En découvrant pour la première fois un support d’information (une affiche de publicité, un écran, etc.), l’usager adopte une stratégie d’exploration en Z :
Le regard part du coin supérieur gauche, se dirige vers la droite, parcourt systématiquement la zone centrale et se termine dans le coin inférieur droit.
Une fois qu’il connaît l’image ou le support, il effectue une recherche sélective, en cherchant une information à l’endroit où il pense pouvoir la trouver. Il adopte en fait une stratégie de fixation sélective sur les points qui lui semblent pertinents.
De plus, les symétries, les titres, les graphiques et les espaces viennent orienter l’exploration visuelle.
La largeur du bloc de texte doit être inférieur à 600 pixels.
Quand c’est plus large, ça fatigue les yeux. Et la tête doit se déplacer. Un œil peut balayer maximum 600 pixels de large sans bouger. C’est ce qu’on appelle la vision périphérique globale.
Si le texte fait entre 600 et 800 px de large, alors les yeux doivent bouger, et c’est fatigant. Cela réduit notre capacité de lecture d’au moins 50%.
Et ça réduit aussi notre compréhension du texte car cela demande un effort trop grand qui fatigue notre cerveau.
L’idéal, pour un texte, c’est 450 px de large. C’est vraiment l’idéal. Pour les lecteurs rapides, c’est fantastique car on peut englober le texte en se concentrant uniquement sur sa ligne centrale.
La justification est le nombre de caractère d'une ligne de texte Pour une lisibilité optimale, vous devriez avoir une justification de 40 à 80 caractères, espaces inclus.
Pour un design à une seule colonne, une justification de 65 caractères est considérée comme idéale.
Une manière simple pour calculer la justification est d'utiliser la méthode de Robert Bringhurst, qui multiplie la taille de la police par 30. Si la taille de la police est de 12px, la multiplier par 30 vous donne une justification de 360px ou environ 65 caractères par ligne.
L'usage de maquette facilite la mise en page.
Une maquette moderne sera « responsive » : les pages s'appuyant sur cette maquette s'adaptera aux nombreux types d'écrans utilisés actuellement.