Structure et présentation du contenu

La structure et la présentation du contenu sont fondées sur le sujet, ou sur la tâche, selon ce qui convient le mieux à vos utilisateurs. Faites en sorte que la structure demeure simple, logique et cohérente afin que les utilisateurs puissent se familiariser rapidement avec votre contenu. Ensuite, les utilisateurs pourront l'explorer facilement pour accomplir leurs tâches.

Évitez les médias substituts et de remplacement

Points clés :

  • La publication de contenu en ligne dans des médias autres que le HTML, comme Word, PDF, PPT et Excel, va à l'encontre de la plupart des principes de la convivialité
  • Il est préférable d'éviter les médias substituts et de remplacement en ligne, à moins d'être clairement nécessaires du point de vue opérationnel ou des utilisateurs

L'information peut être publiée en ligne dans un grand nombre de formats différents. Chaque format a une fin précise :

Même si l'on peut utiliser des formats différents en ligne en fonction d'un besoin particulier, le HTML est le meilleur média pour le contenu en ligne.

Lorsque des documents sont publiés en ligne dans des médias autres que le HTML, comme Word, PDF, PPT ou Excel, cela crée un certain nombre de problèmes parce que ces médias ne sont pas destinés principalement au Web :

[Traduction] En structurant le contenu en fonction de la réutilisation, nous pouvons créer, publier et utiliser le contenu avec une plus grande efficience. Nous pouvons l'assembler et le réassembler pour des produits, des publics, des appareils ou des contextes d'utilisation différents. L'information qui est intégrée aux documents rend ce processus difficile, si ce n'est impossible. [...] Le volume de contenu a aussi un effet sur la trouvabilité. La mentalité « nous pourrions le mettre en ligne » ne subit aucun contrôle lorsque la publication est aussi facile que d'« enregistrer en tant que PDF » et de téléverser. Les sites Web peuvent se transformer en classeurs énormes, obligeant leurs visiteurs de passer à travers d'autres liens et résultats de recherche pour trouver ce qu'ils cherchent. La Banque mondiale a affirmé récemment que plus de 31 % de ses rapports n'avaient jamais été téléchargés.

Nos essais de convivialité montrent souvent que les gens ont plus de problèmes avec le contenu des documents PDF qu'avec les pages Web. Ils cliquent sur un lien et amorcent un téléchargement imprévu ou non souhaité. Le téléchargement échoue ou ils l'abandonnent lorsqu'ils constatent la grosseur du fichier. Les gens ont parfois de la difficulté à explorer les documents volumineux dont la mise en page est axée sur l'impression, qui présentent des graphiques énormes et qui n'ont aucun signet interne. Souvent, l'information qu'ils veulent se trouve dans un seul paragraphe. Les documents PDF peuvent nécessiter d'importants efforts malgré des besoins en information simples.

[Traduction] Près du tiers des rapports PDF [de la Banque mondiale] n'ont jamais été téléchargés, pas même une fois. Environ 40 % des rapports ont été téléchargés moins de 100 fois.

Une fois que vous définissez les tâches de vos utilisateurs, déterminez l'information dont ces derniers ont besoin pour accomplir ces tâches :

Puisque vous ne pouvez pas déterminer tous les besoins des utilisateurs, et puisque ces besoins évoluent, les créateurs de contenu devraient offrir un mécanisme de rétroaction aux utilisateurs. Les propriétaires du contenu devraient être ouverts aux suggestions de changements et de modifications par les utilisateurs.

Optimisez les en-têtes et les étiquettes de menu

Points clés :

  • Donnez à chaque page Web un titre unique et descriptif
  • Utilisez des expressions ou des termes clairs, concis, descriptifs et familiers
  • Utilisez des mots clés importants dans les deux premiers mots
  • Présentez le contexte qui explique où est l'utilisateur et pourquoi il est là
  • Utilisez des sous-titres pour diviser les longues pages Web

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à
Exemples écrivez et n'écrivez pas
Contexte Écrivez N'écrivez pas
Le titre est unique et descriptif Notes au dossier pour la gestion des blessures et des maladies – Modèle Notes au dossier
Le titre commence par les mots les plus importants (en anglais) Information Management Policy (Gestion de l'information – Politique) Policy on Information Management (Politique sur la gestion de l'information)
Le titre ne comprend pas d'information inutile Programme de recrutement Renseignements sur le programme de recrutement – Ce qu'il faut savoir
Le titre est concis Approbation des demandes d'autorisation de voyager Comment approuver les demandes d'autorisation de voyager

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

