it-swarm.com.de

Wie beschränke ich die Anzahl der Optionen, die ein Benutzer in einer Liste auswählen kann?

Optionsfelder sind für eine einzelne Option und Kontrollkästchen für die Mehrfachauswahl vorgesehen. Was wäre jedoch der idealste Weg, um maximal zwei Auswahlen zu implementieren? mache ich:

  • alle Kontrollkästchen nach zweiter Wahl deaktivieren?
  • warten Sie bis nach der Einreichung, um zu alarmieren?
  • alarm vorhanden und bei Einreichung nochmals überprüfen?

was ist der idealste nicht-invasive Weg, dies zu tun?

9
Ayyash

Ich habe mit verschiedenen Lösungen für eine stark frequentierte Website experimentiert. Der beste Ansatz bestand darin, Kontrollkästchen zu verwenden und die restlichen Optionen zu deaktivieren, wenn das Maximum erreicht ist.

Zunächst sehen die Benutzer reguläre Kontrollkästchen. In einer Meldung wird den Benutzern mitgeteilt, dass sie bis zu zwei Optionen auswählen können, die meisten Besucher lesen sie jedoch nicht.

The list of options before any are checked

Wenn der Benutzer zwei Optionen auswählt, deaktivieren wir den Rest.

The same list of options after the maximum number of items has been checked, with the other options disabled and the selected items emboldened

Wenn der Benutzer eine der ausgewählten Optionen deaktiviert, sind alle Kontrollkästchen aktiviert. Der Ansatz erwies sich auch für unerfahrene Benutzer als intuitiv.

Da dieser Ansatz auf JavaScript basiert, muss beim Senden eine zusätzliche Validierung durchgeführt werden.

11
Emil

Sie haben einige Optionen, aber alles hängt davon ab, aus wie vielen Auswahlmöglichkeiten Sie dem Benutzer die Auswahl geben und wie viele Rückrufe er hat (haben sie diese Optionen bereits gesehen? Sind sie vertraute Optionen? Sind sie für den Benutzer neu?). Hier sind einige Optionen, die Sie möglicherweise in Betracht ziehen sollten:

enter image description here

Wenn Sie nicht zu viele Optionen zur Auswahl haben, können Sie zwei Auswahloptionen in Betracht ziehen. Unabhängig davon, welche Auswahl in einer Option getroffen wurde, muss sie in der anderen deaktiviert werden. Der Nachteil dabei ist, dass die verfügbaren Optionen nicht sofort sichtbar sind.

enter image description here

Sie können eine Auswahl aus vielen Listen verwenden. Dies kann durch die Höhe begrenzt werden, wobei ein vertikaler Bildlauf angezeigt wird, wenn die Optionen größer als die Containerhöhe sind. Der Auswahl auf der rechten Seite können dann Auswahlmöglichkeiten hinzugefügt werden. Verwenden Sie diese Option nur, wenn Sie bis zu 15 Auswahlmöglichkeiten haben (das Scrollen durch die Auswahlmöglichkeiten ist ärgerlich). Der Nachteil dabei ist, dass Sie immer noch mehr als 2 Optionen auswählen können. Ich würde dies zulassen und Ihrem Modell eine Fehlerkorrektur hinzufügen:

enter image description here

Auf diese Weise kann der Benutzer innerhalb Ihrer Einschränkungen experimentieren, Entscheidungen treffen und die Auswahl verfeinern.

Zuletzt die Lösung, der Sie sich entzogen haben. Deaktivieren Sie alle anderen Optionen, nachdem 2 Kontrollkästchen aktiviert wurden. Ich würde diese Option verwenden, wenn Sie eine große Auswahl haben und der Benutzer alle Optionen durchsuchen und eine Auswahl treffen muss. Wenn Sie viele solcher Optionen haben, prüfen Sie, ob die Optionen kategorisiert werden können. Wenn dies möglich ist, teilen Sie sie unter Kategorieüberschriften auf, um die Scanfähigkeit zu verbessern. Der Nachteil dabei ist, dass Benutzer die Auswahl einer Option aufheben müssen, bevor sie ihre Auswahl verfeinern können, wenn bereits zwei Optionen ausgewählt wurden.

Um Ihre Frage zu "Warten Sie bis nach der Übermittlung der Warnung" oder "Warnung an Ort und Stelle und überprüfen Sie sie bei der Übermittlung" zu beantworten, ist es meiner Meinung nach besser, eine Inline-Validierung durchzuführen. Sobald also mehr als zwei Entscheidungen getroffen wurden, wird der Benutzer benachrichtigt und machte darauf aufmerksam, dass nur 2 Entscheidungen getroffen werden können. Wenn wir mein letztes Beispiel nehmen und den Benutzern nur erlauben, so viele auszuwählen, wie sie möchten, wird der von mir erwähnte Nachteil beseitigt, der wohl weniger frustrierend ist. Ich würde definitiv eine Inline-Validierung hinzufügen, wenn Sie diese Option wählen.

