Trieur Organisé de Solutions et de Ressources Informatiques

Niveau : Moyen
Temps : 20min (lecture)
Domaine : Ergonomie, accessibilité, utilisabilité

Introduction

Bannières clignotantes, pop-up publicitaires, animations Flash/Javascript ... le web regorge d'éléments attractifs. Attractifs certes, mais à quel point ? Quel en est le prix ? Les éléments qui compose un site Web doivent être judicieusement choisis et ne doivent pas seulement répondre à un critère esthétique. Avant de concevoir un site il faut se poser les bonnes questions : quels seront les utilisateurs ? quel est leur niveau de connaissances en informatique ? Quels seront les navigateurs internet utilisés (statistiques 2010 d'utilisation des navigateurs ) ? Le contenu du site est-il destiné à des personnes handicapées (associations, informations...) ? Doit-on privilégier l'esthétique - le contenant - (site vitrine, présentation de marque...) ou le contenu (informations, documentations...) ? L'utilité des conseils suivants dépend du contexte. On peut citer l'exemple d'un site intranet d'une entreprise utilisant uniquement le navigateur Safari où il est peu utile de s'attarder aux défauts d'affichage avec IE6. Ces conseils sont regroupés en différentes rubriques et s'adressent principalement à ceux qui veulent prendre de bonnes habitudes pour concevoir efficacement. On ne tiendra pas compte ici du temps de réalisation qui peut s'avérer très coûteux.

Page d'accueil

C'est la page la plus importante du site. L'utilisateur doit trouver rapidement l'information qu'il recherche. Tout au long de sa navigation sur internet il acquière des automatismes qu'il est recommandé d'utiliser pour améliorer l'efficacité et le confort.

