it-swarm.com.de

Sind zwei Kipptasten besser als ein Drei-Zustands-Schalter?

Ich habe ein Raster von Personen, in denen der Benutzer für jede Person entscheiden muss, ob er die Person in eine vordefinierte Gruppe aufnehmen, sie aus der Gruppe ausschließen oder unentschlossen lassen möchte. Der Ausgangszustand ist unentschieden. Zwei Optionsfelder funktionieren nicht, da der Benutzer nach anfänglicher Auswahl von "in" oder "out" wieder zu "unentschlossen" wechseln kann (aus diesem Grund ist this eine andere Frage).

Es kamen zwei Ansätze auf. Eine besteht darin, zwei Umschalttasten zu haben, und die andere darin, einen dreistufigen "Schalter" zu haben (der im Wesentlichen eine Gruppe von drei Funkgeräten ist, die unterschiedlich dargestellt werden).

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

  • Die Umschalttasten würden sich gegenseitig ausschließen (es kann nur eine ausgewählt werden, aber beide können nicht ausgewählt werden).
  • Dies ist in einem ziemlich belebten Raster, also ist Immobilien (Spaltenbreite) definitiv ein Faktor
  • Dies ist keine Touch-Oberfläche

Was ist hier der beste Ansatz? Vor-und Nachteile?

32

Design für den Mikro-Workflow


Beobachtungen

  • Die meisten Benutzer treffen eine Auswahl und fahren fort, wie Sie bemerkt haben. Es ist nicht sehr wahrscheinlich, dass Benutzer eine Auswahl sofort oder danach abwählen.

  • In und Out sind hier die primären Optionen. Die unentschlossene Wahl ist eine unvoreingenommene Standardeinstellung.

    • Null/Standard/Unentschlossene/Unbekannte Entscheidungen sind oft sehr schwer richtig zu entwerfen, und Designer denken beim Entwerfen von Steuerelementen oft nicht genug darüber nach.
    • Programmierer sind aus Gewohnheit oft besser darin (denken Sie an null vs '' vs undefined in Javascript), aber selbst dann ist die Semantik oft leicht zu vermasseln.
  • Gitterausrichtung und Platzersparnis sind wichtig .... da es viele andere Steuerelemente auf der Seite gibt.

Ein mögliches Design

in/out button pair, with visually distinct and de-emphasized 'none' button

Die Entwurfslogik hier ist:

  • Machen Sie die primären Entscheidungen klar. Die großen Tasten bieten einfache Landeplätze für den Cursor, und die primären Optionen sind visuell klar.

  • Heben Sie die unentschlossene Wahl hervor. Sie können es ausblenden, bis der Benutzer eine Auswahl trifft (oberes Beispiel), oder es angezeigt lassen (unteres Beispiel und wahrscheinlich besser). Diese Schaltfläche ist eine relativ seltene Option/ein relativ seltenes Szenario, sodass es nicht erforderlich ist, sie an die Spitze der primären Auswahl zu bringen.

  • Entfernen Sie die Symbole. Diese sorgen nur für visuelle Unordnung und beanspruchen wertvolle horizontale Immobilien.

  • Fügen Sie der Übersichtlichkeit halber ein Häkchen hinz zur ausgewählten Schaltfläche (unteres Beispiel).

  • Halten Sie die Tasten gitterkonform für Kompaktheit und zur Beruhigung der gesamten Benutzeroberfläche.

Auf Toggle vs Tri-State ...

Diese Antwort zeigt (hoffentlich), dass keiner der beiden Ansätze an sich besser ist als der andere. Ich glaube, der Weg, sich zwischen den beiden zu entscheiden, besteht darin, die Entwurfsziele und -beschränkungen festzulegen, sorgfältig darüber nachzudenken, was der Nullzustand bedeutet , und dann den Entwurf Aufgabe sollte viel klarer werden.

36
tohster

Wenn es Ihnen nichts ausmacht, die verfügbaren Optionen auf den ersten Blick auszublenden, können Sie anstelle von Optionsfeldern auch eine Kombination verwenden, mit der Sie eine gewisse Spaltenbreite sparen können.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

25
Vincent Robert

Ich würde drei Optionsfelder vorschlagen: eines für 'in', eines für 'out' und eines für 'unentschlossen'.

Sich gegenseitig ausschließende Schalter erfordern wahrscheinlich viele Erklärungen und können den Benutzer verwirren: Ein Paar umgeschalteter Tasten scheint 4 verschiedene Kombinationen zu bieten (A +/B +, A +/B-, A-/B +, A-/B-), aber Sie müssen erklären, dass es nur drei gibt (A +/B-, A-/B +, A-/B-). Darüber hinaus wird die dritte Option in den Steuerungseinstellungen nie explizit angezeigt. In Ihrem Fall wird "In" oder "Out" angezeigt, "Unentschlossen" wird jedoch nur angezeigt, wenn keine andere Einstellung vorhanden ist. Auch dies würde weitere Erklärungen erfordern.