8
DigiKev

Angenommen, die Anzahl der Optionen ist gering genug, um beispielsweise Kontrollkästchen oder Optionsfelder zu berücksichtigen, versuchen Sie es mit separaten Spalten mit Optionsfeldern, eines für jede Auswahl:

Column for 1st and 2nd choice

Wenn Sie aus einer Spalte auswählen, deaktivieren Sie die entsprechenden Schaltflächen für die andere (vorausgesetzt, die zweimalige Auswahl derselben Option ist ein Problem). Dies verhindert, dass überhaupt ein Benutzerfehler auftritt. In Ihrem Fall zwei Klicks, und der Benutzer ist fertig. Eine einfache Änderung dauert nur einen Klick. Es nimmt nicht viel mehr Platz ein als die Verwendung von Kontrollkästchen.

Eine ehrgeizigere Alternative besteht darin, eine physische Metapher zu konstruieren, um die Grenzen zu kommunizieren. Dies kann erforderlich sein, wenn Benutzer durch "1." und "2." verwirrt sind (z. B. wenn sie denken, dass dies eine Rangfolge impliziert, die nicht vorhanden ist). Die genaue Metapher kann von der Domain des Benutzers abhängen - Sie möchten, dass sie kompatibel ist und idealerweise kommuniziert warum zwei müssen ausgewählt werden. Wenn es zum Beispiel darum geht, zwei Objekte auszuwählen, die sich "ausbalancieren" oder "entgegensetzen" sollen, zeigen Sie möglicherweise Skalen oder eine Wippe, auf die Sie Optionen setzen können.

Als allgemeines und kompaktes Beispiel, das begrenzte Ressourcen impliziert, können Sie Hooks und eine feste Anzahl von Tags verwenden:

Two tags on a storage hook, one hook per option.

Tags können per Drag & Drop verschoben werden. Durch einfaches Auswählen eines Hooks wird das Tag mit Fokus auf die Option verschoben. Der Fokus beginnt auf einem "gespeicherten" Tag. Das sind also drei Klicks, um zwei Auswahlen zu treffen. Dies ist nicht so effizient wie Spalten mit Optionsfeldern, wird jedoch auf höhere Grenzen skaliert und benötigt weniger Platz.

3

In der Vergangenheit verwende ich normalerweise jQuery, wenn wir "pick x of the unten" implementieren müssen, um einen Tooltip "Fade to Yellow" zu erstellen. Wenn Sie also auf das fünfte Kontrollkästchen klicken, wird Folgendes angezeigt:

[x] option 1
[ ] option 2
[ ] option 3
[ ] option 4
[x] option 5 [3 of 5 options remaining...]

Nach Auswahl aller zulässigen Optionen führt ein nachfolgender Klick auf ein deaktiviertes Kontrollkästchen zum gleichen visuellen Tooltip, jedoch mit der Fehlermeldung ala [You may only select 5.]

Dies ist jedoch wahrscheinlich ein Overkill für maximal 2 Auswahlen. In diesem Fall würde ich vorschlagen, Michaels Vorschlag zu folgen.

1
DA01

Wenn Sie nach einer Websolution suchen, können Sie sich JQuery Multiselect Site ansehen, wo verschiedene Stile angezeigt werden. Ich mag selectList am meisten - Sie haben eine Standard-Listbox und alle ausgewählten Elemente werden unten als Tags angezeigt.

Visuell können Sie zwei graue leere Tags platzieren, die als Platzhalter oder als Schatten dienen. Somit würden Benutzer schnell erkennen, dass nur zwei Auswahlen möglich sind. enter image description here

Bild wird angepasst von selectList Schaufenster

0
FrankL

Ich denke, der Auswahlprozess für große Listen (und die Einschränkung dieser Auswahlmöglichkeiten) war noch nie sehr gut. Die Kontrollkästchen und der Akku sind in Ordnung, aber auf lange Sicht fühlt sich keiner so gut an. Und die Dropdown-Lösung ist sehr begrenzt durch die Nummer der Nummer in der Liste und ob Benutzer die Liste verstehen.

Was ist mit einer vordefinierten Tag-Liste, sodass Benutzer eine Reihe von Auswahlmöglichkeiten haben und diese auswählen können, um sie zu verschieben, wie der Akkumulator, aber visueller. Dies bedeutet, dass die Daten in einem flacheren Stil dargestellt werden können, um zu verhindern, dass Personen nur die obersten Elemente der Liste auswählen. Sie können dann die Felder mit einigen Informationen über ihren Fortschritt aufrufen.

0
The Question