Ergonomie-Web.com

06 mars 2006

Cet article est le premier d’une série de dix par lesquels je vais tenter de vous donner un maximum d’indications sur comment déceler des erreurs de conception, appuyer les visiteurs de votre site Internet dans leur démarche de recherche d’information, et mettre en œuvre des solutions efficaces pour ce faire.

Qu’est-ce que l’ergonomie de façon générale?

L’ergonomie est selon mon dictionnaire «l’étude des relations entre l’Homme et la Machine». C’est en soi l’appréhension de la façon dont les Hommes perçoivent les interfaces qu’ils utilisent, qu’elles soient logicielles, Web, ou même tout simplement les tableaux de bord des voitures, les instruments de mesure dans les hôpitaux ou les machines à café.

Les enjeux de l’ergonomie sont réels, on peut très rapidement se rendre compte de l’importance pour les pilotes de ligne à prendre en main le plus rapidement et le plus facilement possible leur tableau de bord. Une catastrophe aérienne a eu ainsi pour origine des problèmes de lecture des unités utilisées dans les indicateurs… (J.-F. Nogier, 2003)

De façon générale, il convient de créer des outils faciles de prise en main, c’est une évidence mais ce n’est pas toujours simple.

Je pense que par exemple que les machines à laver en général mériteraient d’être un peu mieux conçues, j’ai toujours eu un peu de mal à comprendre comment elles fonctionnaient, où mettre quel liquide, est-ce que le «noir», je le met plutôt avec le programme prévu pour le «synthétique» qui est indiqué ou celui du «blanc» qui l’est aussi. Car, en effet, ma machine à laver a dû être conçue avant l’apparition des vêtements en couleurs et en noir.

Idem avec nos magnétoscopes et autres enregistreurs DVD: quelle galère de savoir sur quelle chaîne se mettre, puis sur quel bouton appuyer, est-ce qu’il faut laisser la télé sur ladite chaîne ou peut-on regarder la une en même temps? Et si je veux enregistrer sur le satellite? Arrrgh…

Nous allons le voir tout au long de ce dossier, c’est en constatant de telles problèmes de manipulation sur des interfaces que l’on peut en améliorer la prise en main, mais également le succès, à l’instar de celui de Thomson après avoir modifié l’ergonomie de ses télécommandes… ou d’IBM après avoir revu entièrement la présentation de son site Web (J.-F. Nogier, 2003).

Il est avant tout très important de bien comprendre ce qu’est l’ergonomie appliquée dans le domaine de l’Internet

En effet, le domaine qui nous intéresse ici est celui de l’ergonomie appliquée au Web, ne nous égarons pas.

Depuis que le Web s’est démocratisé, l’évolution des sites Internet s’est fait de façon un peu anarchique. Chacun à sa façon pensait (et c’est encore souvent le cas) que son site Internet lui convenant tout à fait, il conviendrait à tout un chacun.

Mais là n’est pas la réalité des choses. J’ai pour ma part toujours su me repérer et m’orienter dans la plupart des sites Internet, mais parce que j’y ai toujours passé beaucoup de temps. Malheureusement, lorsqu’un jour j’ai eu ma tendre mère par téléphone et que je n’ai pas réussi à lui faire récupérer une information importante sur ma boîte e-mail (peut-être m’exprimai-je mal aussi), je me suis rendu compte qu’il n’était effectivement pas le média le plus simple à appréhender, d’autant plus qu’il est récent.

L’ergonomie appliquée au Web est donc l’art de faire en sorte que l’ensemble des cibles d’un site Internet puisse trouver facilement l’information recherchée sur celui-ci.

Dans l’idéal, si l’on imprime la page d’accueil d’un site Internet, on doit pouvoir indiquer rien qu’en la regardant quelles sont les informations que l’on peut trouver dans ce site, celles qui n’y seront pas, où cliquer pour aller vers l’information recherchée et décrire en une phrase le thème global associé.

L’équipe de projet n’est pas l’utilisateur lambda, attention aux préjugés!

Malheureusement, on croit trop souvent pouvoir prévoir l’utilisation de telle ou autre des interfaces d’un site Internet, parce que l’on l’aura prévue ainsi.

