web-dev-qa-db-fra.com

Boutons dans une fenêtre de dialogue

J'ai une boîte de dialogue bootstrap qui présente les données d'un objet à l'utilisateur.

Outre l'affichage des données de l'objet, la boîte de dialogue doit offrir aux utilisateurs des options pour effectuer des tâches générales sur l'objet, telles que l'enregistrement, la suppression et l'archivage. Ces actions étant générales, elles doivent être affichées dans une partie "générale" de la boîte de dialogue pour faire comprendre à l'utilisateur que ces boutons agiront sur l'objet et non sur certaines de ses propriétés.

Deux façons de procéder:

  • Boutons en bas de la fenêtre:

enter image description here

Le problème principal de cette conception apparaît lorsque la boîte de dialogue est longue car l'utilisateur devra toujours faire défiler vers le bas pour prendre des mesures sur l'objet (supprimer l'objet par exemple)

  • Boutons sur le côté:

enter image description here

C'est une bonne option que Trello utilise, mais je ne veux pas copier les conceptions des autres avant d'y réfléchir: p

  • n bouton déroulant à côté du bouton de fermeture supérieur

enter image description here

C'est aussi une bonne option, le seul problème que je vois avec celui-ci est que les différentes actions que l'utilisateur peut entreprendre sont masquées. Un clic, au moins, est nécessaire pour voir ce qui se trouve sous ce bouton déroulant.

Questions

  1. Quelle option convient le mieux à mes besoins?
  2. Y a-t-il d'autres modèles que je pourrais utiliser dont je ne suis pas au courant?
3
GETah

Le placement des boutons est une question de convention et de goût. La convention dépend du type d'application (Web) de votre bâtiment. Dans les formes de fenêtres standard - les boutons étaient placés en bas, mais la taille était généralement fixe, donnant à l'utilisateur une sensation de fluidité lorsqu'il travaillait. Ils savaient où trouver les boutons.

Dans votre cas, vous nous dites que le contenu aura différentes longueurs, ce qui déplacerait parfois les boutons placés en bas sous le pli (de la page Web). Cela peut être amélioré en plaçant les boutons dans la bonne zone, éventuellement avec un Nudge de couleur d'arrière-plan plus sombre pour les faire ressortir du contenu.

Cela permettrait aux utilisateurs de savoir où trouver les boutons et d'y accéder facilement, avec le moins d'effort possible.

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

4
Benny Skogberg

Le fait qu'il y ait beaucoup de contenu dans la boîte de dialogue ne signifie pas nécessairement que les utilisateurs devront faire défiler pour accéder aux boutons. En fait, il serait extrêmement inhabituel d'avoir une boîte de dialogue qui s'étend sous le pli. Une solution parfaitement standard consiste à introduire le défilement dans la boîte de dialogue et à laisser les boutons bien en vue. Un exemple de Facebook:

enter image description here

3
Vitaly Mijiritsky