Le nouveau top 10 des erreurs de conception d'un site internet

Casser ou ralentir le bouton "prcdente" (Back)

Le bouton "prcdente" est un lment essentiel du web. C'est la fonction de navigation la plus utilise aprs les liens hypertextes. L'utilisateur sait qu'il peut essayer n'importe quoi sur le web et il pourra toujours revenir en arrire sur un territoire familier. Exemple : * Ouvrir une nouvelle fentre. * Rediriger automatiquement vers une autre page.

Ouvrir une nouvelle fentre du navigateur

Ouvrir une nouvelle fentre, c'est comme un vendeur au porte--porte qui dverserait un tas de salets sur votre tapis pour prouver l'efficacit de ses aspirateurs. Ne polluez pas l'cran avec plein de fentre, l'utilisateur est assez grand pour les ouvrir tout seul. En thorie, les concepteurs ouvrent une nouvelle fentre pour garder l'utilisateur sur son site. Mais en faisant cela, il casse le bouton "prcdente" et empch l'utilisateur de revenir en arrire. Souvent l'utilisateur n'a pas vu qu'une nouvelle fentre est ouverte, en particulier s'il a un petit cran ou toutes les fentres sont ouvertes en plein cran.

Utilisation non-standard des lments d'interface utilisateur

La constance est un des principes de bases de l'utilisabilit. Un lment a toujours le mme comportement. L'utilisateur donc des attentes et plus il contrle le systme, plus il l'apprcie. Et plus le systme doit les attentes de l'utilisateur, plus celui-ci, se sent dstabilis. Une raison de plus pour ne pas ouvrir une nouvelle fentre, car le comportement standard que l'utilisateur attend quand il clique sur un lien c'est de voir la page s'afficher dans la mme fentre. Actuellement, la pire violation de ces invariants sur le web est la mauvaise utilisation d'lment d'interface utilisateur comme les boutons radio et les cases cocher. Le comportement standard de ces lments est dfini dans les guidelines des interfaces utilisateurs des systmes (Windows, Mac, Java). Ils ont identiques pour les diffrents guidelines. Par exemple, la rgle, pour un bouton radio, est qu'il permet de slectionner au moin un lment et un seul dans un groupe. Mais le choix n'est valid que quand l'utilisateur clique sur le bouton OK. Malheureusement, on voit des sites ou les boutons radio sont utiliss comme des boutons et o le rsultat est affich ds que l'utilisateur cliquer sur un des boutons.

Absence de biographies
Les utilisateurs cherchent connatre la personne qui est derrire l'information prsente sur le web. La biographie et une photo de l'auteur peuvent aider rendre le web moins impersonnel et augment la confiance dans le contenu.

Absence d'archives
Une veille information est souvent une bonne information et peut tre utile au lecteur. Souvent les nouvelles informations ont plus d'importance, mais il y a toujours une certaine valeur dans celles plus anciennes. De plus a ne cote rien de faire des archives online. Pour 10% de travail en plus, on augmente l'utilit de 50%.

Changer l'adresse URL des pages

A chaque fois que vous changez l'adresse d'une page vous cassez les liens d'autres sites qui pointent vers le vtre. Pourquoi embter les gens qui vous envoient gentiment des visiteurs ?

Les gros titres qui n'ont aucun sens

Les gros titres doivent tre crits diffremment pour le web que pour les supports traditionnels. Ce sont des lments de l'interface qui doivent aider l'utilisateur naviguer. Les titres sont souvent sortis de leur contexte pour tre utilis dans des tables des matires ou dans les rsultats des moteurs de recherche. Dans ce cas, le texte doit respecter deux buts : * Dire ce qu'il y a l'autre bout sans jouer aux devinettes. * Protger l'utilisateur contre les liens qui l'amnent sur une page sans intrt pour lui. (Cela marche une fois ou deux, mais long terme le site perd sa crdibilit)

Utiliser le dernier gadget Internet

On peut tre tent d'utiliser les derniers gadgets la mode pour dynamiser son site (Push, communaut, chat, email gratuit, enchre,). Mais cela va prendre beaucoup de temps et d'argent pour un bnfice qui sera sans doute inexistant. C'est autant de moyen perdu pour amliorer la qualit des services de bases. Et de toutes manires, il y aura le mois prochain un nouveau gadget la mode.

Temps de rponse des serveurs trop long

