10 conseils d’ergonomie basés sur des études de recherche

23

Internet abonde de conseils utiles sur l’ergonomie de sites Internet. Nous prenons au sérieux ceux qui apparaissent être les plus logiques. Mais il est parfois réconfortant de voir certaines théories qui circulent validées par des recherches sérieuses.

Cet article traite des résultats de plusieurs recherches sur l’ergonomie, dont, entre autre, la captation du mouvement des yeux sur une page Web, les analyses et rapports sur l’utilisabilité et la convivialité, et enfin, des idées pour améliorer le design. Beaucoup de ces conseils, tel que mentionné précédemment, semblent de mise, mais ils sont enfin soutenus par des statistiques. D’autres, par contre, vous surprendront peut-être et changeront votre opinion sur certaines coutumes actuelles.

1. Oublier la règle des « trois clics »

L’idée que les utilisateurs seront frustrés s’ils doivent cliquer plus de trois fois pour trouver le contenu qu’ils cherchent sur votre site Web circule depuis bien longtemps déjà. Dans son livre Taking Your Talent to the Web, publié en 2001, Jeffrey Zeldman, une autorité reconnue dans l’industrie du design Web, écrivait que la règle des trois clics « peut vous aider à créer une structure hiérarchique logique et intuitive à la fois ».

À la base, cette idée semble tout à fait logique, car, bien entendu, un utilisateur sera frustré s’il passe beaucoup de temps à cliquer ici et là pour trouver ce qu’il cherche.

Mais pourquoi une limite arbitraire de trois clics ? Y a-t-il aucune indication que les utilisateurs Web vont soudainement renoncer à leur recherche si cela leur prend plus de trois clics pour arriver à ce qu’ils recherchent ?

En fait, la plupart des utilisateurs n’abandonneront pas simplement parce qu’ils ont cliqués plus de trois fois; le nombre de clics n’étant en fait pas liée à la frustration des utilisateurs.

Une étude réalisée par Joshua Porter et publiée sur User Interface Engineering, a révélé que les utilisateurs ne sont pas plus susceptibles de s’avouer vaincu après trois clics qu’après un nombre plus élevé, tel que 12 clics, par exemple. « Pratiquement personne n’a abandonné après trois clics », affirme Porter.

Source: User Interface Engineering

L’accent ne doit donc pas être mis sur la réduction du nombre de clics pour arriver à un nombre magique, mais plutôt à faciliter l’accessibilité. Si vous êtes en mesure de construire une interface utilisateur qui est facile et agréable à utiliser, mais qui prend jusqu’à 15 clics pour parvenir à réaliser une tâche particulière, alors ne laissez pas la règle arbitraire des trois clics vous en dissuader.

2. Organiser le contenu en forme de « F » pour faciliter la lecture

Le Dr. Jakob Nielsen, un pionnier dans le domaine de l’utilisabilité, a effectué une étude auprès de 230 participants sur leurs habitudes de lecture par la captation du mouvement des yeux. L’étude a révélé que les participants suivaient généralement la forme d’un F lors de la lecture d’une page Web type.

Source : Alertbox

Une étude similaire, menée par les firmes de marketing Enquiro et Did-it, en collaboration avec la firme de recherche sur la captation du mouvement des yeux Eyetools, révéla un résultat semblable dans une recherche auprès de 50 participants qui devaient survoler une page de résultat Google. Cette étude, qu’on a surnommé le « triangle d’or Google » à cause de la grande concentration des résultats dans le coin supérieur gauche de la page, concorde fortement avec le modèle en forme de F mené par l’étude indépendante de Nielsen.

Source: Clickr Media

Pour les concepteurs et les rédacteurs Web, ces résultats suggèrent que le contenu que vous souhaitez mettre en valeur doit être placé vers la gauche, et que l’utilisation d’un contenu qui correspond à un modèle en forme de F, tels des titres suivis par des paragraphes ou des listes à puces, ont des chances accrues d’être lu par un usager qui survole rapidement une page Web.

3. Augmenter la vitesse de chargement des pages Web pour ne pas faire attendre l’usager

