Les concepteurs de sites web oublient aujourd'hui’hui trop souvent de se mettre à la place des utilisateurs. Voici quelques règles à respecter pour améliorer leur confort.
Ces deux dernières années, j' ai remarqué une tendance gênante dans la conception de sites: les pages web, et notamment les pages d' accueil, deviennent de plus en plus volumineuses à mesure que les concepteurs ajoutent des quantités d' informations sur chaque page.
Auparavant, une page d' accueil pouvait contenir un logo et un slogan, un joli graphique, quelques boutons de navigation sur le site et un message de bienvenu. Aujourd'hui, il est fréquent que ces composants soient accompagnés de bien d' autres éléments, tels que:
• des gros titres et du texte pour de multiples nouvelles;
• des en-têtes distincts et des liens rapides pour plusieurs fonctionnalités du site.
• un assortiment de graphiques concernant des promotions et publicités.
• des logo's pour divers membres, filiales et récompenses.
• des notes de copyright et autres clauses juridiques.
Cette montagne d' informations peut s' avérer accablante pour les internautes, qui ont souvent du mal à trouver ce qu 'ils cherchent parmi toutes ces distractions.
L' ergonomie de votre site
Penser aux utilisateurs
Plusieurs facteurs contribuent
à cette tendance. Tout d' abord, les concepteurs travaillent sur de larges
écrans à haute résolution et ne testent pas suffisamment
leurs oeuvres sur des écrans plus petits à une résolution
inférieure.
L' affichage d' une large page web sur un grand écran permet aux concepteurs
et aux visiteurs de voir la majorité des éléments qui composent
la page, si ce n' est tous. Or, c' est en voyant les relations entre ces éléments
que les internautes peuvent comprendre leur organisation logique et ainsi trouver
ce qu 'ils cherchent.
Par contre, lorsque les visiteurs consultent une large page web sur un petit
écran ou dans une petite fenêtre de navigation, ils ne peuvent
voir que quelques éléments de la page à la fois. Par conséquent,
ils ne peuvent pas observer les relations entre les divers éléments,
à moins qu 'ils ne mémorisent la page web dans son intégralité
en la faisant défiler et en étudiant ses composants. Bon nombre
des internautes n' ont pas la mémoire visuelle requise pour cet exercice
et de nombreux autres ne veulent pas y consacrer leur temps ni leurs efforts.
Ainsi, une large proportion des visiteurs du site éprouvent des difficultés
à comprendre l' organisation des grandes pages web et à y trouver
ce qu 'ils cherchent.
Il existe une solution simple pour les concepteurs : adapter leurs créations
aux résolutions d' écran et aux tailles des fenêtres de
navigation que les internautes utilisent véritablement. Heureusement,
nous ne sommes plus limités à la résolution 640x480. Un
moniteur de 15 pouces fonctionnant à une résolution de 800x600
pixels est en pratique la configuration minimale et bon nombre des ordinateurs
actuels sont livrés avec des écrans 17 pouces en résolution
par défaut de 1024x768. Pourtant, cette surface de visualisation reste
nettement inférieure à celle du système type d' un concepteur,
qui peut inclure un moniteur 19 ou 21 pouces réglé à une
résolution de 1280x1024 ou supérieure. Or, si vous concevez des
pages web qui ont besoin de toute cette surface pour apparaître sous leurs
plus beaux atours, vos visiteurs dotés d' écrans plus petits auront
des difficultés à y naviguer.
L' ergonomie de votre site
Améliorer la convivialité
Bizarrement, je pense que ces problèmes
de convivialité des grandes pages web surchargées découlent
en partie d' un excès de zèle à vouloir améliorer
la convivialité.
De nombreux concepteurs réagissent à des plaintes quand au nombre
excessif de clics requis pour atteindre des pages spécifiques. Ils subissent
également des critiques portant sur des pages dépourvues de contenu
et ne présentant qu 'une série de liens, ce qui les apparente
à des menus pleine page. Aussi les concepteurs répondent-ils en
aplanissant la structure de navigation de leurs sites et en utilisant certes
moins de pages, mais des pages plus volumineuses.
Pour réduire le nombre de clics nécessaires pour atteindre un
certain contenu, les concepteurs introduisent souvent des liens rapides vers
ce contenu sur la page d' accueil de leur site. Les visiteurs n' ont ainsi plus
qu 'à cliquer sur un seul lien au lieu de devoir plonger dans l' arborescence
de navigation. L' idée est bonne, si tant est que ce lien rapide soit
facile à trouver et à identifier pour le visiteur. Or, c' est
l' effet inverse qui se produit si le nombre de liens rapides et d' autres éléments
qui se veulent accrocheurs engendrent une surcharge visuelle, car les internautes
ont alors du mal à détecter ce qu' ils recherchent.
Le niveau ultime dans la réduction du nombre de clics consiste à
fournir un contenu directement accessible sans clic, les nouvelles et autre
contenu figurant alors sur la page d' accueil plutôt que sur des pages
distinctes auxquelles les visiteurs accèdent via des liens de navigation.
Cette autre bonne idée permet également de s' assurer que le plus
grand nombre de visiteurs possible peut voir du contenu important. Néanmoins,
il est vite arrivé que l' on place trop de contenu sur une même
page, notamment la page d' accueil du site. Si les internautes doivent faire
défiler une longue page pour consulter l' intégralité du
contenu, ils n' y gagnent pas vraiment en temps et en effort. En fait, le défilement
est souvent moins efficace que des pages liées : si les liens sont bien
construits, ils fournissent en effet une description du contenu lié,
tandis que la seule façon de savoir ce qu' il y a sous le bord inférieur
de la fenêtre du navigateur consiste à faire défiler la
page.
L' ajout de liens rapides et d' un contenu textuel sur la page d' accueil d'
un site peut contribuer à améliorer la convivialité en
augmentant la densité des informations et en permettant d' accéder
au contenu en moins de clics. Ces idées sont efficaces jusqu' à
un certain point, mais si les concepteurs les poussent trop loin, elles peuvent
transformer une page aérée en page surchargée et générer
des pages beaucoup trop larges qui ne pourront pas s' afficher entièrement
dans une fenêtre de navigateur type. Il est peut-être temps de ramener
un peu de bon sens (et d' espace vide tellement nécessaire) dans la conception
des sites les plus encombrés. Il en résultera alors des pages
web tout autant attrayantes que conviviales.
L' ergonomie de votre site
Faciliter la navigation des utilisateurs handicapés visuels
Je suis toujours un peu sceptique lorsque j' entends parler d' universalité en matière de conception web. D' après mon intuition et mon expérience, il n' existe pas vraiment de bonne solution universelle.
Tout site universel, autrement dit qui peut être utilisé aussi bien par des personnes valides que handicapées, peut facilement être amélioré si nous l' optimisons spécifiquement pour chaque public. Par contre, en tant que concepteurs, nous ne prenons généralement pas en compte les éléments optimaux pour les personnes handicapées. Bien souvent, ces personnes sont tout simplement oubliées lors de la conception et les dispositions les concernant ne sont pensées qu' après coup. Ironiquement, les concepteurs et webmaster's peuvent eux-mêmes avoir un jour besoin d' une meilleure accessibilité web: les troubles musculo-squelettiques (RSI), ou "maladie de l' ordinateur" causés par une mauvaise ergonomie du matériel et des postures de travail incorrectes, peuvent frapper les meilleurs d' entre nous.
Cet article ne fait qu' aborder l' accessibilité web, et ne vise pas à remplacer les recommandations et directives officielles en matière d' accessibilité.
L' ergonomie de votre site
Quel besoin en fonction du handicap ?
Les concepteurs web doivent notamment prendre en compte les handicaps suivants (liste non exhaustive): cécité, vision réduite, daltonisme, troubles physiques et moteurs, troubles neurologiques, cognitifs et d' apprentissage, et crises épileptiques (provoquées par le clignotement visuel).
Les personnes aveugles entendent les informations textuelles par un logiciel de synthèse vocal (conversion texte-parole). Elles peuvent également utiliser un logiciel de sortie en Braille. Les personnes à vision réduite augmentent généralement la taille des polices système. Par exemple, elles peuvent avoir recours à de grandes polices jaunes sur un fond noir. Elles peuvent aussi utiliser un logiciel de grossissement de l' écran. Les personnes présentant des troubles physiques et moteurs emploient habituellement un matériel spécifique, tel qu' une souris ou un pointeur contrôlé par des mouvements de tête, un clavier spécialisé ou un logiciel de reconnaissance vocale.
L' ergonomie de votre site
Comment améliorer l' accessibilité des sites ?
• Appliquer des feuilles de style CSS pour la mise en page, plutôt que des balises <table>.
• Utiliser les balises <table> uniquement pour des informations tabulaires de type Excel, et non pour la mise en page.
• Définir tous les styles de polices via CSS.
• Une page doit être logique et lisible même lorsque les feuilles de style CSS sont désactivées.
• Utiliser une structure textuelle avec <H1>, <H2>, <P>, <STRONG>, etc.
• Utiliser une présentation textuelle avec <B>, <CENTER>, etc.
• Utiliser des liens ou attributs "title" de liens significatifs, et pas simplement "cliquer ici".
• Utiliser des attributs de remplacement d' images significatifs.
• Ne pas utiliser de texte clignotant pour ne pas provoquer de crise d' épilepsie liée à la sensibilité à la lumière.
• Ne pas utiliser de fenêtres déroulantes.
• Ne pas utiliser de texte défilant.
• Utiliser une icône en plus de la couleur rouge pour signaler une erreur.
Remarque: cette liste est loin d' être exhaustive. Reportez-vous à la liste plus complète du W3C, Techniques pour les règles d' accessibilité du contenu web 1.0.
L' ergonomie de votre site
Exemples
Les personnes mal voyantes accèdent aux informations d' une page web de manière linéaire, via la synthèse vocale du texte. Le logiciel tente d' extraire le texte à partir du code HTML. Lorsqu' il rencontre une balise <table>, il l' interprète comme un document Excel avec lignes et colonnes. Or, les concepteurs utilisent souvent des balises <table> invisibles aux seules fins de présentation, si bien que la majorité des cellules ne contiennent rien à lire.
Une autre raison parle contre le recours à la balise <table> pour la présentation: certains utilisateurs ont besoin de changer visuellement la mise en forme d' une page, par exemple lorsqu' ils ont une vision réduite. Ces personnes utilisent un logiciel qui modifie la présentation d' une page web en supprimant ses styles CSS, ou en appliquant une feuille de styles CSS définie par l' utilisateur.
Les balises de présentation et de structure sont également mal employées. Ainsi, nous utilisons parfois l' attribut<H1> pour augmenter le poids d' une police et <B> pour qu' un titre soit plus visible. Or, un logiciel de conversion texte-parole interprète <H1> comme un titre plus important et <H2> comme un sous-titre. Par contre, <B> n' a aucune signification structurelle pour le logiciel.
Les personnes daltoniennes éprouvent des difficultés à distinguer le rouge du vert ou le jaune du bleu. Aussi, lorsque vous concevez des cas d' erreur dans des formulaires, veillez à utiliser une icône ou un graphisme signalant une erreur, en plus de la couleur rouge.
Enfin, les personnes souffrant de troubles neurologiques, cognitifs et d' apprentissage tireront profit d' un site simple, convivial et aéré.
L' ergonomie de votre site
Conclusion
Nous sommes une génération de mordus d' informatique. À mesure que nous prenons de l' âge, nous devons prendre en compte nos propres faiblesses humaines. Aussi, lorsque nous décidons aujourd'hui d' améliorer l' accessibilité web, nous ne faisons que préparer notre propre avenir pas si lointain sur internet.