it-swarm.com.de

Wie man einen ToggleButton (Ein / Aus) mit der Fähigkeit, gesperrt zu werden, am besten darstellt

Ich entwerfe ein ToggleButton-Steuerelement, das sich in einem gesperrten Zustand befinden kann, in dem die Benutzerinteraktion das Steuerelement nicht weiter umschalten kann. Im Allgemeinen möchte ich, dass die Schaltfläche im natürlichen Regelwerk von Microsoft in UXGuide etwas natürlich erscheint, aber es macht mir nichts aus, eine benutzerdefinierte Grafik oder ein eindeutiges Konzept zu verwenden, um anzuzeigen, dass das Steuerelement gesperrt ist.

Was das Erscheinungsbild der Schaltflächen angeht, könnte ich Folgendes verwenden:

  • Ein iPhone-Stil EIN/AUS-Umschalttaste .
  • Eine Umschalttaste mit einem benutzerdefinierten Grafiksymbol, z. B. einer Ein-/Aus-Taste, die bei Aktivierung aufleuchtet.
  • Ein einfaches altes Kontrollkästchen.

Wenn ich ein Kontrollkästchen aktivieren möchte, kann ich den deaktivierten Status verwenden, um darzustellen, dass das Steuerelement gesperrt ist. Dies kann jedoch für den Benutzer so aussehen, als ob die Einstellung des Steuerelements nicht wirksam ist, da sie normalerweise über einen ausgegrauten Stil stummgeschaltet erscheint . Für die beiden anderen Optionen ist das einzig Vernünftige, was ich mir vorstellen kann, eine Art Vorhängeschloss-Symbol auf oder in der Nähe der Umschalttaste zu verwenden, wenn diese gesperrt ist.

Wenn mich jemand in die richtige Richtung führen kann, wäre ich sehr dankbar.

Vorschlag Nr. 1: Nachfolgend finden Sie ein Konzept, das ich mir ausgedacht habe und das meiner Meinung nach dem iPhone-Umschalter etwas ähnelt, das jedoch vom power-Taste meiner Wii-Konsole . Außerdem habe ich den Vorschlag von Hisham aufgenommen, das Vorhängeschlosssymbol nur im gesperrten Zustand anzuzeigen. Dieses Konzept ist spezifischer für das Umschalten von Schaltflächen, die Ein/Aus-Zustände darstellen, aber für diesen Zweck halte ich es für angemessen.

mockup of Wii inspired toggle button

Vorschlag Nr. 2: Dies ist eine weitere Version des obigen Beispiels, verwendet jedoch das allgegenwärtige Energiesymbol anstelle des Ein/Aus-Textes. Zusätzlich habe ich anstelle des Vorhängeschlosses einen abgeblendeten Text verwendet, um anzuzeigen, dass das Steuerelement aktiviert ist, aber nicht weiter umgeschaltet werden kann. Beachten Sie, dass ich einige Fälle gesehen habe, in denen die Linie, die den Kreis im Energiesymbol schneidet, ihre Position ändert, je nachdem, ob die Stromversorgung ein- oder ausgeschaltet ist. Ich kann jedoch derzeit keine Beispiele dafür ausgraben.

power button representation

UPDATE: Da manchmal der Kontext alles ist, habe ich ein grobes, aber spezifischeres Modell erstellt, um zu zeigen, wie das von mir entwickelte Umschaltsteuerelement verwendet wird. Im Allgemeinen möchte ich in der Lage sein, einige der Konzepte, die wir hier entwickeln, auf andere häufigere Benutzeroberflächen anzuwenden, aber ich dachte, ich sollte zumindest näher darauf eingehen, was zu mehr Twords im Hardwarestil führt. Auf lange Sicht ist es wichtig, ob ich einen Hardware-Look emuliere oder nicht, dass diese Umschaltsteuerung an vielen Stellen wiederholt wird und einem identischen Zweck dient, daher möglicherweise in einigen Fällen eine spezielle Umschaltsteuerung wie die von mir Wir haben vorgeschlagen, eine gute Lösung zu sein, andernfalls könnte in einigen Fällen eine traditionellere Benutzeroberfläche zwei Optionsfelder für den EIN- und AUS-Zustand verwenden und dann ein Etikett verwenden, um diese Steuerelemente zu erklären oder einfach zu deaktivieren, wenn sie sich in einem gesperrten Zustand befinden sollen .

