L'ergonomie d'un site Internet, les règles de base

Les dossiers

>> Contact
>> C moi
>> Plan du site

<< Retour Accueil

L'ergonomie d'un site Internet

Les clés de la réussite : accessibilité - design - navigation - contenus rédactionnels - fonctionnalités

Les autres dossiers

> Le référencement
> Le développement commercial
> La confiance

Dossier rédigé par Cyril Tardieu - juin 2002 - dernière mise-à-jour : le 04/12/2002

Préambule

Prenons la définition du Larousse : "le but de cette science est de tenter d'adapter le travail à l'homme en analysant notamment les différentes étapes du travail, leur perception par celui qui exécute, la transmission de l'information et, de façon parallèle, l'apprentissage de l'homme qui doit s'adapter aux contraintes technologiques. Elle vise à améliorer les conditions de travail et à accroître la productivité".

L'ergonomie d'un site Internet est donc sa capacité à rendre facile la recherche et l'accès à l'information, à transmettre un message, à remplir ses objectifs, à répondre aux attentes et besoins des internautes... et ce de manière pratique et agréable.

L'ergonomie n'est pas simplement une technique comme on peut l'entendre ici ou là, c'est une manière de voir les choses, un état d'esprit, un art qu'on cultive et qui s'exprime par un bien être collectif. Comme un designer qui va "croquer" la voiture de demain, comme un chanteur qui va composer les accords de son prochain tube, l'ergonome construit un environnement agréable et visionnaire dans l'objectif de servir et de plaire à la majorité.

L'ergonomie repose évidemment sur des techniques et un savoir-faire qui s'obtiennent avec l'expérience mais nécessite également un don et une façon de voir les choses qui est inné : ressentir ce que les autres ressentent.

Un des pionniers en matière de web ergonomie ou de "web usability" a été Jackob Nielsen qui a posé les règles de bases de l'interface html. Cependant, sa vision est un peu trop restrictive et simpliste dans la mesure où ses recommandations laissent peu de place à l'innovation, à la création et au contexte (en résumant grossièrement : selon lui, tous les sites devraient ressembler à Yahoo).

L'ergonomie c'est la recherche d'un idéal : trouver le juste compromis entre utilité, beauté, fonctionnalité et simplicité. Ce n'est pas parce que Yahoo est devenu une référence incontournable pour beaucoup (un des sites les plus connus et les plus visités au monde) qu'il faut en faire absolument le modèle unique. La télévision a par exemple évolué tant sur la forme que sur le fond : TV couleur, 16/9ème, écrans plats, numérique, télétexte, TV interactive, Real-TV, montage audio et vidéo, contenus des programmes et des émissions... le tout étant de vivre avec son temps, de concevoir des produits et services qui plaisent à un maximum de personnes et de construire les succès de demain.

Selon moi, l'ergonomie est un savant dosage entre ces 5 composantes fondamentales :

toutes devant contribuer à faciliter et satisfaire l'internaute lors de son utilisation de l'interface web.

Ce sont les efforts conjugués portés à ces 5 composantes qui vont être les garants d'une usabilité optimale du site. Dans un secteur concurrentiel, le site disposant de la meilleure usabilité sera le plus à même à devenir le leader et la référence en ligne du secteur.

Une des principales composantes de l'ergonomie est l'accessibilité : le site doit être facilement et rapidement "pris en main" par un maximum de personnes (et pas réservé à une élite d'internautes "super-utilisateurs") et depuis n'importe quel ordinateur connecté.

Pour qu'un site soit facilement accessible, il faut que son url soit simple, intuitive et donc facilement mémorisable. En effet, de nombreux internautes accèdent à un site en tapant l'url directement dans le navigateur, s'ils ne trouvent pas ils tentent alors une recherche dans un outil de recherche.

Si l'on prend l'exemple de la sociéte DUPOND, les internautes taperons naturellement www.dupond.com ou www.dupond.fr. Pour la majorité des internautes, la différence entre le ".fr" et le ".com" n'est pas évidente, il convient donc de déposer les 2 noms de domaine (si c'est possible).

Remarque : pour un référencement optimal, il peut être également intéressant de déposer d'autres url de type : www.dupond-textile.com, l'entreprise textile aura ainsi plus de chance d'être en bonne position sur le mot clé "textile". Dans ce cas, l'entreprise devra cependant continuer de communiquer sur www.dupond.com.