On nous répète constamment que les usagers sont impatients, qu’ils détestent attendre. Ce qui semble une évidence… Qui aime attendre pour rien ? Mais y a-t-il des preuves tangibles que la performance d’une page Web, ou sa lenteur, a un impact réel sur l’usager ?

Bing, le moteur de recherche de Microsoft, a mené une étude pour voir s’il y avait une corrélation entre la vitesse de chargement d’une page Web et d’autres indicateurs de performance, tels que la satisfaction, les revenus générés par les utilisateurs, et le nombre de clics effectués sur la page. Le rapport a démontré qu’un délais supplémentaire de deux secondes dans le chargement de la page équivalait à une réduction du taux de satisfaction de -3,8%, une perte de revenus par utilisateur de -4,3% et une réduction de clics de -4,3%. Pour une entreprise aussi importante que Microsoft, une baisse de -4,3% du chiffre d’affaires peut se traduire par des pertes de bénéfices de plusieurs millions de dollars.

Source: Radar O’Reilly

Conclusion : les utilisateurs sont impatients. Ils sont moins satisfaits quand ils attendent trop longtemps, ce qui se traduit par moins de clics.

De plus, si vous vous souciez de votre rang dans les moteurs de recherche, vous serez certainement motivé à améliorer le rendement de vos pages Web, puisque Google prend désormais en considération la vitesse de chargement dans ses critères de classement des résultats de recherche.

Alors, comment améliorer la performance des pages de votre site ? En utilisant des outils qui vous aideront à cibler les endroits où la performance est réduite, à utiliser des sprites CSS pour améliorer la vitesse de la page, et des outils comme YSlow pour découvrir où vous pouvez rapidement apporter des correctifs et améliorer l’optimisation.

4. Rendre le contenu facilement lisible

Une étude réalisée par le Dr Nielsen sur les habitudes de lecture des usagers sur son site Internet conclut que ces derniers ne lisent pas vraiment le contenu en ligne. L’étude démontre que les gens lisent environ 28% du contenu d’une page Web moyenne, et ce chiffre va en décroissant avec l’augmentation de contenu sur la page.

Source: Alertbox

Il faut donc utiliser des techniques pour rendre le contenu plus facile à lire afin d’accroître les chances de vos lecteurs de tirer le maximum de votre contenu.

Faites ressortir les mots clés, utilisez des titres et des sous-titres, rédigez des paragraphes courts et utilisez des listes à puces.

5. Ne pas se soucier du « pli » de la page et du défilement vertical.

Le mythe que toutes vos données importantes doivent être au-dessus du « pli » de la page, un terme emprunté aux journaux qui réfère à la zone d’une page Web qui peut être vu à l’écran sans avoir à utiliser la barre de défilement, a tout d’abord été proposé par Jakob Nielsen.

Donc, est-ce que les pages qui sont très longues mauvaises ? Doit-on entasser toute l’information importante en haut de page parce que les gens ne lisent jamais ce qui se trouve sous le pli ?

Selon un rapport de ClickTale, une firme spécialisée en analytique Web, la réponse est « non ». Les résultats ont prouvé que la longueur de la page n’a pas d’influence dans la probabilité qu’un utilisateur fera défiler cette dernière.

Source: ClickTale

Une étude menée par Joe Leech de CX Partners, une agence de design qui met l’emphase sur l’expérience utilisateur, a révélée que moins l’utilisateur trouve de contenu au dessus du pli, plus il est encouragé d’explorer ce qui se trouve plus bas sur la page.

Source: cxpartners

Le principal point à retenir ici est de ne pas entasser tout le contenu important en haut de la page par crainte que l’utilisateur ne sera pas en mesure de le trouver autrement. Utilisez plutôt des principes de hiérarchie visuelle pour mettre de l’emphase sur certains éléments important de contenu.

6. Placer le contenu important sur la gauche d’une page Web