hardware controls mockup

An diesem Beispiel kann man erkennen, warum ich mich auch von der Vorhängeschloss-Metapher entferne, da das Platzieren eines Vorhängeschlosssymbols auf der Ein-/Ausschalttaste den Benutzer irreführen kann, zu glauben, dass das gesamte Steuerelement gesperrt ist, was nicht der Fall wäre. Der gesperrte/deaktivierte Zustand soll nur die Fähigkeit beeinträchtigen, die Effektsteuerung ein- oder auszuschalten.

Einige verwandte Links:

11
jpierson

Zugegeben, zu spät zur Party, aber hier ist mein 2c wert ...

Sie scheinen vier verfügbare Zustände zu haben:

  1. Auf; Benutzer kann es ausschalten.
  2. Aus; Benutzer kann es einschalten.
  3. Gesperrt
  4. Abgesperrt.

Wenn Sie eine Schaltfläche auf dem Steuerelement anzeigen (auch wenn sie deaktiviert ist), implizieren Sie dem Benutzer, dass er den Wert möglicherweise ändern kann. In vielen Anwendungen können deaktivierte Schaltflächen aktiviert von einer anderen Person sein Aktion, zum Beispiel eine Schaltfläche "Speichern", die erst aktiviert wird, wenn ein Feld geändert wurde.

Daher empfehle ich, die Schaltfläche nur anzuzeigen, wenn der Status unter der Kontrolle des Benutzers steht.

Wenn der Status gesperrt ist, zeigen Sie überhaupt keine Schaltfläche an - zeigen Sie nur den aktuellen Status an.

Hier ist ein Modell:

Mockup of States

Ich habe hier Vorhängeschlösser gezeigt, die Ihrem ursprünglichen Denken entsprechen, aber ich denke, sie sind möglicherweise überflüssig, da das Fehlen eines Knopfes ziemlich deutlich macht, dass der Status nicht geändert werden kann.

6
Bevan

Ich würde den Ansatz empfehlen, ein Vorhängeschlosssymbol anzuzeigen, jedoch nicht als Überlagerung. Stattdessen würde ich es neben die Steuerung stellen. Die EIN/AUS-Umschalttaste und Kontrollkästchen im iPhone-Stil können entweder rechts oder links aktiviert werden.

Wenn das Vorhängeschlosssymbol nur angezeigt werden muss, um den Sperrstatus anzuzeigen, d. H. Der Benutzer kann zum Entsperren nicht darauf klicken, empfehle ich, dass es überhaupt nicht angezeigt wird, wenn das Steuerelement nicht gesperrt ist.

3
Hisham

Ich stimme Rob Allens Argument zu. Ihre Herausforderung besteht darin, ein Auswahlfeld mit vier Zuständen mit einer Metapher neu zu erstellen, die normalerweise mit zwei Auswahlmöglichkeiten verbunden ist. Eine Metapher vom Typ Optionsfeld (bei der die gegenseitige Ausschließlichkeit verstärkt wird) ist für Benutzer möglicherweise komfortabler, da dieser Metaphertyp ein Feld zur Auswahl des n-ten Zustands unterstützt.

Wenn Sie sich jedoch an die Schaltfläche halten möchten, ist möglicherweise eine etwas radikalere visuelle Darstellung des gesperrten Zustands erforderlich. Vielleicht das Vorhängeschlosssymbol mit einem roten Knopfrand koppeln? Auf diese Weise sind die Zustände EIN (mit LED) und EIN GESPERRT (mit LED und rotem Rand + Vorhängeschloss) unterschiedlich genug, um zwei Zustände nahezulegen. Das Gleiche gilt für die AUS-Zustände.

