Dans quelle mesure les barres qui disparaissent / réapparaissent-elles sur le défilement?

Question

De http://usabilitypost.com/2014/05/24/the-scroll-up-bar/ :

Un modèle de conception qui gagne actuellement en popularité est la barre de position fixe en haut de la page. Parfois, la barre reste la même tout au long, parfois l'en-tête se transforme en une barre plus mince lorsque vous faites défiler vers le bas, parfois une barre complètement nouvelle apparaît.

Bien que ces barres puissent être utiles, elles occupent un espace vertical, réduisant l'espace de lecture que l'utilisateur a choisi pour lui-même en choisissant la taille de la fenêtre de son navigateur. De plus, les informations affichées sur ces barres ne font rien pour faciliter la lecture du contenu réel, ce qui rend la barre plus gênante que utile.

Une façon intéressante de résoudre le problème consiste à masquer la barre lors du défilement vers le bas et à l'afficher lors du défilement vers le haut. Sur les interfaces mobiles, où l'espace est précieux, cette technique est utilisée pour masquer le chrome, comme les contrôles du navigateur Web, mais c'est aussi un bon modèle à utiliser sur le Web. Par exemple, Medium vient de mettre à jour sa nouvelle barre de navigation. Lorsque vous faites défiler vers le bas, la barre disparaît, mais elle peut être révélée à tout moment en faisant défiler vers le haut.

Il y a un énorme discussion en cours chez HackerNews pour le moment, mais les vues sont nombreuses. Vous voulez savoir ce que vous en pensez?

Ils sont sûrement meilleurs que ces barres qui disparaissent/réapparaissent au clic ?

Answer 1

La réponse simple à cela est: cela dépend. Mais par rapport à la barre collante, il est difficile de faire échouer la barre des stands.

Terminologie

• Barre statique - est une barre (de navigation) qui défile avec le reste de la page.
• barre collante - est une barre qui colle au haut de la vue et est toujours visible. Barre fixe AKA (terminologie Bootstrap) ou barre absolue (CSS).
• Pit bar - rappelez-vous à l'équipage de la voie des stands, qui est dans le garage mais qui court sur la voie chaque fois que nécessaire (sur demande). C'est la barre qui "disparaît/réapparaît sur le défilement", ou la barre de défilement.

Catégories de navigation

Une classification de navigation très utile est (David Fiorito et Richard Dalton. Création d'une solution de navigation Web d'entreprise cohérente ):

