Back to basics : Les best practices de l’utilisabilité web

Il est quelquefois bon de réviser ses fondamentaux. Voici un article qui vous présente une check-list des bonnes pratiques des sites web,histoire de ne pas vous faire recaler sur les basiques de votre métier , en 6 chapitres : Navigation, typographie, design, aspects éditoriaux, ergonomie, aspects technologiques.

La majorité des points vous sembleront d’une rare évidence, mais ce qui va sans dire va aussi quelquefois en le disant !

Navigation

1. Un clic sur le logo ramène à la page d’accueil
2. Votre logo / titre du site est positionné en haut à gauche de la page
3. Les principales rubriques de navigation sont présents dans le footer, de même que certains contenus de pages plus profondes
4. Le menu de navigation est uniformément positionné d’une page à l’autre
5. Seuls les liens externes et les documents à télécharger (pdf, …) s’ouvrent dans une nouvelle fenêtre. Pour les liens internes, la page se recharge
6. La rubrique consultée apparaît en surbrillance dans la barre de navigation
7. Utilisez la navigation avec le fil d’Ariane pour le contenu hiérarchisé

Typographie

1. Pas de police de corps inférieur à 11px, réglable par une feuille de style
2. Les tailles de police sont souples (réglable par la feuille de style « em » ou %), les formats en pixels sont à proscrire)
3. Les polices sans-serif sont plus faciles à lire en petites tailles
4. Les Polices Serif sont plus faciles à lire en grandes tailles
5. Faites varier les tailles et couleurs de police pour mieux valoriser certains contenus
6. Ne modifiez pas les mises en formes d’une page à l’autre
7. Assurez-vous que vos liens / styles changent de couleur lors des événements « over » et « visited »
8. Soulignez toujours les liens, sauf dans certaines circonstances de navigation
9. Limitez au maximum l’écriture en majuscules

Design

1. Centrez votre interface sur l’écran, dans une dimension fixe (pas d’étirement)
2. Utilisez une largeur de page adaptée à votre public (taille d’écran et de polices variables selon les populations d’internautes)
3. Utilisez des espaces pour regrouper logiquement les articles connexes sur la page
4. Utilisez des hauteurs de la ligne de 1,4 ou 1.5em
5. Utilisez des longueurs de ligne de 45 à 60 caractères, assimilables à un livre de poche
6. Utilisez du texte foncé gris au lieu du texte noir sur un fond blanc, les contrastes forts fatiguent les yeux
7. Privilégiez les boutons pour valider vos formulaires
8. Evitez de surcharger les éléments standards (barres de défilement p. ex.)
9. Optimisez les images pour un téléchargement rapide

Aspects éditoriaux

1. Ajoutez des contenus périphériques en rapport avec le contenu principal
2. Evitez le ton « publicitaire » pour vos contenus corporate
3. Utilisez des citations pour mettre en évidence le contenu important dans un long article
4. « Dégraissez » vos contenus pour les rendre concis et exploitables. La lecture sur écran est moins aisée que sur papier
5. Découpez vos contenus longs sur plusieurs pages
6. Divisez le texte en sections et utilisez des intertitres pour rendre vos contenus « scannables »
7. Ajoutez systématiquement une fonction d’impression
8. Maintenez un rythme de publication constant (et si possible hebdomadaire)
9. Intitulez votre page d’accueil « Accueil »
10. Évitez le jargon dans la page, sauf si c’est absolument nécessaire
11. Incluez un plan du site en texte
12. Réduisez vos formulaires au strict minimum
13. Encouragez la conversation autour de votre contenu. Commentaires, forums, etc
14. Écrivez dans un style de pyramide inversée (style anglo-saxon), soit en privilégiant les conclusions face à la méthode
15. Bannissez les liens « cliquez ici » au profit d’hyperliens sur des portions de textes signifiantes

Ergonomie

1. La recherche des pages de résultats devrait réitérer l’expression recherchée
2. Restez à l’écoute de vos utilisateurs (bouton « feedback ») et appliquez leurs préconisations
3. Utilisez l’attribut title sur les liens pour ajouter plus de contexte
4. Créez une page 404 intelligente, c’est-à-dire qui guide les internautes dans leur recherche

Aspects technologiques

1. Utilisez des URLs courtes et faciles à lire
2. Testez dans tous les navigateurs et OS et différentes versions – IE, Firefox, Safari, Opera et Chrome
3. Initiez une relation dans le temps en incitant vos visiteurs à vous suivre (flux RSS, abonnements, fils twitter…)
4. Connectez les informations via des liens hypertexte, ne forcez pas les canaux de navigation