Scroll, baby, scroll ?

Les pages longues, voire très longues (dites "infinies") se sont popularisées avec la diffusion des écrans tactiles. Quelle est leur utilité réelle, quelles sont leurs limites ? Comment les mettre en oeuvre à bon escient ?

Le scroll « infini » - réponse naturelle à toutes nos questions de pagination ? Cela fait du bien - parfois - de prendre son déjeuner en scrollant à travers 500pix, pinterest, linkedin ou autres facebook*. Bien sûr, il faudra nettoyer la tablette après …car justement, c’est ce côté « peinture aux doigts », di- et ré-gressif, qui détend. Pas de décision à prendre, pas de pagination à viser, pas de rupture de page à franchir … il suffit d’ouvrir le robinet à images et d’entretenir le flux en « swipant ».

Les pages longues, voire très longues (dites « infinies ») se sont popularisées avec la diffusion des écrans tactiles. En effet, il n’est pas toujours aisé de viser de (petits) liens de navigation - qui, par ailleurs, prendraient trop de place s’ils étaient plus grands. Le « swipe » s’est alors répandu comme le geste « intuitif » pour afficher des contenus (voir aussi le bébé qui considère le magazine papier comme une tablette non opérationnelle - 2011)

Un succès mitigé. On pourrait être tenté de voir dans le scroll « infini » la solution universelle à toutes les questions de pagination. Et pourtant, il n’est apparemment pas destiné à s’universaliser - au moins sa progression s’est nettement ralentie : Peach, le dernier né des réseaux sociaux publics ne l’utilise pas, les grands du commerce en ligne et Google ne l’ont toujours pas adopté. 

En ce qui concerne Google, on imagine que la certitude de figurer sur la première page des résultats serait moins monnayable si la transition vers les autres résultats était plus souple - le moteur de recherche pourrait alors n’y voir aucun intérêt.

Pour l’e-commerce, le choix du nombre d’éléments par page avec l’option « tout voir » semble rester la norme. En effet, quand on doit « swiper » à travers des pages produit (donc couvertes d’une multitude de liens textes et images) on risque toujours d’ouvrir une fiche produit par maladresse. Si l’option « tout voir » est donc attractive sur ordinateur, paradoxalement, elle peut l’être moins sur écran tactile.

1er cas d’application de la page très longue : profiter des « vertus » du rouleau d’écriture. Sans système de navigation accessible en permanence, la page très longue ressemble au rouleau d’écriture. Et pourtant, celui-ci lui a été frappé d’obsolescence face au livre qui permet un accès sélectif aux contenus (c’est-à-dire sans avoir à parcourir matériellement tout ce qui précède - cf également le microfilm versus la microfiche).

Néanmoins, pour certains usages, c’est exactement cette procédure linéaire qui est recherchée : dans une logique « narrative », le rouleau d’écriture contraint l’utilisateur à suivre le fil, de manière séquentielle, c’est-à-dire en commençant par le début et en allant (si tout va bien) jusqu’à la fin. En voici un excellent exemple : http://www.dangersoffracking.com **. On y remarquera que le design parallaxe peut donner un sens supplémentaire à ce type de format. (cf. entre autres Creativeblog)

2ème cas d’application de la page très longue : présenter un contenu homogène à intérêt décroissant. Revenons aux exemples cités en introduction de cet article : il s’agit à chaque fois d’une accumulation de contenus au format similaire, que l’utilisateur parcourt jusqu’à ce qu’il en ait « assez ». Chaque élément subséquent est jugé moins intéressant que le précédent, car moins récent ou moins pertinent par rapport aux critères de recherche. Puis qu’il s’agit d’une graduation, et non de critères tranchés, la continuité du scroll avec son absence de rupture convient particulièrement à ce type de contenus. Il va de soi qu’un tel dispositif nécessite des outils de recherche et de filtrage performants.

3ème cas d’application de la page très longue : gagner en temps de chargement. Certaines pages sont très longues d’un point de vue technique seulement : l’utilisateur y trouve un système de navigation arborescent pour naviguer à travers les différents paragraphes (souvent disposés sous forme d’onglets), comme s’il s’agissait de différentes pages. Disposer tous les contenus « à la queue-leu-leu » sur une page est alors un choix purement technique. Pour l’utilisateur (qui n’y voit souvent que « du feu »), sauter rapidement à un nouveau paragraphe (déjà chargé) au lieu d’afficher une nouvelle page, c’est du temps de navigation gagné. En outre, il peut ainsi soit se servir du système de navigation, soit au contraire consulter (et imprimer) la totalité du contenu de manière linéaire du haut vers le bas.

1ère exigence envers la page très longue : donner des repères. Il est évident que l’utilisateur se repère plus difficilement dans une page très longue ou au scroll infini. En effet, il ne peut plus compter sur des repères spatiaux (exemple : position de l’indicateur de scroll) pour savoir où il en est par rapport à la totalité des éléments. De même, la mémoire visuelle ne permet plus de retrouver l’endroit auquel on voudrait revenir.

Si l’objectif d’une page très longue est de mettre de l’information à la disposition de l’utilisateur (et non de l’immerger dans une narration, ou un flux de contenus), le manque de repères doit être compensé par des dispositifs particuliers. Ceux-ci peuvent être par exemple

• l’indication du volume total d’éléments disponibles, la numérotation des éléments dans la liste
• la possibilité de revenir au même endroit de la page après avoir consulté d’autres pages
• des outils de consultation « sticky » (exemples : recherche, tri, filtrage)
• un footer « sticky » en bas de l’écran (si nécessité d’un footer)

2ème exigence envers la page très longue : compenser l’absence de URLs multiples. Par ailleurs, certaines fonctionnalités sont étroitement liées à la notion de page et son URL. Pour maintenir le bénéfice de ces fonctionnalités, dans le cas de pages très longues ou a scroll infini,  les aménagements suivants s’imposent :

• la possibilité de sauter en avant (= vers le bas) très rapidement
• un outil pour partager l’URL d’éléments particuliers dans la page
• la prise en compte de contraintes d’accessibilité
• le respect de bonnes pratiques pour ne pas être pénalisé en SEO - cf. googlewebmastercentral
• une gestion de la mémoire bien maîtrisée pour ne pas ralentir l’affichage d’autres pages