Das einzige potenzielle Problem bei der Verwendung von Farbe als Zustandsdarstellung besteht natürlich darin, dass farbenblinde Benutzer den visuellen Hinweis übersehen könnten, der den Wert des Vorhängeschlosssymbols erhöht ...

3
Jason Lunsford

Derzeit hast du 3  4 Zustände für Ihre Schaltfläche, die in einer Gruppe logisch gepaart, ein, aus und in der anderen gesperrt (ein) und gesperrt (aus) sind. Mit Ihrer Metapher und Beschriftung für Drucktasten weisen Sie nur auf zwei dieser Zustände hin, ein und aus. Das heißt, ich habe keine Ahnung, dass in meiner Zukunft ein gesperrter Zustand auf mich warten könnte. Sobald ein Benutzer darauf stößt, kann er sich daran erinnern, aber ein neuer Benutzer erwartet keinen gesperrten Status. Wenn ein Benutzer zum ersten Mal in seinem gesperrten Zustand auf dieses Steuerelement stößt (bevor er das Energiesymbol oder ein Ein/Aus-Etikett sieht), erhält er möglicherweise nicht den Zweck des Steuerelements.

Anstatt zu versuchen, ein Steuerelement im Drucktastenstil (2 natürliche Zustände) zuzuordnen, können Sie eine andere Metapher verwenden, die mehreren Zuständen förderlicher ist, z. B. einen Schiebeschalter, einen Knopf oder ein Zifferblatt mit Beschriftungen über den sinnvollen Positionen.

Bearbeiten

Als Antwort auf Ihre Kommentare stimme ich nicht zu, dass Sie ein Kontrollkästchen als zugrunde liegende Metapher haben, da sich Ihre beiden Statusgruppen gegenseitig ausschließen. Sie können nicht gleichzeitig aus UND ein oder AUS (gesperrt) und ein (gesperrt) sein. Ich glaube, Ihre zugrunde liegende Metapher besteht stattdessen aus zwei Optionsfeldlisten oder einem Optionsfeld und einem Kontrollkästchen für den gesperrten Status.

Zu versuchen, all das in einem einzigen Knopf darzustellen und trotzdem verwendbar und auffindbar zu sein, klingt nach einer zu großen Bestellung.

Bearbeiten 2

Aus der Datei "Mein Geld dahin bringen, wo mein Mund ist":

Schnelle und schmutzige Modellsteuerung ...

enter image description here

2
Rob Allen

Ich weiß, dass diese Frage alt ist, aber ich habe gesehen, dass sie keine Antwort hat. Ich denke, für Ein/Aus sollte eine einfache Umschalttaste verwendet werden und für den gesperrten Zustand sollte die Taste deaktiviert werden.

(enter image description here

Weitere Beispiele: Materialdesign - Auswahlsteuerung.

2
Madalina Taina

Ich würde einen Kippschalter verwenden und ihn im gesperrten Zustand grau erscheinen lassen.

Warum?

  • Das Problem des Befehls gegen den Status tritt nicht auf. Stellen Sie sich vor, Sie haben einen Media Player mit einer Wiedergabe-/Pause-Taste. Wenn Sie das Wiedergabesymbol darauf anzeigen, ist es der Befehl oder der Status? Dies ist ein häufiges Problem bei Umschalttasten mit zwei Status.

  • Es zeigt deutlich den Zustand an. Der Befehl und der Status befinden sich an überlappenden Positionen, sodass Sie nicht unter dem vorherigen Problem leiden.

  • Es funktioniert gut mit Handy. Android und iOS haben viele davon. Sogar Windows 8 für den Desktop hat eine eigene Version davon.

  • Grau zu sein ist fast eine Konvention für eine behinderte Sache. Und Sie werden das Gestaltungsprinzip der visuellen Trägheit respektieren. Sie können argumentieren, dass ich mich nicht auf Farbe verlassen sollte, und das ist richtig, also setzen Sie ein Schlüssel-/Vorhängeschloss-/Schrägstrich-Schlüssellochsymbol auf den Schieberegler.

0
sergiol