Les barres de défilement sont-elles mortes en 2020?

Question

J'ai récemment entendu un designer dire que les conceptions Web modernes n'utilisent pas de barres de défilement visuelles - ou du moins, elles ne sont visibles que lors du défilement. Je suis développeur front-end et je n'avais pas vraiment entendu ça. Y a-t-il une vérité à cela? Plus précisément, ma question est:

Pour une application web, lorsque le contenu peut défiler:

Devrait-il y avoir des barres de défilement visibles (et pourquoi)?
Ne devrait-il jamais y avoir de barres de défilement visibles (et pourquoi pas)?

colmcq · Answer

Oui, il devrait.

Les barres de défilement visibles sont une opportunité "cette page est défilable"

Sans indices visuels tels que celui-ci, la fonctionnalité pourrait être manquée.

sintax · Answer

Certaines lignes directrices de conception modernes excluent certainement les barres de défilement visibles en permanence, mais pas toutes. Par exemple, dans le Material Design guide , pour les menus, si un menu peut défiler, il devrait afficher une barre de défilement. Dans tous les cas, si votre contenu est défilable, il devrait être clair en le regardant qu'il permet le défilement.

C'est à un concepteur individuel ou à une directive de déterminer si cette possibilité est indiquée par une barre de défilement qui indique clairement combien vous pouvez faire défiler vers le bas (traditionnel), un lien "en savoir plus" ou une flèche pointant vers le bas de l'écran (comme sur de nombreuses pages d'accueil ou blogs d'applications modernes). ), ou un fondu à mesure que vous approchez du bord de la zone de contenu, ce qui implique que vous pouvez vous déplacer dans cette direction pour voir plus ou plus clairement, mais la capacité elle-même est le composant nécessaire. Ce serait une mauvaise conception de présenter un contenu qui peut défiler mais ne pas indiquer cette possibilité de défilement à l'utilisateur. Cela pourrait frustrer l'utilisateur ou lui faire manquer des informations importantes ou des appels à l'action.

MichaelS · Answer

En tant qu'utilisateur de souris, je déteste le contenu déroulant qui ne me donne pas une vue et un accès aux barres de défilement.

