Structure et présentation du contenu

La première chose que les utilisateurs voient sur une page Web est le titre. Le titre doit instantanément présenter le type d'information qui se trouve sur la page. Le titre de la page doit en outre être unique, de sorte que les utilisateurs ne prennent pas une page pour une autre.

Faites en sorte que les en-têtes soient clairs et descriptifs afin de mieux orienter les utilisateurs vers l'information qu'ils cherchent. Incluez des mots clés dans les en-têtes, en particulier dans les deux premiers mots, pour aider les utilisateurs à parcourir le texte plus facilement.

Un bon titre présente le contexte en expliquant :

• Où est l'utilisateur
• Pourquoi il est là

Les sous-titres rendent les grands blocs de texte plus faciles à lire et à parcourir rapidement. Assurez-vous que les sous-titres sont clairs et concis et qu'ils suivent une structure en parallèle.

Une bonne pratique consiste à utiliser des sous-titres dans les longs documents. Lorsque de l'information figure sur le Web, les sous-titres améliorent la convivialité et la lisibilité.

De bons en-têtes et de bons sous-titres sont essentiels afin de rendre accessible le contenu sur le Web. Les utilisateurs de lecteur d'écran peuvent utiliser les titres et les sous-titres pour passer rapidement d'une section à l'autre et pour mieux comprendre ou résumer le contenu.

[Traduction] (Pour être efficace, un en-tête doit être :)