Ein Satz von drei exklusiven Optionsfeldern sollte genau das tun, was Sie möchten: Alle drei Optionen sind sichtbar, und die Tatsache, dass der Benutzer nur eine auswählen kann, wird durch ein festgelegtes Muster angezeigt.

23
Andrew Martin

Die erste Option ist besser mit dem Umschalter. Der Grund dafür ist, dass Benutzer, die klare Anweisungen zu möglichen Antworten erhalten, diese mit größerer Wahrscheinlichkeit (richtig) verstehen und beantworten, als wenn die Anweisungen verdeckt sind. Beim Tri-Switch gibt es zwei sichtbare und eine unsichtbare Option. Jeder hat drei Zustände, aber letzterer hat eine Option, die nicht inhärent ist, was bedeutet, dass Sie Anweisungen geben müssen oder hoffen müssen, dass der Benutzer "es herausfinden" kann.

Abhängig von Ihrer Bevölkerungszahl ist dies möglicherweise kein Problem. Jüngere und technisch versierte Benutzer erhalten den Wechsel mit einer einzigen Anweisung. Da ich jedoch den Job zu einem Unternehmen gewechselt habe, dessen Bevölkerungsgruppe mehr als 55 Jahre alt ist, reichen selbst einfache Anweisungen nicht immer aus. Zum Beispiel würde Ihr Beispiel für drei Schaltflächen nicht funktionieren: Die unentschlossene Schaltfläche listet nicht auf, dass sie unentschlossen ist, sondern nur, dass sie ein Fragezeichen hat. In meinem Universum bedeutet dies "Ich habe eine Frage und wenn ich auf diese Schaltfläche klicke, kann ich sie entweder stellen oder Tipps geben".

6
Jamezrp

Um Ihre Frage zu beantworten, sollte die Häufigkeit dieser Aktion berücksichtigt werden.


Niederfrequenz :

Benutzer erinnern sich nicht an ihre Optionen, wenn sie sie nicht regelmäßig verwenden. Daher sollten die Optionen leicht auffindbar und verständlich sein.

In Anbetracht der von Ihnen erwähnten Bildschirmfläche und damit Benutzer ihre Optionen leicht verstehen können, würde ich auch ein Dropdown-Menü ähnlich dem von Vincent vorschlagen.

Natürlich fügt das Dropdown-Menü einen zusätzlichen Klick hinzu, um zu den Optionen zu gelangen, aber es ist in Ordnung, da der Hauptfokus hier darauf liegt, dass der Benutzer seine nächste Aktion ohne großen Aufwand identifiziert und entscheidet. Daher wird empfohlen, UI-Elemente zu verwenden, mit denen der Benutzer bereits vertraut ist, für Bildschirme, die nicht häufig verwendet werden.


Hochfrequenz :

Wenn dieser Bildschirm häufig verwendet wird und die Benutzer häufig zwischen unentschlossen, ein- und ausgehen müssen, wird ein Dropdown-Menü den Benutzer frustrieren. Hier sollten die Benutzer schnellen Zugriff auf ihre Optionen erhalten.

In diesem Fall würde ich den Drei-Zustands-Schalter empfehlen. Die Lernkurve ist klein, wenn Benutzer diesen Schalter häufig verwenden, und kann sich daher zu gegebener Zeit an Ihren Drei-Zustands-Schalter anpassen. Aber ich würde kein Fragezeichen vorschlagen.

Bitte überprüfen Sie mein Modell unten. Es ist ein einfacher Drei-Zustands-Schalter mit etwas Spaß, der zu einer besseren Benutzerinteraktion führen kann. Es passt zu den von Ihnen beschriebenen Immobilien. Berücksichtigen Sie meinen Vorschlag jedoch nur, wenn diese Umschaltaktion häufig verwendet wird. Vielen Dank

Tristate switch suggestion

6
Gautham Raja

Es scheint zwei Probleme zu geben

Expliziter oder impliziter Tri-State? Aus Gründen, die explizit als Tri-State bezeichnet werden, ist es besser, einstimmig zu sein

Kompakte Visualisierung des expliziten Tri-State Drei Schaltflächen, Optionsfeldgruppe, Kombinationsfeld erledigen den Job. Eine andere Benutzeroberfläche, die dabei hilft, die Verbundenheit von Konzepten klar zu kommunizieren, ist auch der Schieberegler - oder eine andere ähnliche Grafik, die an eine Likert-Skala erinnert

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

3
Jason A.

Ihre Lösung ist immer noch ein Optionsfeld. Es ist ein Optionsfeld mit drei Optionen: "in", "out" und "unentschlossen"; davon ist "unentschlossen" die Standardeinstellung. Wenn Sie als dritte Option eindeutig "unentschlossen" anzeigen, besteht für den Benutzer keine Mehrdeutigkeit.

