webentwicklung-frage-antwort-db.com.de

Best Practice für eine Schaltfläche, die mehrere Aktionen ausführt

Stellen Sie sich dieses Szenario vor:

Eine Schaltfläche "Connect", die sich beim Klicken in eine Schaltfläche "Cancel" ändert. Wenn die Verbindung erfolgreich ist, ändert sie sich in eine Schaltfläche "Disconnect".

Sollte dies mit 3 verschiedenen Schaltflächen (sichtbar/unsichtbar gemacht) oder mit einer einzelnen Schaltfläche behandelt werden (überprüfen Sie auch den Schaltflächentext/das Tag, um zu sehen, welche Aktion - Verbinden/Abbrechen/Trennen - ausgeführt werden soll)?

12
DTI-Matt

Ich würde mich wahrscheinlich dafür entscheiden, drei separate Schaltflächen zu verwenden, damit ich nicht die Klickmethode einer einzelnen Schaltfläche mit Statusbehandlung für die verschiedenen Status der Verbindung verunreinigen muss.

Auf der anderen Seite können Sie mit einer einzigen Schaltfläche nur das einzige Steuerelement verwenden, den Text nach Bedarf ändern und die Logik nach Bedarf in einer switch -Anweisung stapeln.

Wenn es sich bei der Anwendung um eine Anwendung handelt, die von jemand anderem berührt wird, würde ich definitiv die separaten Schaltflächen verwenden. Wenn es sich jedoch um ein Haustierprojekt von Ihnen handelt und Sie mit seinen Eigenheiten umgehen können, würde ich das Szenario mit einer einzelnen Schaltfläche verwenden.

5
Darth Continent

In Ihrem Fall würde ich sagen, dass eine einzelne Schaltfläche am besten funktioniert, da alle Schaltflächen voneinander abhängig sind und nicht gleichzeitig aktiviert werden können.

Die beste Vorgehensweise besteht darin, den Benutzer auf die Textänderung der Schaltfläche hinzuweisen. Wo immer ich dies gesehen habe, entfernen Sie den Text von der Schaltfläche, verwandeln Sie ihn in einen helleren Farbton, bringen Sie den zweiten Text auf die Schaltfläche und drehen Sie die Schaltfläche dann wieder in den dunkleren Farbton. Diese leichte Änderung des Farbtons wird bemerkt, da sich das Mouse-Over immer noch über der Taste befindet. (Da Sie den Schaltflächentext ändern, sobald Sie darauf klicken). Ich finde, dass dies in der Praxis ziemlich gut funktioniert, wo immer ich es in Aktion gesehen habe.

2
user22624

Das macht Firefox mit "Aktualisieren" als "Verbinden" und "Stoppen" als "Abbrechen". Sie haben zwei Dinge in einem Knopf. Aber während der Verbindung sollten Sie eine Art Hinweis wie einen Spinner haben, um zu signalisieren, dass die Verbindung hergestellt wird. Damit der Benutzer weiß, dass die Schaltfläche in Abbrechen geändert wurde, weil gerade eine Verbindung hergestellt wird. Sobald die Verbindung hergestellt ist, wechseln Sie von Abbrechen zu Trennen.

Der Spinner ist sehr wichtig, um den plötzlichen Effekt der Tastenwechsel auszugleichen, da dies das einzige ist, was erklärt, warum sich diese Tasten von einer zur anderen geändert haben, da Sie nicht möchten, dass die Benutzer ihr Gehirn verwenden, um selbst darüber nachzudenken .

2
Andy

Ich würde die Lösung mit einem einzigen Knopf bevorzugen. Die Wartung von drei Tasten an derselben Stelle ist unnötig kompliziert. Drei Tasten, von denen zwei grau sind, würden den Benutzer verwirren. Wenn Sie die Text-Eigenschaft ändern, benötigen Sie die Tag-Eigenschaft nicht. Ändern und überprüfen Sie einfach den Text.

Es mag Geschmackssache sein, aber meiner Erfahrung nach ist es besser, so wenig Kontrollen wie möglich zu haben. Wenn drei Schaltflächen vorhanden sind und nur eine davon aktiviert ist, werden überflüssige Informationen angezeigt. Was ist der Punkt, um dem Benutzer zu sagen/zu zeigen, was er möglicherweise in einem anderen Zustand tun könnte? Er könnte nie wieder in diesen Zustand eintreten oder sich dessen voll bewusst sein. Folgen Sie Einsteins Motto, dass alles so einfach wie möglich, aber nicht einfacher gemacht werden soll.

1
Axel Kemper

Da sich in diesem Szenario die drei Schaltflächen alle auf dieselbe Art von Aktion beziehen, ist es kein Problem, einen statusabhängigen Schaltflächentext zu verwenden.

Es würde dem Benutzer helfen, die Schaltfläche mit etwas zu kennzeichnen, das einen Hinweis darauf gibt, was sie manipuliert, dh Verbindung , und die Schaltfläche gibt dann die Aktion aus, die Sie ausführen können gelten für die Verbindung.

Zusätzlich könnten oder sollten Sie dem Benutzer die Änderung der Tastenaktion irgendwie signalisieren. Dies kann sein, dass die Schaltfläche mit einem anderen Text ausgeblendet und dann eingeblendet wird oder dass die Schaltfläche irgendwie hervorgehoben wird, während sich der Text ändert. Dies alles lässt den Benutzer erkennen, dass sich die Schaltflächenfunktion geändert hat.

Der gleiche Ansatz funktioniert mit Formularen, in denen Sie Daten und eine Schaltfläche zum Manipulieren haben, die sich beim Klicken in ein Schaltfläche speichern . Alles in allem kann diese Methode das UI auflösen, aber Sie müssen vorsichtig sein, um die Dinge nicht unverständlich zu machen.

1
kontur

Dies sollten auf jeden Fall drei verschiedene Tasten sein. Sie möchten die Schaltflächen einfach sichtbar machen, wenn sie sein sollten - ähnlich wie es ein Assistent tun würde.

Wenn Sie sie zu einer Schaltfläche machen, erhalten Sie Anweisungen wie if (this.button.Text == "Connect") oder Sie können sogar ein switch verwenden, von denen keines gut ist.

Das Bauen einer Taste zerstört die Wartbarkeit nd Stabilität.

0
Mike Perrenoud

Die Frage, ob es sich um eine oder drei Schaltflächen handelt, bei denen zwei ausgeblendet sind, ist für die Benutzererfahrung irrelevant. Es ist hauptsächlich ein Programmierproblem mit Vor-/Nachteilen wie Darth erklärt .

Ich denke, die bessere Frage ist: Wenn ich eine Schaltfläche haben möchte, die mehr als eine Aktion ausführt, wie stelle ich sicher, dass die Benutzererfahrung gut ist?

Ich denke, die Antwort besteht darin, sicherzustellen, dass jede Aktion dem Benutzer klar dargestellt wird, möglicherweise mit einer Farbe und einem Symbol, und dass Vorkehrungen getroffen werden, um zu verhindern, dass der Benutzer doppelklickt und zwei verschiedene Aktionen ausführt. Wenn sie auf eine Aktion klicken, wechselt die Schaltfläche möglicherweise für mindestens eine Sekunde zu einem Drehfeld. Während dieser Zeit kann nicht erneut darauf geklickt werden. Dann wechselt es in den nächsten Zustand, in dem eine andere Aktion ausgeführt werden kann.

Wenn es zwei Aktionen gibt, können Sie eine Art Schiebetaste verwenden.

0
Luke