Halte aux sites à défilement horizontal

Je ne sais pas pour vous, mais j’ai comme l’impression que les sites à défilement horizontal sont à la mode en ce moment : 40 of the Best Horizontal Scrolling Websites et 38 Websites Using Horizontal Scrolling. Déjà l’année dernière le précurseur Smashing Magazing avait soulevé la question : Will Horizontal Layouts Return?.

Bon, autant le dire tout de suite sans faire durer le suspens : le défilement horizontal est une aberration d’un point de vue ergonomique, mais elle peut s’avérer utile d’un point de vue artistique. Autrement dit : ça peut aider si vous éditez un site expérimental à vocation artistique.

Illustration avec le portfolio du designer suédois Eric Johansson :

Le site de Eric Johansson
Le site de Eric Johansson

Ici le défilement se fait à l’aide d’une… barre de défilement horizontale (vous vous en doutiez) et le rendu graphique est plutôt sympa. Ceci n’est pas gênant dans la mesure où il n’y a que très peu de contenu sur ce site et que l’auteur souhaite se démarquer.

Autre exemple expérimental avec Google Fast Flip :

Le site de Google Fast Flip
Le site de Google Fast Flip

J’imagine que l’idée était de reproduire la dynamique des lectures des journaux avec un défilement latérale des pages… c’est raté. Je préfère encore largement les applications de catalogues électroniques (avec les pages qui tournent) comme FluidBook.

Autre exemple plus embêtant avec le site de Lomotek Polymers :

Le site de Lomotek Polymers
Le site de Lomotek Polymers

Là c’est tout de suite beaucoup plus dommageable parce qu’il y a du contenu et parce que l’encrage de la barre de navigation par dessus le contenu qui défile provoque une drôle de sensation. Bref, rien de tel pour déstabiliser vos lecteurs…

Terminons avec le pire exemple, celui de Gucci :

Le site de Gucci
Le site de Gucci

Là nous sommes dans le grand n’importe https://simpleweb.fr/files/2009/11/17/quoi avec une navigation très compliquée à manipuler et à repérer (il faut cliquer sur les petites flèches). non seulement cela perturbe l’internaute mais en plus ça n’apporte rien à l’image de marque ou au positionnement des produits (les marques de luxe doivent-elles se démarquer à ce point ?).

Au final, je ne voit qu’un intérêt artistique à ce système de défilement, et encore. Le meilleur exemple que je puisse vous donner est celui du site MoCo Loco où il est possible de basculer d’un défilement horizontal à vertical et qui propose une navigation par clavier :

Le site de MoCo Loco
Le site de MoCo Loco

J’espère vous avoir convaincu de ne pas utiliser cette technique.