Internet est le média de l'instantané, par conséquent le temps de chargement des pages joue un rôle très important dans l'appréciation d'un site (d'autant plus que la communication est payante pour la majorité des internautes).

Si le site a une vocation Grand-Public et a pour objectif de créer du trafic et de toucher un maximum d'internautes, il doit être adapté à une connexion classique par modem 56 K. Le temps de chargement d'une page d'accueil ne doit ainsi pas excéder 5 à 10 secondes.

Combien de fois je suis tombé sur le site d'une grande marque réalisé entièrement en Flash... le site était certainement très sympas mais je ne le sais pas, j'ai rapidement changé de site : attendre plusieurs dizaines de secondes le chargement d'une page, c'est insupportable ! Quel intérêt de faire un site en Flash alors que l'on sait pertinemment qu'une grande majorité d'internautes ne pourra pas y naviguer dans de bonnes conditions.

D'une manière générale, beaucoup de pages pourraient être optimisées : images non optimisées, éléments graphiques trop nombreux, code html non "nétoyé", serveur non dimensionné...

L'emploi de technologies spécifiques de programmation, d'animation, de diffusion... nécessite une certaine prudence. En effet, bien que le plug-in Flash soit désormais présent sur la plupart des ordinateurs connectés, de nombreuses technologies ne sont pas encore devenues des standards. De même certaines ne fonctionne que sous un environnement spécifique. Il exite ainsi de nombreuses incompatibilité (entretenues ?) entre Internet Explorer et Netscape ou entre Windows et Mac OS...

J'ai réalisé dernièrement l'audit du site Internet d'une grande société industrielle française qui proposait un site très design et tendance (réalisé par une agence de com parisienne) et qui comportait un menu dynamique (le menu se déplie au passage de la souris). Au-delà du fait qu'un tel menu nuit à la visibilité des rubriques et contenus du site, il s'avérait que le menu ne fonctionnait pas sous Mac ! L'entreprise se privait donc des 5% d'internautes français possédant un Mac (et notamment beaucoup de journalistes, d'architectes... identifiés comme des cibles stratégiques) qui ne pouvaient pas entrer à l'intérieur du site.

Pour obtenir des statistiques sur les OS, les résoltutions d'écran, les navigateurs web... je vous invite à visiter www.thecounter.com (cf. stats).

Il est donc fondamental de bien concevoir l'interface de manière à ce qu'elle soit accessible par tous (même aux novices) et depuis n'importe qu'elle machine connectée.

Lors de la conception d'une interface web, il est important de se conformer aux usages d'Internet.En effet, comme dans toute interface, les utilisateurs sont plus ou moins conditionnés par leurs expériences passées et leur environnement.

Il est ainsi d'usage qu'un lien html dans un corps de texte soit symbolisé par le soulignement du mot. De même, il est de convenance de placer les éléments de navigation plutôt en haut et sur la gauche de la page, et le logo de l'entreprise en haut à gauche.

Les internautes ont tellement l'habitude de se repérer dans ce type d'interface que c'est devenu un usage (tout comme le fait de mettre la date en haut à droite d'une lettre). De plus, cette disposition suit le sens naturel et intuitif du cheminement visuel sur un écran : les yeux explorent l'écran en effectuant un "Z" s'arrêtant dans la zone centrale de l'écran.

Le design d'un site Internet doit servir les objectifs marketing et la stratégie de communication globale de l'entreprise. Dans ce sens, la charte graphique du site doit refleter et communiquer une image et une identité visuelle adaptée à sa stratégie. Mise à part les start-ups, les internautes ont déjà une expérience avec l'entreprise avant de visiter son site. Ainsi, l'internaute s'attend à retrouver tout ou partie de ce qu'il ce qu'il connait déjà d'une entreprise, d'une marque ou d'une enseigne (logo, slogan, univers...).

