Directives UX —

Nous comptons souvent sur en-têtes collants pour attirer l’attention de l’utilisateur sur des fonctionnalités critiques ou des appels à l’action. Pensez à la navigation dans la barre latérale, aux CTA, aux en-têtes et pieds de page collants, aux lignes ou colonnes « fixes » dans les tableaux et aux boutons flottants. Nous avons déjà examiné les modèles de navigation mobile dans Modèles de conception d’interface intelligentemais les menus collants méritent d’être examinés de plus près.

Au fur et à mesure que les utilisateurs défilent, un menu collant reste toujours en vue. Et généralement, c’est considéré comme une bonne fonctionnalité, surtout si les menus sont fréquemment utilisés et surtout si nous voulons accélérer la navigation.

Cependant, les menus collants présentent également quelques inconvénients. Dans son récent article sur Les menus collants sont problématiques, et que faire à la place, Adam Silver discute de certains problèmes d’utilisation courants des menus collants – et comment les résoudre. Regardons de plus près.

Comment décidons-nous si un menu doit être collant ou non ? Cela dépend de la emploi principal d’une page. S’il est conçu pour transmettre principalement des informations et que nous ne nous attendons pas à beaucoup de navigation, les menus collants ne sont pas très utiles.

Cependant, si nous nous attendons à ce que les utilisateurs naviguent beaucoup entre différentes vues sur une page et restent sur la page tout en le faisant – comme c’est souvent le cas sur les longues pages de destination, pages produits et filtres — puis avoir accès à la navigation, AZ ou onglets peut être très utile.

Aussi, lorsque les utilisateurs comparer des fonctionnalités dans une table de données, les en-têtes collants les aident à vérifier qu’ils regardent toujours la bonne donnée. C’est là que les en-têtes ou les colonnes collantes peuvent aider et faciliter la compréhension. C’est pourquoi les barres collantes sont si fréquemment utilisées dans le commerce électroniqueet d’après mon expérience, ils améliorent la découvrabilité du contenu et la vitesse d’interaction.

L’inconvénient des menus collants est qu’ils compliquent généralement l’exploration de la page par les utilisateurs. ils masquent le contenu. Les barres pleine largeur sur mobile et ordinateur de bureau sont courantes, mais elles doivent être compactes, en particulier sur les écrans étroits. Et ils doivent s’adapter pour tailles de robinet accessibles pour empêcher les taps de rage et les clics de rage.

Généralement, cela signifie que nous ne peut pas avoir plus de cinq éléments dans la barre de navigation collante. Le choix des éléments affichés dans le menu collant doit être éclairé par les tâches les plus importantes que les utilisateurs doivent effectuer sur le site Web. Si vous avez plus de cinq éléments, vous devrez probablement examiner une sorte de menu de débordement, comme affiché par Samsung.

Chaque fois que les utilisateurs doivent gérer des formulaires sur une page sur mobile, envisagez de remplacer les menus collants par des accordéons. Les claviers virtuels prennent généralement jusqu’à 60% de l’écranet avec une barre collante en vue, remplir un formulaire devient rapidement impossible.

De par leur nature, les menus collants vivent toujours au-dessus du contenu et souvent causer des problèmes d’accessibilité. Ils se cassent lorsque les utilisateurs effectuent un zoom avant. Ils bloquent souvent le contenu pour les utilisateurs de clavier qui parcourent le contenu. Ils masquent les liens et autres éléments focalisables. Et il n’y a souvent pas assez de contraste entre le menu et la zone de contenu.

Chaque fois que nous implémentons un menu collant, nous devons nous assurer que les éléments focalisables sont toujours visibles avec un menu collant en action. Et cela vaut également pour les ancres de page internes qui doivent tenir compte de la barre collante avec le rembourrage de défilement propriété en CSS.

Lorsque les menus collants deviennent longs, les derniers éléments de la liste devenir difficile d’accès. Nous pourrions les rendre visibles avec une sorte de débordement menu, mais ils apparaissent souvent sous forme de volets défilants, provoquant plusieurs barres de défilement.

Non seulement ce comportement cause problèmes de découvrabilité, mais c’est aussi souvent une cause d’erreurs et d’actions répétitives sur une page. Idéalement, nous l’empêcherions en limitant le nombre d’éléments, mais souvent ce n’est pas possible ou ne peut pas être géré correctement.

Une issue est de afficher le menu en accordéon à la place dans des situations où l’espace est limité, en particulier sur les appareils mobiles. C’est ce que nous faisons chez Smashing Magazine lors du paiement, avec un bouton qui révèle et masque le contenu du panier en cas de besoin.

Parce que les menus collants prennent souvent trop de place, nous pourrions les révéler en cas de besoin et les masquer lorsqu’un utilisateur se concentre sur le contenu. C’est l’idée derrière les en-têtes partiellement persistants : lorsqu’un utilisateur commence à faire défiler vers le bas, le menu disparaît, mais tout défilement vers le haut fait réapparaître le menu.

Le problème avec ce modèle est que parfois les utilisateurs veulent simplement revenir à une section précédente de la page ou revérifier certains détails dans un paragraphe précédent, et le menu gêne souvent. Page Laubheimer de NN/Group recommande d’utiliser un animation glissée ce dure environ 300 à 400 ms et préservera la sensation naturelle sans être distrayant.

Dans certaines situations, nous n’avons peut-être pas besoin d’un menu collant après tout. Nous pouvons éviter leurs inconvénients avec pages plus courtesou de longues pages qui répètent les incitations à l’action ou la navigation pertinentes dans la page.

Nous pourrions afficher un table des matières en haut de la page et attirer l’attention de l’utilisateur sur la table des matières avec un lien de retour en haut en bas de la page.

Emballer

Chaque fois que le travail de la page est d’aider les utilisateurs à agir, à enregistrer et à comparer, ou que nous nous attendons à ce que les utilisateurs comptent beaucoup sur la navigation, nous pouvons envisager d’afficher une navigation collante. Ils sont plus dangereux lorsqu’il n’y a pas assez d’espace de toute façon, comme c’est souvent le cas avec les formulaires sur les appareils mobiles.

Les menus collants ont un coût, car nous devons tenir compte des problèmes de convivialité et d’accessibilité, en particulier pour zoom, navigation au clavier et sauts d’ancre. Ajoutez-les si vous en avez besoin, mais veillez à les brancher par défaut.

Nous devons prioriser ce qui compte et supprimer ce qui ne compte pas. Et trop souvent, l’accent doit être entièrement mis sur le contenu et non sur la navigation.

Vous pouvez trouver plus de détails sur expérience utilisateur de navigation dans le vidéothèque sur les Smart Interface Design Patterns 🍣 — avec un formation UX en direct qui arrive en septembre de cette année.

Autres ressources

Bien sûr, les techniques énumérées ci-dessus effleurent à peine la surface. Voici de merveilleux articles sur les en-têtes collants, des considérations de conception aux implémentations techniques :

(il, yk)