Recherche d'utilisabilité sur les en-têtes collants?
Les en-têtes collants (ou fixes) ne sont pas si rares de nos jours, et pour un grand site Web qui s'appuie fortement sur les fonctionnalités de catalogue et de recherche, il peut être un bon choix pour aider l'utilisateur.
Comme je suis en train de concevoir un tel site Web, je me demandais si des recherches avaient été effectuées sur la façon dont les utilisateurs réagissaient envers eux. Bien sûr, tout dépend de la façon dont vous l'implémentez et du niveau de connaissance de votre base d'utilisateurs, mais existe-t-il des informations sur les modèles de recherche disponibles? Pièges courants, meilleures pratiques, etc.?
De plus, si vous vous inquiétez de la hauteur de l'écran, vous pouvez réduire le menu de la taille normale à une taille plus petite lorsqu'ils défilent vers le bas. Ensuite, ayez une flèche vers le bas ou une autre façon de leur faire savoir qu'ils cliquent ou survolent et qu'elle se développe à nouveau en taille réelle
Les en-têtes collants peuvent sembler être un nouveau concept, mais ils ne sont pas très différents des cadres (visuellement).
À ma connaissance, il n'y a malheureusement pas de recherche directe sur les en-têtes collants. Espérons que d'autres puissent partager leurs idées à partir de leurs propres recherches d'utilisateurs ...
En tant que meilleure pratique, j'inclurais des éléments collants lorsqu'ils sont utiles (c'est-à-dire la reconnaissance plutôt que le rappel). Voir Vanguard comme exemple: https://personal.vanguard.com/us/funds/vanguard/all?sort=name&sortorder=asc
Faites attention à ne pas utiliser trop de surface d'écran. Si l'utilisateur fait défiler vers le bas, il est probablement intéressé par le contenu. J'aime l'idée de diminuer la taille de l'en-tête lorsque l'utilisateur fait défiler vers le bas. Si vous avez un grand logo, vous pouvez utiliser une version plus petite lorsque l'utilisateur fait défiler et réduire légèrement l'en-tête. Assurez-vous également que le défilement des pages fonctionne si l'utilisateur utilise la barre d'espace ou la barre de défilement; lorsque vous utilisez ces méthodes de défilement, les une ou deux dernières lignes de texte sont généralement affichées en haut de la page.
La meilleure pratique la plus importante est quelque chose que vous devriez déjà faire: rendre l'en-tête utile et compréhensible. Si l'en-tête est inutile pour commencer, alors l'en-tête collant ne sera qu'un ennui.
Des éléments collants peuvent également être utilisés pour attirer l'attention sur les CTA (appels à l'action) qui peuvent apparaître à l'extrême gauche ou à droite si l'utilisateur fait défiler vers le bas (encore une fois, assurez-vous de ne pas interférer avec le contenu). Nous avons trouvé le succès en utilisant des éléments collants pour nous contacter, un service d'assistance et des liens "haut de page".
En l'absence de données de recherche réelles, j'ai pensé partager certaines choses que j'ai trouvées en étudiant les en-têtes collants (la plupart de ces points sont également soulignés par les autres répondants):
- Gardez l'en-tête petit, la plus grande partie de la fenêtre doit être réservée au contenu.
- N'y mettez que des choses absolument nécessaires (avez-vous vraiment besoin de votre logo là-bas?).
- Assurez-vous que l'en-tête contraste suffisamment avec la partie de contenu. Il est beaucoup plus difficile de le faire avec seulement de l'espace (ce qui fonctionne généralement pour les titres non collants). L'utilisation d'une couleur d'arrière-plan plus sombre pour l'en-tête collant fonctionne correctement.
- Les en-têtes collants ne fonctionnent presque jamais lors de la visualisation de sites Web sur des appareils à petit écran comme des téléphones (les applications Web sont autre chose).
- Minimisez les animations flashy lorsque l'utilisateur fait défiler vers le bas et le menu "s'enclenche", cela ne fait que perturber la concentration sur le contenu et n'a pratiquement aucune utilité.
Je m'excuse de n'avoir aucune recherche à faire référence, mais il existe d'autres sources. Shawn Borsky , concepteur professionnel d'interface utilisateur et un auteur ont commenté l'en-tête collant comme ceci:
Lorsque les utilisateurs lisent du contenu défilant tel qu'un flux ou un article, il est facile d'obtenir une vision tunnel et d'ignorer la navigation. Lorsqu'ils finissent de consommer du contenu ou sortent de ce tunnel, il peut être frustrant ou désorientant de ne plus avoir accès aux principales actions du site parce que vous lisiez ou absorbiez le contenu.
Je pense que c'est une bonne explication pour laquelle vous devriez l'avoir. Mais il faut être prudent car la hauteur de l'écran varie beaucoup. En dehors de l'en-tête de la fenêtre du navigateur, éventuellement avec des barres d'outils ennuyeuses et d'autres barres de navigateur intégrées, telles que la barre préférée, il reste moins d'espace pour le contenu réel. Si vous implémentez un en-tête collant, rendez-le raisonnablement petit (pour éviter de prendre trop de place dans le contenu réel) mais suffisamment haut pour appliquer les règles de loi de Fitts .
En pratique, je voudrais faire ceci:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
J'ai des migraines.
Donc pour moi, il y a trois problèmes. Tout d'abord, la plupart des en-têtes collants commencent par un gros bloc qui change de taille lorsque les utilisateurs commencent à faire défiler, ce qui peut déclencher des migraines. Deuxièmement, la plupart des en-têtes collants rapprochent le bord entre les éléments défilants et non défilants du milieu de l'écran, ce qui ajoute une fatigue oculaire. Troisièmement, selon le logiciel, les en-têtes collants peuvent casser la page vers le haut et la page vers le bas.
Je pense que si vous avez besoin d'en-têtes collants, il serait utile d'avoir un en-tête étroit sur un côté de la fenêtre.