Conception site web : Les 7 erreurs à ne pas commettre

Conception site web : Les 7 erreurs à ne pas commettre

Cous du mardi 13 novembre 2012
Lors de notre précèdent cours, nous avons pu nous rendre compte, au travers de l’analyse de quelques sites web, quelques erreurs à ne pas commettre lors de la conception de site internet.
Je reprends donc brièvement ces points en ajoutant quelques autres contre-exemples.


1- Un design web trop pauvre ou au contraire chamarré (surchargé de couleurs, d’effets photoshop, d’ornements…)

Un design de site trop pauvre, avec des images peu ou pas travaillées rend peu crédible l’image d’une entreprise et génère la méfiance des visiteurs.

A gauche, le site apli-nationale.org et à droite, le site grandlait.fr, qui d’apparence nous semble plus convainquant.

A gauche, la pauvreté du design du site empêche le visiteur de s’y intéresser. Il dénote un amateurisme et rend peu crédible la fédération. La multiplicité des couleurs et des effets sur les textes ( couleurs, typo avec contour, ombre portée…) gène la lisibilité des informations. Les nombreux effets rajoutés : les contours doublés autour de l’image , transparence inutile … semblent là comme pour palier le manque d’impact visuel et agressent le regard. Le site internet transmet l’inverse de ce qu’il devrait : il ne donne pas confiance et incite le visiteur à quitter la page rapidement. Il manque ici, c’est évident, un semblant de charte graphique, qui nous laisserait penser que la couleur, par exemple, est, ce qu’elle devrait être, un attribut symbolique, ergonomique ou structurelle.

Les couleurs utilisées à bon escient peuvent, soit attirer l’oeil du visiteur vers des contenus importants de la page, soit servir de repère de navigation.

Dans les exemples ci-dessous, la couleur permet de se repérer très facilement dans la navigation.

Des sites trop chargés, avec trop de contenus empêchent la bonne lecture des informations. Préférez donc un site aéré, claire et lisible et pas trop d’informations par page.
Certains font l’erreur de vouloir mettre tous leurs contenus sur la page d’accueil pour favoriser l’étendue de leur proposition. Pourquoi alors concevoir un site web, si nous n’avons pas besoin de circuler à l’intérieur ?

2- Une navigation complexe avec trop de profondeur

Sur www.maccosmetics.fr, les sous-niveaux s’affichent de deux manières différentes, cela engendre une difficulté de compréhension des processus de navigation. Celle-ci manque de clarté et de simplicité.
Pour une navigation, choisissez toujours le même affichage et les mêmes effets pour les rubriques inactives, au roll et au clic.
De plus la profondeur de la navigation est beaucoup trop importante donc le visiteur reste trop longtemps dans le tunnel de navigation (4 clics avant d’arriver dans la fiche produit). Le visiteur peut facilement désesperer de ne pouvoir enfin aboutir vers la page qui l’intérrèsse.
Remarquez toutefois que les bandes noires à la verticale, la typographie grise et assez petite sur un arrière-plan fonçé accentue d’autant plus le manque de simplicité et de lisibilité de la navigation. La même chose sur fond blanc avec un menu à l’horizontal n’aurait sans doute pas était aussi frappant.
Ici le design accentue la médiocrité de la construction de l’arborescence.

Préférez donc une navigation claire et simple avec un fort contraste entre le fond et la typographie et peu de niveaux de profondeur dans l’arborescence.

3- Un header qui occupe la moitié de la page

Un header trop large et on perd l’espace du contenu.
Plus le header est étroit, plus vous gagnerez de la place pour le contenu et les diverses mises en avant de vos pages. ( Pensez aussi que votre site est consultable sur tablette, et donc sur un écran réduit !)

Si votre site est sans scroll, le format pour qu’il s’intègre parfaitement dans les résolution les plus basse est de 960 px par 560 px

4- Un temps de chargement décourageant

