Designer des pages web avec ou sans barre de défilement (scrollbar)?

0Gaetano • 2nd août 2007 • Usability & Ergonomie

Lors du design d’écrans web, je suis fréquemment confronté à la question de la barre de défilement. Faut-il chercher à tout prix à « faire rentrer » un design dans la page pour éviter la barre défilement (« scrollbar » en anglais)?

Je répond en général non. Selon le contexte. Il est clair qu’un incitant à l’action principal (« call-to-action ») doit être dans la partie haute de la page. Un bouton « ajout au panier d’achat » par exemple doit être visible sans scroller. Ma règle est en général la suivante: s’il n’y a qu’un incitant à l’action sur la page, alors oui, il doit être visible sans « scroller ».

Mais pour un écran de recherche avancée par exemple? Faut-il chercher à tout condenser dans le haut de page? Non, parce qu’on a plus de chances de créer du bruit et de diminuer la lisibilité de la page.

La question de la barre de défilement est de moins en moins cruciale. Les gens scrollent aujourd’hui de manière naturelle. Comme Jean-Marc l’a déjà noté. Par contre, ce qui est critique, c’est de graphiquement suggérer qu’il y a quelque chose dans la partie cachée de la page.

Explication par l’illustration

Les schémas valent mieux que les longs discours. Dans les deux illustrations ci-dessous, il y a une différence fondamentale:

figure 1: l’élément central est contenu dans une zone

figure 2: l’élément central n’est pas contenu

En admettant que sous le rectangle il y ait un texte ou des images, il y a plus de chance que le visiteur utilise la barre de défilement dans la figure 1 que dans la figure 2.

Pourquoi? Parce que dans la figure 1 la zone grise qui contient l’élément central donne le sentiment qu’elle continue dans la partie cachée. Il y a une continuité qui est visuellement brisée et qui incite l’utilisateur à faire défiler la page. Ce qui n’est pas le cas dans la figure 2: l’élément central flotte, seul. Rien ne suggère que la page continue.