Ce n'est pas nouveau, c'tait dj dans le premier top 10 mais c'est de pire en pire. De plus en plus de sites utilisent des images et surtout des images trop grosses, des applets ou du Dynamic HTML. Et donc, on a toujours des temps de tlchargement trop long. Mais le temps de tlchargement n'est plus le seul en cause. Beaucoup de sites utilisent des pages web cres dynamiquement (comme ce site). Rsultat, il faut aussi prendre en compte les performances des serveurs. L'utilisateur ne sait pas pourquoi le temps de rponse est long. Mais un temps de rponses long est, pour l'utilisateur, souvent synonyme de mauvaise qualit. Donc l'utilisateur va aller voir ailleurs.

N'importe quoi qui ressemble de la publicit

L'attention slective est trs efficace et les utilisateurs apprennent trs vite ignorer les pubs tout en trouvant leurs chemins pour atteindre leurs buts. C'est pourquoi le ratio de clique sur les pubs diminue de moiti chaque anne. Les utilisateurs ignorent tous ce qui ressemble une pub. On trouve trois stratgies pour cela. * Aveugle aux bannires : l'utilisateur ne fixe jamais ces yeux sur ce qui ressemble une bannire aussi bien par la forme que par la position. * Esquive les animations : l'utilisateur ignore les zones qui gigotent ou flashent et toutes les autres animations agressives. * Elimination des fentres : l'utilisateur ferme les fentres "pop-up" qui surgissent avant mme que le contenu soit tlcharg.

Le top 10 des erreurs de conception d'un site web

Utiliser des cadres (frame)

L'utilisation de cadres pose de nombreux problmes l'utilisateur. Dans la plus part des cas, si on met la page dans les signets, quand on y retourne, on tombe sur le frameset et non sur la page. De mme pour l'impression, on risque d'imprimer le mauvais cadre. Il faut donc mieux utiliser des tableaux.

Utiliser les technologies derniers cris

N'essayez pas d'utiliser les dernires technologies, vous attirez sans doute quelques personnes, mais l'essentiel des utilisateurs n'arrivera pas s'en servir. Si leurs systmes se plantent cause des technologies que vous utilisez, ils ne reviendront plus sur votre site. Il faut mieux attendre que la technologie soit devenue un standard.

Texte dfilant, dessin et animation constante

Les animations constantes sur les pages attirent l'attention et ne permettent pas l'utilisateur de se concentrer sur le contenu de la page. Laisser l'utilisateur lire en paix.

Les URLs complexes

L'utilisateur essaye souvent de dcoder la structure du site l'aide l'URL. l'URL doit donc comprendre un texte comprhensible qui reflte la nature de l'information. Mais pour minimiser les erreurs il conseill d'crire en minuscule, sans caractres spciaux (ex : ~).

Les pages orphelines

Il faut s'assurer que toutes les pages ont un liens avec la page d'accueil de manire se que l'utilisateur ne puisse pas se retrouver dans un cul de sac. De mme, la page d'accueil doit permettre d'accder facilement toutes les pages.

Les pages trop grandes

Les pages trop larges peuvent poser problmes sur des crans de petites tailles. Il ne faut pas non plus abuser des pages trop longues, car certains utilisateurs ne prennent pas la peine de faire drouler les pages.

Pas d'aide la navigation

L'utilisateur ne connat pas votre site comme vous mme. Il a peut tre des difficults pour trouver l'information qu'il cherche. Il faut donc communiquer de manire explicite la structure du site l'utilisateur.

Utiliser des couleurs de liens non standard

Les liens doivent tre en bleue, ceux dja vu en violet ou en rouge. Ces couleurs sont standards et donc aide l'utilisateur dans sa navigation.

Information trop ancienne

C'est pas tout de construire un site, il faut aussi l'entretenir. La plus part des gens passent plus de temps crer de nouvelles pages qu'a maintenir les pages existantes.

Temps de tlchargement trop long

le temps de tlchargement ne doit pas dpasser 10 15 secondes, donc les pages ne doivent pas faire plus de 30 ko et au pire 60 ko.

L'utilisation des couleurs en ergonomie

Quelques rgles simples

Utiliser les couleurs indpendantes pour les lments HTML (les arrires plans, les textes, les
liens).

Les couleurs peuvent permettre de crer des groupements d'objets ou de distinguer des
lments.

