Règles d'écriture et bonnes pratiques sur l'intégration des contenus (aide-mémoire 2)

Transcription

1 Règles d'écriture et bonnes pratiques sur l'intégration des contenus (aide-mémoire 2) On ne lit pas une page Web comme une page d'un livre ou d'un journal. Il en ressort qu'on ne doit pas non plus rédiger une page Web comme celle d'un livre ou d'un journal! On y apprend que (selon l'étude intitulée "Designing Web Usability") : On lit 25 % moins vite à l'écran que sur papier (l'écran est moins confortable que le papier) 79 % des internautes scannent (balayent) les textes au lieu de les lire 10 % seulement des internautes utilisent les barres de défilement. Comment faire en sorte que vos visiteurs se sentent à l'aise sur votre site, qu'ils y trouvent leurs repères et qu'ils aient envie d'y revenir? Ces règles simples peuvent vous permettre d'accrocher et de conserver vos lecteurs. En bref Les titres et les libellés : - Title / Libellés du menu principal & du pied de page / Titre dans la page / Nom du fichier - Titre en lien direct avec le contenu. Titre : court, explicite et accrocheur. - Titres inclus des mots-clés. - Limiter la longueur des titres et libellés. - Des titres et sous-titres descriptifs : aident l'utilisateur à s'orienter. - Sous-titre : capte l'attention, il permet aussi de rattraper un lecteur qui allait quitter la page. - Hiérarchie de tailles des titres et sous-titres (h2, h3, h4, etc.) Pages internes au site Web : - Les différentes pages du site sont organisées de façon similaire (mêmes éléments aux mêmes endroits). - Pages d'intro sont à éviter (exemple : français anglais). - Images mettent en valeur le contenu plutôt que de mettre en valeur le contenant. - Oubliez les gadgets. - Indicateur de page est présent pour le contenu s'étendant sur plusieurs pages (1/4). - Une seule barre latérale (barre de défilement verticale) est présente dans la page afin de faciliter la lecture. - Des menus simples. - Les textes du site s'impriment correctement (print.css) ou une page alternative est proposée pour l'impression. Contenus en général & lisibilité des contenus : La lecture à l'écran n'est pas facile. En outre, elle ne permet pas d'annoter le texte au fur et à mesure contrairement au papier. Donc, prévoir une version imprimable, car l'internaute préfère imprimer la page pour la lire. 2 types de textes : les textes de contenu (ceux qu'on recherche, qu'on consulte); les textes de direction (ceux qui servent à la navigation, au repérage, au référencement). - Chaque page doit contenir un titre en lien direct avec le contenu de la page. Et, les libellés des liens doivent dans la mesure du possible, correspondre aux titres des pages vers lesquels ils intégration des contenus (aide mémoire 2).docx 1/5

2 pointent. Les liens portants les mêmes libellés ne doivent pas pointer vers des pages différentes. De cette façon, l'utilisateur peut se diriger facilement dans le site. - Fournir un sommaire pour les longs textes (ancres). - Contenus sont d'actualité, fiables et crédibles. - Sources et références sont affichées sur le site, référence aux droits d'auteur, sources utilisées sont légales, etc. - Date de parution des articles. - Surtout, aucune faute grammaticale ou orthographique. - Images : Illustratives, explicatives, humoristiques, surprenantes. Au moins une image par page pour reposer l'œil de vos lecteurs et capter leur intérêt. Attention au poids. Mettre une légende à vos images : par exemple, si votre image est illustrative. Règles d'écriture à repenser : - Type de langage adapté au public cible (pas de termes internes, trop techniques ou jargon commercial). - Écrire les textes 50% plus courts que pour le papier. - Éliminer tout texte superflu. - Favoriser la balayabilité (le scan visuel). - Mettre la conclusion en premier (règle de la pyramide inversée : aller du général au particulier). Cette pyramide va fonctionner comme un entonnoir qui va «aspirer» les lecteurs dans vos pages. Tâchez de placer les informations les plus importantes, le message principal en haut de la page, au centre, au début du texte. Essayez également de les distinguer graphiquement (titre en plus gros, chapeau en gras, etc.). Vous pouvez recréer cette structure pyramidale sur plusieurs pages. Même s'il vaut mieux limiter le nombre de clics pour atteindre une information, il est envisageable de donner les informations principales sur une page et d'offrir l'accès aux détails sur une autre. Découpez le contenu en paragraphes, et essayez de faire correspondre un paragraphe à une idée. Pensez à la règle des "5 W" : Who? What? When? Where? Why? (Qui? Quoi? Quand? Où? Pourquoi?) Il s'agit de présenter l'information en répondant chronologiquement à ces questions. Tâchez d'être le plus concis possible. La plupart des gens n'aiment pas lire à l'écran, et il arrive souvent qu'ils préfèrent imprimer le contenu pour le lire sur papier. Il peut donc être intéressant de prévoir une version imprimable d'un texte. - Diviser la quantité de mots par deux par rapport à un texte classique : «Every sentence, every phrase, every word has to fight for its life.» (Crawford Kilian, Writing for the Web) - Ranger pour aider à trouver. - Structurer l'information. - Faire des phrases courtes. Éviter les redondances. - Employer de préférence l'impératif ("découvrez ce CD" est plus accrocheur que "vous pouvez découvrir ce CD ici!"). - Éviter les points d'exclamation (! ). - Viser l'objectivité. - Utiliser un langage simple et clair. - Proposer une aide pour les acronymes, abréviations, sigles et les mots difficiles (lexique, glossaire, balise acronym, etc.). intégration des contenus (aide mémoire 2).docx 2/5

