Ergonomie de site web : les 4 points essentiels

Pourquoi un visiteur décide de visiter votre site plutôt qu’un autre ? Qu’est-ce qui lui donne envie d’aller plus loin que votre page d’accueil ? Comment se fait-il que certains sites internet soit plus agréables à parcourir plutôt que d’autres ?

La première réponse à ces questions est certainement parce que votre site web est conçu avec une bonne ergonomie. C’est à dire qu’il comprend différents éléments qui concourent à améliorer l’efficacité et le confort d’utilisation de votre site web.

Prenons un exemple : imaginons que votre bureau de travail soit mal agencé, mal organisé, bordélique. Cela vous provoque du stress, des colères répétées, un sentiment de frustation et d’impatience qui va se répercuter sur l’efficacité de votre travail : vous allez devoir passer plus de temps à trouver un document plutôt que travailler dessus … Dans ce cas vous avez 2 possibilités : soit vous fuyez, soit vous ré-aménagez, rangez, organisez votre bureau pour qu’il soit plus fonctionnel et réponde mieux à vos attentes et vos besoins.

Pour un site internet c’est la même chose, le webdesigner qui conçoit son site internet devra travailler les éléments afin de le rendre suffisamment ergonome pour donner envie à ces visiteurs d’y rester et même d’y revenir.

Une bonne ergonomie web n’est jamais quelque chose qui est là par magie. Elle se travaille, se construit en fonction de la cible, de l’utilisation qu’on en a et des réflexes habituels et connus des internautes.

Voici les critères fondamentaux pour une bonne ergonomie de votre site internet :

1-la lisibilité

La lisibilité contribue fortement à améliorer l’ergonomie de votre site web, elle doit être une priorité car lire et trouver des informations sur internet est toujours plus pénible que sur papier. Le « lecteur » n’est pas dans un « confort de lecture », il scanne, survole, explore, lit les grandes lignes et rarement la totalité des paragraphes. Il passe en général dans le meilleur des cas 2 min sur le site et navigue vers d’autres horizons…

Plus votre site sera simple, aéré et peu chargé, plus il sera facile pour l’utilisateur de s’y retrouver. L’erreur du débutant est toujours de vouloir mettre tous ses contenus sur la page d’accueil du site ! En faisant cela vous risquez de perdre l’intérêt de vos lecteurs en leur demandant de faire le travail à votre place.
Donc triez, choisissez, ordonnez, espacez, structurez pour une meilleure vue d’ensemble de ce qui a d’essentiel dans vos contenus. Plus vos visiteurs apprécieront la clarté et l’organisation de votre interface, plus ils passeront du temps sur votre site.

Voici une petite liste des éléments pouvant améliorer la lisibilité d’un site web :

– la couleur dans votre site web
au maximum 2,3 couleurs dominantes et au bon d’endroit ! Trop de couleurs mettront de la confusion surtout si elles ne sont pas employée pour favoriser le confort de lecture et aider l’internaute a naviguer sur le site. Les couleurs peuvent donner des points de repères et favoriser la navigation. Profitez de leur visibilité pour les utiliser dans les zones chaudes, en background elles mettront en évidence certaines zones de contenu. Vous pouvez l’utiliser aussi pour mettre en exergue la barre de navigation de votre site web ou les liens cliquables ou actifs. Conserver toujours une certaine logique dans leur utilisation par exemple lien en rouge pour tout ce qui est cliquable sur la page, ou pour regrouper toutes les informations d’une même rubrique …
ergonomie-site-web
Le site http://www.journaldunet.com/ emploie très favorablement la couleur. Le site est très épuré, en blanc et noir avec une seule couleur dominante flashy orange.
Le orange facilite l’ergonomie du site : il nous invite ici à circuler dans la page, il nous indique dans quelle rubrique ou onglet nous nous trouvons et mais en valeur les boutons cliquables.
ergonomie-site-web-cours
En revanche, la couleur rouge sur le site http://www.croix-rouge.fr/ procure l’effet inverse de ce que l’on peut attendre de son emploi.
Au lieu d’apporter du dynamisme, celui-ci enferme le site dans un sentiment d’immobilisme et une impression d’étouffement. De plus le manque d’effet au roll sur les images et les onglets accentue d’autant plus le manque de vivacité qui émane du site.
– la hiérarchisation de vos contenus et vos paragraphes
– la structure des paragraphes par des titres et des sous-titres, des espaces
– la gestion de l’espacement dans la page mais aussi des textes, des mots et des lignes
ergonomie-site-web-3
Copie d’ecran du site ergonomie-web.studiovitamine.com/
– la taille et la typographie choisie pour les titres et les textes ( qui doivent être de préférence courts et simples)
Eviter d’utiliser plus de trois polices de caractères différentes dans une même page. Un trop grand nombre de polices nuit à la lisibilité d’un texte et donc à la compréhension de la page.
Préfèrez des polices très simples pour les paragraphes comme arial ou helvetica. Utiliser les polices particulières et moins lisibles à petites doses, juste pour donner du caractère.
Des règles typographiques doivent être définies et utilisées de manière cohérente dans le site.
– l’homogénéisation de l’ensemble
– le contraste entre le texte et l’arrière-plan web

ergonomie-site-web
Sur le site http://www.maccosmetics.fr il y a plusieurs problèmes de visibilité à cause du choix des couleurs des textes et des fonds (gris sur gris) ainsi que la taille des typographies et l’espace entre les lettres. La lecture du site est pénible et fatigue très vite.

2-la facilité de navigation

Lorsque l’internaute visite un site web, il est toujours pressé comme nous tous, et désire accéder à son information le plus rapidement possible.

La règle des 3 clics stipule que le visiteur doit parvenir à sa recherche en moins de 3 clics !
ergonomie-site-web-2
Le site http://www.amazon.fr/ (comme ebay) est parfaitement conçu pour une navigation simple et rapide.

3-le repérage

A tout moment, le visiteur doit pouvoir être en mesure de se repérer dans le site. Il n’y a rien de plus agaçant que de se retrouver perdu au milieu d’un site sans pouvoir retrouver ses petits cailloux blancs….

Le logo et la navigation présents sur toutes les pages, ainsi qu’une charte graphique uniforme aide l’usager à se repérer.

Le fil d’ariane, véritable fil conducteur, se place en haut de chaque page, à la fin du header juste avant le titre balisé h1 dans le corps de votre page web … ce sont les petits cailloux blancs qui vont aider l’internaute à revenir sur ses pas. Vous en avez certainement déjà vu il ressemble à ceci :

ergonomie-web
fil d’ariane du site la redoute.fr
Dans cet exemple je visualise le fil d’ariane qui m’indique mon chemin de navigation de l’accueil du site à la « Robe courte », qui se trouve dans la rubrique principale « Femme » et la sous-rubrique « robe ». Je peux à tout moment revenir en arrière, en cliquant dans les rubriques de mon fil d’ariane.
ergonomie-web
Dans l’exemple ci-dessus, une copie d’écran du site Zalando, je peux visualiser que je suis bien dans la rubrique Femme, fleche grise dessous, et dans la sous-rubrique Chaussures, à présent sous-lignée.

4-la rapidité

Le temps de chargement des pages doit être le plus optimal possible. Là encore, vos visiteurs n’auront pas la patience d’attendre même si quelque chose de magnifique se passe derrière…

Vous penserez donc à optimiser vos magnifiques images pour alléger au maximum leur poids sans en perdre la qualité, si vous souhaitez qu’elles soient vues !


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/creer-arborescence-site-web » size= »medium » arrow= »right »]creer une arborescence web[/button]