Les expériences montrent que les utilisateurs ont bien trop souvent des actions inattendues. Ces actions sont par ailleurs révélatrices d’erreurs de conception. L’utilisation du moteur de recherche interne au site par exemple est souvent une solution de facilité pour avoir à éviter à se perdre dans les trop nombreuses catégories d’un site Internet.

Je me prends parfois moi-même à utiliser Google pour retrouver une information à l’intérieur du site de l’entreprise où je travaille actuellement, une des incontournables du e-commerce en France!

Il est important de donner un maximum d’indications aux utilisateurs et d’être un maximum cohérent dans ses interfaces, mais cela ne suffit pas. Il existe deux moyens de savoir où l’on pêche: en interrogeant les utilisateurs et en observant les utilisateurs.

On verra ainsi dans un prochain dossier quels sont les moyens de détecter des problèmes d’utilisation.

Par ailleurs, je tiens à préciser dès à présent que, malheureusement, il n’existe pas d’ «utilisateur moyen» et que l’on doit bien adapter son site pour chacune de ses cibles, en vérifiant la bonne acceptation par celle-ci de vos interfaces.

Qu’est-ce qu’un «site Internet utilisable»?

La bonne question! Un site Internet utilisable est un idéal impossible à atteindre, dans la mesure où tout est toujours perfectible, mais vers lequel on doit tendre à se rapprocher.

Cet idéal permettrait à chacun, quelque soit son âge, son origine sociodémographique ou sa connaissance du média lors de la consultation d’une page Web, de savoir à tout moment:

• Où il se trouve dans le site Internet,
• Quelle est l’information globale présentée sur la page,
• Quelle est l’information globale présentée sur le site,
• Comment aller vers la page qui l’intéresse le plus rapidement possible.

Respect des conventions: risque d’être conventionnel mais gage d’utilisabilité

«Quel vice pour les graphistes de voir leur site Internet ressembler à un autre, quel manque de créativité!» Une idée reçue qui n’est pourtant pas forcément valable sur internet.

Le premier objectif d’un site Internet est de présenter de l’information et de faire en sorte qu’elle soit accessible le plus rapidement possible et lisible.

Il n’est pas aisé pour un internaute de rencontrer une nouvelle interface où il perd ses repères. Dix secondes à tenter de comprendre «comment ça marche», c’est déjà beaucoup trop long pour des utilisateurs qui ont le clic facile.

Donc présenter le logo en haut, le menu à gauche, les liens soulignés, le contenu à droite, est-ce manquer de créativité? à peu près autant que tous ces fabricants de voitures qui osent encore y implanter un volant rondet non pas un joystick !

Définitions utiles pour tous

Je vais vous présenter ma façon de voir certains termes utilisés couramment dans le monde de l’ergonomie. Je fais ces définitions volontairement courtes pour une meilleure compréhension.

Les Interfaces Homme Machine sont les zones d’échange entre l’utilisateur et l’«utilisé». En informatique, ce peuvent être bien évidemment l’écran, mais aussi la souris, le clavier,… tout ce qui permet d’échanger de l’information avec l’ordinateur.

En ce qui nous concerne, on parlera d’interfaces Web, c'est-à-dire la présentation à l’écran des pages Web et de sa perception par l’utilisateur.

L’utilisabilité d’une interface Web est sa capacité à être bien appréhendée par ses utilisateurs.

La navigabilité d’un site Internet est déterminée par la rapidité pour ses utilisateurs à évaluer le chemin à emprunter pour se rendre à l’information recherchée. On cite souvent en ergonomie la règle des «trois clics» qui permettrait à un utilisateur d’accéder à n’importe quelle information du site à partir de la page d’accueil en maximum trois clics.

L’accessibilité d’un site Internet est évaluée selon sa capacité à être bien appréhendé par ses utilisateurs potentiels.

Média : http://www.ergonomie-web.com | Lien permanent

07 novembre 2005

En bref

Comment le référencement et l'ergonomie / accessibilité sont techniquement associés au moment de la création d'une page Web.

L'article

L’ergonomie Web et le référencement sont des thèmes qui n’ont a priori rien à voir. L’une traite de l’organisation de l’espace d’une page Web, et l’autre de la façon d’assurer sa promotion. Cependant, en s’y penchant d’un peu plus près, les techniques d’optimisation d’un site Internet pour les moteurs de recherche conduisent souvent à une amélioration de l’accessibilité et pour cause.