3 Typographie et mise en forme des textes : - Utiliser le blanc pour aérer la page. - Majuscules sont utilisées avec discernement (ralentit la lecture de 10%). - Couleur et contraste (du texte lisible) : le plus lisible et le moins fatigant est le texte noir sur fond blanc. Vous pouvez vous éloigner légèrement de ce standard à condition de toujours garder un bon contraste entre le fond et le texte. Le confort visuel est en grande partie déterminé par le contraste des mots avec le fond. - Des colonnes étroites. - La longueur de ligne optimale en nombre de caractères est de 50 à 60 caractères. Si l on fait plus, l œil aura du mal à se concentrer sur le texte. - À moins de rédiger le texte sur deux colonnes; à ce moment, une largeur de 30 à 35 caractères par colonne est souhaitable. - Police et taille : police lisible (de préférence sans empattement); police standard; maximum 3 polices de caractères au-delà, la lecture peut s'en trouver perturbée; taille de la police : permettre l'agrandissement des polices en utilisant les unités de taille relative (% et em) au lieu d'absolue (px, pt); taille de police assez grande, les petites devant être réservées aux notes de bas de page et aux dénis de responsabilité; - Alignement, interligne : aligner le texte au centre : o à utiliser sur les textes courts; o difficile à lire sur un nombre important de lignes; o l'interlignage peut être plus important que pour les autres justifications; o on ne s'attend pas à trouver une suite sur la page suivante. justifier le texte : o peut être utilisé sur des textes longs et d'une justification importante; o un petit interlignage rend les pavés de texte justifiés trop denses; o à éviter sur des justifications très réduites à cause des «zébrures» (des trous) qu'il peut provoquer dans le gris typographique. aligner le texte à gauche : o afin que l'œil balayant puisse commencer chaque phrase au même endroit; o d'utilisation très largement répandue, convient à la plupart des situations; o on peut réduire l'interlignage normal si l'on veut gagner de la place. aligner le texte à droite : o à utiliser sur des textes courts, avec une justification peu importante; o l'interlignage doit être plus important que pour les autres justifications; o difficile de revenir à la ligne : il lui manque un repérage visuel qui se fait d'habitude à gauche. voir document le texte se justifie-t-il; interlignage (line-height) : o par défaut, les navigateurs web affichent un interlignage de 120 % par rapport à la taille du texte; o selon les typographes, un interlignage correct se situe entre 120 et 150 %; o ce qui améliore généralement la lisibilité, surtout si les lignes sont longues; o dans certains cas on peut en ajouter un peu plus, ce qui améliore généralement la lisibilité, surtout si les lignes sont longues; o pour changer l'interlignage utiliser de préférence l'unité de taille relative (% ou em) au lieu d'absolue (px, pt). - Gras, italique, soulignement : mettre en gras les mots importants; mettre en valeur les informations importantes, les mots-clés; intégration des contenus (aide mémoire 2).docx 3/5

