Easy-Micro

TECHNIQUE Technique
Ergonomie Web

Recommandations pour la création de pages web conviviales


1 - Navigation
L'objectif est, ici, de minimiser l'effort mental de l'internaute. Ce dernier ne doit pas avoir à réfléchir pour naviguer dans votre site. Sinon, il s'en va!
C'est pour cela que la navigation au sein de votre site web doit être la plus intuitive possible et que votre système de navigation doit être parfaitement autonome vis à vis du navigateur. Chaque page doit contenir un titre explicite qui correspond au plan proposé. Bien entendu, les adresses URL de ces pages doivent être claires et précises (éviter les caractères spéciaux).

La page d'accueil
Les principales informations qui doivent apparaitre sur la page d'accueil sont le titre du site et l'organisation générale de votre contenu. Une bonne page d'accueil ne doit pas être statique. Elle doit avoir un caractère incitatif et présenter régulièrement des nouveautés.

LAINE ou COTON    Dar Attika    Etienne Bisch    Bernard Tessier    François Le Teich    EasyVoile

Les sites possédant un contenu très riche sont confrontés à la nécessité de faire percevoir à l'internaute la richesse de leur site dans un espace visuel limité (l'écran). De nombreux sites ont des pages d'accueil extrêmement chargées. Pour ne pas faire fuir vos visiteurs, votre contenu doit donc être présenté de façon claire. Pour cela, il est nécessaire de fournir une bonne catégorisation. Le libellé des différentes rubriques doit être pertinent de sorte que l'internaute puisse facilement en déduire son contenu.
Voir les exemples plutôt bien fait de Canal Plus ou de RTL pour leur catégorisation par couleurs!

Plusieurs méthodes de navigation peuvent être employées dans un site efficace. En voici une liste des plus fréquemment utilisées:

Navigation WebLe bandeau de navigation: Le bandeau réalisé avec des cadres (Frames en anglais) verticaux ou horizontaux doit contenir le titre de chacune des parties qui peuvent se décomposer en sous-parties. Cette décomposition en sous-parties doit être clair pour votre visiteur. Laissez lui le choix de naviguer dans tous les sens - entre vos différentes sous-parties. Bref, n'imposez pas de restrictions de navigation du type: Si tu veux aller là, tu dois passer par là. Au contraire, multipliez les opportunités de navigation.
Note: avec des cadres, attention aux ascenseurs horizontaux très laids!

La barre de navigation : souvent réalisée en javascript dans un document externe, la barre de navigation doit contenir un lien vers la page d'accueil de votre site (la coutume veut que votre logo soit situé en haut à gauche de l'écran avec un lien vers l'accueil). Si besoin, installez une barre de navigation secondaire qui contiendra un lien vers la page d'accueil de sa sous-partie.
Là aussi, multipliez les opportunités de navigation. Par exemple, il est souvent judicieux de répéter la barre de navigation en bas d'une page un peu longue (plus de deux fois l'écran) pour ne pas obliger l'internaute à remonter en haut du document pour en sortir!

Le plan du site: pour les sites complexes, il est nécéssaire de prévoir une page présentant un plan détaillé afin que l'internaute puisse s'y retrouver. Ce plan doit être accessible depuis la page d'accueil. Les items le composant doivent être des liens cliquables.

2 - Présentation
Le plus important est de garder une homogénéité dans le présentation des pages. Pour cela l'idéal est de réaliser un cahier des charges (avec une charte graphique). Celui-ci permettra de définir l'ensemble des besoins et de faire des choix tout en répondant aux questions comme "Quel est le public visé?".

Le cahier des charges
Avant toute chose, il est primordial de procéder à une analyse des besoins par rapport aux objectifs recherchés. Il faut même se demander si la solution Internet est en adéquation aux buts proposés.
Un cahier des charges pour la création d'un site internet devrait prévoir :
  • une évaluation des besoins
  • un inventaire des fonctionnalités spécifiques nécéssaires à la réalisation (forum, formulaires, bases de données, etc.)
  • la détermination d'une charte graphique avec l'arborescence, le design, cadres, couleurs, polices, photos, dessins, etc
  • un choix d'ergonomie par rapport aux différent types de résolution d'écrans (800X600 - 1024X768 - 1280X1024 et plus...)
  • le suivi et la mise à jour du site (fréquence et évènements)
  • les ressources humaines et matérielles nécessaires (désigner les futurs intervenants).
Les sites web (Intranet ou Internet) réalisés sans cahier des charges ont une durée de vie très relative par rapport aux objectifs de départ... La plupart finissent dans un oubli total faute de mise à jour.
Sans visiteurs, le site ne sera plus qu'une carte de visite virtuelle et statique ou sa seule réson d'être est de conserver un nom de domaine correspondant à la marque.

- Les cadres (ou Frames) : Utilisez des cadres (trois au maximum) uniquement lorsque cela est indispensable à la navigation. Privilégiez plutot les appels externe de bandeaux javascript comme c'est le cas ici dans les menus verticaux à gauche.

- Les ascenseurs: surtout, pas d'ascenseurs horizontaux (sauf cas extrême du site de type: Bande Dessinée) et faîte en sorte que les ascenseurs verticaux disparaissent automatiquement lorsqu'ils ne sont pas utiles.

