it-swarm.com.de

Wie kann man boolesche Optionen präsentieren und genau eine davon als "primär" auswählen?

Ich habe eine Situation in einem Webbrowser, in der ich dem Benutzer eine Reihe (sagen wir 3-10) von Alternativen präsentieren kann.

  • Der Endbenutzer muss mindestens eine dieser Optionen auswählen, um sie zu aktivieren
  • Der Endbenutzer muss genau eine der aktivierten Optionen auswählen, um die "primäre" Option zu sein.

Ich bin mir jedoch nicht sicher, wie ich das am besten machen soll. Hier ist eine erfundene Situation über einen Eintopf, die dies besser veranschaulichen könnte:

(enter image description here

Es gibt 7 potenzielle Inhaltsstoffe, die der Benutzer aktivieren oder deaktivieren muss (er ruft nach einem Kontrollkästchen), aber mindestens einer davon muss aktiviert sein. und genau einer von ihnen muss der Hauptbestandteil sein (schreit nach einem Optionsfeld).

  • Wenn ich eine dumme Form ohne Einschränkungsprüfung wähle, ist dies einfach zu implementieren, aber sie könnten Rindfleisch, Schweinefleisch und Karotten als aktivierte Zutaten und dann Kartoffeln als Hauptzutat auswählen (was ein Problem ist, da sie die Kartoffeln nicht überprüft haben Box unter den aktivierten Zutaten)

  • Oder ich könnte die primäre Zutat zuerst setzen und dann zulassen, dass sie sekundäre Zutaten auswählt, und die Auswahl der primären Zutat in der Liste der sekundären Zutaten (Rindfleisch im folgenden Beispiel) erzwingen und nicht zulassen, dass sie nicht ausgewählt wird. Nicht zu schwer in HTML/Javascript zu implementieren, aber dann gibt es einige Schwierigkeiten ... Was ist, wenn ich mit dem unten stehenden UI-Status beginne und dann die Hauptzutat als Zwiebeln, dann als Huhn und dann als Schweinefleisch auswähle? Was passiert mit den Kontrollkästchen für Zwiebeln, Huhn und Rindfleisch?

(enter image description here

Für beide Optionen muss die Liste zweimal dupliziert werden.

  • Oder ich könnte versuchen, einen Hauptschieberegler zu verwenden, um die Hauptzutat auszuwählen ... wodurch die Notwendigkeit, die Liste zu duplizieren, entfällt ... aber dies ist keine integrierte HTML-Funktion, und ich müsste meine rollen besitzen oder versuchen, ein UI-Element eines Drittanbieters anzuwenden.

  • Oder ich könnte einen Radiobutton und ein Kontrollkästchen vor jede Zutat stellen (Radiobutton für Primärzutat, Kontrollkästchen, um nicht-Primärzutaten zu aktivieren), was kompakt und einfach in der Darstellung ist, aber höchstwahrscheinlich in der Semantik verwirrend.

Irgendwelche Vorschläge?

31
Jason S

Wie Sie wissen, müssen Sie eine Kombination aus Auswahlmöglichkeiten im Stil von Kontrollkästchen und einer gefilterten Liste von Auswahlen im Radio-Stil zusammenstellen.

Kombiniere beide zu einer Liste . Kontrollkästchen aktivieren das primäre "Optionsfeld" (ein Stern in diesem Modell, aber passen Sie es an Ihr Design an).

(List allowing checking many, but marking one as primary

Normalerweise neigen die Leute dazu, sich von einer Liste von Optionsfeldern ohne ausgewählte Standardeinstellungen fernzuhalten. In Ihrem Fall ist eine "Standardprimär" jedoch möglicherweise nicht sinnvoll. Deshalb habe ich mich dafür entschieden, keine wörtlichen Optionsfeldelemente zu verwenden, und stattdessen Sterne ausgewählt .

Durch Klicken auf einen Stern wird die primäre Auswahl ersetzt, wie dies bei einem Optionsfeld der Fall wäre, wobei jeweils nur ein Stern zugelassen wird. Es ist für Ihre Benutzer möglicherweise angenehmer, ein Element zu entfernen, bevor Sie das nächste markieren. Keine große Sache, lassen Sie sie das tun und setzen Sie Ihre Anforderungen am Ende durch.

Wenn die Liste lang ist, reproduzieren Sie möglicherweise statisch die angegebene "primäre" Option oben.

Denken Sie daran, dass es schwierig sein kann, Ihre Anforderungen ausschließlich über die Eingabemethoden zu kommunizieren. Daher möchte ich einige Anweisungen hinzufügen, um Ihren Benutzer darauf aufmerksam zu machen, wie er seine Auswahl treffen kann, und am Ende auf eine Validierung zurückgreifen.

87
maxathousand

Dies könnte ein Wortlaut sein. Wenn Sie mit der primären Option beginnen (1 von N, also Optionsfeld), können Sie eine Liste mit "zusätzlichen Optionen" anzeigen, in der es zulässig ist, 0 zusätzliche Optionen auszuwählen (daher sind Kontrollkästchen sinnvoll).

Dies ist zusätzlich sinnvoll, da "primär" semantisch mit "zuerst" verwandt ist. Daher ist es natürlich, den Dialog mit "der primären Option" zu beginnen. Da es keine Rangfolge zusätzlicher Optionen gibt, haben wir keine "sekundäre Option" - alle sind "zusätzliche Optionen". Wir verwenden Wörter in der Reihenfolge, in der die Leute sie erwarten. Dies verringert die kognitive Belastung.

19
MSalters

@ maxathousands Antwort ist wirklich nett und sauber, aber ich dachte, ich würde eine weitere Option hinzufügen.

Ich denke, ein Dropdown-Menü mit Mehrfachauswahl und einer dynamischen Liste von Radiooptionen wäre schön und klar. Hier ist ein kleines Geschenk, das ich verspottet habe:

(mockup

Und ein Link zum Modell, wenn jemand es will: https://jsfiddle.net/gjudck24/

18
GammaGames

Ich würde:

  • stellen Sie dem Benutzer die Frage "Was ist der Hauptbestandteil?".
  • Der Benutzer trifft seine Auswahl aus einem Dropdown-Menü (das keine Mehrfachauswahl zulässt).

  • Wenn der Benutzer die Hauptzutat auswählt, werden die zweite Frage und die Liste der zusätzlichen Zutaten angezeigt (entweder eine Liste der Kontrollkästchen oder eine Mehrfachauswahlkombination wie in der Antwort von GammaGames.

Unten ist ein kurzes Modell (in c # gemacht, da ich das schneller als ein Web-Skript codiere). Nichts ästhetisch Angenehmes, nur um die Idee zu veranschaulichen:

(enter image description here

Für die zweite Liste können Sie sie passiv/statisch halten (sodass der Hauptbestandteil in der vollständigen Liste unten noch vorhanden ist) und sich entscheiden für:

  • kreuzen Sie automatisch die Hauptzutat in der zweiten Liste an.
  • ignorieren Sie den Hauptbestandteil in der zweiten Liste vollständig (unabhängig davon, ob er angekreuzt ist oder nicht).

Oder entfernen Sie aktiver den Hauptbestandteil für die Sekundärliste (obwohl dies mehr Codierung erfordert, insbesondere wenn der Benutzer beschließt, den Hauptbestandteil in der Mitte des Prozesses zu ändern.

6
Hoki

Es scheint, als ob Ihr erstes Designkonzept angesichts der beschriebenen Aufgabe das logischere von beiden ist:

  • Der Endbenutzer muss mindestens eine dieser Optionen auswählen, um sie zu aktivieren

  • Der Endbenutzer muss genau eine der aktivierten Optionen auswählen, um die "primäre" Option zu sein.

Aber ich denke, die Verwirrung entsteht durch das Duplizieren der zweiten Liste, die nur die Zutaten enthalten sollte, die die Benutzer ausgewählt haben. Dies macht deutlich, dass sie einen oder mehrere Artikel auswählen und dann einen von ihnen als Hauptbestandteil festlegen müssen (auch wenn es nur einen gibt).

Daher sollte die Validierung darin bestehen, eine Liste bereitzustellen, die ein Verhalten der Kontrollkästchengruppe zulässt, und eine Validierung für ein einzelnes auszuwählendes Element anzuwenden (Sie können die zweite Liste vor oder nach der Validierung ausfüllen). Anschließend validieren Sie die zweite Liste mit einem Verhalten der Radiobutton-Gruppe.

Es gibt verschiedene Möglichkeiten, das Look & Feel zu implementieren (z. B. Schaltflächen anstelle von Optionsfeldern mit benutzerdefiniertem Verhalten), aber es ist wichtig, zuerst die richtige Logik zu finden.

3
Michael Lai

Eine weitere Option zu den oben genannten besteht darin, ein Listenpaar zum Hinzufügen/Entfernen mit Gruppierungen zu nutzen. Ich habe das Fenster MMC Snap-in "als faules Modell verwendet. Sie können Zutaten aus einer Liste links hinzufügen, die rechts gruppiert sind. Die erste hinzugefügte Zutat wird zur primären und Zusätzliche Zutaten würden unter die Gruppe der zusätzlichen Zutaten fallen. Die Primärzutat könnte durch Auswahl einer anderen Zutat in der zusätzlichen Gruppe und Auswahl von "Nach oben" (oder "Primär machen" usw.) gewechselt werden.

(enter image description here

2
duct_tape_coder