Où placer un bouton de suppression dans un modal
Actuellement, dans notre application, nous avons des tableaux d'informations qui vous donnent certaines des données les plus importantes et nous avons un lien voir plus qui ouvre une boîte de dialogue modale et donne à l'utilisateur toutes les informations pour cette ligne. C'est également là que nous plaçons le bouton Supprimer pour cette ligne. La raison du stockage du bouton de suppression dans le modal est que les données sont très importantes et nous ne voulons pas que la suppression soit facilement accessible.
Le problème que j'ai est que je ne peux pas déterminer quel emplacement dans le modal serait le plus utilisable pour nos utilisateurs. J'ai proposé quelques-unes des différentes options que nous avons traversées et j'espérais que les gens pourraient me donner plus d'opinion professionnelle.
Option 1 est ce que nous avons en ce moment, juste une simple poubelle à côté du titre dans le modal (la poubelle est beaucoup plus petite mais elle est aussi petite que le balsamiq me le permettra).
Option 2: bouton Supprimer dans le coin inférieur gauche du modal.
Option: Supprimer le texte dans le coin inférieur gauche.
Option 4: Supprimer le texte dans l'en-tête à côté du titre,
Option 5: Le bouton Supprimer ne serait disponible qu'en mode édition et apparaîtrait sur le côté gauche du pied de page.
Au lieu de rendre la suppression difficile, serait-ce une option pour rendre la suppression facile et faciliter également l'annulation?
Option 1, il semble que le titre soit supprimable.
Option 2, assez bien mais le design ne le rend pas clair alors que c'est pour tout supprimer ou juste le dernier paramètre (label?)
Option 3, même idée que l'option 2
Option 4, identique à opt. 1 (mais le texte est beaucoup plus clair que l'icône)
Option 5, peut-être la meilleure mais la même idée que l'option 2
Dans toutes les options, cela prête à confusion alors que le X sert à fermer le modal ou à supprimer quelque chose.
Par conséquent, je vous propose de réorganiser votre mise en page afin qu'il soit plus évident de savoir ce que vous pouvez faire.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Une autre solution peut être, comme vous l'avez avancé, Supprimer uniquement en mode édition .
Cela protégera définitivement les données ce qui est très important et nous ne voulons pas que la suppression soit facilement accessible.
Résumant certaines des meilleures pratiques de création de formulaires (Luke Wroblewski a un excellent article, y compris le suivi des yeux, sur Actions principales et secondaires dans les formulaires Web ):
- Rendez l'action principale alignée à gauche.
- Désaccentuez les actions secondaires et dangereuses et placez-les après l'action principale.
Juste pour le plaisir, vous pourriez également envisager de mettre des étiquettes au-dessus et à gauche de vos champs. Ils ont tendance à mieux performer. Voir Placement des étiquettes dans les formulaires par Mateo Penzo et Conception du formulaire d'application Web par Luke Wroblewski
Option 5 de mon côté aussi. Si nous suivons la majorité des mouvements du curseur des utilisateurs, c'est de droite à gauche. Donc. ce serait le moyen idéal de présenter les boutons d'action principale qui devraient être sur le côté droit où l'utilisateur peut cliquer en premier.
Aucun. Placer "Supprimer" dans une fenêtre de modèle n'est pas intuitif.
Au lieu de placer la suppression dans la fenêtre contextuelle, affichez-la dans la liste. C'est ce que l'utilisateur s'attendrait à voir. Assurez-vous que l'utilisateur est invité à confirmer une suppression ou autorisé à annuler l'action.
Les gens font souvent référence à Gmail dans des situations comme celle-ci.
L'option 5 semble la meilleure.
Séparer l'action principale des "actions spéciales" permettra d'éviter les erreurs
Le "bouton d'annulation" a tendance à disparaître dans les fenêtres modales. La croix de fermeture suffit.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Je pense que votre meilleure option est de fournir une alerte/confirmation lorsque l'utilisateur clique sur "Supprimer".
- De cette façon, vous avez la possibilité de fournir un avertissement.
- C'est le même nombre de clics que si vous fournissez "annuler" dans la fenêtre contextuelle.
- C'est aussi plus facile sur l'effort de développement.