10 erreurs d’ergonomie à éviter !

Publié le 2 décembre 2009 par Delphine Dietrich 5 commentaires »

Voici un petit post qui recense 10 erreurs d’ergonomie courantes concernant les formulaires, les images et les liens, et le moyen très simple d’y remédier.

Erreur 1 : Un texte par défaut qui ne s’efface pas automatiquement

Problème : Dans un formulaire, on écrit parfois un texte par défaut pour indiquer aux internautes ce que l’on attend dans ce champs. Et c’est énervant quand ce texte ne s’efface pas tout seul lorsqu’on clique sur le champ !

Exemple :


Solution : Ajoutez dans le code de votre formulaire un peu de JavaScript qui demande de supprimer le contenu du champ lorsque le champ est sélectionné, si le texte qu’il contient est le texte par défaut.

<input id="e-mail" type="text" value="texte par défaut" onFocus="if (this.value=='texte par défaut') this.value=''" />

Cela donne :

Erreur 2 : Les étiquettes des formulaires non associées aux boutons radio ou cases à cocher

Problème : Lorsqu’on ne déclare pas dans son code quelle étiquette (<label> étiquette </label>) va avec quel élément alors ils ne sont pas associés et cliquer sur l’étiquette d’un bouton radio ou d’une case à cocher ne  permet pas de cocher la case.

Exemple :


Solution : Utiliser l’attribut "for".

<input id="accepter" type="checkbox" />
<label for="accepter">J’accèpte</label>

Cela donne :


Erreur 3 : Ne pas indiquer le champ sélectionné

Problème : Sur un formulaire, si on ne sait pas sur quel champ on se trouve la navigation au clavier devient impossible.

Solution : Préciser en CSS l’apparence du champ lorsqu’il est actif : bordure plus foncée, background….

textarea:focus {
border: 1px solid black;
}

Erreur 4 : Une image sans texte alternatif

Problème : L’absence d’alternative textuelle pour les graphiques et les images est l’un des plus grands problèmes d’accessibilité sur le Web.

Solution : Utilisez toujours l’attribut alt. Il doit contenir le but de l’image plutôt que sa description. Pour une image décorative, utilisez un alt vide alt="" pour indiquer que cette image peut être ignorée.

<img src="chemin de l’image" alt="but de l’image" />

Erreur 5 : Une image en background sans background color

Problème : Si l’image en background n’apparait pas pour une raison ou une autre, le texte qui devait apparaitre sur cette image va apparaitre sur un fond blanc et ne sera peut-être pas lisible.

intérêt de la couleur en background

Solution : Toujours préciser la couleur d’arrière plan au cas où l’image n’apparaisse pas.

Erreur 6 : Souligner du texte qui n’est pas un lien

Problème : Le fait de souligner les liens (en permanence ou au passage de la souris) est un standard du web. En scannant un texte, un internaute aura donc tendance à penser qu’un texte souligné est cliquable.

Solution : Utilisez du texte en gras pour faire ressortir des éléments et réservez le soulignement aux liens.

Erreur 7 : Ne pas indiquer un lien visité

Problème : Ne pas changer l’apparence des liens visités empêche de savoir quels liens ont déjà été suivis.

Solution : Ne pas oublier de déclarer l’état a:visited dans le CSS.

a:visited {
color: #551A8B;
decoration: underline;
}

Erreur 8 : Cliquez-ici !

Problème : Les internautes ne lisent pas les pages, ils les scannent… leur regard est attiré par les titres, les visuels, et les liens en raison de leur mise en forme. Si le lien porte sur cliquez-ici, l’internaute n’aura recueilli aucune information. Il devra lire le paragraphe pour savoir sur quoi porte le lien.

Solution : Faites porter le liens sur un groupe de mot qui décrit le lien.

Erreur 9 : Justifier des colonnes trop larges ou trop étroites

Problème : Justifier le texte rend une page plus esthétique, mais cela peut considérablement gêner la lecture si le texte s’étend sur une trop petite ou au contraire une trop grande largeur.
Trop petite largeur : espace démesuré entre les mots.
Trop grande largeur : difficile de se repérer lorsque l’on passe d’une ligne à l’autre.

Exemple :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut mauris neque, vel hendrerit ipsum. Donec eu gravida neque. Curabitur eu justo vitae turpis imperdiet mattis eget vitae metus. Suspendisse dictum turpis vel neque ultricies quis lacinia massa consectetur. Donec posuere auctor urna, eget adipiscing lacus facilisis at. Nulla facilisi. Nunc lacinia elit eget dolor dapibus vestibulum. Fusce ut velit id urna porta placerat. Etiam porttitor aliquet dui ut posuere. Morbi dolor diam, vestibulum eget sollicitudin et, sagittis vitae nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce venenatis tincidunt lobortis. Nulla libero eros, imperdiet vel luctus ut, tristique id libero. Sed a lorem purus. Donec a urna quam. Vestibulum a est ante, eget vulputate felis. Duis sem erat, porta sed accumsan sed, mattis eu justo. Quisque at mollis quam. Aliquam cursus pulvinar auctor.
Morbi dolor diam, vestibulum eget sollicitudin et, sagittis vitae nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut mauris neque, vel hendrerit ipsum.

Solution : Colonne large : ne pas justifier le texte où faire deux colonnes. Colonne étroite : ne pas justifier le texte.

Erreur 10 : Un logo qui ne renvoie pas sur la home

Problème : Le fait de retourner sur la page d’accueil quand on clique sur le logo en haut à gauche d’une page est devenu un standard du web. Ne pas le respecter risque de gêner les utilisateurs !

Solution : Toujours faire en sorte que le logo en haut à gauche renvoie sur la page d’accueil du site. Certains site le fond remarquer habilement en faisant apparaitre le mot home ou le symbole de la petite maison au passage de la souris.

Une petite maison apparait lorsqu'on passe la souris sur le logo de Facebook


Articles liés
Publicité

5 commentaires

  1. Alexandre B dit :

    Merci pour ce petit rappel ^^

  2. Concernant la première erreur: on parle bien ici d’une légende (par exemple, « e-mail ») plutôt que d’une valeur par défaut (par exemple, « hamster@cage.com ») qui s’ajoute au label par défaut pour expliciter l’objectif du champ.

    Mettre une légende dans un champ signifie que soumettre le formulaire enverra la légende comme si l’utilisateur l’avait saisie!

    Une approche plus robuste est:
    – mettre la légende dans un label
    – superposer le champ sur ce label
    – faire que le fond du champ soit transparent par défaut (pour voir la légende en transparence)
    – définir une classe sur ce champ qui rend son fond opaque (pour cacher la légende)
    – appliquer cette classe au moment du focus
    – l’enlever au moment du blur si le champ est vide

    Pour le reste, très bonnes observations. Le validateur CSS du W3C en détecte quelques-unes.

  3. @Victor Nicollet: En effet, la solution parfaite pour bien faire les choses ! Mais tout de suite un peu plus longue à mettre en place !

  4. Merci pour ses informations trés utile !
    Au plaisir de te relire !