web-dev-qa-db-fra.com

Les barres de défilement personnalisées sont-elles plus faciles à utiliser ou sont-elles simplement «agréables»?

J'ai remarqué que de nombreuses applications Web ont commencé à utiliser des barres de défilement personnalisées. Quelques exemples incluent Facebook, Trello, Google Docs et Twitter. Je suis sûr que vous pouvez penser à plus:

why custom scroll bars?

Comment ces types de barres de défilement personnalisées affectent-ils la convivialité? Je les trouve souvent plus difficiles à cliquer, et ils ont l'habitude de disparaître lorsque je ne défile pas. Le fait d'avoir une zone plus petite à saisir et une cible qui disparaît rend plus difficile l'utilisation de l'application Web, mais je suis peut-être une minorité. Y a-t-il quelque chose qui indique un avantage à l'expérience utilisateur lors de leur utilisation, ou est-ce juste pour rendre les choses plus sophistiquées et "Web 2.0"?

27
nhinkle
  1. L'esthétique aide la convivialité . Beaucoup de choses ont "juste" l'air sympa, mais quand il s'agit d'éléments clés comme les barres de défilement, leur attrait visuel peut les rendre plus utilisables.
  2. Il est important qu'elles soient différentes d'une barre de défilement standard, car dans la plupart des applications Web, au moins l'une des barres de défilement est l'élément le plus à droite de la page, elle est donc adjacente à la barre de défilement standard du navigateur. S'ils avaient la même apparence, cela aurait l'air terrible, confondrait les gens quant à l'appartenance à quel récipient et serait très gênant à utiliser.
  3. Jusqu'à assez récemment, il existait une directive selon laquelle un écran ou une page ne devrait pas avoir beaucoup de petites cases avec défilement interne. Cette convention provenait du fait que la plupart des conteneurs utilisaient la barre de défilement standard, qui est assez grande, est toujours visible et devient inutilisable lorsqu'elle est placée dans une petite boîte. Quand vous voyez une page pleine de boîtes déroulantes, cela ressemble invariablement à de la merde. Vous le verriez souvent sur d'anciens sites Web Sharepoint, par exemple. Aujourd'hui, cette convention a pratiquement disparu - car les barres de défilement personnalisées résolvent ces problèmes, leur fonctionnalité la plus utile étant la dépendance au contexte. Le fait qu'ils n'apparaissent qu'à la demande nous permet d'utiliser de nombreux éléments déroulants sur une seule page sans nuire à son apparence.
  4. La barre de défilement standard a été conçue avant tout pour le défilement à l'aide de sa poignée (la boîte de défilement) - d'où sa largeur. C'était avant que les roues de souris ne soient monnaie courante. Aujourd'hui, la majorité absolue des souris ont des roues, et même les personnes qui ne sont pas très douées en informatique savent comment les utiliser ou l'apprendre relativement rapidement. Ainsi, le rôle "fonctionnel" de la barre de défilement diminue et son rôle de "rétroaction/indicateur" devient relativement plus important - nous les affichons souvent juste pour faire savoir à l'utilisateur que cette zone est défilable, à quel point l'utilisateur a la roue ou le clavier pour les faire défiler - nous ne concevons pas les barres de défilement à utiliser comme moyen principal de défilement. Ils n'ont donc pas besoin d'être aussi larges qu'auparavant.
21
Vitaly Mijiritsky

Ils sont généralement utilisés parce que le concepteur pense qu'ils sont plus beaux. De nombreux concepteurs conçoivent pour ce qui semble bon plutôt que pour ce qui est utilisable.

Pour la convivialité, utilisez simplement les barres de défilement standard.

Edit: En outre, la façon dont différentes personnes utilisent la barre de défilement varie beaucoup. Certains cliquent sur la barre et la déplacent; certains utilisent une molette de défilement sur leur souris; certains cliquent sur les flèches en haut ou en bas; et certains cliquent sur l'espace entre la barre et les flèches.

Ils existent peut-être, mais je n'ai jamais vu de barre de défilement personnalisée pouvant être utilisée de toutes les façons dont les gens ont tendance à les utiliser. Encore une autre raison d'éviter les barres de défilement personnalisées.

17
JohnGB

En fait, je fais une grande partie de ma navigation sur un iPad, et aucun de ceux-ci ne me semble non standard.

La barre de défilement par défaut du bureau (qui ressemble beaucoup à ce qu'elle était il y a 20 ans) a l'air horrible dans le contexte d'un site par ailleurs bien conçu, au point où le mettre là-bas serait un problème d'utilisation en soi. De petites choses comme une bonne utilisation des espaces blancs font une grande différence dans l'expérience utilisateur, et le fait de coller une énorme barre de défilement grise au milieu détruit tout cela.

Ajoutez à cela le fait que les barres de défilement ne sont désormais souvent qu'un contrôle secondaire (avec le toucher ou la molette de la souris étant le principal) et vous avez de bonnes raisons de configurer quelque chose de moins envahissant.

3
Tom Clarkson

Il y a vraiment deux questions ici: 1) DEVRAIT-IL être différent et 2) Pourquoi sont-ils si différents?

