it-swarm.com.de

Was ist besser, um einen Filter zu entwerfen?

Was für den Filter besser ist, wählen Sie einen einzelnen Wert:

  1. Kontrollkästchen (Verwenden Sie js, um die Einzelauswahl beizubehalten)
  2. Dropdown-Liste
  3. Radio Knöpfe
  4. Markierte Etiketten

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

8
Bruce Dou

Es hängt davon ab, was Sie tun möchten. :) :)

  • Verwenden Sie die Kontrollkästchen (oder andere Schaltflächen), wenn Sie mehrere Filter gleichzeitig anwenden möchten. Wenn Sie sie für einzelne Werte verwenden möchten, hören Sie sich @AndroidHustle an, um sie zu bearbeiten, und verwenden Sie sie nur für einzelne unabhängige, boolesche Werte .

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

  • Verwenden Sie Dropdown, Combobox oder Autocomplete-Box, um die alternativen Filter hinter einem Dropdown auszublenden. Dies ist normalerweise eine gute Idee, wenn Sie eine endlose Liste von Filtern haben.

mockup

bmml Quelle herunterladen

  • Verwenden Sie die Optionsfelder oder Segmented Control, um klar auszudrucken, welche Optionen verfügbar sind, und sortieren Sie normalerweise nach einem unterscheidbaren Attribut .

mockup

bmml Quelle herunterladen

  • Schließlich unterscheidet sich das Segmented Control (iOS-Begriff) von der Optionsfeldgruppe durch die Vorteile der Anpassung in eine Zeile und ähnelt der Verwendung eines Tabulators Balken Sie mehr als einen Filter, wenn Sie danach suchen.

mockup

bmml Quelle herunterladen

Bearbeiten:

Wenn Sie darüber nachdenken, wird die Liste für jedes Steuerelement fortgesetzt, je nachdem, nach was Sie filtern möchten. DatePicker, Freitext, Multi-Value-Controls, Positionsregler.

Ohne Kontext, Plattform, Inhalt usw. gibt es keine einzige richtige Antwort auf diese Frage. :) :)

14
JOG

Sie sollten nie eine Kontrollkästchen-Optionsgruppe so manipulieren, dass sie sich wie eine Funkoptionsgruppe verhält. Dies verstößt gegen das herkömmliche und erwartete Verhalten des interaktiven Benutzerelements. Also kein einzelnes Kontrollkästchen.

Dropdown-Liste vs. Optionsfelder: Dies hängt wirklich vom Layout des Suchformulars ab (ob dies der Fall ist) und von der Anzahl der verfügbaren Optionen. Optionsfelder eignen sich nicht mehr für 2-3 Optionen und nehmen etwas zu viel Platz ein. Ein Dropdown wäre vorzuziehen.

Das hervorgehobene Beschriftungsfeld folgt einem ähnlichen interaktiven Muster wie eine Radiooptionsgruppe. Der Unterschied besteht darin, dass es nahtloser in die Ästhetik der Anwendungen integriert werden kann. Wie bei der Radio-Optionsgruppe könnten sie sich leicht drängen, wenn sie zu viele werden. Nach meiner Erfahrung zeigen sie jedoch im Gegensatz zu Optionsfeldern häufig eine Echtzeitfilterung an, z. B. die Suche nach einem Bereich und die Echtzeitfilterung von Autos, Motorrädern und Fahrrädern, die in diesem Bereich zum Verkauf stehen. Dies kann daran liegen, dass sie im Erscheinungsbild Tabs ähneln, die wiederum unmittelbare interaktive Elemente sind. Die Verwendung, um zuvor eine Suche in einem Suchformular einzurichten, ist mir etwas unbekannt.

9
AndroidHustle

Es kommt wirklich darauf an, denke ich:

  • Optionsfeld: Wenn maximal 4-5 Optionen zur Auswahl stehen
  • Dropdown-Liste: Wenn es maximal 20-30 Optionen gibt (sie verwenden es für ungefähr 100 Optionen, aber in diesem Fall ist es wirklich schwer zu verwenden)
  • tabs: Wenn es nur wenige Optionen gibt und Tabs in Ihre Benutzeroberfläche passen
  • Filterfeld: Wenn mehr als 100 Optionen zur Auswahl stehen

Im Allgemeinen würde ich ein Filterfeld mit Vorschlägen und/oder automatischer Vervollständigung bevorzugen.

4