Optimisation du référencement = Structuration de la page

L’optimisation de son référencement se fait par une hiérarchisation des informations d’une page, donnant ainsi la priorité à certains mots clé qui sont ainsi mis en évidence. On va ainsi techniquement préférer les balises de type H1, H2, H3 en HTML pour créer des titres au lieu de simples balises DIV auxquelles on va adjoindre un style. Un titre reflétant généralement le contenu des paragraphes suivant, c’est à lui que l’on donne la priorité aux robots des moteurs de recherche qui, eux, font abstraction des feuilles de style et ne voient que le code HTML.

Robots des moteurs = même fonctionnement que les logiciels adaptés aux non-voyants

On se rend ainsi compte du fait que les robots fonctionnent de la même façon que les logiciels de synthèse vocale ou adaptés aux malvoyants, qui privilégient les textes à l’apparence.

Alors, pour prêcher pour ma paroisse et dans l’ordre : pourquoi tout simplement ne pas intégrer à chaque fois une bonne politique d’accessibilité lors de la conception des sites Internet, optimisant ainsi ce même site pour le référencement ? Un bon argument de vente de l’accessibilité, non ?

Média : http://ergonomie-audit.blogspot.com | Lien permanent

04 novembre 2005

Internet, un média populaire et contemporain

Les priorités des entreprises vis-à-vis de leurs clients n’ont cessé d’évoluer en même temps que les avancées technologiques. Cette évolution est rendue plus rapide sur le média Web du fait du nombre croissant et de la diversification des usagers. Cela est dû également à de nombreuses études portant sur cet intriguant support qui font prendre conscience de certaines erreurs lors de la définition des cibles ou dans la conception d’un site Internet.

Quelques données

On note que 20% des français sont atteints d’une forme de déficience visuelle plus ou moins prononcée.

Comment s'adapter à un large public ?

Cela nécessite des dispositifs particuliers et des contraintes techniques : différencier les éléments de contenus (appelés items) de façon à ce qu’ils soient clairement identifiables, donner la possibilité d’agrandir ou de rétrécir la police via le navigateur (en ne spécifiant pas la taille de la police, mais plutôt en pourcentage par rapport à la taille par défaut) et contraster au maximum le contenu et le contenant (en évitant par exemple les images de fond).

Quels sont les publics à conquérir ?

On sait de plus que le Web peine à trouver sa place chez les jeunes retraités qui en auraient pourtant grande utilité, mais également chez les néophytes technologiques ou technophobes du fait notamment de la non compréhension du mode de fonctionnement de ce système : « Mais comment ça je clique ? ».

Que faut-il faire pour mieux répondre à leurs attentes ?

On peut retirer de cette information un besoin essentiel : faciliter la navigation à nos internautes. Pour cela, il faut que les liens soient mis en évidence (couleur différente, taille, espacement, soulignement) et si possible regroupés par orientation. Exemple : plusieurs liens exerçant une action sur un produit peuvent être regroupés dans un cadre établi.

Orienter le visiteur

On sait qu’un internaute ne s’éternise en moyenne pas plus de 4 secondes sur une page d’accueil et ne va pas effectuer plus d’un scroll (faire défiler la page qu’une seule fois).

Et cela me paraît un point plus qu’intéressant, et qui mérite réflexion. Si l’on regarde la plupart des sites et portails d’aujourd’hui, les pages d’accueil sont surchargées. On essaie de mettre un maximum d’information dans un minimum de place, cela impliquant un rubriquage qui peut être réussi parfois, mais qui ne sert cependant à rien.

Deux solutions : soit l’internaute sait ce qu’il vient chercher et il faut lui donner les moyens d’arriver en peu de clics à ce qu’il cherche (moteur de recherche, liens thématiques,…), soit il ne sait pas et il faut lui indiquer clairement quel(s) service(s) offre le site et ce qu’il va pouvoir y trouver. Dans ce dernier cas, il faut lui proposer quelques liens qui vont le faire se diriger vers les produits qui l’intéressent.

Les internautes lisent en diagonale