- Les animations: ne pas abuser des animations surtout si un texte long à lire se trouve à côté. Attention à l'emploi d'animation de type Flash (de Macromédia) qui exige le téléchargement du dernier plug-in; certains internautes (un peu anxieux ou pris d'un doute?) refusent systématiquement de les télécharger!

- La mise en forme
Petit site deviendra grand Les pages : la taille des pages ne doit pas dépasser deux ou trois écrans en hauteur (sinon, il faut installer un système de liens internes de type signet ou ancre nomée).

La police de caractères : évitez d'ecrire en italique et attention aux polices trop petites difficiles à lire sur un écran (La police Easy-Micro est de 8pt - pt pour point (= 1/72 pouce) - soit 11px - px pour pixels). Utilisez des polices fournies en standard par le système. Ne pas utiliser plus de deux polices de caractères dans un document.

Le fond: Restez sobre dans la couleur de fond. Le contraste avec la couleur de police doit être positif. Vérifiez si la couleur de police correspond à la couleur de fond (la couleur de fond blanche de cette page accepte la couleur de police noir - une couleur de fond claire implique une police sombre). > Superbe exemple du site de Courchevel.

3 - Contenu
Les internautes viendront en priorité sur votre site parce que celui-ci fournit du contenu et des services présentant ces qualités:
  • Du contenu qui se renouvelle régulièrement et à jour,
  • qui apporte un service, une valeur ajoutée, une information supplémentaire,
  • qui respecte les droits et libertés de vos visiteurs.
du contenu sexy Nombreux sont les concepteurs de site qui bâtissent l'architecture d'un site avant même d'en connaître le contenu exact. Dans ce cas, la conception de l'interface ne pourra être satisfaisante pour vos visiteurs. Il est important de procéder à la construction de l'architecture seulement après avoir défini comment le contenu allait être catégorisé.

En effet, la réussite de l'ergonomie d'un site passe par ces étapes:
  • identifier de façon exhaustive le contenu,
  • catégoriser les informations en classes pertinentes,
  • identifier chaque classe par un libellé précis.
Attention aux contenu (et aux thèmes) déjà harchie-diffusés par les autres sites. Sans valeur ajoutée par rapport aux autre site, mieux vaut renoncer de-suite, ou alors différenciez-vous par rapport aux "concurents".
N'hésitez pas à donner un aspect simpliste à l'organisation de votre site. Votre visiteur n'en sera que plus a l'aise...

Un formulaire de bonne qualité permet à l'utilisateur de savoir précisément quelles informations saisir et comment les saisir, sans faire appel à un langage de commande particulier. Il présente par ailleurs des spécificités:
  • Lorsque certaines informations ne sont pas obligatoires, différencier les champs obligatoires des champs optionels.
  • Lors de la validation du formulaire, faites en sorte de vérifier la saisie.
  • Préciser le format de saisie accepté dans les champs (Date Anglaise ou Française? - Code postal avec ou sans lettre?)
  • Séparer vos groupes de champs par des indices visuels.
  • Des titres de champs de plus de 6 caractères doivent être justifiés à gauche. S'il n'est pas possible de les abréger, l'alignement se fera à droite. Lorsque les libellés sont positionnés au dessus des champs, l'alignement se fera à gauche.
  • Un arrangement vertical des champs est préférable à l'horizontal.
  • Lorsque les entrées sont prédéfinies, proposer des listes déroulantes.
  • Confirmer les informations saisies par un message explicite.

4 - Transfert
Avec la génération zapping, le temps de chargement est aujourd'hui d'une importance capitale. Si votre page n'apparait pas au bout de quelques secondes, votre visiteur est déjà parti!

Parce qu'un internaute est avant tout un Humain, sa perception du temps de téléchargement d'une page web, n'est pas identique à la mesure physique de son temps réel. Suivant le type du site visité, sa qualité ergonomique et le contexte, la patience de votre visiteur ne sera pas tout à fait la même.

Il est donc important, lors de la conception de votre site, de penser à définir une architecture qui soit adaptée aux utilisateurs visés.

Il faut donc privilégier la taille de vos documents car plus votre page est lourde en octet et plus elle mettra de temps à apparaitre sur l'écran de votre visiteur sachant que le temps d'attente maximum d'un visiteur moyen est de 10 secondes et qu'une page est perçue comme plus intéressante lorsqu'elle est téléchargée rapidement!

Une page classique ne doit pas dépasser les 50 kilos octet (soit, images comprises, plus ou moins 50 000 octets) et votre page d'accueil (la plus importante) doit être la plus légère de votre site (taille idéal: 30Ko).

Si besoin, il vaut mieux prévenir l'utilisateur en donnant une estimation du temps de transfert en fonction de son type de connexion ou installer une barre de défilement (cas des animations Flash un peu lourdes).

Je vous rappele que les modems V90 - encore trés répandus - tournent à 56 kilos bits par seconde, soit à peu près 7 Ko par seconde (1 octet = 8 bits). Donc pour une page de 50Ko il faut attendre 7 secondes...

Bien entendu, ce sont les images qui sont les plus lourdes et donc qui ralentissent votre chargement.
Une astuce classique lorsque l'on a absolument besoin d'une image volumineuse est de la placer en bas de page, de manière à ce que votre visiteur patiente en lisant le texte en haut du document le temps que l'image se charge.

Afin de réduire le temps de chargement de vos images, définissez systématiquement la largeur (width) et la hauteur (height) de vos images.

Pensez au GIF entrelacé (Graphics Interchange Format) ou au JPEG progressif (Joint Photographic Expert Group): les images s'affichent avant d'être complétement chargées. Pour plus d'infos, voir le tutorial sur le Format Bitmap.

Easy-Micro

Sites utiles
- ergosoft.com
- ergoweb.ca
- umontreal.ca
- ccambien.free.fr
- ulaval.ca
- smartpixel.net
- ergolab.net
- lookimage.com
- netmarketing.com
- dsi.cnrs.fr
- interface.free.fr
- biblimedia.com


< Page précédente TECHNIQUE Page suivante >