Les principales régles d’utilisabilité du WEB
Les principales régles d’utilisabilité du WEB
Nov 13Aprés avoir vu cet article qui énumérait les principales règles d’usabilité pour le WEB, je me suis donc penché sur cette liste et j’ai traduit celle-ci afin d’en faire profiter un maximum de personnes. Si vous pensez à d’autres règles à rajouter, laissez les en commentaires, je les rajouterai.
Technique
- Avez vous validé votre (X)HTML en utilisant W3C Markup Validation Service?
- Avez vous validé votre CSS en utilisant W3C CSS Validation Service?
- Avez vous vérifié que votre site a le même rendu avec au minimum sur Internet Explorer, Firefox, Opéra et Safari?
Images
- Avez vous ajouté l’attribut ALT et TITLE pour vos images?
- Avez vous ajouté l’attribut LONGDESC pour vos images nécessitant une description?
- Avez vous créé des images dont la taille ne dépasse pas 50KB?
- Avez vous choisi un format approprié pour vos images?
Contenu
- Avez-vous utilisé une police sans-serif avec une taille appropriée pour votre texte?
- Avez-vous, si nécessaire ajusté l’espace entre les lignes (leading) et l’espace ente les lettres (tracking) pour améliorer la lisibilité?
- Avez-vous aligné votre texte à gauche? (Cela dépend des langues)
- Avez-vous utilisé EM ou les pourcentages au lieu des PX?
- Etes-vous sure qu’il n’y a pas de phrases entières en majuscules?
- Avez-vous utilise moins de 78 caractères en incluant les espaces par ligne?
- Avez-vous fait fait des paragraphes brefs et précis avec des titres explicites?
- Avez-vous utilisé des listes pour énumérer?
- Avez-vous écrit votre conclusion en premier et après votre développement?
- Avez-vous créé assez de contraste entre le texte et le fond?
- Avez-vous réalisé votre site de façon accessible pour les navigateurs exclusivement textuels ?
- Etes-vous sure qu’aucune page “En construction” ne figure?
- Avez-vous inclut une fonction d’impression des pages avec une visibilité large du texte?
- Avez-vous inclus une feuille de style d’impression?
- Avez-vous remplacé tous les caractères spéciaux avec l’ ISO Latin-1 codes?
- Avez-vous passé votre contenu au correcteur orthographique?
- Avez-vous ajusté la hauteur de ligne et l’espace entre les lettres pour améliorer la lisibilité?
Navigation
- Etes-vous sure que tous vos liens fonctionnent? (W3C Link checker fait le travail)
- Avez-vous inclus un lien sur toutes vos pages principales pour rejoindre la page d’accueil?
- Avez-vous inclue la navigation principale sur toutes vos pages?
- Avez-vous utilisé moins de 8 éléments différents dans votre navigation?
- Avez-vous distingué les pages statiques des pages dynamiques dans le menu?
- Avez-vous utilise des liens explicites au lieu de “cliquez ici”?
- Avez-vous utilise des liens explicites au lieu des termes business?
- Avez-vous fait une distinction entre les liens visités et les liens non visités?
- Avez-vous fait une distinction entre les liens et le texte?
- Avez vous ajouté l’attribut TITLE pour tous vos liens?
- Avez vous utilises des breadcrumbs (indicateurs visuels pour vous dire où vous êtes) si vous avez beaucoup de pages?
- Avez vous inclus une fonction de recherche si vous avez beaucoup de pages?
- Avez vous mis un lien vers la page d’accueil sur le logo?
- Avez vous mis un lien (aller au contenu) en haut des pages?
- Avez vous mis un lien (aller au menu) en haut des pages?
- Avez-vous permis de naviguer en utilisant SHIFT-TAB et RETURN?
Structure
- Avez-vous créé une structure cohérente?
- Avez-vous placé votre logo en haut à gauche?
- Avez-vous placé une description ou un slogan explicite à coté de votre logo (Celle-ci peut être placée comme titre de la fenêtre)?
- Avez-vous place votre fonction de recherche en haut a droite?
- Avez-vous réalisé votre design en utilisant un système de blocs ?
- Avez-vous réalisé votre design fluide en utilisant les pourcentages?
- Avez-vous permis à votre site d’être visible sur de petites résolutions?
- Avez-vous créé des titres personnalisés (dans les tags de titre) pour toutes vos pages?
Formulaires
- Etes-vous sure que vos utilisateurs ne pourront pas revenir sur un formulaire altéré après une erreur?
- Avez-vous créé une page d’erreur expressive et complète?
- Avez-vous ajouté uniquement un bouton de confirmation et pas de bouton de réinitialisation?
- Avez-vous averti l’utilisateur de la suite du formulaire après avoir clique sur le bouton de confirmation?
- Avez vous séparé les longs formulaires sur différentes pages?
- Avez-vous place une astérisque pour les champs obligatoires?
- Avez vous gardé le style standard des champs de saisie genre par le navigateur?
- Avez-vous créé un ordre logique dans la saisie des informations?
- Avez-vous utilisé un double champ de saisie pour les mots de passe seulement?
- Avez-vous automatiser la mise en forme de l’information (Ne la laisser pas au soin de l’utilisateur qui la saisie)?
- Etes-vous sure que les utilisateurs peuvent naviguer d’un champ à l’autre via la touche TAB ?
- Avez-vous rajouté des touches d’accés pour chacun des champs en utilisant l’attribut accessKey?
- Avez-vous expliqué à l’utilisateur pour quelle raison vous lui réclamez certaines informations?
- Avez-vous expliqué à l’utilisateur ce que vous alliez faire avec ces informations?
- Avez-vous utilise rune validation des informations saisies en utilisant AJAX ?
- Avez-vous utilisé le tag LABEL?
- Avez-vous placé le label au dessus du champ de saisie et non à coté?
- Avez-vous choisi le champ de saisie approprié pour chaque information?
- Avez-vous positionné automatiquement la saisie sur le premier champ en utilisant setfocus?
- Avez-vous distingué les champs actifs des champs non actifs en utilisant input:focus?
- Avez-vous utilise les entités FIELDSET et LEGEND quand c’est approprié?
- Avez-vous vérifié si vos formulaires fonctionnent également si le Javascript est désactivé?
Multimédia
- Etes-vous sure que l’information ou la navigation principale n’est pas faite en Flash?
- Etes-vous sure que les vidéos et les sons ne démarrent pas automatiquement?
- Etes-vous sure que les vidéos et les sons peuvent être arêtes à tout moment?
- Avez-vous informé l’utilisateur sur la taille et la durée des musiques et des vidéos?
Fonctionnalités supplémentaires
- Avez-vous réalisé une page d’erreur 404 personnalisée?
- Avez-vous réalisé un plan du site?
- Avez-vous mis en place un flux RSS? (Si vous avez un contenu mis à jour régulièrement)
- Avez-vous créé une version à haut contraste de votre site?
- Avez-vous choisi une URL idéale?
- Etes-vous sure qu’il n’y pas de frames sur votre site?
- Etes-vous sure qu’il n’y a pas de pop up sur votre site?
- Avez-vous créé un formulaire de contact au lieu d’un lien vers une adresse email?
C’est bien jolie de traduire des listes comme ça, tout de go, mais :
C’est extrêment emmerdant à lire (plusieurs billets auraient été mieux)
Tu n’apportes aucune valeur ajoutée à cette liste que la plupart des gens qui font du web auraient pu lire en anglais.
En conclusion, histoire d’avoir l’air constructif : si tu veux simplement attirer l’attenntion sur un article qui te semble pertinent, fais le à l’aide d’un billet court expliquant en quoi il te semble pertinent, et se terminant par un lien vers l’article en question. Ou alors ajoutes une véritable valeur à l’article original, ce qui te rendra intéressant. Sinon, ça ne fait qu’augmenter le bruit.
Je sais bien que mon temps pour produire de vraies reflexions en ce moment, n’est pas suffisant (n’ayant pas le net chez moi). Cependant, il me semblait important de traduire cette liste afin d’en faire profiter tout le monde y compris les gens que l’anglais rebute. En effet, en traduisant celle-ci, le but a été principalement de faire du bruit et de faire prendre conscience aux gens de l’importance de l’utilisabilité surtout durant cette période trés propice à la discussion sur ce sujet (cf Journée Mondiale de l’Utilisabilité).
Tiens, y en a un qui est d’humeur grincheuse
Mes 2 centimes :
- traduire un billet sans réflexion supplémentaire, bien sûr c’est moins bien qu’avec, mais c’est déjà ça. Le jour où tout le monde parlera couramment anglais, on en rediscutera, mais on en est encore un peu loin… donc merci pour eux.
- Pour la longueur du texte, c’est vrai que c’est un peu rebutant. Plusieurs billets, je ne sais pas, mais un billet avec un résumé et un lien “En savoir plus”, ça aurait été bien.
- Et en français, “consistent”, ça se dit “cohérent”, pas “consistant” (dans “Structure”, premier item)
Ceci dit, quite à être en désaccord avec mon camarade, je persiste à penser que ce billet à le mérite d’exister.
Moi je l’apprécie ta liste, je reviendrai la consurlter pour tester chaque point pour mes sites web… je lis bien l’anglais, mais quand c’est disponible en français
Très bien de l’avoir traduit. C’est un vrai boulot et ce n’est pas “du bruit”. Je ne sais pas si vous avez remarqué ça comme moi mais lorsqu’on lit dans une autre langue, on réfléchit moins bien.
Pour vous en rendre compte faites , en le prononçant en anglais (dans votre tête) : four plus ten, divided by two, multiplied by eleven . Puis faites la même chose en le mettant sous forme chiffrée le tout avec un chronomètre bien sûr
je ne sais pas, en ffonction du contexte, je pense en anglais, en français, ou parfois en Ruby. J’imagine que c’est la fréquence de la pratique qui fait ça.
Merci d’avoir traduit la page en français. Les différents points soulevés sont tous pertinents et ça aide à comprendre ce qui cloche dans un site.
Je suis tombée sur votre page en faisant des recherches à propos des problèmes de résolution d’écran. En fait, ce qui me turlupine, c’est que l’affichage sur mon ordi perso (écran plat 17 pouces, résolution réglée sur 1280 x 720 px) est optimal alors que sur les ordis du labo d’informatique, c’est plutôt la cata : tout s’y affiche en taille démesurée. Je cherchais donc un moyen d’optimiser l’affichage pour un max d’utilisateurs, quelle que soit la configuration pour laquelle ils optent.
Mais le hic, c’est que je suis débutante et que je ne parviens pas à un résultat probant. Pour info, je suis prof et j’ai créé un site pour une version en ligne d’un journal de lycée.