Meilleure pratique pour un bouton qui effectue plusieurs actions
Considérez ce scénario:
Un bouton "Connect", qui se transforme en bouton "Cancel" lorsque vous cliquez dessus. Lorsque la connexion réussit, elle se transforme en bouton "Disconnect".
Cela devrait-il être géré avec 3 boutons différents (rendus visibles/invisibles), ou par un seul bouton (vérifiez également le contenu/la balise pour voir quelle action - connecter/annuler/déconnecter - devrait être prise)?
Je choisirais probablement d'utiliser trois boutons distincts pour ne pas avoir à jeter la méthode de clic d'un seul bouton avec la gestion de l'état pour les différents états de la connexion.
D'un autre côté, le fait d'avoir un seul bouton vous permettrait d'avoir un seul contrôle, de modifier son texte si nécessaire et d'empiler la logique dans une instruction switch selon les besoins.
Si l'application est celle qui sera touchée par quelqu'un d'autre, j'irais certainement avec les boutons séparés, mais si c'est un de vos projets préférés et que vous pouvez gérer ses particularités, j'irais avec le scénario à bouton unique.
Pour votre cas, puisque tous les boutons dépendent les uns des autres et ne peuvent pas être activés simultanément, je dirais qu'un seul bouton fonctionnerait mieux.
La meilleure pratique consiste à indiquer à l'utilisateur le changement de texte du bouton. Partout où je l'ai vu, supprimez le texte du bouton, transformez-le en une teinte plus claire, apportez le deuxième texte sur le bouton, puis ramenez le bouton sur la teinte plus foncée. Ce léger changement de nuance de couleur est remarqué car le survol de la souris se ferait toujours sur le bouton. (Puisque vous modifiez le texte du bouton dès qu'il est cliqué). Je trouve que cela fonctionne assez bien dans la pratique partout où je l'ai vu en action.
C'est ce que fait Firefox avec "rafraîchir" comme "se connecter" et "arrêter" comme "annuler". Ils ont deux choses en 1 bouton. Mais pendant qu'il se connecte, vous devriez avoir une sorte de signal comme un spinner pour signaler qu'il se connecte. Pour que l'utilisateur sache que le bouton est devenu annuler car il se connecte en ce moment. Et une fois la connexion établie, vous passez de annuler à déconnecter.
Le spinner est très important pour atténuer l'effet soudain apporté par les changements de boutons, car c'est la seule chose qui explique pourquoi ces boutons sont passés de l'un à l'autre, car vous ne voulez pas que les utilisateurs utilisent leur cerveau pour y penser eux-mêmes .
Je préfère la solution avec un seul bouton. Trois boutons sur le même emplacement sont inutilement compliqués à entretenir. Trois boutons dont deux grisés dérouteraient l'utilisateur. Si vous modifiez la propriété Text, vous n'avez pas besoin de la propriété Tag. Il suffit de modifier et de vérifier le texte.
C'est peut-être une question de goût, mais d'après mon expérience, il vaut mieux avoir le moins de contrôles possible. S'il y a trois boutons et qu'un seul d'entre eux est activé, des informations superflues s'affichent. Quel est l'intérêt de dire/montrer à l'utilisateur ce qu'il pourrait potentiellement faire dans un autre état? Il pourrait ne plus jamais entrer dans cet état ou en être pleinement conscient. Suivez la devise d'Einstein selon laquelle tout doit être aussi simple que possible, mais pas plus simple.
Étant donné que dans ce scénario les trois boutons sont tous liés au même type d'action, il n'y a aucun problème avec l'utilisation d'un texte de bouton dépendant de l'état.
Cela aiderait l'utilisateur à étiqueter le bouton avec quelque chose qui donne un indice sur ce qu'il manipule, c'est-à-dire Connexion et le bouton donne ensuite l'action que vous pouvez appliquer à la connexion.
De plus, vous pouvez ou devez signaler l'action de changement de bouton à l'utilisateur d'une manière ou d'une autre. Cela pourrait être un fondu du bouton, puis un autre texte, ou mettre en surbrillance le bouton pendant que le texte change, tout ce qui permet à l'utilisateur de réaliser que la fonction du bouton a changé.
Le même type d'approche fonctionne avec les formulaires où vous avez des données et un bouton pour manipuler , qui, lorsque vous cliquez dessus, se transforme en bouton enregistrer . Dans l'ensemble, cette méthode peut en fait désencombrer le UI , mais vous devez faire attention à ne pas rendre les choses incompréhensibles.
Cela devrait très certainement être trois boutons différents. Vous voulez simplement rendre les boutons visibles quand ils devraient l'être - un peu comme le ferait un assistant.
Si vous en faites un seul bouton, vous aurez des instructions comme if (this.button.Text == "Connect") ou vous pourriez même utiliser un switch, qui n'est ni l'un ni l'autre.
Construire un bouton détruira la maintenabilité et la stabilité.
La question de savoir si c'est un bouton ou trois boutons où deux sont cachés est en quelque sorte hors de propos pour l'expérience utilisateur. C'est principalement un problème de programmation avec des avantages/inconvénients comme Darth explique .
Je pense que la meilleure question est: Si je veux avoir un bouton qui fait plus d'une action, comment puis-je m'assurer que l'expérience utilisateur est bonne?
À quoi je pense que la réponse est de s'assurer que chaque action est clairement illustrée pour l'utilisateur, éventuellement avec une couleur et une icône, et qu'il y a des précautions prises pour empêcher l'utilisateur de double-cliquer et de faire deux actions différentes. Peut-être que lorsqu'ils cliquent sur une action, le bouton bascule sur une double flèche pendant au moins une seconde - période pendant laquelle il ne peut plus être cliqué à nouveau. Il passe ensuite à l'état suivant, où une autre action peut être effectuée.
S'il y a deux actions, vous pouvez utiliser une sorte de bouton à bascule coulissant.