75% des internautes lisent en diagonale sur Internet selon J. Nielsen...

Dans le cas d’un site éditorial, de façon à faciliter la lecture en diagonale d’un article, il faut mettre certains mots ou groupes de mots en exergue de façon à ce qu’en regroupant ces mots on se fasse une idée globale du contenu du texte.

Beaucoup d'internautes ne vont pas au bout de leurs intentions d'achat

Un trop fort pourcentage de prospects ne vont pas au bout de leur commande, créant ainsi un manque à gagner considérable. À quoi bon mettre toutes les meilleures techniques marketing pour acquérir un client s’il ne passe pas commande ? Prendre soin de lui et s’adapter à ses problèmes, peurs ou incompréhensions est donc véritablement important.

Fidéliser, c'est générer du trafic intéressé

Dans un aspect purement marketing, on se souvient qu’il est 5 fois plus coûteux d’acquérir un nouveau client que de le fidéliser et on notera qu’un euro investi dans une démarche qualité en amène soixante de ROI (retour sur investissement).

Il est plus qu’important d’adopter la politique du zéro mépris, chaque client étant bon à prendre, et considérant qu’un client satisfait est un client fidélisé. Dans cette intention, il faut se mettre dans une attitude « user-centric », et adapter le site de façon à ce qu’il puisse permettre à un maximum de personnes de s’y retrouver. C’est une technique marketing comme une autre.

Média : http://ergonomie-audit.blogspot.com | Lien permanent

03 novembre 2005

En bref

J'ai choisi de rédiger une synthèse de l'excellent article - auquel j'adhère complètement - paru dans JournalDuNet.com le 05 octobre dernier. Raphaële KARAYAN a en effet dressé un panorama très intéressant - à mon avis - de ce qu'est l'ergonomie à l'heure d'aujourd'hui (sur des indications de Laure SAUVAGE, consultante en ergonomie). Je l'agrémenterai avec des avis personnels.

L'article

Selon Raphaële KARAYAN :

Une bonne ergonomie pour un site Web peut se définir par un ensemble cohérent composé de trois éléments : l'utilisabilité (architecture et système de navigation), l'utilité (contenus et services), et le design.

Plus encore :

Une ergonomie optimale exerce une influence positive sur l'achat et la fidélité. (voir mon précédent article.)

Quelques astuces donc

Il s'agirait en 2005 de privilégier l'efficacité et la rapidité d'affichage des pages Web, c'est à dire permettre à l'internaute d'arriver le plus rapidement possible à l'information souhaitée.

Pour des sites de vente en ligne, il est intéressant d'ajouter des guides d'achat ou autres services complémentaires rendus aisés par le média Web.

Les moteurs de recherche internes, de plus en plus utilisés, doivent de fait être de plus en plus pertinents, particulièrement grâce à la segmentation des recherches, ce qui permet d'affiner les résultats.

Comment simplifier la navigation

Au niveau de la navigation, il est important de garder à l'esprit qu'il faut simplifier au maximum la navigation et guider l'internaute vers les différentes sous-parties du site et vers l'information ou le produit qu'il recherche.

On retrouve dans l'idéal trois niveaux de visualisation : ce que les internautes doivent voir en premier (suivant le business model le logo ou les produits), les "outils de navigation", et les informations relatives (sécurisation des données, etc.).

Ensuite, l'allègement des pages est de mise pour laisser place à la lisibilité (fond blanc préférable). La priorité est laissée aux contenus en oubliant les couleurs vives, agressives, et qui attirent l'oeil pendant la lecture, détournant ainsi son attention.

Comment et pourquoi vérifier que l'on s'est bien adapté à son public

Effectuer des tests [sur des prospects ou clients] en amont, mettant des internautes en situation de navigation sur le projet de site, est souvent riche en enseignements.

En effet, à quoi bon recruter des prospects si on doit les perdre immédiatement après. Ce qui conforte mon avis qu'il s'agit quelque part de fidélisation.

Je finirai sur une statistique intéressante : les internautes restent en moyenne 3 à 4 secondes sur la page d'accueil d'un site, quelqu'il soit. Il faut donc pouvoir l'orienter rapidement.

Média : http://ergonomie-audit.blogspot.com/ | Lien permanent