• court (parce que les gens ne lisent pas beaucoup en ligne);
• riche en odeur d'information, résumant clairement l'article cible;
• chargé dès le début des mots clés les plus importants (parce que les utilisateurs ne font souvent que parcourir rapidement le début des éléments énumérés);
• compréhensible hors contexte (parce que les titres apparaissent souvent sans article, comme dans les résultats des moteurs de recherche);
• prévisible, afin que les utilisateurs sachent s'ils aimeront l'article complet avant de cliquer (parce que les gens n'aiment pas retourner aux sites qui ne tiennent pas promesse).

Des approches différentes s'appliquent à la rédaction destinée à l'impression et à la rédaction destinée au Web. Cela s'applique également aux en-têtes.

[Traduction] (Dans) un article paru dans le New York Times à propos des labeurs des grandes personnes sur la route, « Coping With the Tall Traveler's Curse », [...] (le) titre lui-même est en fait un exemple des différences entre le style du contenu imprimé et de celui en ligne :

• Dans un document imprimé, une expression comme « la malédiction du grand voyageur » est un peu intéressante et pourrait attirer des lecteurs. Puisque l'article comportait une photo d'un type grand plié à l'arrière d'un taxi, le contenu de l'article était clair pour quiconque jetait un coup d'œil à cette page dans le journal
• À l'inverse, la publication en ligne du même titre ne respecterait pas plusieurs des lignes directrices sur la rédaction pour le Web :
  • Les trois premiers mots anglais (« coping with the ») n'ont aucun contenu porteur d'information. Sur le Web, il faut commencer par des mots comme « grand voyageur », puisqu'il arrive souvent que les utilisateurs parcourent rapidement, vers le bas, la partie de gauche d'une liste d'éléments. Ils ne voient jamais les derniers mots d'un lien, à moins que les premiers mots attirent leur attention
  • L'en-tête est dénué de mots clés – comme « siège d'aéronef » et « lit d'hôtel » –, qui sont importants pour l'optimisation pour les moteurs de recherche (OMR). Personne ne cherchera « malédiction » en tendant de trouver des chaînes d'hôtels qui offrent des lits très longs ou les sièges d'aéronef qui sont les moins désagréables pour les voyageurs à longues jambes
  • Les mots « la malédiction du grand voyageur » sont insuffisamment précis pour indiquer aux utilisateurs de quoi traite l'histoire. Puisque les titres sont souvent présentés en tant que liens simples retirés de l'article lui-même, la photo du pauvre type dans le taxi ne sera pas là pour expliquer le contenu de l'histoire. En ligne, le titre à lui seul doit présenter une odeur d'information suffisamment forte pour permettre aux utilisateurs de prédire ce qu'ils trouveront s'ils suivent le lien

Les hyperliens orientent les utilisateurs vers l'information qu'ils cherchent. Utilisez des hyperliens pour éviter de répéter des renseignements qui sont déjà clairement exprimés sur une autre page ou pour renvoyer à des renseignements connexes, tels que des définitions, des renseignements à l'appui ou des renseignements généraux.

Utilisez le titre de la page cible en tant que texte de l'hyperlien. Les utilisateurs sont très confus si le texte du lien et le nom de la page ne correspondent pas. Dans les situations où vous devez modifier le texte du lien, tentez de le faire correspondre le plus étroitement possible au nom de la page.

Pour répondre aux exigences en matière d'accessibilité, indiquez clairement la cible de chaque lien, sans contexte supplémentaire outre le texte du lien. Les utilisateurs de lecteur d'écran peuvent lire les pages en générant une liste de tous les liens sur la page, et, à l'aide de la touche de tabulation, passer d'un lien à l'autre sans aucun contexte environnant. Si la formulation du lien ne résume pas clairement le contenu de la cible, cela peut porter à confusion les utilisateurs de lecteur d'écran. Voir Optimisez les en-têtes et les étiquettes de menu.

Si vous mentionnez plus d'une fois une autre page Web, mettez en hyperlien la première mention seulement. Évitez d'insérer trop d'hyperliens dans un seul paragraphe. Un trop grand rapprochement des liens peut porter à confusion. Les utilisateurs ne sont pas toujours en mesure de déterminer où arrête un lien et où commence le suivant.

Les utilisateurs sont attirés vers les hyperliens et les suivent s'ils les voient. Puisque vous ne voulez pas que les utilisateurs passent outre le contenu de la page où ils se trouvent, ajoutez seulement un hyperlien vers les références qui peuvent aider les utilisateurs à accomplir leur tâche ou qui présentent des renseignements utiles à propos de la tâche. N'ajoutez pas d'hyperliens inutiles ou d'information non connexe. La présence de trop d'hyperliens est distrayante, et il devient difficile, pour les utilisateurs, de faire la distinction entre l'information qui est importante et celle qui ne l'est pas. Assurez-vous que les hyperliens acheminent les utilisateurs à la bonne page. Voir Créez des chemins d'information clairs pour en savoir plus sur les hyperliens.

Faites en sorte que les liens textuels soient assez longs pour être compris, mais assez courts pour réduire l'habillage au minimum.

Pour garantir une expérience de l'utilisateur uniforme et pour respecter les normes de convivialité, vous devez comprendre quand et comment utiliser correctement divers éléments de mise en forme et de présentation.

Il est plus facile de parcourir rapidement des listes que des paragraphes. Celles-ci contribuent à mettre en surbrillance ou en évidence des énoncés ou des éléments de liste qui représentent une seule idée. Lorsque vous avez une série d'énoncés courts et simples, utilisez une liste plutôt qu'un paragraphe. Évitez de présenter plus d'une idée par élément de liste. Les sous-listes peuvent parfois porter à confusion et être difficiles à parcourir rapidement. Évitez-les autant que vous le pouvez. Tentez de limiter les listes à deux niveaux.

Chaque liste nécessite une des opérations suivantes : un titre descriptif et unique, une phrase d'introduction ou un paragraphe introductif de fournir un contexte . Évitez l'utilisation excessive des listes; en utilisant trop de listes détruit leur efficacité . Ne pas faire une phrase d'introduction comme un en-tête - utiliser un en-tête approprié.

Disposez les éléments de liste, selon le cas :

• Par ordre logique ou séquentiel
• Par ordre de priorité, d'importance ou de popularité

Si vous énumérez une série d'éléments et que l'ordre est important, utilisez des chiffres plutôt que des puces. Énumérez les éléments en suivant une structure en parallèle pour aider les utilisateurs à parcourir rapidement les listes.

En règle générale, ne mettez pas les listes en ordre alphabétique. L'utilisateur peut ne pas être certain de la lettre qui correspond à l'information voulue. Mettez les listes en ordre alphabétique lorsque l'information est assortie à une convention d'appellation stable, comme dans le cas de noms de personnes ou de lieux.

Pour rendre les listes uniformes, par souci d'harmonisation avec le Guide de rédaction du contenu du site Canada.ca (lien externe) (la source qui fait actuellement autorité) et pour faciliter, pour les utilisateurs, le fait de parcourir rapidement des listes à des tailles d'écran et des résolutions différentes :

• Introduisez chaque liste par une phrase qui se termine par un deux-points (:)
• Écrivez le premier mot en majuscule dans un élément de liste que lorsque les points sont des pensées complètes, ou si le premier mot est un nom propre
• N'ajoutez pas de ponctuation à la fin d'un élément de liste
• N'utilisez pas d'articles comme « le » et « un » pour commencer une liste

N'ajoutez une image que si elle soutient l'information que cherchent les utilisateurs. Les images doivent aider les utilisateurs à naviguer ou à comprendre. Autrement, elles sont gênantes lorsque les utilisateurs cherchent de l'information pertinente, ou encore ces derniers les passent outre, tout simplement.

Une image doit avoir une apparence professionnelle et moderne. Assurez-vous qu'elle est claire et qu'elle n'est pas pixélisée. De plus, sachez que la plupart des images sont protégées par le droit d'auteur. N'utilisez que des images venant de sources approuvées, et obtenez la permission nécessaire pour les utiliser.

Pour répondre aux exigences en matière d'accessibilité, donnez toujours l'alternative texte (le texte alternatif) pour tout le contenu non textuel, comme les images, afin qu'il puisse devenir d'autres formes dont les personnes ont besoin. Mentionnons, à titre d'exemple, les gros caractères, le braille, la parole, les symboles et le langage simplifié. Au moment de fournir du texte alternatif, suivez les principes suivants :

• [Traduction] Le texte alternatif doit décrire l'image et ne doit pas dépasser 125 caractères (y compris les espaces).
• Pour des images complexes ou des images qui nécessitent plus de 125 caractères, procédez comme suit :
  • Fournir une simple déclaration de texte comme la valeur alt
  • Fournir une description de texte plus détaillé, codez immédiatement avant ou après l'image

Cela garantit que tous les utilisateurs ont accès à une description simple de l'image, supporte différents styles d'apprentissage et répond aux exigences d'accessibilité. Le contenu doit décrire complètement l'image pour les utilisateurs non-visuels qui utilisent le logiciel de synthèse vocale de texte. Les utilisateurs non-visuels exigent la même expérience que les utilisateurs visuels, et doivent comprendre toutes les informations sans les images associées.

Les utilisateurs accordent une attention soutenue aux photos et aux autres images qui comportent des renseignements pertinents, mais ils passent outre les images légères qui servent à « animer » des pages Web.

[Traduction] Les bonnes images expliquent un concept, évoquent un sentiment, transmettent de l'information et enrichissent l'expérience globale des gens sur un site. Les mauvaises images sont un gaspillage d'espace, les utilisateurs les passent outre et, pire encore, elles portent à confusion.

Selon le contexte et le type d'image, les gens regardent en moyenne moins de la moitié des images qui leur sont présentées – 42 % seulement. Et, en règle générale, ils ne regardent ces images que pendant moins des deux dixièmes d'une seconde. Les gens passent outre plus d'images qu'ils n'en regardent sur le Web, et ils ne regardent les images que pendant une fraction de seconde.

Les concepteurs devraient faire attention à l'utilisation d'images qui accompagnent du texte, sans toutefois enrichir ce texte. Nous croyons que de telles images ne devraient pas être sur une page. Elles constituent un gaspillage de pixels, du travail gaspillé pour le concepteur et une perte de temps pour les utilisateurs.

Les utilisateurs regardent les images qui sont liées au contenu environ deux fois plus souvent – 29 % du temps.

Les tableaux constituent un moyen efficace de présenter l'information. Utilisez-les seulement pour afficher l'information financière, statistique, comparative et numérique – et non à des fins stylistiques. S'il est logique de présenter les données à l'aide d'une feuille de calcul, il est alors approprié de présenter les mêmes données dans un tableau. Pour connaître des options de rechange aux tableaux, adressez-vous à votre équipe Web.

À l'instar du texte, assurez-vous que les tableaux sont clairs et concis, avec le moins possible d'éléments de donnée dans chaque cellule. Si vous devez inclure plus que quelques mots dans une cellule, envisagez d'utiliser un autre média. De plus, si les cellules de votre tableau sont plus qu'à 50 % vides, il sera plus difficile de passer rapidement des en-têtes de tableau au contenu associé – envisagez d'utiliser un autre média.

S'il n'y a pas suffisamment d'espace blanc dans chaque cellule, les données deviennent difficiles à lire. Assurez-vous que chaque rangée et chaque colonne possèdent un en-tête clair et concis. Cela permet aux lecteurs d'écran de transmettre sans ambiguïté le contenu des tableaux.

La couleur devrait accroître la convivialité, et non rivaliser pour obtenir l'attention; avec les couleurs, le minimalisme est de règle. Une palette de couleurs limitée représente une approche de coordination et de liaison avec le contenu dans l'ensemble de la présence Web, et elle renforce la confiance que les utilisateurs accordent à l'information.

La couleur est efficace dans les situations suivantes :

• On utilise un maximum de 3 couleurs principales et de 3 couleurs accentuées dans un seul site Web
• La signification culturelle des couleurs est prise en compte

La couleur permet de grouper les éléments de contenu semblables ou d'indiquer les différences. Lorsque vous utilisez de la couleur, demandez-vous quel en est l'effet sur les utilisateurs ayant des limitations visuelles :

• La couleur ne peut pas être le seul élément qui sert à transmettre l'information – les personnes daltoniennes peuvent avoir de la difficulté à la comprendre (utilisez-la conjointement avec le texte et la texture)
• Certaines combinaisons de couleurs complémentaires peuvent créer des vibrations visuelles, qui rendent la lecture très difficile (par exemple, rouge sur bleu, jaune sur bleu, blanc sur jaune) 

Le texte et l'arrière-plan doivent présenter un contraste élevé – l'outil Luminosity Colour Contrast Ratio Analyser peut analyser les couleurs en arrière-plan et en avant-plan pour déterminer si le contraste est suffisant. Les utilisateurs lisent le texte noir sur arrière-plan blanc jusqu'à 32 % plus rapidement que du texte clair sur un arrière-plan foncé.

[Traduction] Le codage par couleurs permet aux utilisateurs de parcourir rapidement les éléments et d'y percevoir rapidement les modèles et les liens. Les éléments de même couleur seront considérés comme liés les uns aux autres, tandis que les éléments présentant des différences de couleur bien visibles seront considérés comme différents.

Sur le Web, 90 % de l'information se trouve sous forme de langage écrit et est présentée à l'aide de polices. La police a un effet sur la vitesse et le degré d'aisance avec lesquels les utilisateurs comprennent et lisent le contenu. Voir aussi Couleur.

Lorsque vous choisissez des polices, suivez les principes suivants :

• N'utilisez pas plus de 3 polices et de 3 couleurs dans un seul site Web.
  • Autrement, le site Web aura une apparence peu structurée et peu professionnelle
  • La plupart des sites Web ont un nombre limité de polices déterminées au préalable dont l'utilisation est autorisée sur le Web. Adressez-vous à votre équipe Web si vous avez besoin de plus de renseignements
• Utilisez des polices Web standards que les utilisateurs peuvent rapidement reconnaître et lire
• Utilisez des polices sans empattement « comme Arial » pour le contenu
• Limitez l'utilisation des polices avec empattement, qui ont des « bras » et des « pattes » (comme Times New Roman) aux en-têtes
• N'utilisez pas les polices Comic Sans et Impact
• Utilisez avec prudence les polices de couleur.
  • N'utilisez pas du texte bleu pour du contenu; les utilisateurs pourraient le prendre pour des liens
  • Pour une lisibilité optimale, utilisez du texte noir sur arrière-plan blanc
• Ne pas utiliser italique car ils peuvent ralentir la vitesse de lecture
  • Voir aussi Guide de rédaction du contenu du site Canada.ca (lien externe) : Caractères gras, italique et soulignement
• N'écrivez pas tout en majuscules; cela ralentit la lecture et peut sembler agressif

[Traduction] Les concepteurs devraient [...] s'efforcer d'éliminer, ou du moins de réduire au minimum, la charge cognitive superflue : le traitement qui nécessite des ressources mentales, sans toutefois aider réellement les utilisateurs à comprendre le contenu (par exemple, les styles de police différents qui ne transmettent aucun sens unique).