Dès le début de l’article, Nielsen donne le ton (on s’en doutait mais l’étude le confirme)

Web users spend 80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold

Pour ceux n’étant pas habitués avec la notion d’above the fold, il s’agit d’une limite « virtuelle » de hauteur de page, celle où votre contenu est affiché par défaut dans le navigateur sans scroller. Vous pourrez lire plus d’informations sur la page Wikipedia.

L’étude confirme aussi que les internautes sont beaucoup plus familiers à scroller (qui était moins le cas avant), mais hormis des cas particuliers, votre contenu important doit rester au dessus de cette limite virtuelle. Mais que ça soit clair, vous pouvez (et de toute façon souvent vous n’aurez pas le choix sur des sites denses) placer certains contenus important en dessous du fold.
Il reste préférable d’avoir un contenu long sur une page que le découper en différentes (pour le moment, on n’apprend rien). Si votre contenu est intéressant dans la zone visible, l’internaute scrollera naturellement, puisque son attention aura été gagnée par la première partie.

In other words, users will scroll below the fold only if the information above it makes them believe the rest of the page will be valuable.

L’étude Eyetracking a été réalisée sur 21 personnes qui ont accédées à 541 pages pour un total de 57 453 points d’arrêts (quand l’internaute retient son attention sur une page), ce qui peut parait énorme et peu à la fois. J’ai toujours du mal avec le système des échantillons représentatifs mais Papy Nielsen reste un habitué de ce type de travaux pour avoir un panel représentatif. Je vous laisse lire le reste du passage concernant la procédure de test.

Voici un point important de l’étude, un schéma représentant où les internautes bloquent généralement sur la page (à quelle hauteur).

Résultat sans appel : 80% s’arrêtent sur les contenus au dessus du fold, les 20% en dessous

Nielsen précise que l’étude a été réalisée avec des résolutions 1024*768, alors qu’on voit de plus de plus d’écrans avec des dalles énormes et des résolutions plus élevèes (iMac 27″ par exemple). Oui a contrario, on a aussi toute une gamme de netbook avec des petites résolutions et de contenus sur mobiles (iPhone). Selon lui, la résolution ne changerait pas les chiffres du diagramme ci-dessus. J’en suis un peu moins convaincu (sans étude à l’appui malheureusement, simple observation de personnes autour de moi de différents âges qui sont souvent plus désorientés avec ces grands écrans)

Sur la page Amazon de gauche, les internautes ont un comportement typique, beaucoup de points de fixations au dessus du bold, avec en outre un blocage sur un élément très loin dans la page. Pourquoi ? L’item ici est un commentaire qui semble retenir l’attention. Il souligne un point important, si le premier élément est souvent facteur d’attention, le dernier l’est tout autant. Si vous regardez le premier diagramme, vous constaterez aussi ce phénomène qui semble naturel, on regarde le premier élément avec attention (haut de page) et le dernier (bas de page – pic de visualisation)

Les 2 autres pages ont encore un comportement typique, beaucoup de points chauds en haut, une baisse au milieu de page et des pertes de fixations énormes en bas de la page. L’exemple des sofa l’illustre encore une fois.

The implications are clear: the material that’s the most important for the users’ goals or your business goals should be above the fold. Users do look below the fold, but not nearly as much as they look above the fold.

People will look very far down a page if (a) the layout encourages scanning, and (b) the initially viewable information makes them believe that it will be worth their time to scroll.

Finally, while placing the most important stuff on top, don’t forget to put a nice morsel at the very bottom.

Mais si l’élément en scrollant retient l’attention, ces habitudes d’usages peuvent être rompues. Comprendre par cela qu’un design doit suivre des guidelines mais ne doit pas être un frein à la possibilité d’innover en ayant connaissance des delta possibles. Ce n’est pas parce que Amazon fonctionne bien que vous devez reprendre à l’identique la mise en page de votre boutique e-commerce. Sachez prendre des risques (contrôlés évidemment). C’est aussi ce que je retiens de cette analyse, les 20% prouvent qu’il est possible d’avoir des éléments importants en dessous du fold. Ne pas négliger le bas de votre page etc.