Sur l'intranet, les étiquettes de menu et les en-têtes doivent être distincts et significatifs aux yeux des utilisateurs, étant centrés sur les sujets et les tâches plutôt que sur la structure organisationnelle.

[Traduction] De nombreux sites intranet sont victimes d'étiquettes de menu qui portent à confusion. De telles étiquettes rendent difficile, pour les utilisateurs, la localisation de ce qu'ils cherchent.

Les raisons les plus courantes de la confusion sont les suivantes :

  • Les termes sont trop vagues et finissent par être des fourre-tout (p. ex. « Pour les employés »)
  • Les sections comme « Comment puis-je... » ou « Outils » deviennent trop grandes
  • Des noms de section différents sur le site ne se distinguent pas (p. ex. « Ressources humaines » et « Administration et gestion » peuvent apparaître dans le même menu)
  • Le langage est pollué par du jargon ou des termes propres à la marque

L'appellation floue constitue l'un des projets les plus grands et les plus importants à aborder lorsqu'il est question d'AI de l'intranet. Toutes les catégories de navigation doivent être descriptives, précises et mutuellement exclusives, de sorte que les utilisateurs puissent choisir sans hésiter où se rendre.

[...] les sites intranet sont initialement structurés pour imiter la configuration organisationnelle de la société, puisque ce type d'AI rend facile la tenue à jour du site intranet : chaque service ou secteur a sa section du site intranet. Toutefois, l'inconvénient, c'est que chaque fois qu'il y a une réorganisation de l'institution, la navigation doit changer elle aussi. Nous avons aussi constaté, lors de nos essais auprès des utilisateurs de sites intranet, que la navigation fondée sur la tâche a tendance à faciliter l'apprentissage.

Un piège courant dans le cas de l'AI fondée sur la tâche consiste en les noms de catégorie difficiles à parcourir rapidement. Les organisations croient que les noms de catégorie doivent commencer par un verbe ou suivre le modèle « Je dois... » pour être fondées sur la tâche. Cela n'est pas nécessaire. Parfois, en tentant de faire entrer un lien ou des étiquettes de menu dans un média en particulier, on les rend longs et difficiles à parcourir rapidement, puisque les mots les plus significatifs n'apparaissent pas avant la fin de l'étiquette. L'AI fondée sur la tâche ne nécessite aucune structure grammaticale particulière pour les étiquettes; il s'agit simplement de regrouper les renseignements en fonction de la façon dont les employés les utilisent plutôt que des personnes qui les créent et les tiennent à jour.

Utilisez efficacement les éléments de mise en forme et de présentation

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.

Listes

Points clés :

  • Donnez à la liste un titre descriptif et unique
  • Évitez les sous-listes dans la mesure du possible
  • Disposez la liste dans un ordre logique
  • Utilisez des chiffres pour énumérer des étapes ou des instructions, et des puces pour toutes les autres listes
  • Évitez de mettre des éléments en ordre alphabétique
  • Énumérez les éléments selon une structure en parallèle

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

Images

Points clés :

  • Les images doivent soutenir l'information
  • Il arrive souvent aux utilisateurs de passer outre les images
  • Les images peuvent ralentir la recherche d'information
  • Du texte doit accompagner et décrire pleinement les images – pour les utilisateurs non visuels

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.

Tableaux

Points clés :

  • Utilisez les tableaux uniquement pour l'information financière, statistique, comparative et numérique
  • Assurez-vous que toutes les colonnes et/ou rangées ont un en-tête
  • Faites en sorte que les tableaux demeurent courts, clairs et concis
  • Assurez-vous qu'il y a suffisamment d'espace blanc entre chaque élément de donnée

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.

Couleur

Points clés :

  • Avec les couleurs, le minimalisme est de règle.
  • La couleur peut permettre de grouper des éléments de contenu semblable ou d'indiquer des différences
  • La couleur ne peut pas être le seul élément qui sert à transmettre l'information
  • Le texte et l'arrière-plan doivent présenter un contraste élevé

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.

Police

Points clés :

  • Limitez le nombre de polices différences qui sont utilisées dans un site Web
  • Utilisez des polices Web standards
  • Limitez l'utilisation de polices de couleur
  • N'écrivez pas tout en majuscules

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
  • 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).

Date de modification :