Les gens élevés dans des cultures où la langue est lue et écrite de gauche à droite ont été formés à un très jeune âge à d’abord poser le regard sur la gauche de la page, que ce soit pour écrire ou lire un livre. Cela peut être la raison pour laquelle de nombreux internautes passent une majeure partie de leur attention sur le côté gauche d’une page Web; en fait 69% du temps, selon l’étude sur la captation du mouvement des yeux du Dr Nielsen qui a impliqué plus de 20 utilisateurs.

Source: Alertbox

Les mêmes résultats se reflètent sur des sites Web dont la langue se lit de droite à gauche, comme l’hébreu et l’arabe, bien qu’avec des résultats inversés (avec plus d’attention sur le côté droit de la page).

Il y a deux choses à retenir de ce résultat. D’abord, il faut penser à la langue utilisée sur le site Web en créant l’architecture et la mise en page de ce dernier. Deuxièmement, pour les sites qui sont traditionnellement lus de gauche à droite, il faut se rappeler de placer l’information cruciale sur la gauche du site et vice-versa pour les sites Web lus de droite à gauche.

7. La lisibilité est influencée par les espaces vides

La vitesse de lecture d’un texte à l’écran, sa compréhension, ainsi que la probabilité que le lecteur poursuive sa lecture au lieu de quitter la page après quelques lignes, dépendent grandement de sa capacité à lire ce texte facilement. Il existe de nombreux facteurs qui influencent la facilité de lecture, y compris les choix de polices de caractères (sérif versus sans-sérif), sa grosseur, la distance entre les lignes de texte, le contraste entre l’arrière et l’avant plan, ainsi que les espaces vides.

La performance de 20 lecteurs fût testée dans une étude sur la lisibilité en leur présentant des blocs de texte entourés de marges différentes, ainsi que des variations dans la distance entre les lignes de texte. On a découvert que les textes sans marge était lus plus rapidement, mais la compréhension du lecteur diminuait. On peut expliquer cette rapidité de lecture accrue par le fait qu’en ayant des lignes de textes et des paragraphes plus rapprochés, l’oeil a ainsi besoin de moins de temps pour se déplacer.

Source: Software Usability Research Laboratory

Comme le démontre cette étude, notre façon d’organiser le contenu peut influencer grandement l’expérience de l’utilisateur. Soyez attentif aux détails comme la couleur, la hauteur de ligne, l’espacement entre chaque lettres, afin de vous assurer de ne pas décourager vos lecteurs. De plus, n’hésitez pas à explorer l’impact des espaces négatifs dans la conception de vos pages Web.

8. Les petits détails font une énorme différence

Trop souvent, nous regardons la situation dans son ensemble lors de la création de sites Web, mais finissons par ignorer les petits détails de production, faute de temps. Nous cessons de nous questionner sur le choix d’un titre donné ou négligeons un bouton important dans un formulaire si le temps et les ressources sont limités. Il y a tant de choses à faire qu’il est souvent facile de laisser tomber les petits détails qui font la différence.

Mais quelque chose d’aussi simple qu’un bouton dans un formulaire peut affecter le succès d’un site. Du moins, c’est ce qu’affirme Jared Spool, un expert en conception d’interface utilisateur, qui a écrit sur un cas donné où la suppression d’un bouton et l’ajout d’un message d’erreur clair, pour éviter des erreurs inutiles lors du processus d’achat en ligne, s’est traduit par une agmentation des revenus de plus de 300 millions de dollars en une année seulement. Cette simple révision de la procédure de paiement fit augmenter les ventes de 45% le premier mois.

L’importance de porter une attention tout particulière aux détails est reprise par Flow, une firme de design axé sur l’expérience de l’utilisateur. Ils ont constaté qu’en révisant la page d’erreurs 404 du processus de paiement pour y inclure des données importantes, permettait à plus de 0,5% de visiteurs par mois de compléter le processus de paiement, ce qui se traduisit par une augmentation des revenus d’un quart de million de livres anglaises par année.

Le message utilisé ? Trois petites phrases très polies plutôt qu’une énigmatique erreur 404 :

« Nous sommes désolés, nous avons eu un problème lors du traitement de votre commande. Aucun frais n’a été porté à votre carte. Veuillez cliquer sur le bouton Commander pour essayer à nouveau. »

