Les habitudes de scrolling à la loupe (Eyetracking)

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Les habitudes de scrolling à la loupe (Eyetracking)

Il y a certainement de la vie en dessous des 600px (fold). Mais quelle vie ? D’après l’étude Scrolling and attention réalisée par Jacob Nielsen, les utilisateurs passent 80% de leur temps à chercher des informations au-dessus du fold. Si le scroll est une pratique qui s’est répandue depuis quelques années, il ne concernerait donc que 20% du temps passé sur une page.

Distribution de l’intérêt («fixation») des utilisateurs sur les éléments du site par tranches de 100px.

La zone des 300px à partir du haut de la page est la plus regardée. Source www.useit.com

Quelles implications sur le design ?

Les éléments les plus importants devraient se situer au-dessus du fold sans pour autant sacrifier le bas de la page qui doit rester attrayant.

Pour matérialiser le fold, je trace une ligne à 550px du haut de ma maquette pour être sûr d’avoir l’essentiel. J’ai pris l’habitude de visualiser certains sites avec un Netbook  et leur résolution (1024 x 600) est sans pitié !

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



10 commentaires pour “Les habitudes de scrolling à la loupe (Eyetracking)”

  1. aureroux dit :

    le test a porté sur 21 utilisateurs : quelle rigueur scientifique ! Comme peut on tirer des lois d’un si faible panel statistiques ? Allez jeter un coup d’oeil au site du gardian qui a une très longe page. Le site est agréable à lire et à utiliser parce que le contenu est mis en page avec clarté. Le père jacob n’a toujours pas digéré de s’être planté en 97, il remet cela aujourd’hui. Les sites qu’il cite en exemple ne sont pas du tout le meilleur exemple de mise en page éfficace. Il est évident que si on prend un catalogue répétitif on n’ a pas le même résultat que si on prend le guardian.

    Bref : gare au gourous ! N’ayez pas peur mes frères, Plongez sous la limite !

  2. Bruno Bichet dit :

    @aureroux — 21, ça parait léger, mais en sociologie, par exemple, un échantillon représentatif de 30 sujet est tout à fait pertinent pour tirer des conclusions à une plus large échelle.

    Ici il s’agit de tests d’utilisabilité : on étudie plus la réaction à des stimulis visuels qu’un comportement complexe comme « pourquoi préfère-t-on le Nutella à une autre pâte à tartiner »…

    Donc, pour moi, rien à redire sur ce chiffre et je finirais en disant que si on pouvait faire la même chose ne serait-ce qu’avec deux ou trois personnes avant le lancement d’un site, le web serait globalement plus utilisable ;)

  3. CUT HERE dit :

    En soi l’analyse peut être lue avec certaines critiques, comme aureroux, je mets quelques réserves dans mon article. Mais l’étude n’apprend rien de révolutionnaire non +. Il s’agit plus d’une confirmation. Concernant le nombre d’utilisateurs, il faut aussi le mettre en // avec le nombre de pages testées qui est conséquent.

    Un point qui n’est jamais pris en compte par contre, c’est l’attrait de certains sites qui pourraient influencer la lecture et la possibilité de scroller en bas : si le sujet ne m’intéresse pas, je fais le test mais sans la même conviction qu’un site avec un contenu qui m’intéresse (que ça soit dans un test ou non, tous ces éléments jouent).

  4. Bruno Bichet dit :

    @CUT HERE — Rien de révolutionnaire, c’est un peu la marque de fabrique de J. Nielsen, je suis d’accord. Je faisait le parallèle avec la sociologie parce que beaucoup d’études ne font que confirmer / ou expliquer le pourquoi du comment de choses que tout le monde expérimentent tous les jours sans en avoir forcément conscience.

    Pour ma part, j’étais convaincu que les gens passaient bien plus que 20% du temps en dessous du fold. Après, est-ce que ça va changer ma pratique dans la mise en place des contenus ? Là est la question.

    Je vais continuer à soigner le haut de la page sans pour autant négliger le reste. Mais si j’ai quelque à vendre, c’est clair que l’argumentaire et le bouton « Achat » auront plus de chances de se retrouver au-dessus du fold après la lecture du billet de J. Nielsen qu’avant ;)

  5. bon reduction dit :

    Pour avoir tester sur un même site, l’implantation de rubrique « prioritaire » au dessus et en dessous du fold, sous différents formats, mise en page, graphisme, je me suis rapidement apercu que mon taux de rebond était bien inférieur quand les infos pertinentes se trouvaient au dessus…

  6. [...] suis alors tombé sur le blog de css4design qui révelait une etude plus qu’intéressante de Jakob Nielsen sur le “above the page fold [...]

  7. [...] à 714 pixels. Ce matérialisation du fold est utile pour voir les éléments qui seront visibles sans nécessiter de scroll, même s’il faut garder à l’esprit qu’il y a de la vie en dessous de 600px ! La [...]

  8. [...] Where is the fold? — Superpose la matérialisation du fold à la page Web spécifiée. Le fold est la zone en deça de laquelle l’utilisateur n’a pas besoin de scroller pour visualiser la page. Where is the fold? montre le fold tel qu’il apparait selon les résolutions d’écran les plus courantes, avec des indications statistiques sur le pourcentage d’utilisation. Via @chef2projet. Lire Les habitudes de scrolling à la loupe. [...]

  9. [...] article lu sur CSS4 Design, édité par Bruno, intégrateur web intitulé « Les habitudes de scrolling à la loupe » rappelle la répartition [...]

  10. [...] Lire 10 principes pour un design web efficace et Les habitudes de scrolling à la loupe (Eyetracking). [...]

Laissez un commentaire

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

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site