L'ère des menus déroulants en vol stationnaire est-elle terminée? Cela pourrait bien être. Ce modèle de conception ne fonctionne pas pour les utilisateurs d'aujourd'hui. Le concept est maladroit et ne se traduit pas toujours bien sur des écrans plus petits.
Les utilisateurs veulent des menus et des options de navigation plus faciles à utiliser, à comprendre et ne comportant pas plus d’options qu’ils ne le pensent en quelques secondes. Les menus de navigation doivent être indépendants de l'appareil et fonctionner de la même manière, en créant une expérience unique, quel que soit le type d'appareil. Alors, que pouvez-vous faire pour dire au revoir à ces menus déroulants? Nous avons cinq alternatives.
1. Panneaux défilants
Quel que soit votre style de défilement, l’utilisation d’effets de défilement tels que la parallaxe ou des panneaux pour amener les utilisateurs vers une autre partie du site constitue un style de navigation efficace. Alors que beaucoup d’entre nous (y compris moi-même) avons donné le parchemin à mort pour la mort il ya quelques années, un écran plus petit permet aux motifs de défilement de réapparaître en tant que fonction hautement utilisable pour tous les types d’appareils.
Les utilisateurs n'ont pas peur de se déplacer vers le bas de la page. Vous n'avez donc pas à insérer tous les liens ou informations sur le premier écran. Utilisez HTML5 à votre avantage et construisez un site qui intègre la navigation dans une expérience utilisateur immersive. (Si immersif en fait que les utilisateurs peuvent même ne pas reconnaître la navigation pour ce que c'est.)
Pour que cela fonctionne, vous devez faire plus que simplement créer une longue page avec un tas de liens. Le design doit avoir un impact. Indiquez aux utilisateurs ce que vous faites. Créer une séparation visuelle avec des couleurs entre? Écrans? et inclure de grandes zones cliquables qui indiquent aux utilisateurs exactement où ils vont aller.
Si vous craignez que certains utilisateurs aient besoin de ce menu plus traditionnel, semblable à celui d'une carte de site, pensez à le ranger dans le pied de page. Vous vous retrouverez avec un design plus simple tout en conservant ces éléments pouvant être liés dans un emplacement unique pour les utilisateurs de la vieille école.
2. Hamburgers cachés
Avant de vous lancer dans la? Je déteste les icônes de hamburger? rant, pensez-y un instant. Qu'on le veuille ou non, cette icône minuscule est devenue le symbole d'un menu contextuel. Les utilisateurs semblent le comprendre. Et même si de nombreux concepteurs semblent le détester, vous finirez probablement par l’utiliser quand même.
Alors arrêtez de vous battre.
Au lieu de cela, essayez de développer de meilleurs moyens d’incorporer l’icône à votre profil de navigation global. Je suis en train de creuser des icônes de hamburgers qui ouvrent des menus minimalistes en plein écran, tels que Trivium Art History, ci-dessus.
Le truc ici est la simplicité. Le menu est en gras, offre aux utilisateurs quelques choix et est facile à utiliser sur n’importe quel appareil. Qui a besoin de dizaines d'options de menu plus, de toute façon? Une partie importante des utilisateurs atterrira sur votre site Web à partir d'un moteur de recherche situé sur une page intérieure. le nombre d'utilisateurs qui saisissent directement votre URL puis se déplacent dans la navigation sur site diminue constamment.
3. Navigation de type carte
Cartes, cartes et plus de cartes. Il semble que les concepteurs (et les utilisateurs) peuvent en avoir assez. Alors pourquoi ne pas faire des cartes votre option de navigation / menu préférée?
Commencez avec un motif de carte sur la page d'accueil qui est une expérience en plein écran. Chaque carte emmène ensuite les utilisateurs dans une partie différente du site. L'idée est si simple et intuitive que tout utilisateur devrait pouvoir naviguer facilement dans le flux et trouver ce qu'il cherche facilement.
En prime, les cartes réactives se mettent alors en place? sur les écrans des appareils mobiles afin que l'expérience soit similaire sur toutes les plateformes. (Les utilisateurs vont vous aimer pour cela.)
Pour mélanger le design, pensez à l’extérieur de la boîte avec votre interface de style carte. Mélangez différents styles de cartes (texte, images, vidéo) de sorte que les utilisateurs soient incités à regarder à travers l'écran et à interagir avec plusieurs éléments. Katvig, ci-dessus, incorpore plusieurs styles de cartes, couleurs et animations simples pour attirer l’attention sur des éléments spécifiques.
4. Menus collants
Simple et utilisable. Les menus collants sont un moyen simple d’aider les utilisateurs à naviguer sur votre site. Créez une structure de menu simple avec seulement quelques éléments importants et assurez-vous que l'élément collant trouve et se verrouille à une position spécifique sur l'écran.
La plupart du temps, ces barres de menu sont volumineuses puis se réduisent à une version plus petite que le haut de l'écran de chaque page. (Il est difficile d'obtenir plus convivial que cela.)
Le site Bloomberg Mayors Challenge fait un excellent travail avec son menu collant. La position du menu se déplace du milieu de l'écran au sommet de la page d'accueil (et sur toutes les pages de menu de niveau supérieur), offrant ainsi un intérêt visuel et restant fidèle à toutes les autres pages du site. En outre, le menu vous donne quelques éléments que les utilisateurs pourraient souhaiter, tels que des icônes de médias sociaux pour un accès rapide et un sélecteur de changement rapide pour la langue.
Cette solution simple est l’une des choses les plus conviviales que vous puissiez faire. C'est pourquoi les menus collants sont une caractéristique de vente populaire pour beaucoup? Boxed? thèmes du site. (Il est un peu surprenant que plus de sites ne les utilisent pas.)
5. Menu latéral vertical
C'est une fonctionnalité très utilisée par deux des sites les plus populaires au monde, Twitter et Facebook, mais peu d'autres sites Web tirent parti de la navigation par menu latéral vertical. Peut-être qu'il est temps de commencer.
Les deux sites de médias sociaux intègrent des éléments importants dans des éléments de navigation sidebar-esque. La colonne verticale mince est idéale pour contenir beaucoup d'informations textuelles simples et pour rendre les choses faciles à voir en un coup d'œil.
Que vous optiez pour un menu à gauche ou à droite de l’écran dépend de vous. (Il y a des avantages et des inconvénients avec l'une ou l'autre option.) J'y penserais en termes de fonctionnement de la navigation avec d'autres images. Le reste du site a-t-il une traction directionnelle d'un côté ou de l'autre? L'imagerie dominante pourrait-elle amener l'utilisateur à regarder la navigation? Pensez à l’ensemble des éléments d’une manière globale pour créer des pièces qui fonctionnent ensemble pour créer une sensation unique et unifiée.
5 ressources impressionnantes
- Livre électronique sur les meilleures pratiques de conception d'interface utilisateur Web
- Extraits de CSS: Navigation horizontale simple
- ? Dropdowns devrait être l'interface utilisateur de dernier recours? et comment créer de meilleures formes
- Exemples de navigation adaptative NavNav
- ? 10 superbes modèles de menus HTML à télécharger?
Conclusion
Les modèles de navigation et les styles de menu sont une partie évolutive de la conception de sites Web, mais beaucoup de tendances sont plus lentes à se développer qu’ailleurs. Cela peut être dû à la complexité de la conception de styles différents pour cet élément essentiel ou à la prudence des concepteurs qui s’attendent à voir ce qui se traduit par des modèles d’utilisateurs plus acceptés.
La leçon à tirer est la suivante: la navigation simple est préférable. Si vous utilisez des listes déroulantes fastidieuses et accablantes, il est temps de changer. Fonce.