La barre de défilement est un contrôle. Cela me permet de naviguer rapidement sur de grandes pages sans comparaison avec le défilement des doigts, le défilement des roues, etc. Cela me donne également plus de précision pour la plupart des pages que ma molette de défilement.
La barre de défilement me donne des informations. Cela me permet de déterminer rapidement combien de temps il faudra pour lire le contenu de la page (en supposant une barre de défilement décente dont la poignée: le rapport de gouttière est égal à l'écran: le rapport de page) et me dit jusqu'où j'ai parcouru la page . Il me donne également un index pour déterminer où j'en suis sur la page si je veux faire défiler rapidement vers le haut et vers le bas.
La barre de défilement occupe une place insignifiante. En ce moment, mon écran est à 1920 x 1080 = 2,1 Mpx. La fenêtre Firefox avec cette page est à 1125 x 905 = 1,0 Mpx. La barre de défilement est de 16 x 816, occupant un total de 13 Kpx, soit 1,3% de mon écran. Mon moniteur est assez proche de moi parce que je l'utilise pour les jeux, j'ai donc tendance à garder ma fenêtre plus étroite que le moniteur, de sorte que la barre de défilement ne prend effectivement aucun espace.
Il y a des occasions où je ne sais même pas que le contenu peut défiler, même si j'ai tendance à essayer de faire défiler avec la molette sans même vérifier la barre, donc je doute que ce soit un énorme problème pour les pages Web. Pour les applications de bureau qui ne défilent généralement pas, ce serait un problème plus important.
Si vous voulez une barre de défilement masquable, elle devrait apparaître chaque fois que je fais défiler manuellement (via la molette de la souris, les touches du clavier, le trackpad, etc.), et chaque fois que je déplace ma souris vers le bord droit de l'écran.

Les appareils mobiles sont plus difficiles, car la barre de défilement occupe une si grande quantité d'espace, surtout si elle est assez grande pour être utilisée.

A. Je résout généralement le problème en passant à la vue de bureau (je n'ai pas encore vu un site Web dont la version mobile est aussi bonne, et encore mieux que la version de bureau, donc je prends par défaut la vue de bureau de toute façon). Ensuite, je fais un zoom arrière, un défilement vers le bas, puis un zoom avant. C'est plus rapide et plus précis que d'essayer de faire défiler, faire défiler, faire défiler pendant un zoom avant et ne nécessite pas de barre de défilement saisissable. (Cela me permet également de zoomer pour une meilleure vue des images, des diagrammes, etc., ce que la plupart des sites mobiles refusent inexplicablement de permettre.)
B. Firefox sur Android a une barre de défilement non accessible pour me dire dans quelle partie de la page je suis (pour les versions de bureau et mobile d'un site), tout comme le "Internet par défaut" "navigateur. Je les utilise comme je le ferais sur un navigateur de bureau avec une souris pour indexer et déterminer la longueur de page.
C. J'ai également tendance à ne visualiser que les grandes pages Web sur un moniteur approprié, il est donc beaucoup moins probable que je sois sur un appareil mobile essayant de faire défiler un fichier .pdf de 900 pages ou quelque chose. Si votre application Web ne dépasse jamais deux ou trois écrans, le défilement est beaucoup moins problématique.
D. Il convient également de noter que le défilement des doigts sur l'écran tactile est généralement à la fois plus rapide et plus précis que l'utilisation de la molette de la souris, de sorte qu'une page doit être beaucoup plus grande avant qu'il ne soit difficile de naviguer rapidement.

Conclusion

Pour les configurations de souris (ou trackpad ou trackball), je pense que la barre de défilement doit toujours être visible et saisissable. Au minimum, il devrait apparaître lors du défilement ou lorsque vous déplacez la souris près de la barre de défilement.

Pour les configurations d'écran tactile mobile, je pense que la barre de défilement devrait toujours être visible lors du défilement, mais n'a pas besoin d'être saisissable, et devrait probablement se cacher lorsqu'elle ne défile pas pour réduire l'espace perdu.

Je n'ai pas gâché avec une tablette/iPad ou des écrans tactiles plus grands, donc je ne sais pas comment je me sens à ce sujet.

Bien sûr, avoir la possibilité de changer les styles visuels (soit par le biais de cookies temporaires ou par le biais de paramètres utilisateur stockés, selon que votre utilisateur est un invité ou possède un compte) est le meilleur pari, mais vous devriez par défaut choisir quelque chose de fonctionnel.

Dave · Answer

Ce point de vue provient principalement de l'environnement Mac, où les barres de défilement sont généralement affichées brièvement lorsque le contenu apparaît pour la première fois, puis disparaissent progressivement. Lors du défilement (déclenché par l'utilisateur ou autre), la barre de défilement réapparaît. Seule la poignée est visible (comme une barre noire arrondie semi-transparente); pas de flèches ni de gouttière. Si le curseur se trouve sur la barre de défilement lorsqu'elle apparaît, elle s'élargit et permet de faire glisser avec le curseur. À aucun moment, le contenu ne change de taille; il se comporte comme si la barre de défilement n'était pas présente et la barre de défilement est affichée en haut.

Cela s'applique lorsque vous utilisez un trackpad ou des mécanismes d'entrée de type trackpad (c'est-à-dire un ordinateur portable). Les barres de défilement standard sont toujours affichées par défaut lorsque vous utilisez une souris.

Bien sûr, cela s'étend également au mobile; iOS utilise un comportement presque identique (interaction avec le curseur moins). En fait, je pense que cela a commencé sur iOS (où les barres de défilement seraient trop petites pour être utilisées de manière fiable) et ont migré vers macOS.

Dans l'ensemble, cela présente des avantages et des inconvénients:

Ne pas avoir besoin d'espace pour les barres de défilement simplifie la conception de la page (moins d'éléments gênants) et permet plus d'espace pour le contenu, en particulier lorsque plusieurs emplacements peuvent défiler.
Les utilisateurs de mac sont habitués à ce comportement et l'attendent.
Il n'y a pas de saut dans la taille du contenu lorsqu'une zone devient soudainement défilable, ce qui corrige également une ambiguïté commune où une barre de défilement peut être nécessaire tant qu'elle est visible, et non nécessaire si elle est masquée (par exemple en raison de l'habillage du texte).
Du côté négatif, comme cela a déjà été mentionné, vous devez trouver une autre façon d'indiquer que le contenu peut défiler. Ce n'est pas un problème pour la partie principale d'une page Web, car cela est prévu de toute façon, mais peut être un problème pour le contenu interne en fonction des attentes des utilisateurs. Le flash initial aide, mais n'est pas toujours suffisant.
L'interaction de l'utilisateur pour sauter vers un autre emplacement dans le document est maladroite; l'utilisateur doit déplacer son curseur à l'endroit où la barre de défilement apparaîtra, faire défiler légèrement avec la molette de la souris ou le "défilement à 2 doigts", saisir la barre de défilement lorsqu'elle apparaît et faire glisser vers l'emplacement souhaité. Le défilement momentané permet d'éviter cela dans certains cas.
Parce que la barre de défilement apparaît sur un fond transparent, si le fond est sombre, il peut être difficile à voir. macOS fournit une barre de défilement alternative blanche qui peut être utilisée dans ce cas (je crois que les navigateurs basculent automatiquement vers cela si l'arrière-plan est suffisamment sombre, mais ce n'est pas infaillible à 100%). De plus, il donne à la barre une lueur subtile (ou ombre) comme un dispositif de sécurité à peu près assez bon.

Si possible, bien sûr, respectez les composants natifs du navigateur pour ce genre de chose. Ils garantiront à chaque utilisateur une expérience naturelle pour sa plate-forme (j'ai certainement vu de nombreux sites Web essayer de reproduire le défilement dynamique et le défilement élastique avec des résultats finaux atroces). Les utilisateurs de Mac ne vous remercieront pas d'avoir forcé les barres de défilement visibles là où ils ne les attendraient pas, et les utilisateurs de Windows ne vous remercieront pas d'avoir caché les barres de défilement là où ils les attendraient.

Lex · Answer

La suppression des barres de défilement à mon avis est un autre exemple de l'idéologie idiote et superficielle de mettre le style au-dessus de la fonctionnalité. C'est un retour en arrière à la façon dont cela devrait être et c'est une indication de la stupidité de la société pour moi. Les barres de défilement ont un objectif fonctionnel important que d'autres méthodes alternatives ne peuvent pas toujours reproduire. Je pense que le changement est en partie basé sur l'idée que les gens utilisent des écrans tactiles, donc ce n'est donc pas nécessaire, mais beaucoup de gens ne le font toujours pas. De nombreuses méthodes alternatives nécessitent une concentration et une finesse supplémentaires pour manipuler ce qui est un drain d'énergie que je préfère dépenser pour faire du travail, plutôt que de me battre avec une mauvaise interface utilisateur. Les méthodes de défilement traditionnelles vont généralement de pair avec le défilement du clavier en appuyant sur la touche fléchée vers le bas, ce que je trouve beaucoup plus facile que les autres méthodes qui nécessitent plus de concentration, mais avec les barres de défilement supprimées, le défilement des flèches du clavier disparaît également parfois, ce qui devrait être un GRAND non -non! Un exemple est le grand réseau social F a constamment causé de l'irritation avec son style de défilement "dynamique" tout en faisant défiler l'historique des msg, et où vous ne savez pas où vous êtes dans la conversation tout en faisant défiler vers le haut, mais ensuite vous faites défiler vers le haut après un certain point et tout à coup une charge supplémentaire d'historique de conversation est chargée et vous finissez par sauter loin devant où vous vouliez être.

Je pense que c'est aussi en partie de l'ignorance et en partie du désir d'économiser des ressources et de la bande passante sur les serveurs pour économiser de l'argent aux entreprises au détriment de l'expérience utilisateur. Il s'agit également de simplifier les choses pour les idiots afin de rendre les choses "plus faciles" à utiliser pour les commandes très basiques, au détriment de rendre les choses plus gênantes pour quiconque n'est pas stupide et pourrait vouloir faire quelque chose de très légèrement hors de l'ordinaire. J'espère que la blockchain annonce la fin de cette ère de sacrifier l'expérience utilisateur pour économiser de l'argent, et nous pouvons avoir des systèmes qui fonctionnent rapidement et sont sans tracas pour les utilisateurs de base et avancés.

Par exemple, ne serait-il pas formidable que des logiciels comme skype et F messenger vous permettent de faire défiler instantanément jusqu'au tout début de votre historique de msg au lieu d'attendre indéfiniment la section après section à charger?! J'ai toujours soupçonné que c'était d'économiser des ressources pour charger le tout en même temps. Cependant, si quelqu'un avec un peu d'intelligence et une pensée nuancée concevait cela (plus courant dans les cercles de la blockchain que dans les entreprises, j'espère), nous pourrions tous avoir notre gâteau et le manger. Nous pouvons économiser des ressources (ce qui n'est toujours pas anodin même dans la blockchain), et obtenir instantanément les informations que nous voulons sans avoir à supporter cette affreuse page par système de chargement de page.

Présentez simplement le cadre de l'ensemble de l'historique de la chronologie sur une barre de défilement ainsi que les dates qui apparaissent lorsque vous faites défiler. Dès que vous relâchez le bouton de la souris ou le défilement du strop, cette section particulière peut se charger. Si vous souhaitez revenir directement au début, faites défiler vers la droite et seule la première page doit être chargée. Si vous avez besoin de tout pour charger tout de suite, pour rechercher un mot clé par exemple, alors fournissez simplement un bouton simple qui peut être pressé si nécessaire pour obtenir l'historique complet des msg ou l'historique de tout ce que vous parcouriez.

Si quelqu'un signale spécifiquement qu'il est nécessaire que tout cela se charge, alors la blockchain devrait accueillir les ressources. C'est la différence entre celui-ci et les entreprises de l'ancien modèle, qui, je le soupçonne, hésiteraient à autoriser même celles qui ont spécifiquement besoin de tout charger, pour pouvoir le faire afin de protéger leurs ressources pour leur profit sale et de foutre l'utilisateur. C'est pourquoi nous avons besoin de la blockchain, et de préférence de la version ouverte.

Graham · Answer

En tant que point de vue mixte ...

Les barres de défilement horizontales sont généralement une mauvaise chose. Cela peut signifier que vous avez optimisé la largeur d'écran d'un moniteur PC, ce qui ne se traduit pas bien sur les appareils mobiles. Lors du défilement vers le bas, la lecture de la page entière nécessite de nombreux défilements gauche-droite pour chaque écran de contenu. Et inversement, ces sites auront perdu de l'espace sur des écrans plus grands. (Lecteurs plus âgés, souvenez-vous des sites Web disant "Optimisé pour 1024x768"? Ouais, ceux-là.) Nous ne devrions pas avoir à accepter cela en 2019 - ce n'est pas les années 1990 et nous n'utilisons pas encore Netscape Navigator. N'y allez pas.

Les barres de défilement verticales, par contre, sont bien. Nous sommes intuitivement habitués à faire défiler quelque chose - pensez à la façon dont vous lisez un journal papier, par exemple. La page entière est facilement visible avec juste des défilements haut/bas.

Il y a une école de pensée que plus de 2 ou 3 écrans pleins de contenu, c'est trop. Après cela, il devient difficile de trouver des trucs. Donc, pendant que les barres de défilement fonctionnent, ne vous laissez pas conduire à des pages de longueur illimitée!

bta · Answer

Oui, les barres de défilement doivent être visibles, ne serait-ce que pour des raisons d'accessibilité.

Il existe de nombreux cas où masquer une barre de défilement rend votre site/programme n'importe où entre frustrant et limite inutilisable:

Utilisation de matériel/logiciel d'assistance pour accéder à votre page
Utilisation d'une souris sans molette de défilement
Utilisation d'un système de bureau distant qui ne passe pas par les événements de défilement
Utilisation d'un pavé tactile qui défile à l'aide de gestes à plusieurs doigts (la plupart des utilisateurs moyens ne savent pas qu'ils existent)
En utilisant un écran tactile, la page fait plus de quelques écrans de haut, et je dois faire défiler quelque part à l'autre extrémité de la page
Utiliser un écran tactile, faire défiler une page pleine de liens/boutons (où le mouvement de tap-and-flick est raisonnablement susceptible d'activer accidentellement quelque chose)

Les barres de défilement visibles sont un moyen simple d'éviter tous ces problèmes. Si l'argument principal de votre collègue est que d'autres sites le font, alors ne l'écoutez même pas. La pression des pairs n'est un argument valable que si elle est accompagnée d'une raison significative et significative pourquoi le faire est une bonne idée. Ce genre de réflexion est de savoir comment le <blink> tag est devenu populaire.

Aussi, pour des raisons d'accessibilité, n'implémentez pas vos propres barres de défilement. Utilisez ceux fournis par le système. La technologie d'assistance ne peut pas toujours identifier les barres de défilement faites maison et les faire fonctionner comme telles.

Solid_Metal · Answer

Une barre de défilement est extrêmement utile

il montre à l'utilisateur que la page peut défiler
il montre à l'utilisateur où il se trouve actuellement sur la page déroulante

Vous n'avez aucune idée du nombre de fois où j'ai été énervé et perdu parce qu'un concepteur de merde pensait que supprimer la barre de défilement était une bonne idée.

Bob Kerman · Answer

Pour ajouter à la réponse de MichaelS,

Sur les tablettes et les iPad, une barre de défilement non saisissable, qui se cache lorsqu'elle ne défile pas, est préférable. Comme il l'a dit, le défilement sur les appareils tactiles est beaucoup plus précis et les barres de défilement visibles et saisissables sont maladroites et ennuyeuses. Cependant, selon la longueur de la page, un bouton de retour en haut serait le bienvenu.

De plus, en écrivant cela sur StackExchange à l'aide d'un iPad pro de 12,9 pouces, j'ai remarqué que l'ajout d'une quantité décente (~ 1 cm) de rembourrage, dans un ton légèrement différent, est utile car il permet de faire défiler sans ouvrir accidentellement les liens.

dougajmcdonald · Answer

Une question intéressante, mon 2c venant d'un développeur mais UX lead et ayant également conçu des interfaces avec plusieurs zones de défilement internes.

Quelques points:

Des barres de défilement visibles doivent exister si le contenu est suffisamment grand pour nécessiter un défilement, car la présence d'une barre de défilement signifie et permet de faire défiler le contenu.
- Le défilement infini est mon idée personnelle de l'enfer, surtout si vous avez cliqué sur la barre de suivi et que vous la faites glisser (tangente)
Si le contenu ne peut pas défiler, les barres de défilement sont un anti-abordage suggérant des choses qui ne peuvent pas se produire.
- Un cas Edge est des choses qui ne peuvent pas défiler maintenant mais pourraient le faire si, par exemple, le contenu augmente en taille, cela est courant dans les éditeurs, ou tout autre système avec sortie dynamique. Plus précisément parce que si vous ajoutez/supprimez la fonctionnalité de défilement, cela peut perturber les mises en page, vous obtenez un jank horizontal à mesure que le contenu s'étend, puis la barre de défilement apparaît. (si tu utilises overflow: auto par exemple). Dans ce cas, il peut être plus facile de mettre une barre de défilement désactivée pour indiquer qu'il s'agit d'une zone de défilement, mais le contenu n'est pas encore assez grand pour permettre ce comportement.
Les barres de défilement horizontales sont normalement une mauvaise idée si elles sont combinées avec des barres de défilement verticales car elles introduisent et sélectionnent le mode implicitement. Comme dans, le défilement par défaut d'un défilement de souris est normalement un défilement vertical, mais avec une pression implicite supplémentaire (ou une interaction avec le trackpad), un défilement horizontal peut être obtenu. La complexité de ceci est très rarement atteinte.
Dans certaines interfaces d'application (par exemple, les cartes Slippy), la suppression de toutes les barres de défilement peut être une bonne idée, car le contenu se déplace sous la fenêtre du navigateur dans ce paradigme, et non l'inverse. Les commandes sont bien comprises par la plupart des utilisateurs.
Essayer de styliser les barres de défilement n'est pas une bonne idée dans 99% des cas, sauf si vous voulez de nombreuses versions personnalisées spécifiques, imo accepte qu'elles ne seront pas parfaites dans tous les environnements et utilise les paramètres par défaut du navigateur.

Ling · Answer

Le concepteur parle-t-il de remplacer les barres de défilement par un bouton flottant de défilement vers le bas/haut? Je pense que c'est raisonnable parce que c'est une approche axée sur le mobile et j'ai vu qu'elle était utilisée avec succès dans certains contextes, mais ces boutons ne peuvent pas remplacer les barres de défilement dans une grille.