Es gibt keinen UX-Grund, warum Sie nicht eine Optionsfeldoption auswählen und später ändern können, genauso wie Sie Schaltflächen auswählen oder Dinge eingeben. Ich bin mir nicht sicher, woher Ihr Vorurteil kommt, dass dies nicht akzeptabel wäre. Wenn Ihr Design eine ganze Menge Dinge startet, wenn Sie das eine oder das andere auswählen, kann ich verstehen, wie es Ihre Implementierung komplizieren würde, aber in diesem Fall würden Sie wahrscheinlich zuerst mit dem falschen Design beginnen.

2
Graham Bartlett

Obwohl einige UI-Handbücher vorschlagen würden, dass Kontrollkästchen nur in Fällen verwendet werden sollten, in denen eine Kombination von Auswahlen gültig wäre, würde ich vorschlagen (und einige Designer scheinen mir zuzustimmen), dass sie auch in vielen Fällen geeignet sind, wenn eine gegeben ist Kombination von vorherigen Zuständen und angeklicktem Zustand, es wäre "offensichtlich", was die gewünschte nächste Kombination von Zuständen sein würde.

In der besonderen Situation, in der Kontrollkästchen eine Auswahl mit der Semantik "A, B oder keine" darstellen würden [wobei "beide" keine gültige Auswahl sind], die Auswahl, ob eine Schaltfläche mit drei Zuständen oder ein Kontrollpaar verwendet werden soll -Boxen würden davon abhängen, ob der Fall "keiner" einen Zustand an und für sich darstellt, im Gegensatz zu einem Mangel an anderen Zuständen. Beispielsweise hatte das Feld "Schriftart" für MS-Word in den 90er Jahren Kontrollkästchen für "Alle Großbuchstaben" und "Kapitälchen" sowie für "Hochgestellt" und "Tiefgestellt" neben den Feldern für "Fett", "Kursiv", usw. Die Verwendung von Kontrollkästchen für alles ergab ein übersichtlicheres Erscheinungsbild als Optionsfelder, und es wurde auch vermieden, Beschriftungen für die Schaltflächen "Nicht alle Groß- oder Kleinbuchstaben" und "Nicht hochgestellt oder tiefgestellt" zu erstellen.

Wenn man eine Schaltfläche mit drei Zuständen für "Einschließen", "Ausschließen" oder "Unentschlossen" verwendet, würde die letztere Auswahl vorschlagen, dass ihr Zustand auf "Unentschlossen" gesetzt werden sollte. Wenn die Kontrollkästchen "Einschließen" oder "Ausgeschlossen" sind und beide Kontrollkästchen nicht ausgewählt sind, bedeutet dies, dass die Personen innen oder außen oder außen gelassen werden sollten. Wenn die letztere Semantik beabsichtigt ist, ist die Verwendung von Kontrollkästchen möglicherweise besser.

1
supercat

Zwischen Ihren beiden genannten Optionen ist die Option zwei Umschalttasten eine gute Methode. Vorteile:

  • klare Leistungen
  • lenkt nicht vom Hauptinhalt ab

vorhandene Beispiele:

pvote/Downvote-Schaltflächen über verschiedene Websites wie diese (Stackexchange), Reddit, Quora usw.

[S. Da sich die Elemente in einem belebten Raster befinden würden, würde die Implementierung eines Entwurfs mit Schwerpunkt auf visuellen Elementen viel Aufmerksamkeit erregen und die Beschäftigtheit erhöhen.]

1
BatlaDanny

Dies ist eine, die getestet werden sollte, da ich keine Ahnung habe, ob es funktionieren wird. Ich wollte mir etwas einfallen lassen, das gemeinsame Elemente verwendet und alle Optionen auf kompakte Weise zeigt. Die Idee ist, das "unentschlossene" Etikett mit zwei Kontrollkästchen wegzulassen.

Warum Kontrollkästchen? Es sollte den Leuten gemeinsam sein, dass man sie nur deaktivieren muss, wenn keine Option gewünscht wird. Es ist unvermeidlich, dass die Leute denken, dass beide überprüft werden können. Dies kann auf zwei Arten gelöst werden:

  1. durch Deaktivieren des anderen Kontrollkästchens, wenn eines aktiviert wird:

enter image description here

  1. mit einer Nachricht, wenn Leute versuchen, beide zu überprüfen. In diesem Beispiel wurde auf "Out" geklickt:

enter image description here

Ich mag # 2 besser, weil es nicht den Eindruck erweckt, dass Sie bei Ihrer Wahl stecken bleiben, und hilfreicher ist, wenn jemand die Absicht nicht versteht.

0
jazZRo

Sie können drei Radiobuttons verwenden, deren Hintergrundfarbe mit Rot = Out, Gelb = Unentschieden und Grün = In (dies, weil Sie ein besetztes (gebundenes) Raster erwähnt haben) gefärbt ist, und eine Legende verwenden, die die Farbbedeutung erklärt.

0
Aneido Gp

Warum nicht einfach eine intuitive Kontrollkästchenspalte mit drei Zuständen verwenden (falls verfügbar)?

Es spart Platz und stellt Ihre Daten richtig dar (wenn Benutzer mit solchen Steuerelementen vertraut sind).

0
Astrogator