Le temps de chargement trop long et le visiteur s’éclipse…

On l’a déjà dit, mais c’est un point essentiel à prendre en compte. Si votre page est trop longue à charger vous risquez de perdre vos visiteurs et Google avec ! Car le poids de la page est aussi un élément à prendre en compte pour le référencement d’un site web. Plus le site est léger, plus il s’envolera dans les hauts rangs de Google !
Donc penser à bien compresser vos images avec une qualité convenable pour un poids minimum. Pour info votre page accueil d’un site web ne doit jamais dépasser plus de … ko !

5- Un texte difficilement lisible

Cela va de soit, mais dans l’exemple ci-dessous, le menu passe en transparence par dessus le contenu de la page et rend le texte illisible.
On peut se demander comment le designer n’a pas pu se rendre compte de l’erreur de conception de son site lors du maquettage de ses pages.

Préfèrez un net contraste entre l’arrière-plan et le texte pour favoriser le confort de lecture.

J’en profite pour préciser quelques-unes des règles typographiques incontournables :

– Le Choix de la typo
Le choix de la typographie influence l’image donnée par votre site.
Il est important de bien la choisir. Dans tous les cas, privilégier la lisibilité plutôt que l’originalité.

– Le nombre de typos
Pas plus de 2 ou 3 typos différentes pour votre site. Un trop grand nombre de polices de caractère dégrade l’homogénéité et la cohérence globale de votre site.

– Choix de la police
Utiliser les polices livrées avec les systèmes d’exploitation de base – Times, Helvetica, Arial, Verdana, Georgia… Ainsi vous pouvez être sûr que ses polices seront disponibles sur l’ordinateur de vos internautes.

– Longueur des paragraphes
Essayez de ne pas faire de textes trop longs, synthétiser au maximum vos informations. Mettez les plus importantes en début de paragraphe, et reléguer vers la fin, les contenu moins importants. Il est rare que l’on aille lire la totalité des articles sur l’écran.

– Hiérarchie vos contenus

Généralement pour chaque page, on devrait retrouver la même construction avec les même choix de typos, de tailles …. Pour chaque titre, la taille sera proportionnelle à son niveau (exemple : un titre de niveau 3 ne devra pas être écrit plus gros qu’un titre de niveau 1).
Titre (h1) (police X, taille X)
Sous-titre (h2) typo plus petite (police XX, taille XX…)
Sous-titres (h3, h4…) typo plus petite
Paragraphe

6- Le manque de repére dans la navigation

Dans ce site, lorsqu’on clique dans les sous-niveaux du menu principale, on accède à une autre page sans aucun repère de navigation pour les sous-rubriques. (pas de fil d’arianne et les sous-rubriques disparaissent)
Résultats : je ne me repére plus et je ne peux plus accéder aux niveaux précèdents.

7- Une navigation éparse et mouvante selon les pages

Voici un aperçu de 3 pages web du site lenotre.com.

La homepage nous invite à naviguer par une mosaîque d’images. Lorsque l’on entre dans les pages internes du site, on navigue parfois par un menu en bas du site, parfois dans le haut de la page mais aussi sur la droite. Résultat : on se perd totalement dans la navigation. En favorisant le design et l’originalité de la navigation, les concepteurs du site web en ont perdu le sens fonctionnel et ergonomique.

Attention donc, la recherche d’innovation et d’originalité ne doit pas prendre le dessus sur le confort de naviguer et de se repérer dans un site.


arborescence internet

Cet article vous a plu ?

N’hésitez pas à partager notre page facebook pour suivre nos nouveaux posts et astuces…

[button url= »http://www.lecil.fr/fr/category/webdesign/ » size= »medium » arrow= »left »]retour aux articles web design[/button] [button url= »http://www.lecil.fr/fr/webdesign/ergonomie-web/ » size= »medium » arrow= »right »]ergonomie site web[/button]