web-dev-qa-db-fra.com

Comment empêcher les utilisateurs de soumettre un formulaire sans aucune modification

Je voudrais empêcher les utilisateurs de pouvoir soumettre un formulaire dont la sélection n'a pas été modifiée par rapport à son état d'origine.

Exemple:
enter image description here

Dans le filaire ci-dessus, lorsque l'utilisateur voit ce formulaire, l'option sélectionnée d'origine est Option 1. Étant donné que l'utilisateur n'a pas modifié l'option, j'ai désactivé le Sauver bouton. Si l'utilisateur sélectionne Option 2, le Sauver sera activé.

Je crains que les utilisateurs ne sachent pourquoi la Sauver est désactivé, mais cela peut être la meilleure solution pour les empêcher de soumettre un formulaire sans modifications.

Pensées?

ÉDITER:

Je suis arrivé avec un design qui, à mon avis, pourrait potentiellement résoudre le problème, mais un développeur a mentionné que le texte d'aspect désactivé n'avait pas vraiment de sens. Peut-être vaut-il mieux obtenir les commentaires des UX-ers!

enter image description hereenter image description here

formsbuttonsselectionradio-buttonsdisable
3
Yeezy

C'est un comportement OK et acceptable. MAIS:

les alternatives courantes sont:

  1. Autoriser l'utilisateur à appuyer sur enregistrer. Les boutons désactivés peuvent être frustrants pour les utilisateurs, et après tout, il n'y a aucun mal à simplement réenregistrer l'option existante. Cela corrige également un cas gênant où l'utilisateur sélectionne l'option 2 (activation du bouton Enregistrer), puis re-sélectionne l'option 1 (désactivez-vous ensuite à nouveau le bouton? Si cela peut être déroutant, sinon le formulaire présente un comportement incohérent) .

  2. Désactivez le bouton soumettre mais informez l'utilisateur. Si l'utilisateur clique sur le bouton Enregistrer, affichez un avis sous le bouton indiquant à l'utilisateur qu'il n'a pas modifié sa sélection.

  3. Masquer le bouton d'envoi sauf si l'utilisateur modifie le formulaire. Il s'agit d'un modèle obsolète car un formulaire sans action d'envoi est source de confusion. Ne l'utilisez pas sauf dans les cas d'angle dans lesquels je n'entrerai pas.

J'ai une forte préférence pour le n ° 1, car les contrôles désactivés peuvent désorienter les utilisateurs. Il est préférable d'avoir une forme cohérente (cohérence UX) et de masquer la complexité en la gérant vous-même.

3
tohster

Rendre l'option de changement explicite

Par exemple, si l'option 1 est le choix existant et qu'il y a 4 autres options

La mise en page serait

Votre choix actuel est

Option 1 (x)

Remplacer par .....

Option 2 () Option 3 ()

Etc

Rend le changement explicite et réduit la charge cognitive

La façon dont vous choisissez de présenter dépendra de vos frais généraux de programmation (par exemple, l'ordre de tri, etc.)

Aussi en faisant de la couleur. Par exemple, la sélection bos est surlignée, colorée en vert, etc.

Le bouton Enregistrer ne s'activerait que si une demande de modification était faite

0
Manoj Chawla

Si vous avez besoin que l'utilisateur modifie la sélection, la désactivation de la sauvegarde/soumission lorsque l'utilisateur souhaite conserver la sélection peut ne pas être l'expérience optimale.

Quelques stratégies alternatives seraient:

  1. Faites en sorte que le bouton affiche Enregistrer, puis Soumettre afin que si l'utilisateur souhaite conserver l'option 1, il y a une confirmation explicite. Si l'utilisateur souhaite passer à l'option 2, il y a également une confirmation de sauvegarde avant de soumettre. Cependant, cela est également déroutant s'il est possible que l'utilisateur change à nouveau d'avis, ce n'est donc pas recommandé.
  2. Si l'utilisateur n'effectue pas de modification de sélection, lorsqu'il clique sur enregistrer/soumettre, vous pouvez afficher une boîte de dialogue de confirmation lui demandant s'il souhaite effectuer une modification et obtenir sa confirmation pour conserver la sélection.
  3. Afficher leur sélection précédente mais effacer les états de sélection des boutons radio et leur permettre de faire explicitement une sélection pour l'option 1 ou 2.
0
Michael Lai

Je ne suis pas sûr d'avoir compris votre problème, de toute façon je vois 2 solutions:

  1. Utilisez une case à cocher comme confirmer l'option 2, l'utilisateur sera obligé de la cocher (les navigateurs modernes ajouteront une invite si l'attribut required est présent). Cela se voit sur de nombreux sites Web où vous devez accepter Conditions d'utilisation pour terminer une commande, etc.
  2. Utilisation <input type="submit" ... > ou <button type="submit"> ... </button> pour chaque option (utilisez le name"... " attribut pour différencier les choix), donc l'utilisateur devra choisir une option en cliquant dessus.
0
A.L