Je pense que certains ne seront pas d’accord avec mon dernier paragraphe, mais si vous ne faites que suivre des guidelines sans jamais sortir des lignes, vous risquez aussi de ne jamais innover etc. Et vous connaissez pour ceux qui me lisent ma position. Respecter des règles d’ergonomie en ayant aussi la volonté d’innover.

Voice Gesture from didier.brun on Vimeo.

Oui enfin j’ai trouvé la démo de Didier bien plus convaincante. En effet, la version d’Andreas nécessitait souvent de redire les choses (est-ce mon french accent qui posait problème ? maybe). En tout cas, je trouve ce genre de démarche utile pour pousser d’autres concepts de navigation, mais surtout d’accessibilité. Et oui qui dit accessible ne dit pas forcément un texte. Il y a différents critères d’accessibilité. Une personne paralysée peut bien évidemment disposer du flash player ! Je trouve qu’on raisonne souvent en se disant accessibilité = synthèse vocale. (ça en fait partie).

Imaginez le type d’application que l’on pourrait faire dans des hôpitaux, pour les personnes âgées etc. J’espère qu’il mettra une démo rapidement pour le tester et vérifier si la reconnaissance fonctionne mieux qu’avec la démo d’Andreas. Autre point intéressant, Didier mettra à disposition son API pour pouvoir l’utiliser. Donc intéressant à plus d’un titre de suivre l’avancement de son projet !

Je vous laisse aussi admirer la petite blague dans la vidéo avec Coca-Cola . Ah et vous pouvez me suivre sur Twitter

Si j’ai vraiment eu du mal au début à comprendre et à contrôler correctement la navigation, je me suis pris au jeu et j’ai réussi à me ballader (non sans quelques problèmes) dans son site grâce à mes mains et ma voix. J’ai vraiment été agréablement surpris et si ce site reste expérimental car le contrôle des mouvements de la caméra dans flash n’est pas encore idéal, les mouvements restent simples à reproduire.

Son slogan résume bien sa démarche « Because clicking is so 90s!« .

Je suis pourtant un inconditionnel des problèmatiques d’accessibilités des contenus et de réflexions sur l’ergonomie des sites web. Mais je reste aussi toujours très intéressé dans le fait de repousser la manière d’appréhender le web, renouveler les usages. Au milieu de sites qui se ressemblent tous de plus en plus, ce type de navigation expérimentale est agréable à tester (on a une approche très ludique avec la vidéo d’aide, les repères d’aides qui délimitent la zone utile, la boule qui suit nos mouvements).

Cela me rappelle la très bonne initiative http://www.dontclick.it/

D’ailleurs sa démarche pourrait se rapprocher d’une démarche accessibilité. Beaucoup de personnes ont du mal à contrôler la souris chez les seniors. L’usage de la caméra avec un repère m’indiquant où on est mon curseur, l’utilisation de la voix pour faire certaines actions, tout cela m’invite à surfer avec une autre approche, délicate parfois car perfectible sur la technique, mais la démarche si techniquement calée est simple.  Évidemment, impossible à mettre en place sur un site de contenu comme www.lemonde.fr.

Et vous, vous en pensez quoi ?

On adapte le contenu à l’outil et on joue à concevoir des intéractions, boutons, organisation de l’information sur mobile avec le touch’. Une bonne source d’inspiration sur les tendances de conception qui sont à leurs balbutiements sur ce périphérique (oui je sais, il n’y a pas que l’iPhone sur mobile, mais c’est celui qui offre le plus de possibilité aujourd’hui (même sans flash) niveau intéraction.)

CSS iPhone

Et puis malgré tous les défauts de l’iPhone (autonomie, non lecture du flash), Apple a réussi un coup de maître en forçant les concepteurs d’interfaces pour mobiles à revoir leur copie et prouver aux opérateurs qu’il y a avec un outil bien pensé, une réelle niche pour un marché mobile qui se cherche depuis plusieurs années. Evidemment, l’audience n’est pas encore grand public et est réservée à un public geek/CSP supérieur mais petit à petit, j’espère voir ce web mobile accessible au plus grand nombre (et en dehors des grandes métropoles)

