L'attitude a-t-elle changé au cours des dix dernières années sur le défilement horizontal sur les sites Web?
Le gourou de l'utilisabilité souvent cité, Jakob Nielsen, a écrit l'article " Top Ten Web-Design Mistakes in 2002 " et placé sur le no 3 Horizontal Scrolling comme une erreur de conception Web avec la motivation:
Les utilisateurs détestent faire défiler de gauche à droite. Le défilement vertical semble correct, peut-être parce qu'il est beaucoup plus courant.
Les pages Web qui nécessitent un défilement horizontal dans des fenêtres de taille standard, telles que 800 x 600 pixels, sont particulièrement gênantes. Pour une raison quelconque, de nombreux sites Web semblent être optimisés pour les fenêtres de navigateur de 805 pixels de large, même si cette résolution est assez rare et que les cinq pixels supplémentaires offrent peu par rapport à la gêne du défilement horizontal (et à l'espace consommé par la barre de défilement horizontale) .
Même si la taille d'écran mentionnée et la largeur de page Web préférée sont une rétrospective historique et ne sont pas valables sur la largeur d'écran ou la largeur du site Web d'aujourd'hui, l'essence de celle-ci pourrait toujours être valide. J'ai élargi les sites Web (SharePoint) à plus de 1 900 pixels et, par conséquent, le site Web défile horizontalement. Ça m'ennuie toujours, mais je me suis déjà trompé.
L'autre vue du défilement horizontal serait l'article de Web Designer Ledgers " 40 des meilleurs sites Web à défilement horizontal " où ils prennent discuter des problèmes possibles d'utilisation comme ceci:
Mais qu'en est-il de l'utilisabilité?
Avouons-le. La convivialité est un élément extrêmement important de la conception Web et les sites Web horizontaux ne sont pas encore très conviviaux. Cependant, l'utilisabilité n'est pas la partie la plus importante de l'équation. Ceux qui élèvent la convivialité avant tout minimisent souvent la partie "conception" de la conception Web. Oui, vous pouvez concevoir un site Web très stylisé et utilisable, mais où est la pensée futuriste et imaginative dans un rectangle vertical? L'avenir est un rectangle horizontal. N'oublions pas qu'il fut un temps sur Internet où le JPEG n'était pas le bienvenu dans la conception web, car il entraînait des temps de chargement plus lents. Technologie avancée, concepteurs créés et utilisateurs adaptés. Un jour, la même chose se produira avec les sites Web horizontaux.
Mis à part la convivialité, les sites Web horizontaux sont là pour rester. Voici quelques-uns des sites horizontaux les plus inspirants et les plus innovants.
Nous voici donc de nouveau au milieu de l'histoire et des conventions qui nous disent de ne pas faire défiler horizontalement - et de l'avenir où le défilement horizontal est là, que cela nous plaise ou non. Suis-je juste un vieux pet qui ne rattrape pas les tendances? Ou l'attitude a-t-elle changé au cours des dix dernières années sur le défilement horizontal sur les sites Web?
À mon avis, le défilement horizontal en tant que tel est encore moins accepté aujourd'hui.
Avec la réactivité en hausse ( RWD & A List Apart article from 201 ), les pages avec un défilement horizontal régulier semblent avoir "designs imparfaits" qui force le navigateur à afficher des barres de défilement horizontales. C'est encore moins acceptable comme il y a 5 à 10 ans.
En plus de cela, le défilement horizontal semble encore plus déplacé en particulier car la communauté de conception Web a adopté des vues selon lesquelles le défilement horizontal offre une mauvaise expérience utilisateur. L'utiliser aujourd'hui semble comme un concepteur va intentionnellement à l'encontre de la convention, comparable à l'utilisation de technologies Web comme iframes ou framesets qui, à leur propre égard, ont "mûri" pour devenir un non-non majeur.
Cependant, il y a aussi des développements qui rafraîchissent l'approche du défilement horizontal. Avec RIA ayant gagné en importance au cours des 5 à 10 dernières années, il existe des types de sites Web qui fonctionnent davantage comme des animations interactives et peuvent donc défier certains des anciens stigmates en ce qui concerne le défilement horizontal. Ce qui est important à noter avec ceux-ci, c'est que le défilement horizontal est rarement utilisé "tel quel" par la convention du navigateur, mais une sorte d'effet ou de navigation d'animation y est associée. (Voir par exemple des exemples de défilement de parallaxe , où l'effet d'animation visuelle a justifié de ramener le défilement horizontal dans le cadre de une expérience utilisateur bien conçue.)
L'autre exemple de "défilement" horizontal, si vous voulez, concerne les derniers développements dans la conception d'interfaces utilisateur mobiles, où les systèmes d'exploitation et les applications ont repris le défilement horizontal entre des vues différentes pour exploiter l'espace d'écran limité. Le side swipe car le modèle d'interaction avec l'utilisateur a ramené le défilement horizontal, en quelque sorte.
Dans l'ensemble, je pense que le défilement horizontal a eu une portée limitée en s'adaptant aux contextes d'actualité et aux scénarios d'utilisation. Le défilement horizontal du navigateur ordinaire souffre de la même problématique qu'il a toujours fait: les souris standard ne comportent encore généralement qu'une molette de défilement verticale. Parallèlement au fait que les utilisateurs lisent de longues pages Web verticalement, il n'y a que des scénarios très spécifiques qui utilisent efficacement le défilement horizontal et offrent une expérience utilisateur positive.
Cela se résume à l'utilisateur, à la tâche et à l'environnement. Dans le passé, lorsque le défilement horizontal était une "mauvaise pratique", les conditions étaient les suivantes:
Environnement - Un navigateur sur un PC ou un ordinateur portable. Défilement via un trackpad ou une souris.
C'est vraiment gênant de défiler horizontalement avec une souris. Comme nous le savons tous.
Maintenant, cela change rapidement parce que l'environnement de "défilement" change rapidement:
- Les téléphones portables et tablettes avec écran tactile facilitent le balayage horizontal
- L'introduction de Windows 8 voit "l'ordinateur personnel" évoluer, nous voyons des moniteurs avec des capacités d'écran tactile.
L'utilisation de gestes tactiles pour faire défiler horizontalement n'est pas difficile, en fait, cela semble naturel. Nous assistons donc à un changement où les choses qui ont du sens pour défiler vers la gauche ou la droite le font réellement.
Un exemple est l'application Facebook: lorsque vous consultez votre fil d'actualité, vous faites défiler vers le bas, mais dans le fil d'actualité, il y a du contenu qui mérite plus d'espace. Ainsi, par exemple, si quelqu'un a téléchargé quatre images dans un album, vous pouvez faire défiler horizontalement dans le fil d'actualité pour voir les différentes images. Vous pouvez ensuite continuer le défilement vertical pour voir plus de flux d'actualités.
Un autre exemple est l'utilisation native du défilement horizontal dans les systèmes d'exploitation. Cela prend une grande importance dans le nouveau design "Metro" de Windows 8. Vous le voyez tous pour parcourir les photos sur iOS.
Un autre changement d'environnement est une avancée dans la capacité du navigateur. Maintenant, il est très facile de faire défiler une personne vers la gauche ou la droite avec Jquery, vous pouvez donc le faire en un clic plutôt qu'en utilisant la souris avec une barre de défilement horizontale redoutée. Un excellent exemple d'une grande organisation utilisant le défilement horizontal supplémentaire de cette manière (poussant clairement la fonctionnalité sur le marché des tablettes) est la page d'accueil de la BBC: www.bbc.co.uk
Aujourd'hui, les utilisateurs proviennent de presque tous les groupes démographiques, des tout-petits aux personnes âgées, des plus pauvres aux plus riches, des pays les moins développés aux plus développés. Cela dépend donc vraiment de votre marché principal: quelle est votre base d'utilisateurs? S'il s'agit généralement de personnes âgées sur les ordinateurs, le défilement horizontal va toujours à l'encontre de la convention habituelle pour les sites Web et il est difficile de se déplacer à droite avec une souris, donc ce ne serait pas approprié. Si tous vos utilisateurs sont dans la vingtaine utilisant une tablette, alors pourquoi ne pas inclure un défilement horizontal dans votre conception si cela permet des fonctionnalités supplémentaires au-dessus du pli?
Je pense que le consensus général est le suivant:
- Ne l'utilisez pas comme navigation principale à moins qu'un petit site (comme un portfolio)
- Utilisez-le dans le domaine de l'amélioration progressive pour améliorer l'interaction sur le site Web pour les personnes que vous connaissez utiliseront des écrans tactiles (comme l'exemple de l'application Facebook)
- Vérifiez: Qui sont vos utilisateurs, quels appareils utilisent-ils pour accéder à votre site? AVANT d'implémenter ce type de fonctionnalités.
Pour conclure, je pense qu'il est prudent de dire que pour les sites Web, tout défilement horizontal devrait être complémentaire au défilement vertical du site. C'est exactement ce que font les curseurs de la page d'accueil, glisser vers la droite ... ils masquent simplement la zone de bannière rectangulaire.
Je dirais que le défilement horizontal et ce n'est pas le problème.
Pour moi, la gêne liée au défilement vient du fait d'avoir à faire défiler horizontalement lorsque le contenu est organisé verticalement, ou d'avoir à faire défiler verticalement lorsque le contenu est organisé horizontalement.
Par exemple, une page de texte sur laquelle vous faites défiler vers le bas pour voir tout le contenu, cela vous oblige à faire également défiler vers la gauche et la droite, car cela ne garantit pas que les lignes de texte tiennent dans le port d'affichage. Ce serait gênant même si vous pouvez faire défiler suffisamment loin d'un côté pour pouvoir lire une colonne sans défiler, mais perdre ensuite la navigation et/ou d'autres parties de la page. De même avec par exemple une galerie de photos qui est organisée horizontalement, ce serait gênant si vous deviez faire défiler verticalement pour voir toute l'étendue de la photo.
Les attitudes ont changé principalement en raison de:
- Défilement horizontal sur tablette
- Capacité de la souris à faire défiler plus facilement grâce à un codage avancé
- Importance accrue des sites Web en chinois
ONE: Les comprimés ont brisé la barrière, donc cela ne semble plus étrange. Considérez les carrousels d'images qui sont présentés sur les sites Web ou tout type de curseur. L'utilisateur doit cliquer pour se déplacer vers la gauche ou la droite plutôt que le défilement, mais c'est un pont sur le Web et montre certainement la direction vers le défilement horizontal.
DEUX: Le problème devient un peu plus collant sur PC à cause de la souris, mais il existe des moyens de le coder pour que le défilement vertical défile horizontalement: http://css-tricks.com/snippets/jquery/horz- faites défiler avec la molette de la souris /
TROIS: Je pense que les attitudes pourraient également changer en raison du nouveau codage CSS (ish) qui permet aux langues basées sur Han (chinois) d'être codées verticalement au lieu horizontalement.
http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/ Si vous lisez de droite à gauche ou de gauche à droite vous aurez alors besoin de faire défiler vers le bas pour obtenir plus d'informations, mais les langues qui sont lues de haut en bas nécessitent un défilement horizontal. Je ne suis pas un expert des sites Web en chinois, mais je suppose que cela deviendra un facteur de plus en plus important à l'avenir.
L'examen des premiers sites de la liste des meilleurs sites horizontaux fait apparaître quelques modèles qui, je pense, aident à définir l'état de ce type de site.
http://album.alexflueras.ro/ a la disposition du contenu de manière horizontale, mais en faisant défiler vers le haut et vers le bas sur la souris, le contenu glisse de gauche à droite. Ce type de configuration ne prend pas de temps supplémentaire pour s'habituer et peut dans de nombreux cas fonctionner. Si l'utilisateur doit saisir manuellement la barre de défilement pour parcourir le contenu (ou utiliser des combinaisons de touches comme le défilement Maj), cela serait probablement beaucoup plus ennuyeux.
http://www.bartleboglehegarty.com/#/europe nécessite en fait de saisir le site pour se déplacer (ou d'utiliser la barre de défilement horizontale personnalisée en haut). Cela m'a pris du temps à comprendre et ce n'était pas une agréable surprise quand il a été réalisé, donc j'aurais du mal à dire que c'est un bon substitut à une navigation normale.
http://carrotcreative.com/#!/ et http://www.charliegentle.co.uk/ faites défiler le contenu de gauche à droite, mais ne le faites pas ' En fait, l'utilisateur ne doit pas effectuer de navigation spéciale pour l'accomplir. Cliquer sur les liens fait glisser le contenu vers l'intérieur et vers l'extérieur, ce qui, sans affecter la navigabilité, ne semble pas nuire. Bien qu'il puisse être difficile de les appeler "sites de défilement horizontal".
http://www.clholloway.co.za/ est le même que le premier site, ayant le contenu se déplacer horizontalement mais permettant le défilement veritcal pour gérer la navigation. Et il fonctionne.
Je pourrais continuer, mais il semble qu'il existe des moyens de ne pas en faire un problème d'utilisation, tant qu'il est géré correctement.
Pour ce que ça vaut, Windows 8 fait un travail agréable (pas parfait) de manipulation de la molette de défilement verticale pour faire défiler horizontalement sur le bureau. ce n'est pas aussi mauvais, mais là encore, il n'y a pas de vrai conten à l'écran, juste des icônes d'application.
Il existe également une différence entre horizontal défilement et horizontal paging. Avoir à faire défiler en continu ne fait pas une bonne interface utilisateur, qu'elle soit horizontale ou verticale. Je crois que le concept de défilement vertical est né parce que (au moins aux États-Unis) nous lisons du haut de la page vers le bas, donc déplacer naturellement le contenu que nous consultons actuellement vers le haut de la page pour continuer ce processus est venu à propos. Je peux voir au moins un site mentionné sur le lien le PO référencé des 40 principaux sites de défilement horizontal où la pagination est utilisée. Je pense que ce serait probablement mieux pour les sites horizontaux, car le défilement perturbera le processus naturel de déplacement des yeux vers le bas lors de la visualisation de gauche à droite, car ils devraient maintenant se déplacer vers le bas, de gauche à droite et plus = gauche tout en faisant défiler la page, si cela a du sens. Afin de faciliter les choses, l'utilisateur peut simplement faire défiler l'intégralité d'une page avant d'essayer d'afficher le reste du contenu, c'est ce que je ferais. Maintenant, nous faisons travailler plus dur l'utilisateur pour voir notre contenu, et ce n'est pas bon. Le concepteur peut implémenter la pagination appropriée horizontalement pour atténuer ce problème.