Un design moderne et futuriste peu servir l'entreprise à modifier son image et à la percevoir comme inovante et tournée vers l'avenir. A l'inverse, un grande entreprise disposant d'un site pauvre en graphisme, pourra véhiculer une image plus négative (ex : www.sollac.fr, site qui ressemble plus à un site "perso" qu'à un site professionnel).

Pour une utilisation facile et un apprentissage rapide de la navigation au sein d'un site, la charte graphique doit être homogène sur toutes les pages du site. Dès la page d'accueil, l'internaute identifie les éléments de navigation et les zones de contenus, si ceux-ci changent de place et d'aspect sur chaque page ou chaque rubrique, l'internaute sera perturbé et quittera rapidement le site.

Comme pour tout support de communication, les éléments graphiques doivent être au service de l'information. L'utilisation de pictos, images, animations Flash... doit servir à l'illustration des propos (apporte de la valeur ajoutée) et à l'habillage de l'interface. Il faut également veiller à ce que les pages ne soient pas trop surchargées en éléments graphiques de manière à ce que les yeux de l'internautes ne soient pas trop sollicités mais guidés vers les zones et informations stratégiques.

De nombreuses entreprises possèdent une page d'accueil ou un site entièrement en Flash. Mais dans la plupart des cas, l'utilisation du Flash va à l'encontre des besoins et attentes de leurs cibles. En effet, alors que les prospects d'une agence de communication ou d'un studio graphique seront certainement touchés par des animations Flash bien réalisées, la majeure partie des internautes ne fait guère attention et n'aprécie pas les animations Flash inutiles (notamment à cause de la nature de leur connexion).

La page d'accueil doit être traitée avec une attention toute particulière car elle est une véritable vitrine du site Internet. De la même manière que lorsque vous faîtes les magasins, les vitrines vous permettent de vous faire une idée de ce que vous allez trouver dans le magasin.

- un accès à une page ou rubrique de présentation de la société (ex : "Qui sommes-nous ?")

Dans le cadre de sites déclinés en plusieurs langues, privilégiez un menu déroulant ou drapeaux en haut de page (avec une langue par défaut) plutôt qu'une page intermédiaire réservée uniquement au choix de la langue.

Pour être efficace, un site doit proposer une navigation intuitive et cohérente. Ainsi, les internautes doivent faire un minimum d'efforts pour se repérer dans le site et trouver les informations qu'ils recherchent.

Les éléments de navigation du site Internet doivent respecter les logiques du parcours visuel. Dès l'affichage de la page d'accueil, les yeux font effectuer des mouvements de saccades qui vont former d'une manière générale un "Z" partant du haut à gauche et se terminant vers le bas droit de l'écran. Le mouvement des yeux va naturellement être fonction de l'attractivité visuelle des éléments de la page. D'une manière générale, la zone centrale sera le point de passage et de repos du regard et représente donc un emplacement stratégique à soigner.

A l'intérieur du site, les éléments de navigation doivent faciliter la navigation descendante et transversale : descendre dans l'arborescence du site et passage aisé d'une rubrique à l'autre. Le principal enjeu est de faciliter et de réduire au maximum le temps d'accès à l'information recherchée.

Plus qu'une simple vitrine, la page d'accueil doit présenter l'ensemble des principales rubriques du site. D'un seul coup d'oeil, l'internaute doit pouvoir se faire une idée des contenus et fonctionnalités du site, et si possible y accéder en 1 clic. Le concept du "one clic to purchase" a permis à de nombreux sites e-commerce d'optimiser leurs interfaces en facilitant la navigation et l'achat des internautes.

Pour s'adapter aux différentes typologies d'internautes et de recherche d'information (guidée, exploratoire...), l'interface web doit proposer plusieurs accès et entrées dans les rubriques. Pour un catalogue de vente en ligne, il est recommandé de mettre en place une navigation par catégories et sous-catégories, un moteur de recherche, des guides d'achat, une aide à l'achat...

Les concepteurs d'interfaces web doivent également assurer une identification facile et permanente des éléments de navigation et des liens html.

A tout moment et à n'importe quel endroit du site, l'internaute doit pouvoir visualiser rapidement :

La page d'accueil est l'élément central et fondamental du site, elle doit ainsi orienter et guider l'internaute vers l'ensemble des contenus du site.

Pour un repérage facile à l'intérieur du site, les barres de navigation doivent être visibles en permanence et orienter l'internaute vers les principales rubriques du site. D'autres éléments d'aide à la navigation peuvent se révéler très utiles dans l'utilisation de l'interface web :

- le plan du site, permet de visualiser l'ensemble des rubriques et l'arborescence du site

- le "train d'arborescence" permet à l'internaute de visualiser à tout moment sa position dans l'arborescence

- les boutons "retour", "précédent", "sommaire"... sont également d'une aide très précieuse. Même s'ils sont redondants avec les boutons du navigateur ou le "train d'arborescence", ils sont très utilisés par certains internautes (alors que d'autres préfèrent utiliser le bouton "back" du navigateur.

- les liens "structuraux" : éléments de navigation dans l'arborescence du site (train de navigation, retour sommaire...)

- liens "intégrés" : liens vers des éléments de la page (ancres, fenêtre pop up...)

- liens "associatifs" : liens vers des éléments associés au contenu de la page (pour en savoir plus, voir aussi...).

Le surf sur le web est caractérisé par une navigation exploiratoire rapide (d'autant plus que la connexion est payante). De plus, des études ont montré que la lecture d'un texte à l'écran est 25% plus lente qu'un texte papier.

Ainsi, 79 % des internautes lisent les contenus rédactionnels des pages web en diagonale.

Le style rédactionnel des contenus d'un site doivent être adaptés aux types d'internautes qui vont venir lire ces textes. En fonction des objectifs du site, de son positionnement et de son coeur de cible, il est important de définir une ligne éditoriale adaptée.

La ligne éditoriale correspond à l'atmosphère, au style général employé pour la rédaction de l'ensemble des contenus du site.

Le style rédactionnel d'un site de prêt à porter féminin sera ainsi complètement différent de celui du site corporate d'une entreprise industrielle.

Il est important de proposer différents niveaux de lecture afin de satisfaire les différentes typologie d'internautes : le lecteur pressé apréciera les titres et les brefs résumés en page d'accueil, tandis que le lecteur intéressé apréciera d'accéder à l'intégralité de l'article par un lien "en savoir plus" ou "lire la suite".

De même au sein d'une page, le texte doit être mis en forme et adapté au mode de lecture "en diagonale". Les techniques rédactionnelles spécifiques à Internet sont principalement :

- hierarchisation et illustration des informations (puces, tableaux, schémas...)

- utilisation du Alt Texte : affichage d'un texte au passage de la souris sur un lien html

Internet est le média de l'information, gigantesque source de données et de connaissance. Lorsque l'internaute effectue une recherche et arrive sur votre site, il s'attend à avoir la réponse à sa question ou à son besoin sinon il change rapidement de site. La mise en place d'informations complètes, exhaustives et régulièrement mises à jour fait souvent la différence aux yeux des internautes.

Beaucoup d'entreprises se limitent encore à mettre en ligne une simple présentation commerciale de leurs produits et services alors que les internautes cherchent au contraire à trouver des informations et services complémentaires qu'ils ne trouvent pas dans la plaquette ou le catalogue papier. Ce sont bien souvent les contenus rédactionnels qui vont faire la différence et apporter une réelle valeur ajoutée aux internautes (ex : guides d'achats, fiches techniques détaillés, avis de professionnels, recommandations d'utilisateurs, comparatifs, trucs et astuces...).

L'ensemble des fonctionnalités proposées sur le site doivent être conçues dans la même optique de simplicité et de confort d'utilisation.

La mise en place d'un forum de discussion, d'un formulaire de contact, d'un moteur de recherche... doit faire l'objet d'une réflexion essentielle sur la manière dont les internautes vont l'utiliser.

Au delà de l'utilisation de la fonctionnalité, l'"usabilité" comprend également la notion fondamentale de valeur ajoutée. En effet, même si l'accessibilité, le design, la navigation et les contenus sont parfaits, un site qui n'apporte pas une réelle valeur ajoutée à ses internautes ne fera pas la différence.

La valeur ajoutée provient de l'ensemble des contenus, services et fonctionnalités qui vont répondre à un besoin latent ou exprimé de l'internaute.

Les fonctionnalités du site doivent permettre de répondre à tout ou partie des attentes et besoins des internautes. Plus les internautes auront une expérience positive de leur visite sur le site, plus ils seront satisfaits et plus ils seront susceptibles de revenir ultérieurement sur le site, de s'y enregistrer, de commander, de le conseiller à un ami, de l'ajouter dans ses favoris...

Pour vous aider à mieux comprendre les enjeux d'une ergonomie réussie, voici quelques exemples :

Vous souhaitez réagir ou obtenir des informations complémentaires, n'hésitez pas à me contacter.