Comment s'appelle ce menu à plusieurs niveaux et dois-je l'utiliser?
Comment s'appelle le menu ci-dessus? Ce menu est similaire à celui qui apparaît sur les signets pour Google Chrome.
Quels sont les avantages et inconvénients de l'utilisation de ce modèle?
Je prévois d'utiliser ce modèle dans le tableau de bord. Dans ma conception, les niveaux sont limités à 3. Est-ce faisable à utiliser? Est-il convivial en termes de convivialité?
En général, le principal inconvénient des menus en cascade est qu'il n'y a qu'un chemin étroit que vous devez déplacer le curseur pour passer du menu au sous-menu au sous-sous-menu. (C'est-à-dire que vous ne pouvez pas passer la souris en ligne droite d'une sélection de menu au dernier élément de son sous-menu. Vous devez faire glisser la souris horizontalement sur l'élément de menu puis vers le bas à l'intérieur du sous-menu.) Il est trop facile pour l'utilisateur de désactiver la souris de ce chemin et faire apparaître un menu différent et indésirable. Je suis sûr que cela vous est arrivé. Nous le détestons.
Ceci est généralement traité de trois manières:
- N'utilisez pas de menus en cascade.
- Faites apparaître les sous-menus après un délai de survol. Cela permet aux utilisateurs de s'écarter momentanément de ce chemin, mais cela ralentit l'utilisateur.
- Faites ceci chose sympa qu'Amazon a faite. Ils donnent aux utilisateurs une zone en forme de coin qui couvre les chemins probables de l'utilisateur du menu au sous-menu.
Ils sont appelés listes déroulantes à plusieurs niveaux ou menus à plusieurs niveaux =
Ils sont connus (par Mac OS Guidelines ) sous-menus.
Un sous-men est un élément de menu qui fonctionne comme un menu, affichant un ensemble d'éléments imbriqués lorsqu'il est sélectionné.
Ils fournissent quelques conseils pour limiter leur utilisation et quelques bonnes pratiques.
Limitez la profondeur et la longueur des sous-menus. Si vous devez inclure des sous-menus, limitez-les à un seul niveau. Si un sous-menu contient plus de cinq éléments, pensez à lui donner son propre menu.
Material Design les appelle menus en cascade , selon la réponse @RCburns.
Ils sont destinés au bureau uniquement.
Les éléments de menu peuvent révéler des sous-menus imbriqués. Idéalement, limitez l'imbrication à un seul niveau, car il peut être difficile de parcourir plusieurs sous-menus imbriqués.
(Leur propre exemple montre 2 niveaux imbriqués)
L'utilisation de menus en cascade (également appelés menus à plusieurs niveaux) est toujours un modèle de conception très courant, mais l'utilisation de 3 niveaux d'imbrication doit généralement être évitée, vous pouvez donc envisager d'utiliser des méga-menus.
Il semble que vous envisagiez d'avoir 3 menus imbriqués, ce qui va à l'encontre des recommandations des deux Apple et Google (comme l'a souligné @Mike M). Un problème UX principal avec les menus en cascade qui activent en survol, comme indiqué dans la réponse de @Ken Mohnkern, se trouve le chemin étroit pour la souris (parfois appelé un couloir de souris étroit). Il y a eu excellente discussion il y a quelques jours qui traite de ce problème précis, et il y a des ressources supplémentaires qui pourraient vous intéresser si vous choisissez d'utiliser des menus en cascade.
Méga menus
Sans en savoir plus sur votre architecture d'informations, la mise en page et toute autre navigation planifiée, il est difficile de faire une recommandation concrète, mais je suggère d'envisager d'utiliser méga menus . Le NNGroup a montré que les méga menus fonctionnent bien pour la navigation sur le site . L'un des grands avantages des méga menus est qu'ils vous permettent d'afficher plus d'informations en un coup d'œil. Regardons la navigation de haut niveau d'Amazon:
Comme vous pouvez le voir, c'est un menu en cascade, cependant, le seul sous-menu est un méga menu. A noter:
- Le menu de niveau supérieur clairement étiqueté ce qui allait apparaître dans le sous-menu (Santé, beauté et épicerie)
- Le sous-menu est un méga menu qui contient deux catégories (Santé et beauté et Épicerie).
- Ils ont utilisé le méga menu pour commercialiser leurs coupons instantanés en utilisant une excellente typographie et une image attrayante. Contrairement aux menus en cascade traditionnels, les méga menus offrent la possibilité d'ajouter des éléments de conception supplémentaires qui peuvent être utilisés pour commercialiser ou promouvoir le contenu connexe.
Lorsqu'il est affiché sur mobile, le menu n'est plus présenté comme un méga menu, mais une liste déroulante plus courante:
Ressources supplémentaires
Si vous optez pour des menus en cascade, Smashing Magazine a un article sur les meilleures pratiques pour conception de menu déroulant . L'article date de 2009, mais contient quelques bons conseils qui sont toujours applicables. Ils ont un plus article contemporain qui offre de bons conseils pratiques sur la conception d'interaction liée à la navigation déroulante/en cascade. Design Modo a également n article sur UX Design Tips for Dropdown Menus avec des conseils plus pratiques.
Je ne connais pas son vrai nom mais je les ai toujours appelés menus en cascade. Dans la plupart des cas, je fais de mon mieux pour les éviter car il est très facile de perdre l'utilisateur. Cela dit, c'est un modèle que Apple a utilisé depuis le début pour la navigation dans les fichiers. L'idée de base de cette approche est que l'utilisateur saura où chercher quel élément qu'il recherche et une fois qu'ils ont identifié cet élément, ils n'ont pas besoin de se rappeler où il se trouvait par rapport à tout le reste.
Vous dites que vous ne prenez que trois niveaux de profondeur, mais quelle est la taille de chaque niveau? Si vos niveaux contiennent trop d'éléments, cela peut être aussi mauvais que d'avoir trop de niveaux.