web-dev-qa-db-fra.com

Un bouton avec des choix

J'ai une liste de boutons qui peuvent être pressés ou non individuellement (comme la fonctionnalité de case à cocher). Certains des boutons peuvent également avoir certains attributs (+ ou -), mais il est rare de sélectionner ces attributs, le plus courant est simplement d'utiliser les valeurs initiales des boutons.

Voir mon image jointe:

enter image description here L'idée de la conception est de laisser les utilisateurs cliquer simplement sur les valeurs qu'ils souhaitent, ce qui est une façon assez rapide de faire les choix. Si l'utilisateur souhaite ajouter l'attribut + ou - (disponible sur "b" et "c") - appuyez sur le bouton et après un certain délai une liste déroulante apparaît avec les choix.

À mon avis, l'inconvénient est que j'essaie de fusionner deux éléments d'interface utilisateur standard - un bouton et une liste déroulante, est-ce intuitif?

Malheureusement, je n'ai pas le temps de créer un scénario de test utilisateur pour tester cela.

Puis-je obtenir des commentaires à ce sujet? Pouvez-vous suggérer une meilleure façon d'ajouter + ou - à "b" et "c"?

6
Henrik Ekblom

Pour l'interaction avec la souris, vous pouvez utiliser des boutons divisés au lieu des boutons de menu. Dans les boutons "A", "B", ... ci-dessus, vous pouvez choisir l'état pressé ou non pressé. Avec les boutons déroulants ci-dessous, vous pouvez choisir les attributs.

Voir les directives Microsoft ui

Exemple avec boutons séparés (non stylisés):

Selection with split buttons

Autre approche: La sélection des attributs s'affiche lorsque la souris survole les boutons "A", "B" ....

selection with roll over

6
sysscore

La façon dont vous l'avez proposée est la façon dont OmniGraffle le fait, et je l'ai toujours trouvée assez intuitive. Quelques détails de leur mise en œuvre:

  • Leur appui long est vraiment court; pas plus de quelques centaines de millisecondes avant de déclencher la liste déroulante. Le rend rapide et réactif.
  • Si l'utilisateur clique sur la petite flèche dans le coin inférieur droit du bouton, il déclenche immédiatement la liste déroulante. Bien que cela nécessite un peu de dextérité, c'est bien d'avoir cette option disponible si vous savez ce que vous voulez dans le menu.
  • Comme vous l'avez schématisé, vous conservez la sélection de l'utilisateur s'il sélectionne un sous-élément, ce qui en fait le choix 'par défaut' sur le bouton du haut. À mon avis, c'est le comportement correct, et c'est ce que fait OmniGraffle également.
  • Comme KatDNA mentionné ci-dessus, assurez-vous de concevoir pour une utilisation sur le bureau (souris). L'interface serait nécessairement un peu différente au toucher (bien que le toucher long soit acceptable dans une interface gestuelle pour révéler également une plus grande complexité)

OmniGraffle ToolsOmniGraffle Dropdown

3
Daniel Newman

Mes premières réflexions à ce sujet:
Est-il tout à fait nécessaire de masquer les options et de les afficher uniquement après avoir cliqué sur le bouton? Cela peut surprendre le premier utilisateur.

Si le bouton peut inclure les signes plus et moins au-dessus et au-dessous du symbole [a/b/c/d] et que la logique de l'interface utilisateur est cachée à l'utilisateur, cela pourrait le rendre beaucoup plus intuitif. Peut-être aussi réduire le nombre de clics nécessaires.

2
Kris