Conception de la barre d'outils de navigation
Je travaille sur une nouvelle page Web en utilisant une barre d'outils de navigation en haut de l'écran. Il y a une boîte de profil d'employé à gauche, des certifications (le cas échéant pour cet employé) au centre de la barre d'outils et quelques boutons d'icône de commande à droite.
Les boutons sont davantage des liens de fonctionnalité et sur certains boutons, des menus déroulants apparaissent lorsqu'ils sont survolés à l'aide d'une souris. Rien n'indique que les listes déroulantes pourraient apparaître. Il n'y a pas beaucoup de biens immobiliers pour la navigation, c'est pourquoi la barre d'outils est là, ce qui semble être un bon moyen d'obtenir plus avec moins.
Mes questions sont:
est-ce une mauvaise conception UX mélangeant des boutons avec des menus déroulants comme celui-ci? Pour moi, ça semble mal?
les boutons sont défilables pour que vous puissiez en tenir plus, mais combien de boutons seraient trop nombreux dans une barre d'outils?
- Je pense que le design lui-même (barre d'outils horizontale pour la navigation) est bon pour cela, mais il est mal mis en œuvre? Que devez-vous utiliser pour une barre d'outils horizontale pour la navigation?
Je peux maintenant apporter ma contribution à la conception, mais je n'ai pas été impliqué dans le processus d'origine, donc j'aimerais obtenir plus d'informations avant de présenter des idées d'amélioration.
Voici un brouillon très grossier de la mise en page utilisant Mockup Builder . Chaque ensemble de boutons ronds en haut a un défilement horizontal vers la droite pour les boutons supplémentaires et le texte est au-dessus de chaque bouton dans la mise en page réelle. Les images du bas ont également une fonction de défilement.
Un croquis/filaire de l'interface utilisateur aiderait à répondre à vos questions.
Mais en ce qui concerne les boutons avec listes déroulantes, ce n'est pas faux. En fait, de nombreux services utilisent ce type de widget. Il existe 2 variantes de cela comme indiqué ci-dessous:
L'étiquette du bouton est le nom du groupe/catégorie dans lequel toutes les actions sont placées, et l'étiquette est suivie d'une icône de flèche vers le bas suggérant que cela ouvrira un menu déroulant. Reportez-vous au bouton Gmail Plus à titre d'exemple. Cliquer sur le bouton n'effectuera aucune action mais affichera la liste déroulante de l'utilisateur avec toutes les actions en dessous.
Le bouton lui-même est un élément d'action cliquable (action la plus utilisée/par défaut/recommandée/basée sur le contexte) et il a une petite flèche vers le bas comme bouton supplémentaire attaché. Les deux effectuent des actions distinctes, c'est-à-dire que cliquer dans la zone principale du bouton exécutera l'action nommée, et si l'utilisateur clique sur l'extension du petit bouton avec la flèche vers le bas, il ouvre une liste déroulante sous le bouton affichant plus d'éléments d'action liés à l'action principale. .
Généralement, le 2e type de widget est très courant dans les applications de bureau, par ex. Eclipse l'utilise très souvent. Mais beaucoup d'applications Web l'utilisent également de plus en plus.
Cela dépend de l'exigence de savoir lequel des deux est utilisé dans n'importe quelle application. J'espère que cela efface votre doute pour les listes déroulantes basées sur les boutons.
Il est courant de mélanger certains types d'éléments utilisateur ensemble, donc la clé ici est de rendre évident qu'ils ont des comportements différents et se séparent/se regroupent de manière appropriée.
La règle générale est que si vous avez entre 2 et 7 personnes, vous n'avez pas besoin d'un autre groupe, mais si c'est fini, il devient difficile pour les gens de trouver facilement ce dont ils ont besoin.
Il n'y a pas vraiment de bonne ou de mauvaise façon de procéder. Il y a généralement des contraintes en termes d'espace d'écran, de styles existants, de comportement des utilisateurs et d'autres choses à prendre en considération. Parfois, vous n'avez qu'à équilibrer/jongler avec les choses pour mieux soutenir ce que l'utilisateur veut faire.