web-dev-qa-db-fra.com

Placement du bouton Supprimer sur le formulaire

J'ai un formulaire qui modifie un vol et il devrait être possible de les supprimer. J'ai envisagé de mettre un bouton de suppression dans la page d'index, qui répertorie tous les vols, mais les lignes du tableau sont cliquables elles-mêmes et je ne souhaitais pas mettre un élément cliquable sur un autre élément cliquable.

J'ai créé une maquette rapide pour montrer à quoi ressemblerait la position du bouton de suppression sur le formulaire.

Mock-up from flight form

J'ai identifié deux positions possibles pour le bouton Supprimer:

1) Tiré à droite sur la tête. Je crains que les utilisateurs ne le remarquent pas, mais il est éloigné du bouton Enregistrer et empêchera les utilisateurs de cliquer dessus accidentellement.

2) À côté du bouton Enregistrer. Les utilisateurs le remarqueront sûrement mais il y a un risque important de cliquer dessus accidentellement.

Où placer le bouton Supprimer le mieux?

15
Laurens

Le problème avec votre maquette actuelle est que le bouton "Supprimer" est le plus visible. Ma pensée immédiate quand j'ai vu votre maquette était que le bouton "Supprimer" était l'action principale. Bien qu'il ne soit pas suffisamment plat pour que votre bouton "Enregistrer" semble désactivé à la première vue. Il ne saute pas comme le bouton "Supprimer".

Assurez-vous que votre action principale est la plus visible. Vous pouvez appliquer une couleur verte au bouton "Enregistrer" pour indiquer clairement à l'utilisateur que c'est l'action souhaitée.

Concernant le bouton "Supprimer". Gardez à l'esprit que c'est une action secondaire, a peut-être de grandes conséquences et ne sera pas interagi avec sur chaque vue d'écran (en supposant que l'action de suppression est utilisée beaucoup moins souvent que l'action de sauvegarde). Pour ces raisons, je n'utiliserais pas du tout de bouton, mais un lien à la place.

L'utilisation d'un lien au lieu d'un bouton indique toujours clairement à l'utilisateur qu'il peut être actionné, mais en même temps, vous expliquez que l'action souhaitée (et attendue) consiste à enregistrer plutôt qu'à supprimer.

Comment gérer la suppression

Gardez à l'esprit que les utilisateurs peuvent accidentellement supprimer un enregistrement, soit en faisant un mauvais clic, soit en supprimant un enregistrement différent de celui prévu. À cet effet assurez-vous d'inclure la fonctionnalité d'annulation, ou si ce n'est pas possible pour une raison quelconque, demandez une confirmation claire.

Ne faites pas trop, faites des lightboxes et des modaux similaires brisez le flux mental de votre utilisateur et avoir à confirmer chaque action de suppression, peu importe l'ampleur de l'impact, est vraiment ennuyeux. Ne nécessite une confirmation de suppression que lorsque l'enregistrement n'est pas facilement restauré (et lorsque la fonctionnalité d'annulation ne peut pas être implémentée)

Lorsque vous utilisez une confirmation, tenez également compte de l'impact de la suppression. Si le résultat de la suppression accidentelle d'un enregistrement n'est pas facilement restauré, vous pouvez implémenter un "ralentisseur" en demandant à l'utilisateur d'entrer son mot de passe ou une chaîne de confirmation lorsqu'il est sur le point de supprimer un enregistrement.

Jetez un œil à la façon dont MailChimp fait cela:

Example of delete confirmation modal in MailChimp

17
vincent.io

Supprimer est une option sur laquelle vous ne voulez pas que quelqu'un clique accidentellement, vous devez donc supprimer l'accentuation autant que cela est raisonnable.

Si vous le rendez rouge (comme vous l'avez fait dans votre exemple), vous attirerez l'attention dessus. Au lieu de cela, vous devez attirer l'attention sur l'action normale (sauf dans ce cas). Vous devez placer la suppression suffisamment loin pour qu'une sélection accidentelle soit peu probable, mais assurez-vous toujours qu'elle est lisible si quelqu'un la recherche.

Quelque chose comme l'une de ces options:
enter image description here
enter image description here

9
JohnGB

Premièrement, je ne suis pas sûr que ce soit le bon emplacement pour une fonction de suppression - mon premier instinct était que la fonction de "suppression" pourrait ressembler à une fonction de "forme claire" d'une sorte - donc ce serait il serait probablement préférable d'attacher le bouton de suppression à un niveau d'abstraction plus élevé (par exemple la liste des vols), ou au moins de rendre l'action moins ambiguë.

En ce qui concerne la position, vous avez raison d'imaginer qu'une position à l'extrême droite pourrait échouer - assis en vision périphérique, il pourrait être difficile pour les utilisateurs d'identifier l'élément par son texte. La localisation de l'élément à côté du bouton `` enregistrer '' est une option plus puissante (je ne m'inquiéterais pas des `` clics accidentels '' à condition que les tailles cibles des boutons soient raisonnables et qu'il existe une sorte de fonction d'annulation - je ne pense pas que j'ai - jamais vu un clic accidentel dans un test d'utilisabilité non mobile que j'ai observé). Cependant, cela pourrait impliquer que "supprimer" a en quelque sorte un lien avec "enregistrer" - comme s'il s'agissait d'une sorte de bouton "prendre du recul" ou "annuler les modifications". Ceci est approprié dans un formulaire en plusieurs étapes où "supprimer" quitte le processus, mais pas autrement.

Je chercherais donc à exposer "supprimer" à un stade différent, à la branche décisionnelle avant ce formulaire.

5