Faites attention aux détails. Il est possible de tester deux solutions de design, vos deux meilleures hypothèses, grâce à un test appelé A/B split testing, afin de savoir laquelle favorisera le meilleur résultat. Utiliser aussi un logiciel d’analyse de résultat (Google analytics) pour observer l’impact de vos modifications et ajustements par rapport aux objectifs du site.

9. Une boîte de recherche n’est pas une béquille à une mauvaise structure de navigation

Les usagers s’attendent à trouver une navigation qui est bien organisée et facile à utiliser. Même si la boîte de recherche est très performante, le visiteur utilisera toujours en premier lieu la navigation principale pour naviguer. Selon une étude réalisée par Gerry McGovern, plus de 70% des participants ont tout d’abord cliqué sur un menu de navigation pour débuter leur recherche plutôt que d’utiliser la fonction de recherche.

Cette étude est très similaire à un autre test réalisé par UIE auprès de 30 personnes pour analyser leur performance durant un processus d’achat en ligne. Le résultat a démontré que les usagers faisaient appel à la recherche seulement quand la navigation s’avérait être déficiente ou insatisfaisante. Ainsi, la fonction de recherche est le plus souvent utilisée lorsque l’usager ne trouve pas ce qu’il cherche par une autre méthode.

La leçon à tirer ici est très claire : n’utilisez pas une boîte de recherche pour palier à une mauvaise architecture de navigation. Lorsque l’usager ne parvient pas à accéder au contenu désiré, les efforts devraient être mis à améliorer l’organisation du contenu, et non la recherche.

10. Votre page d’accueil n’est pas aussi importante que vous le pensez

La page d’accueil n’est plus la seule porte d’entrée de votre site Web, ceci en grande partie à cause des moteurs de recherche qui renvoient aux pages les plus pertinentes de votre site.

Des liens à partir d’autres sites Web sont également susceptibles de mener sur votre site, bien au delà de votre page d’accueil, si c’est là que l’information pertinente se trouve.

Selon une analyse réalisée par Gerry McGovern, la page d’accueil d’un large portail est de moins en moins vu par les usagers. En 2003, 39% des visiteurs accédaient au site par l’accueil, en comparaison à seulement 2% en 2010. Cette tendance a été répétée sur un autre large portail où la page d’accueil fut visionnée par 10% des visiteurs en 2008, et seulement 5% en 2010.

Les résultats de McGovern confirment que le traffique généré sur les sites Web provient de plus en plus de sources externes, comme les sites sociaux tel que Twitter, et les services agrégateurs de contenus tels que Alltop, plutôt que l’accueil.

Par conséquent, une plus grande attention portée sur les pages de renvoi plutôt que sur la page d’accueil vous permettra d’obtenir de meilleurs possibilités de rétention, de meilleurs résultats de conversion, et ainsi se transformer en revenus accrus.

Article original :

10 Usability Tips Based on Research Studies
Cameron Chapman pour Six Revisions

Cet article a été publié le Jeudi 23 septembre 2010 à 12:16

Vous pouvez en suivre les commentaires par le biais du flux RSS 2.0.

Vous pouvez laisser un commentaire ou rétrolier de votre site Web.