• Structural - navigation basée sur la hiérarchie du site, comme souvent offerte par la navigation principale et ses sous-marins.
• Associative - un lien dans le contenu vers une autre page.
• tility - normalement juste une option de navigation globale qui offre un utilitaire lié au site; ce sont généralement (certains diront toujours) une forme de navigation sans issue (vous devez retourner d'où vous venez).

Ou sous forme graphique:

Comportement de recherche d'informations

Désormais, les utilisateurs de sites peuvent se comporter différemment en fonction de ce qu'ils recherchent. Aux deux extrêmes:

• Le livreur de pizza (AKA, match parfait) - très axé sur la tâche et le temps, ces personnes recherchent un spécifique connu, et recherchent simplement des déclencheurs d'informations qui peuvent être appropriés pour leur tâche. Par exemple, quelqu'un qui souhaite acheter un stylo M flare Papermate noir.
• L'explorateur - je veux juste voir ce qui existe, mais je n'ai aucune tâche spécifique en tête. Beaucoup d'utilisateurs de Facebook sont comme ça - sans notifications, ils se connectent pour voir ce qui se passe, pour tuer le temps.

Cela a également à voir avec le site lui-même. Les gens qui visitent les sites d'actualités sont souvent des explorateurs. Les gens qui achètent des disques durs en ligne ont souvent dans leur esprit ce qu'ils veulent (ou du moins en gros).

Wikipédia est un site "associatif" bien défini. Si nous omettons le champ de recherche d'eux, la plupart des sites de commerce électronique s'appuieront sur une bonne hiérarchie de navigation (c'est-à-dire "structurelle").

Navigation collante (fixe)

Qu'ils affichent une hiérarchie ou non, les barres collantes affichent souvent les principales options de navigation. La nature du site et la façon dont les gens l'utilisent détermineront à quel point c'est génial d'avoir une navigation collante là-bas en premier lieu.

De toute évidence, cela signifiait empêcher les gens d'avoir à faire défiler vers le haut pour accéder à la navigation principale. Mais on suppose que les gens utilisent réellement cette navigation un peu.

Un peu bizarrement, l'article que vous référencez les montre sur deux sites d'actualités, où le comportement typique est celui d'un explorateur . Donc, sans doute, cette navigation collante n'est pas si importante là-bas.

Barres de fosse

Les barres collantes ont clairement un prix: elles occupent un écran immobilier, particulièrement important sur les appareils mobiles.

Donc la logique dans les stands est simple:

• D'abord, vous me voyez - vous savez que je suis là.
• En faisant défiler vers le bas, je disparais (comme sur la plupart des sites Web).
• Mais si vous faites défiler vers le haut vers moi, je vais apparaître pour que vous n'ayez pas à faire défiler jusqu'au sommet.
• Je suppose que vous avez besoin de moi, mais si ce n'est pas le cas, faites défiler un peu plus, puis redescendez pour me cacher.

Les barres des stands aident également si le concepteur a fait une hypothèse erronée sur la nécessité de la barre - les utilisateurs défileraient vers le bas pour voir plus de contenu et moins souvent vers le haut pour voir le contenu précédent. Donc, si la barre n'est pas nécessaire, au moins, elle est là pour moins de la moitié du temps, mais pas avec les barres collantes.

J'avoue, c'est assez génial. Et je parie que si Apple le pouvait, ils l'auraient breveté.

Le prix du mouvement

Les barres de puits ont un prix - le mouvement (ou l'animation) est la caractéristique visuelle la plus notable; notre cerveau s'en occupe plus que toute autre caractéristique visuelle (couleur, taille, etc.). Donc, en montrant en utilisant l'animation, vous attirez l'attention des utilisateurs sur la barre - ce qui est génial s'ils en ont besoin, mais pas si ils ne le font pas. Encore une fois, cela revient à l'utilité de ce menu pour les utilisateurs. Sur la version mobile de chrome - c'est crucial; mais sur certains autres sites, cela peut être beaucoup moins utile.

Cela dit, le cerveau apprend rapidement à ignorer les mouvements qu'il trouve non pertinents; c'est pourquoi nous ignorons l'herbe qui souffle dans le vent - malgré le mouvement.

Donc, même s'il faut un peu de temps pour apprendre à ignorer le mouvement de la barre des stands (qui pourrait être légèrement, même inconsciemment, ennuyeux), cette pénalité diminue rapidement jusqu'à l'oubli.

Bonjour, à quel point?

Une autre variable qui me vient à l'esprit est la durée du défilement vers une barre de navigation statique?

Si nous prenons une hauteur d'écran (SH) comme mesure de la hauteur de l'écran physique, alors une page peut être convertie en 9SH d'un appareil mobile, mais seulement 3SH sur un écran de bureau typique (où plus de largeur signifie moins de hauteur) .

La balistique de mon iPhone est d'environ 1 SH par geste; mais sur mon bureau avec un trackpad, vous pouvez facilement accéder à 3SH en un seul geste.

Cela remet en question la justification d'un sticky ou d'un pit-bar sur un environnement de bureau.

Sommaire

Dans quelle mesure est-il justifié d'avoir une barre collante ou pit-bar en premier lieu dépend du site et des utilisateurs.

Mais entre un collant et un pit, celui-ci semble être une solution soignée gagnant-gagnant.