22 commentaires pour “Halte aux sites à défilement horizontal”

  1. Posté par Jimmy a dit : le

    On dirait que le défilement horizontal fait son petit come-back tous les 3/4 ans, le temps pour lui de se faire oublier et de revenir comme un truc expérimental un peu tendance.

    (PS: petite coquille au début « les sites à défilement _vertical_ sont à la mode » => plutôt horizontal non ?)

  2. Posté par fredRabian a dit : le

    Le défilement horizontal est, en effet, apparenté à un courant cyclique. Le premier site que j’ai vu date quand même de 2000, c’était le portfolio d’une agence d’édition.
    Moi je ne suis pas contre à partir du moment ou l’ergonomie est didactique.

  3. Posté par Nico a dit : le

    Cela ne viendrait-il pas de la navigation sur Iphone ?

  4. Posté par Frédéric CAVAZZA a dit : le

    @ Nico > La navigation sur iPhone est horizontale ? Certes il y a des transitions de gauche à droite (et inversement) mais la lecture du contenu se fait de haut en bas, non ?

    /Fred

  5. Posté par Maxime a dit : le

    Dans les exemples donnés ici, effectivement la navigation horizontale semble plus handicapante qu’autre chose.
    Il y a par contre certaines situations ou elle devient pertinente. Que pensez vous de la recherche d’images dans « cooliris »? leur navigation horizontale est pour le coup plutôt agréable et utile non?

  6. Posté par Emmanuel a dit : le

    Même si c’est sûrement mieux réalisé, on s’est inspiré de Panic (http://www.panic.com/coda/) pour réaliser notre slider horizontal.
    Lorsqu’il y a assez peu de contenu, ce système n’est à mon avis pas rédhibitoire. Voilà ce qu’on en a fait :
    http://www.jaimeattendre.com/entreprises/apple/
    Qu’en pensez-vous ?

  7. Posté par Frédéric CAVAZZA a dit : le

    @ Maxime > Oui c’est plus agréable / performant que du page à page. Mais là nous parlons de parcourir une base d’images.

    /Fred

  8. Posté par John a dit : le

    Un bel exemple français : http://www.radiofrancefaitlemur.fr/ !!

  9. Posté par Bozy a dit : le

    Article aberrant!
    Quel rapport avec l’ergonomie?
    Le Net créatif est mort en 1999..

  10. Posté par Bozy a dit : le

    Arrêtez de confondre ergonomie ET habitudes..
    C’est le même problème avec Photoshop et tous les autres!

  11. Posté par arizona a dit : le

    Je n’ai pas compris la demonstration…

    quelques remarques :
    nous sommes habitués aux sites verticaux car il est plus facile de réaliser un site figé dans sa largeur et de l’allonger dans sa hauteur… c’est ce qui c’est passé au début de web si bien que les souris se sont adaptées en adoptant une mollette de deroulement.
    Le défilement vertical est aujoud’hui plus ergonomique(nous semble-t-il) simplement car nos outils de pointage sont adaptés à ceux-là.

    L’horizontalité est plus adaptée lorsqu’il s’agit de représenter la linéarité du temps (timeline) ou bien de reproduire le défilement page par page d’un magazine par exemple.

    les écrans adoptent de plus en plus un format 16/9 plutot que 4/3… et la largeur prend donc plus d’importance, c’est normale que les designers ressentent le besoin de l’utiliser.
    Les navigateurs avec leur barre de menus, denavigation, d’etat on tendance à reduire la hauteur disponible rééllement visible… la-aussi, la largeur donne plus de liberté.

    l’arrivée des écrans tactile rendra très intuitif un défilement droite gauche à la main plutot que haut/bas avec un ascenseur ou une mollette de défilement.

  12. Posté par Rémy a dit : le

    D’accord avec arizona.
    J’aimerai une explication un peu plus complète sur l’aberration ergonomique.
    Autant je suis d’accord pour ce qui est du constat que comme ce n’est pas habituel, ça peut être perturbant (comme ne pas mettre le logo en haut a gauche, au d’autres conventions qui se sont imposés, par habitude, mais dans ce cas, ça freine quand meme pas mal l’innovation) … autant je pense que cette aberration ergonomique est très lié aux outils de pointage.
    la plupart des souris permettent un scroll vertical grâce à la molette, mais avec l’arrivé de souris tel que celle d’apple qui permet un scroll horizontal (quand meme des références en terme d’ergonomie non ?) et les interfaces tactile de plus en plus présente, il est a mon avis un peu prématuré de dire que ces interface n’ont pas d’avenir, même si elle réapparaissent cycliquement,souvent pour des sites qui veulent se démarquer… mais pourquoi pas si c’est bien amené (critiquer la petitesse des fleches de Gucci est justifié, mais jeter le principe a cause d’une mauvaise mise en forme est rapide, non ?)

    Personnellement, puisqu’on parle de scroll, je suis bien plus énervé après ceux qui réalisent des interfaces en flash avec des scroll qui ne sont pas activés par la molette de la souris que par le principe des sites horizontaux, qui quand ils sont bien réalisés et conforme à leur publics sont parfois sont des perles.
    par exemple celui qui m’a bien plu dernièrement : http://sursly.com/

    Bref un article un peu catégorique quoi, on aurait préféré un peu plus de nuance je pense ?

  13. Posté par Frédéric CAVAZZA a dit : le

    @ Bozy > Commentaire aberrant! Quel rapport avec Photoshop ?

    @ arizona > Sans trop rentrer dans les détails il me semble que la navigation horizontale n’existe pas notre monde « physique », si ce n’est avec la Torah et quelques parchemins bouddhistes. Le page à page de nos magazines se fait en faisant basculer les pages (qui sont agrafées au centre et non reliées comme une farandole).

    Par contre il y a une réflexion à mener avec l’élargissement progressif des écrans pour faire évoluer les mises en page, mais ça n’a pas grand chose à voir avec le sens de défilement.

    @ Rémi > Les utilisateurs Mac ne représentent que 5% du marché et ceux qui sont équipés de la Magic Mouse à peine 0,001 %, ça fait maigre pour justifier la navigation horizontale.

    Par contre je suis bien d’accord avec toi sur la molette qui est neutralisée dans Flash (il me semble qu’il existe pourtant de nombreuses bibliothèques gratos pour implémenter ça).

    /Fred

  14. Posté par Etienne a dit : le

    Faire autant de fautes d’orthographe, c’est « ambêtant ».

  15. Posté par Frédéric CAVAZZA a dit : le

    @ Étienne > Oui je sais, je fais des fautes. C’est le genre de choses qui arrive quand on rédige sur 7 blogs en même temps. Mais comme le dit le proverbe : « Il n’y a ceux qui ne font pas qui ne font jamais d’erreurs ».

    /Fred

  16. Posté par Emmanuel a dit : le

    Les souris classiques Apple (mighty) aussi permettent un défilement horizontal. Tellement pratique sous Excel !!
    Le taux de pénétration reste très faible quand même, on est d’accord que ça change pas grand chose.

  17. Posté par L’actualité de mes autres blogs (novembre 2009) > FredCavazza.net a dit : le

    […] Halte aux sites à défilement horizontal ; […]

  18. Posté par Beershop a dit : le

    Il y a un problème de fond avec les blogs : leurs auteurs n’acceptent pas la critique et se vexent quand on est pas d’accord avec eux. Vous allez me dire « non non, pas du tout, la critique est la bienvenue, etc. » mais dans les faits ce n’est pas le cas. Ils réagissent en tant que personne alors qu’ils se placent sur un terrain professionnel.
    De plus les commentaires se doivent d’être élogieux et si un visiteur poste une critique négative il sera « descendu » par les autres (voir accusé d’être un « troll »). Cette tendance à faire de l’auteur du blog un « gourou » conduit à long terme à une perte de crédibilité du blog (et de son auteur).

    Pour en revenir à ce post sur la navigation horizontale, il s’agit d’un avis personnel (j’aime assez le « J’espère vous avoir convaincu de ne pas utiliser cette technique » !)camouflé en « analyse »…

    J’espère que les conseils que vous vendez à vos client m Cavazza sont un peu plus solide car chez nous on vous renverrait votre facture…
    Bonne journée

  19. Posté par LittleMowgli a dit : le

    Sans rentrer dans les polémiques qui font surface à la lecture de cet article, je dirais que les différentes approches sont cohérentes et complémentaires.

    Certes, on pourra toujours trouver les mauvais élèves pour qui l’ergonomie est une chose bizarre qui fait gonfler leur devis et dont ils veulent allègrement se passer (et ceux, malheureusement, pour accepter de développer de tels sites). Cependant, je ne ne suis pas foncièrement d’accord avec la défense bec et ongles du modèle vertical d’un site web, et la verte critique des modèles horizontaux.

    @Fred : les exemples que tu donnes, et leurs annotations sont justes, certes, mais ils viennent surtout donner de l’eau à ton moulin. Il existe de nombreux sites qui utilisent le modèle horizontal à bon escient, tout en étant esthétiques, ergonomiques, et bien codés. De fait, je rejoins l’ensemble de mes confrères pour dire que sur ce coup, tu as manqué d’un peu souplesse et d’analyse.

    Les experts en utilisabilité n’avaient-il pas prédit la mort d’un certain nombre d’habitudes qui pourtant subsistent encore (comme la newsletter, par exemple)? Jakob Nielsen, pourtant mondialement reconnu, n’a-t-il jamais commis d’erreur en projetant trop en avant dans le temps des études qui sont purement statistiques et donc temporelles ? (une bière pour celui qui trouvera les 2 grosses erreurs de prédiction qu’il ait commises ces 10 dernières années ^^)

    La limite de l’utilisabilité (ou ergonomie, les termes sont relativement proches finalement) se situe dans l’habitude que les utilisateurs prennent sur le web. Nielsen a estimé que le champ de recherche devait obligatoirement se trouver en haut à droite, parce que ses études ont prouvé que les gens le cherchaient à cet endroit. Si demain, la planète entière le commencerait à le chercher en haut à gauche, Nielsen dirait que c’est désormais la place où le champ de recherche devrait se trouver.

    La limite de l’utilisabilité est donc la temporalité de sa statistique.

    Du fait, je rejoins @Bozy, @Arizona, et @Rémi : la largeur des écrans, l’apparition des écrans tactiles et l’évolution de l’ensemble de la profession vers ce genre de technique et de pratique est en train de changer la face de la conception web, et on ne peut le nier.. de là à condamner…

    Si l’on suit ton raisonnement logique de ton article, Apple, par exemple, n’aurait jamais dû permettre la bascule en mode horizontal pour l’écriture des texto, et cela n’aurait jamais dû marcher : les téléphones ont toujours été verticaux, et avant l’iPhone l’ensemble de la population écrivait ses textos avec un téléphone en mode…vertical.

    Les temps et les modes changent, nos métiers sont très jeunes (15 ans tout au plus) : on ne peut que relever le phénomène, et tenter d’en apprendre plus ; nous n’avons pas assez de recul pour faire de telles prévisions, dans un monde où les langages de programmation et les modes de conception graphiques évoluent sans arrêt.

    Pour recentrer, et terminer, je suis d’accord avec les exemples que tu donnes, puisqu’il ne faut pas oublier qu’un site web est là pour répondre à un besoin marketing. Du fait, faire une timeline pour des sacs à mains n’est pas forcément de bon aloi. Mais une timelime est une projection : et la communication visuelle a quelque fois besoin de celle-ci…

  20. Posté par Halcyon a dit : le

    La navigation horizontale peut être très utile pour faire comprendre une idée ou se démarquer, cependant elle doit toujours être accompagnée d’un index de navigation.

    Je constate que je mets trop de temps à trouver le fonctionnement d’une navigation horizontale, un index permet aux utilisateurs de très facilement s’y retrouver.

    J’ai également vu sur le site de Justine Henin (http://www.justine-henin.be/) un tutoriel de navigation dans l’album, l’utilisateur est tout de suite informé du comportement à adopter.

    Cependant ils n’ont pas joint un index ce qui ne permets pas de savoir ou ca commence et ou sa ce termine, il est donc possible qu’un visiteur ne vois jamais le bout d’une galerie.