Vrifier la lisibilit des textes avec les diffrentes couleurs noir, blanc et bleu (ou couleur des

liens) par rapport l'arrire plan. Dans l'exemple, les trois textes apparaissent lisiblement sur le fond. Par contre dans le contre exemple, le texte en noir et en bleu est difficilement lisible.

Exemple En noir En blanc

Un lien

Contre-exemple En noir En blanc

Un lien

Ne pas utiliser plus de trois couleurs par page. Les couleurs aux extrmits du spectre (le rouge et le bleu) sont myopisantes ou
lecture.

hypermtropisantes. Elles peuvent donc tre difficiles lire pour certaines personnes.

Ne pas utiliser trop de couleurs satures. Elles "agressent" l'utilisateur et donc rendent difficile la

Terminologie des couleurs

Les termes les plus courants pour dcrire les couleurs Spectre : toutes les couleurs possibles d'un espaces chromatique tel que RVB ou CMJN. Teinte : un point spcifique du spectre.

Valeur : Dcrit la plage de couleur, du pale au vif. Dans l'exemple une teinte rouge avec 2 valeurs, vif et ple.

Saturation : Dfinit l'intensit d'une couleur.

Teinte : couleur obtenue par ajout de blanc

Ton : couleur obtenue par ajout de noir

Choix d'une palette de couleurs

Relation entre les couleurs

Pour choisir une palette de couleur, il faut avoir quelque notions concernant les relations entre les couleurs. Vous trouverez ci-dessous les principales relations entre les couleurs.

Couleur primaire

Couleur secondaire

Couleurs tertiaires

Couleur complmentaire

Couleur complmentaire intermdiaire

Couleurs voisines

Et comment choisir ?
Pour choisir une palette, il faut d'une part s'appuyer sur ces relations et d'autres part faire varier la saturation, la teinte et le ton. Pour faire cela on peut utiliser par exemple un Plug-in comme Harmony de Hot Door ou on peut consulter l'excellent site Chromoweb. Un peu de bon gout et de bon sens font le reste... (ou presque).

Bonne utilisation des polices de caractres en ergonomie Recommandations

On considre que la taille des polices affiches sur cran est identique la taille de celles qui sont imprimes sur papier.

Gnralits
1. Attribuer chaque fonte un seul usage pertinent et cohrent. 2. Utiliser les fontes fournies en standard par le systme.

Choix d'une police de caractres

Utiliser des polices sans srif pour les titres, les libells et les fontes utilises par le systme. Utiliser des polices avec srif pour les textes. Utiliser des fontes de caractres dont la largeur se situe entre 50% et 100% de la hauteur. Utiliser des polices sans srif et non grasses pour les fontes de petites tailles (infrieure ou gale 10 points). 5. Utiliser les polices bien formes plutt que les polices stylises ou dcoratives. 1. 2. 3. 4.

Utilisation des variations d'une police de caractres

1. Utiliser une taille approprie : l'angle de vue doit tre situ au minimum entre 016'et 022' soit 3 et 4 millimtres 60 cm pour une lettre capitale. D'o une taille 12 pour travail normal sur cran. En considrant que les polices affiches l'cran ont une taille identique celle imprime sur papier. Ecrire en minuscule (avec la premire lettre en majuscule en franais) tous les textes, mme les titres, les libells ou les titres de fentres. Ne pas utiliser l'italique pour l'affichage sur cran. Pour contraster, il faut, de prfrence, mettre la police de caractres en gras. L'espace entre les lettres doit tre d'au moins un pixel.

2. 3. 4. 5.

La mise en forme
1. Pour un affichage sur cran, les lignes doivent faire entre 60 et 80 caractres. 2. Pour un document, ne pas utiliser plus de 2 polices de caractres, 3 tailles et 2 variations. Au total, il doit y avoir maximum 8 fontes diffrentes et de prfrence 6. 3. Aligner gauche le texte plutt que de le justifier. 4. Utiliser un contraste positif : crire en noir sur fond blanc ou gris clair. 5. L'espace entre les lignes doit tre proportionnel la largeur des colonnes. Il doit tre suprieur ou gal deux pixels. 6. L'espace entre les mots doit tre infrieur celui entre les lignes.

7. Structurer les textes de manire donner un rythme la lecture l'aide de paragraphes, de lignes blanches, de retraits. 8. Hirarchiser l'information l'aide des polices et de leurs variations.