it-swarm.com.de

Beste Möglichkeit, eine Option und eine Liste auszuwählen

Wie kann eine Liste von Optionen, die in zwei Optionen verschachtelt sind, am besten angezeigt werden? Ich habe ein Modell als Referenz für meine Frage erstellt. Wenn der Benutzer auf das Optionsfeld oben klickt, sollte er nur eine der verfügbaren Optionen auswählen. Der Platz für die Anzeige dieser Optionen ist begrenzt, aber ich glaube, das Modell ist seltsam und möchte wissen, wie andere diese Art von Aufgabe angegangen sind. enter image description here

2
user17508

Sie sollten eine zweistufige Hierarchie von Optionen einführen. Sie können beispielsweise eine verschachtelte Liste von Unteroptionen hinzufügen, wie unten angegeben. Verschachtelte Listen sind jedoch in der Regel verwirrend. Sie sollten versuchen, die Hauptoptionen klar unterscheidbar zu machen ("Entscheidungen unterscheidbar machen" ist eine der Richtlinien in The UX Book ).

Lassen Sie die Unteroptionen ausgegraut, bis die erste Hauptoption ausgewählt ist

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Außerdem würde ich Optionsfelder über der Dropdown-Liste in der zweiten Ebene verhindern, wenn es nur ungefähr 4 Unteroptionen gibt. Eine Erklärung finden Sie hier .

Wenn Dropdown-Listen weniger als 7 Optionen haben, leiden sie unter einem Mangel an Vorabinformationen. Der Benutzer muss klicken, um die verfügbaren Optionen anzuzeigen.

Um die vertikale Höhe zu verringern, habe ich die Unteroptionen horizontal angeordnet - es ist ein Vorschlag.

2
Anna Prenzel

Wenn ich mir die von Ihnen bereitgestellte Skizze ansehe, frage ich mich, warum Sie nicht für alles eine einzige Combobox oder nur Optionsfelder aus den Optionen 1 bis 5 verwenden.

Wenn Sie also wirklich die ersten 4 Optionen in einer Untergruppe sammeln möchten, würde ich vorschlagen, dieser Gruppe einen Namen zu geben und ihn als Text im ersten Optionsfeld zu verwenden. Zum Beispiel so etwas:

Options with sub-options

Alternativ können Sie die Combobox unter das zugehörige Optionsfeld setzen und die progressive Offenlegung verwenden, damit die Combobox nur angezeigt wird, wenn das Optionsfeld ausgewählt ist. Dies wird häufig in Webformularen gesehen.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Abhängig von Ihrem Anwendungsfall, wenn Ihr Optionsfeld "Option 2" beispielsweise alle Optionen aus der Combobox darstellt oder keine davon, können Sie sich für etwas wie in Google Chrome) entscheiden Synchronisationseinstellungen:

Chrome

Wenn Sie in der Combobox die Option "Alles synchronisieren" auswählen (Ersetzen Ihrer Optionsfelder), sind alle unten stehenden Kontrollkästchen unempfindlich, aber dennoch aktiviert (Sie können anstelle Ihrer Combobox Optionsfelder verwenden). Wenn Sie die Option "Wählen Sie aus, was synchronisiert werden soll" auswählen, sind alle Kontrollkästchen aktiviert und Sie können die gewünschten Kontrollkästchen einzeln (in Ihrem Fall nur eine Unteroption) deaktivieren.

Welche Option haben Sie? und wie viele in der Untergruppe? Ein Kontext würde uns helfen, Ihnen zu helfen :)

Nach dem ersten Kommentar bearbeiten:

Angesichts der Tatsache, dass Sie 7 Elemente für die Untergruppe haben, würde ich vorschlagen, anstelle von Optionsfeldern eine Combobox zu verwenden. Hier ist ein Beispiel:

mockup

bmml Quelle herunterladen

Sie können die Begriffe durch die in Ihrem Kontext geeigneten Begriffe ersetzen ("aktiv/inaktiv" anstelle von "aktiviert/deaktiviert", "Objekte" usw.).

Alternativ können Sie die Combobox auch dann aktiviert lassen, wenn das zweite Optionsfeld ausgewählt ist. Und Sie können das erste Optionsfeld automatisch auswählen, sobald der Benutzer etwas in der Combobox auswählt. Ich bin mir nicht sicher, ob es dazu eine Usability-Studie gibt ... aber ich habe beide Fälle in mehreren Anwendungen gesehen.

3
Padrig