02 novembre 2005

En bref

L'ergonomie, c'est l'art d'améliorer l'"utilisabilité" d'Internet. C'est faciliter la navigation à l'utilisateur, quelque soit son matériel, son profil, son âge. C'est également lui faciliter l'accès à l'information ou au produit recherché.

L'article

Rendre un site accessible, ce n'est pas seulement faire en sorte qu'il soit visible par les non-voyants qui consulteront un jour votre site, c'est également une problématique commerciale intéressante et un défi pour l'ouverture du Web à un maximum d'usagers.

Faciliter l'usage aux malvoyants (personnes agées,...)

Les populations visées ne sont donc pas majoritairement les non-voyants, mais le grand nombre de déficients visuels (qui peuvent l'être plus ou moins par ailleurs) dont beaucoup ont un grand potentiel pécunier qu'il serait intéressant de mettre à profit...

Ergonomie = fidélisation ?

Car oui, l'intérêt de l'ergonomie et de l'accessibilité est bien de faire en sorte que chacun se retrouve et puisse être guidé sur votre site Internet. C'est un moyen de fidélisation comme un autre et également une façon de guider votre utilisateur... vers la validation du panier !

Comment conduire le prospect à l'achat ?

La problématique actuelle d'un grand nombre de sites de e-commerce qui se retrouvent confrontés à un sérieux souci : trop d'usagers remplissent leur panier et quittent le site au moment de la validation de celui-ci.

D'où vient ce souci ? Les usagers ne se sentent parfois pas en sécurité, ou pire : ils ne savent tout simplement parfois pas où cliquer. D'autres se demandent encore comment le prix qui était affiché sur la fiche produit se retrouve incrémentée de la sorte, et parfois multipliée pour peu qu'ils aient cliqué plusieurs fois sur le bouton "Ajouter au panier"...

Comment y remédier ? Il me semble personnellement nécessaire pour ces entreprises qui sont "le nez dans le guidon" de faire intervenir une personne extérieure pour avoir une vision autre et nouvelle sur l'interface et déceler les erreurs de conception de l'interface voire certaines inepsies.

Comment révéler des problèmes liés à l'ergonomie des interfaces Web ?

Il peut être également intéressant de faire des tests sur des utilisateurs comme celui nommé "eye tracking" qui permet de voir le déplacement des yeux des utilisateurs sur l'interface et de voir quelles sont les réactions par rapport aux items de la présentation. Iil peut être intéressant également de suivre une personne néophyte ou agée qui navigue sur votre site en recueillant les questions qu'elle se pose.

Vous l'aurez compris, l'intérêt de la problématique de l'accessibilité et de l'ergonomie de vos pages Web - qui devrait faire partie intégrante de toutes les démarches qualité des sites Internet - comporte des intérêts économiques certains et non-négligeables et a le mérite, outre le fait de suivre les lois européennes et bientôt françaises, de vous faire une bonne publicité et d'améliorer votre image de marque auprès de vos prospects.

Média : http://ergonomie-audit.blogspot.com | Lien permanent

14 novembre 2003

Dans les sites que vous allez créer tout comme dans le monde qui nous entoure, les couleurs sont omniprésentes et sont pleines de sens, et ce, contrairement à tout ce que l’on pourrait croire. Ne vous sentez-vous pas doucement agressé lorsque vous vous trouvez dans une pièce rouge ? Tout comme ne vous relaxez-vous pas dans un champ vert ?

Il est important suivant le message que vous souhaitez faire passer d’adapter les couleurs, ou tout du moins de ne pas utiliser de couleur dont le sens serait inverse au propos que vous allez tenir… Elles vont provoquer chez le récepteur de votre message des sensations tant psychologiques que physiques. En gros, chaque couleur correspond à un goût, un parfum, un son ou une texture.

En exagérant un peu, et à titre d’exemple, un site de pompes funèbres ne doit pas être jaune, vous en conviendrez.

On peut départager deux types de couleurs : les couleurs froides (bleu) et les couleurs chaudes (orange ou rouge) et une infinité de combinaisons qui vont osciller entre ces deux types. Le noir et le blanc sont exclus.

On remarquera que, comme marqué ci-dessus, le rouge est la couleur la plus rapidement vue, qui saute le plus à l’œil. Il est donc intelligent de l’utiliser pour mettre en valeur les données importantes d’une page. Le bleu est le plus utilisé pour la création de sites, car c’est la couleur la moins choquantes de celles évoquées en amont.

Média : Interview-Webmaster.com | Lien permanent

01 novembre 2003

Même si l'architecture et le développement d'un site Web sont primordials dans la réussite d'un siteweb, le choix des couleurs est une étape importante qu'il ne faut surtout pas négliger dans la réalisation d'une charte graphique...

Vous qui créez des sites, vous vous êtes évidemment déjà posé la question : "bon, et là maintenant, je mets quelle couleur ?". Beaucoup malheureusement se disent : "ben là, ch'uis chaud pour le rouge, ça va faire bien". Evitez ce genre de réflexion, car cela vous mènera indubitablement à un truc qui n'a pas de sens.

Comment choisir la bonne couleur, prenons la question autrement, quelles couleurs ne pas choisir ? Les couleurs dites "pétantes" sont d'ores et déjà à proscrire, elle ne font que fatiguer les yeux du visiteur, et sont en général réservées aux sites warez, qui sont plus contenu que design. Le jaune est aussi à éviter car il est difficilement visible notamment sur les écrans LCD...

Il faut savoir que d'après des études, un visiteur placé dans une pièce aux couleurs chaudes (rouge, orange, etc.) donne une température de 4° plus élevée que lorsqu'on le met dans une pièce aux couleurs froides à la même température pourtant (source : www.admirabledesign.com). Les couleurs froides ont l'habitude d'amener plus de calme et de confort, cela explique pourquoi elles sont le plus souvent utilisées, cela dit, un peu de chaleur ne fait pas de mal et s'intègre bien parfois.

Ensuite, il faut accentuer les contrastes au maximum, ne pas hésiter sous photoshop® à utiliser des ombres très opaques, des contours d'1px d'épaisseur ou dupliquer le calque et réduire l'opacité de façon à faire un effet d'ombre très agréable.

Contrastes, oui, mais surtout éviter de mélanger certaines couleurs ensemble. le jaune et le rouge par exemple, mais cela, vous le verrez par vous-même de toutes façons. Nous vous mettrons en bas des exemples de couleurs qui peuvent aller ensemble, ce peut être pour vous une bonne source d'inspiration...

Pensez à définir une charte graphique et une ligne de conduite à suivre tout le long de la création de votre site, sans quoi celui-ci pourrait paraître incohérent et... rebuter le visiteur...

Média : Interview-Webmaster.com | Lien permanent

15 octobre 2003

Une question, réfléchissez à ce que vous faîtes lorsque vous arrivez sur un site et que la page met une heure pour s'afficher, qu'est-ce que vous faîtes ? "Click on the next on the google searchbot", vous allez voir le site suivant, non ? Et pourtant, peut-être que ce site aurait pu être intéressant et la présentation soignée, mais bon, on est de nature pressée et impatiente, nous les "homo habilis", et on veut tout, tout de suite.

Et vous, justement, il se trouve que vous avez un site magnifique... mais beaucoup trop long à charger. Excepté pour les sites design ou ayant des raisons particulières de faire patienter, le mieux est de mettre un minimum d'images sur votre site, ce qui va de paire avec le design sobre dont on parlait dans "les puérilités du web".

De plus, il est maintenant possible, avec les désormais très connus logiciels tels que Adobe Photoshop®, d'optimiser au mieux ces images. Explication rapide, ouvrez votre image, faîtes "enregistrer pour le web" et apparaît alors une fenêtre dans laquelle vous pourrez indiquer soit la qualité du JPEG (échelle de 0 à 100) et trouver un compromis entre la qualité de l'image et la taille de l'image indiquée en bas de la fenêtre, soit si c'est un gif ou un png le nombre de couleurs et vous pourrez même choisir lesquelles garder (dans Image Ready®, tout ceci se fait dans la palette apparente nommée "optimisation").

Evitez également tous les JavaScript ou Java en trop grand nombre qui réduisent eux-aussi la vitesse de chargement. Idem pour les inserts flash.

Média : Interview-Webmaster.com | Lien permanent