• Cette page ne doit être ni trop longue ni trop dense. On peut appliquer la "rêgle des 3 espacements" (méthode : se placer en haut de la page et appuyer trois fois sur la barre d'espace, si l'on atteint pas le bas de la page alors on peut considérer que celle-ci est trop longue. Ne pas mettre « /accueil » à la fin de l'url. www.lesite.fr donne directement accès à la page d'accueil.
• Utiliser une favicon (image affichée dans la barre d'adresse) afin de renforcer l'identité du site.
• Par convention le logo du site doit se situer en haut à gauche et doit être cliquable : retour à la page d'accueil (sauf lorsque l'on est sur la page d'accueil).
• Faire figurer les principales fonctionnalités couplées au dernières mises à jour créé du dynamisme.
• Le reste du site Web doit avoir une présentation identique, seul le contenu change.
• Ne pas réaliser une bannière et un menu trop volumineux car ces éléments sont présents sur l'ensemble du site. Cet espace est particulièrement précieux car il peut être lu sans dérouler la page, cette zone doit être particulièrement étudiée car c'est l'espace le plus stratégique.

Menus

Le menu principal doit être visible dès la page d'accueil (point d'entrée dans le site) et doit rester cohérent tout au long de la navigation (position, forme, comportement, items). Dans le cas contraire il entraine une confusion auprès de l'utilisateur et empêche l'acquisition d'automatismes. Il a pour but d'indiquer à l'utilisateur les différentes possibilités qui sont proposées.

• Utiliser les listes html pour formater le menu
• L'item « accueil » doit figurer dans le menu, il renvoi à la page d'accueil
• Faire ressortir visuellement l'item sélectionné (taille, couleur...), cela facilite l'orientation et la navigation

Couleurs

Le contenu du Web évolue constamment ; la tendance actuelle est plutôt aux sites clairs, aérés, légers. Les nombreuses couleurs vives sont remplacées par des dégradés sobres, les cadres arrondis redeviennent plus stricts ou disparaissent.

• Les grands espaces de couleurs chaudes (rouge, orange...) attirent fortement l'œil : à n'utiliser que si cette zone contient le sujet principal de la page
• Éviter le contraste noir/blanc qui est agressif et augmente la fatigue visuelle, préférer gris foncé / blanc cassé
• Utiliser un nombre de couleurs modéré et rester cohérent dans leur utilisation en définissant leur rôle
• Les utilisateurs sont influencés par leur vie quotidienne, créant ainsi des automatismes que l'on peut intégrer aux interfaces. Si on reprends la sémantique du feu tricolore :
  • le rouge indique l'arrêt, l'erreur
  • le jaune indique la prudence, l'avertissement
  • le vert indique l'accord, le bon fonctionnement

Typographie et textes

• Type : les polices sans empattements (Arial, Verdana...) sont plus faciles à lire sur un écran que celles avec empattements (Times New Roman...) elles sont donc plus appropriées pour le Web
• Taille : éviter de descendre en dessous de 10px pour le contenu principal de la page (hors pied de page, mentions légales... qui sont des informations de second plan)
• Couleur : un texte en jaune ou vert est difficile à lire. Pour améliorer le confort visuel, ne pas utiliser de couleurs trop vives, privilégier les teintes pastel. On peut citer les couleurs du projet Tango .
• Le soulignement est réservé exclusivement aux liens hypertexte. Pour mettre en valeur du texte on peut augmenter sa taille, le mettre en gras ou changer sa couleur.
• En français les majuscules sont accentuées (exemple : É). Dans le cas contraire les logiciels de synthèse vocale liront Energie : « eunergie »...
• Les textes doivent être très structurés (titres, parties, sous-parties, énumérations...). La lecture sur le web se fait généralement en diagonale, les gros blocs de texte sont donc à proscrire.
• Pour les grands articles ont peut améliorer l'efficacité en créant un sommaire avec des ancres HTML au début. On peut aussi proposer une version PDF pour les personnes préférant lire sur papier.

Images

Les images sont des éléments importants du site. Elles informent, agrémentent et dynamisent le contenu. Il faut cependant veiller à ne pas en utiliser trop ou des formats trop grands qui augmenterais considérablement le temps de réponse de la page. Si le poids de la page ne peut pas être réduit alors il faut indiquer à l'internaute par un message ou une barre de progression qu'il doit patienter.

• Il faut distinguer les images illustratives qui font partie du contenu (balise HTML « img ») des images de fond qui font partie du conteneur (balise CSS « background »)
• Mettre un attribut ALT sur toutes les images illustratives afin d'avoir un texte de substitution lorsque l'image ne s'affiche pas.

Accessibilité

• Ne pas mettre d'ascenseur horizontal (entraine des difficultés de navigation)
• Améliorer le repérage spatial en mettant en place un fil d'Ariane
• Garder un contraste important entre la couleur de fond et celle du texte. Vous pouvez tester en ligne vos contrastes grâce à l'outil de www.etre.com .
• Doubler les indications de couleur par des indications de forme (exemple : les liens hypertexte sont colorés ET soulignés). Ceci améliore l'accessibilité au personnes daltoniennes et permet d'imprimer les pages en noir et blanc
• Toujours mettre un caractère dans les cases vides d'un tableau. Les logiciels de synthèse vocale n'interprètent pas les cases vides ce qui entraine des décalages

Tests

Après la phase de réflexion et de conception il reste une phase importante, les tests. Ils permettent de rectifier des anomalies non détectées antérieurement et de faire évoluer légèrement certains affichages ou fonctionnements. Il est possible de faire de nombreux tests d'accessibilité et d'ergonomie. Voici quelques possibilités :

• Vérifier le bon respect des règles HTML en soumettant les pages au validateur W3C
• Vérifier avec le validateur CSS W3C la conformité de vos feuilles de style
• Optimiser le temps de réponse de vos pages en suivant les recommandations du plug-in Yslow du navigateur Firefox.
• Contrôler le niveau d'accessibilité en soumettant les pages sur le site cynthiasays . Trois niveaux d'accessibilité sont définis :
• Bronze (A) : règles obligatoires pour que le site soit considéré comme accessible
• Argent (AA) : règles qui devraient être respectées
• Or (AAA) : règles qui peuvent être appliquées (très difficile à mettre en place pour un site web volumineux)
• Contrôler que l'affichage sur un navigateur texte (lynx ) est possible et structuré (utilisation d'éléments tels que les div, les listes...)
• Contrôler l'aspect (affichage, navigation...) lorsque l'on désactive^[1] :
  • les images
  • le Javascript
  • le flash

Conclusion

Libre à chacun de ne respecter aucun des conseils présents si dessus. On notera cependant que les sites gouvernementaux ont l'obligation de valider leurs site Web afin qu'ils soient accessible aux personnes handicapées. Une bonne méthode pour comprendre les difficultés perçues par les personnes atteintes de déficiences visuelles telles que les personnes âgées consiste à passer du temps avec celles-ci pour mieux cerner leurs besoins. Il faut garder en mémoire que l'on ne développe pas pour soi mais pour répondre à besoin précis. Ce qui plait au programmeur n'est pas toujours au goût des futurs utilisateurs ; leur avis est primordial, leur satisfaction peut être estimée grâce à un questionnaire portant sur les choix réalisés, l'interface, la navigation, le contenu...