Et j'ajouterai un 3ème:

3) Devrait-il y avoir des sections déroulantes sur la page en premier lieu?

J'ai tendance à dire "non" à 3 ... surtout dans le monde du mobile. Je travaille actuellement sur la création d'une fenêtre modale qui défile pour iOS. Cela me fait mal car ce n'est vraiment pas le bon paradigme à utiliser. Si le contenu est suffisamment important pour que les gens aient besoin de le voir, ne le piègez pas dans une petite boîte de défilement.

Maintenant, pour en revenir au n ° 1, s'il existe une sorte d'argument plausible, alors peut-être qu'ils devraient être différents, mais je demanderais d'abord pourquoi la valeur par défaut n'est pas correcte telle qu'elle est? En règle générale, un élément GUI connu (barres de défilement du système d'exploitation) sera l'option préférée car les gens le connaissent, il s'est comporté de manière prévisible et il est facile à comprendre.

Quant à la question n ° 2, je suis d'accord avec les autres pour dire qu'ils sont souvent conçus sur mesure uniquement à partir de cloches et de sifflets de conception visuelle. J'ajouterai à cela le fait qu'il existe de nombreuses bibliothèques JS et plugins partagés de nos jours qui se produisent par défaut sur n'importe quelle interface utilisateur de widget personnalisée qui a été créée. Par exemple, jQuery UI a des conceptions d'éléments de formulaire très uniques. Nous pourrions débattre du bien-fondé de cela, mais il semble que l'argument typique pour eux est de créer une interface utilisateur unifiée pour le Web indépendamment des particularités du système d'exploitation.

2
DA01

C'est définitivement une tendance. Nous allons à l'ère de la barre de défilement 2.0. La popularité d'iOS et maintenant le fait que OSX lion porte cette conception sur des ordinateurs de bureau/portables n'est qu'un début. Je suis sûr que cela arrivera aux prochaines versions d'autres systèmes d'exploitation.

Maintenant, j'aimerais savoir s'il existe des études et des résultats tangibles sur la façon dont les gens utilisent les barres de défilement?

J'ai conçu une application avec de telles barres de défilement. J'aime ceux-ci, car en termes d'esthétique, ils sont simplement plus beaux et s'adaptent parfaitement à l'ensemble de la conception de l'application. D'une certaine manière, cela ne crée pas de bruit visuel pour une action commune que tout le monde connaît. (Peut-être pas tout le monde, mais les utilisateurs que je cible, le sauraient). Vous survolez la zone de texte, les barres de défilement apparaissent en douceur, vous utilisez la molette de votre souris et cela fonctionne. Si vous n'avez pas de molette, vous pouvez toujours faire glisser la barre ou utiliser les touches fléchées du clavier.

Mais j'ai un commentaire d'un collègue (service marketing, utilisateur de MS Office, 30 ans, femme) qui a été déçu de ces barres de défilement parce qu'elle utilise un trackball et qu'elle n'est donc pas habituée à faire défiler (semble fou, n'est-ce pas ??). Au lieu de cela, elle fait glisser la barre et/ou utilise le clavier. En fait, elle n'avait pas remarqué la barre de défilement personnalisée ... car elle était personnalisée et non standard OS! Ce comportement est-il fréquent?

2
Marc D

Google Docs et Trello sont des applications Web et peuvent bénéficier de différents contrôles et apparence de la barre de défilement. Les applications Web ont une approche de conception plus holistique où les contrôles/l'apparence par défaut du navigateur sont souvent remplacés pour terminer le cycle de personnalisation de l'interface Web.

Par exemple, certaines barres de défilement auront une barre de défilement qui utilise des flèches doubles avec la flèche unique pour donner un "en haut de la page" et "en bas de la page" et cela peut être très utile pour les pages verticales longues.

Facebook et Twitter ont constamment repoussé les limites en ce qui concerne la rupture des conventions, mais ... ils le peuvent. Il y a un tel succès pour les deux communautés, que chaque entreprise peut introduire de nouveaux changements de conception avec un taux d'abandon très faible parce que leurs utilisateurs respectifs sont tellement investis. Par exemple, il y a beaucoup de débats en ce moment sur les nouvelles mises à jour de l'interface Facebook, mais j'imagine qu'il n'y a qu'un faible taux d'abandon des utilisateurs.

Avec n'importe quoi, il est toujours préférable de commencer à utiliser des conventions et de ne pousser en dehors de ces conventions que lorsque vous êtes établi.

1
rlsaj