4 employer la graisse avec parcimonie, sinon elle perd de son efficacité (pas plus de 2 à 3 mots dans une phrase); L italique est surtout utilisé pour détacher certaines phrases d un texte courant (légende, citations, mots en langue étrangère, titre d ouvrage, expressions à «double sens», etc.). ne pas souligner les textes, dans le cas contraire, c'est comme si on tend un piège à l'utilisateur, car le soulignement représente un lien cliquable; jouez plutôt sur la couleur, sur la taille ou sur le gras et l'italique; - encadrés : anecdotique, un complément d'information, du code, etc.; peuvent avoir un fond légèrement plus foncé que le reste de la page; ils permettent de casser les mises en page trop rigides ou mettre l'accent sur du texte. - les liens : souligner les liens textuels, car il s'agit d'une convention qui permet de les identifier facilement et de les distinguer du texte; différencier les liens et les rendre facilement identifiables; faire des liens descriptifs; ne pas utiliser de termes génériques tels que «cliquez ici»; attribuer une couleur différente aux liens visités et non visités; identifier les liens sortants, - les tableaux sont réservé pour afficher des données tabulaires et non pour la mise en forme. - les listes : présenter ses idées sous forme de listes, permet de structurer le texte. Les informations étant mieux hiérarchisées, elles sont plus simples à mémoriser. L'œil est attiré par les puces. la présentation en liste, permet à l'œil de se «caler» sur la puce de gauche et garanti une meilleur lecture qu'un paragraphe ordinaire. les puces de plus de 2 niveaux, deviennent complexes et difficiles à interpréter; éviter les listes à puces contenant un seul élément; utiliser les listes à puces à bon escient : la liste à puces n est utile que lorsque l information peut être présentée sous forme d une série d items semblables. Si ce n est pas le cas, de simples paragraphes suffisent. utiliser le même ensemble de graphiques pour les puces contribue à la cohérence graphique de l'ensemble du site. Par ailleurs, le chargement de la page est accéléré, puisqu'une fois la première liste affichée, l'image de la puce reste dans la mémoire cache du navigateur et n'a donc pas à être rechargée. - etc. Écrire pour être visible, écrire pour être lu, écrire moins, écrire pour être compris, écrire pour provoquer une action, écrire pour faciliter la navigation, se souvenir qu'une image peut valoir mille mots, écrire pour susciter des réactions, etc. Respecter la sémantique : La sémantique d'un objet, c'est son SENS, ce pour quoi il est FAIT. Pour des questions d'accessibilité (aux handicaps par exemple) et de maintenance, il est recommandé d'utiliser chaque balise de façon sémantiquement correcte. Exemple imagé : Quand vous buvez une soupe, vous utilisez une cuillère à soupe. Après, si vous tombez à cours, vous pouvez toujours vous rattraper en utilisant une cuillère à café. Ça sera moins pratique, mais vous arriverez quand même à boire votre soupe. Le problème, c'est qu'elle risque d'être froide avant que vous l'ayez terminée. intégration des contenus (aide mémoire 2).docx 4/5

5 Pour le (X)HTML, c'est pareil. Pour définir un titre, on utilise la balise <h1>, mais on pourrait arriver au même résultat VISUEL avec un <p font-face=7><b>. Seulement, c'est plus long à écrire, ce n'est pas fait pour, lorsque vous aurez à changer tous vos titres, vous mettrez nettement plus de temps que si vous aviez simplement à modifier UNE feuille de style. Dans le respect des règles, il y a non seulement l'aspect syntaxique, déjà souvent rappelé par divers sites, mais également l'aspect sémantique, trop souvent oublié. Il est tout a fait possible de faire un site rempli de tableaux pour la mise en page qui passera sans problème au validateur. Or un tableau est conçu initialement pour afficher des données... tabulaires (un forum par exemple) et non pour faire la présentation de sa page. Design : - Un design original, esthétique et pratique peut avoir un impact très important sur la façon dont vos visiteurs percevront votre site et sur la trace qu'il laissera dans leurs mémoires. - Une hausse de fréquentation de l'ordre de 20% après la refonte de l'esthétique d'un site. - Soignez vos accords de couleurs. - Prendre en considération les problèmes dus au daltonisme dans vos choix de couleurs. Lisibilité : - Éviter ou limiter au minimum les fonds texturés. - Les éléments les plus importants doivent être visibles d'entrée (sans défilement). Référence : intégration des contenus (aide mémoire 2).docx 5/5