J’ai hâte d’avoir l’occasion prochainement de concevoir et proposer un dispositif pour l’un de nos clients sur ce média (encore trop frileux comme d’habitude). Là ou le web n’offre plus vraiment d’innovation, le marché iPhone offre des opportunités de proposer des choses inédites, de nouvelles expériences utilisateur (oui, c’est encore possible sur le web mais tellement saturé…)

Quand je vois ces prototypes papiers, ça me fait simplement saliver !

Vu du coté du blog de l’application Things

Sur le même thème, Toyota a conçu un site Toyota IQ spécial Iphone assez bien léché graphiquement. Ci-dessous une vidéo démo

Et vous, avez-vous déjà déployé un dispositif spécial iPhone (plus globalement web mobile sur smartphones style BlackBerry) ?

Concevez-vous un dispositif à double entrée (flash via un ordinateur, html optimisé iPhone depuis une consultation web mobile) via la détection de l’user agent ?

Et bien Allocine, le portail ciné/télé a depuis quelques jours (ou alors je ne l’avais jamais remarqué avant !) mis en place une telle barre. A la différence de Facebook, je ne vois pas de véritable bénéfice.

Le défilement des derniers articles de différentes catégories ? Je l’ai déjà sur toutes les home des rubriques. L’accès à la radio ? Pertinent s’il s’agit de faire découvrir cette nouvelle fonctionnalité.

Mais on reste tout de même sur sa faim. Ajouter un élément statique placé à un endroit stratégique devrait plutôt être envisagé comme une véritable boîtes à outils, mais c’est aussi un nouvel espace publicitaire pour des pushs textuels. Je me demande qui le premier osera placer un encart pub, mais la tentation est grande.

Vous connaissez d’autres sites avec ce principe ? Vous en pensez quoi ?

Le principe

1. vous créez un nouveau projet
2. vous lancez une nouvelle session d’enregistrement (comme un simple logiciel de capture vidéos écrans)
3. le logiciel enregistre la vidéo de ce qui se passe à l’écran (avec mise en évidence des clics), le comportement du testeur ainsi que le son (« Mais elle est où la navigation ?!!! », « Wahou »)
4. Le tout exportable en vidéo

Son prix : 50$ seulement !

Le seul point négatif : le logiciel est uniquement disponible pour Mac OS, si vous devez effectuer des tests avec des personnes qui ne sont pas habituées au système d’exploitation de Cupertino, les résultats pourront être biaisés.
En tout cas, si un petit malin souhaite se faire de l’argent, qu’il entre en contact avec Clearleft (la société éditrice de cette très bonne initiative) pour porter l’application sous Windows. Je suis prêt à investir dedans !

Découvert sur le blog de Ann Krause dédié à l’usabilité

Si cette fonctionnalité est vraiment bénéfique en terme de rapidité d’accès à l’information (on se demande quand Google va l’implémenter par défaut), il peut être intéressant de dissocier les types de résultats.

C’est ce que propose Alatest sur son site. Ils distinguent les résultats Produits et Catégories (je n’ai pas vraiment compris l’intérêt du bloc Sources)

Typiquement une micro fonctionnalité qui réjouira les plus experts. C’est même plus qu’une micro fonctionnalité car sur la homepage, vous n’avez pas accès aux rubriques (sauf via une liste dans le footer). On laisse donc l’internaute saisir sa recherche.  Comme la recherche est actualisée en live, s’il n’y a aucune correspondance, on peut facilement supprimer la dernière lettre qui ne renvoie aucun résultat.

Si pour monsieur et madame Michu, cette approche risque de ne pas fonctionner (vont-ils bien voir, comprendre les flèches ?), les personnes plus habituées au web vont immédiatement comprendre qu’il y a une action à faire. Puisque la cible du site s’adresse avant tout à des jeunes femmes dynamiques et branchées, un tel emploi est tout à fait justifié selon moi.

L’internaute averti que je suis préfère avoir une solution de scroll intérieur que devoir gérer 4 scrolls verticaux pour afficher tous les blocs. Ce système de slideshow est astucieux dans le sens où on peut facilement envisager la mise en avant d’un produit, publicité pour chaque écran.

Et vous, qu’en pensez-vous ?