23 commentaires

  1. Lyne Champoux,

    J’ai beaucoup aimé votre article.Il est clair et pertinent. Toutefois, votre crédibilité diminue lorsque des fautes s’y glissent et, plus encore lorsque vous utilisez le passé simple. Ce temps de verbe n’est plus à recommander depuis longtemps.

  2. Je ne suis pas d’accord avec la seconde règle. La forme du F ou du L inversé selon les études est influencée par la forme (l’enveloppe) général du texte. Les espaces vides. La proximité ou la présence d’éléments graphiques.

    La forme de F n’est pas une caractéristique qui doit influencer votre conception d’une page car elle est elle-même influencée par la conception de la page.

    Prenons un exemple, un concepteur construit sa page pour selon lui faciliter la lecture en forme de F, il est tout à fait possible que la page qui en résulte influence le parcours oculaire sur la page et produise une toute autre forme qu’un F.

    La bonne méthode serait plutôt de produire une page d’analyser le parcours oculaire sur cette page et la modifier pour l’adapter au parcours oculaire, si nécessaire. Et de recommencer pour voir si les adaptations réalisées n’ont pas encore tout modifié.

  3. Ping : 10 conseils d’ergonomie basés sur des études de recherche

  4. Il est toujours très difficile de trouver l’ergonomie parfaite. Je pense personnellement qu’il faut une longueur de contenu moyen, des titres clairement lisibles pour séparer les idées. Il faut aussi bien sur une bonne capacité d’élocution générale. Quant aux fameux indices de visibilité, qui existent (logiciels), je les trouve relativement peu fiables.

    En tout cas il y a un gros boulot sur ton article, bravo (très fort le eye tracking!)

  5. Très bon article synthétique sur des analyses et études un peu anciennes toutefois.
    Ya plus qu’a retravailler nos pages maintenant !

  6. Dans l’ensemble, je suis tout à fait d’accord avec les points énoncés. Par contre , je trouve toujours très délicat de faire des généralités en terme d’ergonomie. Suivant le secteur d’activité que l’on veut toucher, certaines choses peuvent ne pas fonctionner.

    Je suis donc plutôt partisans de test type A/B testing pour pouvoir déterminer quels sont les meilleures méthodes pour convertir plus.

  7. Tony,

    J’ai bien aimé cet article, certain points que je ne connaissais pas étant très instructif.
    Par contre pour le point 1 je ne suis pas tout à fait d’accord. Il s’avère que la règle des 3 clics n’est peut-être pas à recommander pour l’ergonomie, mais elle reste importante pour l’accessibilité. La publication scientifique « On the efficiency of keyboard navigation in Web sites » (Schrepp, 2006) démontre qu’une page web profonde sur un site pourra demander plusieurs centaines de clic sur la touche de tabulation pour un utilisateur qui navigue au clavier, contre 3 clics (par exemple) pour un utilisateur qui a une souris. En augmentant la profondeur d’une page sur un site, ça rend la navigation encore plus complexe pour les utilisateurs qui navigue au clavier.

  8. Florent,

    Cet article est très intéressant car il présente de façon synthétique (presque) tous les aspects de l’ergonomie d’une page web.

    Je pense qu’il faut surtout se poser la question de comment vous et vos utilisateurs feraient une fois sur vos pages, ensuite ce n’est presque qu’une question de logique.

    Par contre il est vrai que pour le point numéro 2, il arrive que les gens scannent la page en Z plutôt qu’en F, non?

  9. Tel que mentionné à la fin de l’article, le travail original provient d’un blogue américain.

    Pendant la rédaction j’avais moi même mes réserves sur le point 2 et l’organisation du contenu en forme de F. Je me questionnais sur le fait que la lecture en F était peut-être plus le résultat de l’oeil qui suit un contenu déjà organisé en F plutôt qu’un pattern inné chez l’utilisateur.

    Quand au point 1, il est vrai qu’un utilisateur régulier ira au delà des 3 clics, mais que ça peut compromettre l »accessibilité pour un utilisateur qui navigue au clavier.

    Merci à tous pour les commentaires très constructifs, c’est bien apprécié.

  10. Ping : Les billets « web, ecommerce et développement » intéressants d’octobre 2010 (1) | Georges@Bitbol : la vérité, enfin ma vérité ... du moment

  11. delph,

    conseils très pertinents mais un 11eme point aurait pu être rajouter concernant les couleurs à utiliser : le vert clair est illisible !!

  12. julien,

    Cet article est tout simplement une vulgarisation de l’ergonomie qui n’est ni admissible ni praticable !

    Il vise à ce qu’avec ces 10 règles génériques, on puisse appliquer cela à toutes les interfaces. Or seul un ergonome (diplômé) peut faire de l’ergonomie à titre professionnel. Cf. toutes les offres d’emploi demandant des développeurs/graphistes avec des notions d’ergonomie est-ce que je vais voir un docteur avec des notions de médecine ? , non !

    1.règle des 3 clics, oui à oublier !
    Il n’y a pas un nombre de clic générique qui fait que l’on abandonne une techno, si les clics sont simples dans une arbo utilisable, on pourra cliquer pas mal de fois. (2 clics simples valent mieux qu’un clic complexe (ça c’est de la règle)

    2. Organiser le contenu en forme de F, NON !!
    C’est affligeant de pouvoir lire ça, évidemment qu’on lit de gauche à droite d’autant plus si le texte est aligné à gauche.
    L’eye tracking justifiant ce postulat a été fait sur Google, il suffit de voir où est placé le texte pour savoir où l’utilisateur regarde.
    Cette règle ne s’appliquera pas à tous les sites.

    3. Augmenter la vitesse de chargement OUI !!

    Principal source d’abandon d’une interface, mais pas au détriment de l’utilisabilité, par contre la justification des clics me semblent un peu débile

    4.contenu lisible bah OUI…

    5. Ne pas se soucier du pli de la page , NON !!!

    Les études montrent effectivement que les utilisateurs scrollent sans trop de difficulté à condition que le site soit bien fait ce qui est nettement plus rare !

    Quant à l’étude illustrant ce propos ce n’est révélateur de rien, cela dépend juste de l’agencement des items.
    Encore une fois on ne peut pas appliquer ces lois à toutes les interfaces !

    6. placer le contenu important à gauche, non

    On peut aussi placer la navigation et des contenus importants à droite (cf. site Sncf bloc de réservation), il suffit juste de trouver la bonne ergo et le bon graphisme.

    7. la lisibilité est influencé par les espaces vides. Oui et non

    CF les 15 milliards d’articles en psycho cognitive et autres sur les empans de lecture.

    8. les petits détails font la différence oui

    9. boite de recherche oui
    Elle permet à des personnes de trouver rapidement l’info sans chercher à s’approprier l’architecture du site.
    De plus c’est une convention donc on capitalise sur un apprentissage externe.

    10. page d’accueil pas aussi importante. Ouais

    C’est une une porte d’entrée donc il ne faut pas la pas la mettre au niveau des fenêtres.

  13. Ping : Criez-le!

  14. thierrypigot,

    Très bon article et bonne synthèse !

    Il est toujours utile de démontrer que souvent on se base sur des idées reçues et archaïque.

  15. Intéressante synthèse de principes plus ou moins récents dont certains bousculent quelques vieux principes.

    Comme toujours, rien n’est à suivre à la lettre, l’adaptation à chaque projet reste de mise. Sinon, ce serait trop facile. Les fondamentaux existent pour être bousculés.

    Un simple petit bémol, certaines études sont basés sur un panel un peu léger me semble-t-il (20 personnes) pour délivrer la pleine puissance aux évidences qui découlent des comportements analysés. Mais c’est certainement bien mieux que nombre conseils que l’on trouve sur le net, basés sur des certitudes personnelles.

  16. Article intéressant, je vous conseille le livre » ergonomie web » qui reprend tous ces principes.
    En parlant d’ergonomie, le vert de vos liens pique un peu aux yeux :) ( sur mon écran)

  17. Ping : 10 conseils d’ergonomie basés sur des études de recherche | Kryzalid | Ergonomie cognitive et innovation | Scoop.it

  18. Ping : 10 conseils d’ergonomie basés sur des études de recherche | Kryzalid | Information Mapping | Scoop.it

  19. Ping : 10 conseils d’ergonomie basés sur des études de recherche | Ma Veille | Scoop.it

  20. Ad,

    Il y a des choses très intéressantes.
    Après par rapport à la page d’accueil, ca dépend de pleins de chose, mais la page d’accueil restera toujours la plus important d’un point de vue entrée, popularité …
    et pour les sites à notoriété, c’est le plus souvent par cette page que les internautes rentrent

  21. Bonjour, je trouve que votre opinion de ce thème est véritablement pertinente, et je tiens à vous dire merci pour post riche en contenu. Quoiqu’il arrive, je rendrai à nouveau visite le plus rapidement possible. Et si vous envisagez de consulter ma page web, n’hésitez pas. Bonne continuation !

  22. Ping : Développement Web | Pearltrees

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>