Alternativen zu einem einzelnen select multiple="multiple" Element für große Datasets

8

Ich bin oft im Widerspruch dazu, wie ich dieses Problem in meinen Anwendungen angehen kann. Ich habe eine beliebige Anzahl von Optionen verwendet, einschließlich:

  • Eine generische Mehrfachauswahl - Dies ist meine am wenigsten bevorzugte und am seltensten verwendete Option. Ich finde die Benutzerfreundlichkeit zu grauenhaft, ein einfacher Miss-Klick kann all deine harte Arbeit vermasseln.
  • Eine "Autocomplete" -Lösung - Nachteil: Benutzer müssen Rechtschreibfähigkeiten haben, um die verdammten Werte zu finden, die sie brauchen und denen, die sie nicht im Sinn haben, und die mögliche Backend-Leistung der Teilstringsuche.
  • Zwei benachbarte Multiselects, mit einem Hinzufügen / Entfernen-Button - Downsides: immer noch "hässlich" imo
  • Eine beliebige Anzahl von ausgefallenen Javascript-Lösungen ( Ссылка , Ссылка , usw.)

Ich war nicht in der Lage, Usability-Studien über den besten Ansatz für dieses Problem zu finden. Viele dieser alternativen Lösungen sind großartig, wenn Sie von & lt; 10 Elementen zu hundert gehen, aber sie können vollständig ausfallen, wenn Sie von hundert auf tausend gehen.

Was benutzt ihr? Warum benutzt du es? Kannst du mich auf Usability-Fallstudien hinweisen? Gibt es eine "magische" Lösung, die noch entdeckt werden muss?

    
hobodave 21.07.2009, 18:49
quelle

4 Antworten

10

Mein Rat lautet: Verwenden Sie keine generischen Mehrfachauswahlsteuerelemente. Ich habe User Experience Research für meine gesamte Karriere betrieben und jedes Mal, wenn ich eine Site mit mehreren Select-Steuerelementen teste, stellt sich heraus, dass es immer wieder Probleme für Endbenutzer verursacht.

Ich habe vor einer Weile einen Beitrag dazu geschrieben: Mehrere Auswahlsteuerelemente müssen sich weiterentwickeln oder sterben

Klingt, als wüsstest du das trotzdem. Ihre eigentliche Frage lautet: "Was verwende ich stattdessen?" Nun, um diese Frage zu beantworten, müssen Sie herausfinden, ob sich die Aufgabe des Benutzers auf Recall oder recognition bezieht.

(i) Mit Rückruf bedeutet der Benutzer, was er auswählen möchte, bevor er die Liste überhaupt gesehen hat. In diesem Fall ist es wahrscheinlich am einfachsten für sie, wenn Sie ein Autocomplete-Tool anbieten (zum Beispiel auf Facebook). Diese Lösung ist noch besser, wenn die Liste der Optionen auf einer Seite auch sehr lang sein kann (z. B. Ortsnamen usw.).

(ii) Weiter zur Anerkennung - damit meine ich eine Aufgabe, bei der der Benutzer nicht weiß, was er auswählen möchte, bis er die Liste der Optionen gesehen hat. In diesem Fall gibt die automatische Vervollständigung keine Hinweise. Eine Reihe von Checkboxen wäre viel hilfreicher. Wenn Sie sie alle gleichzeitig anzeigen können, ist dies für den Benutzer hilfreich. Scrollende DIVs sind kompakter, aber sie erzeugen eine Speicherlast für den Benutzer - d. H. Sobald sie gescrollt haben, müssen sie sich daran erinnern, welche Elemente sie ausgewählt haben. Dies wird besonders deutlich, wenn Benutzer ein Formular speichern und später darauf zurückkommen.

Also - über Ihr Problem nachdenken, brauchen Sie eine Lösung für den Rückruf oder die Anerkennung?

    
Harry 26.07.2009, 13:42
quelle
2

Ich kann Sie leider nicht auf Fallstudien hinweisen, aber was ich Ihnen sagen kann ist, dass ich persönlich große Checkbox-Arrays in Zwei-zu-Fünf-Spalten-Layouts bevorzuge. Sicher, sie nehmen viel Platz in Anspruch, sind aber extrem präzise und unkompliziert.

Ich denke für beliebige -Steuerelemente - sei es einfache Mehrfachauswahl, doppelte Liste, Checkbox-Array oder irgendeine andere Lösung - sobald Sie einen bestimmten Schwellenwert überschreiten, wird es für den Benutzer keine Herausforderung mehr geben Egal was.

    
Peter Bailey 21.07.2009 19:13
quelle
0

Sehen Sie sich das Dojo Toolkit-Steuerelement DataGrid an. Es ist bei weitem das flexibelste und leistungsfähigste und unterstützt die Auswahl mehrerer Zeilen. Es hat auch Funktionen für die Barrierefreiheit eingebaut.

    
aehlke 21.07.2009 19:09
quelle
0

Die ExtJS-Bibliothek hat einige wirklich gute Lösungen für Ihr Problem. Es gibt eine Reihe von Benutzererweiterungen für ordentliche Combos und Multi-Select-Boxen.

Wenn Sie eine Combo-Auswahlliste verwenden möchten, können Sie die Suchanfragen und Seitenumbrüche hinzufügen und das resultierende Dropdown-Menü wie in diesem Beispiel mithilfe einfacher Vorlagen entwerfen:

Ссылка

Hier ist eine schöne Multiselect, in dem Stil, den Sie zu beschreiben schienen:

* (main_site) / lernen / Erweiterung: Multiselect2

Hier finden Sie alle Benutzererweiterungen:

* (main_site) / lernen / Ext_Extensions

Außerdem können Sie es problemlos in eine bestehende Webseite integrieren, ohne zusätzlichen Aufwand zu verursachen. Der komplette Stack von ExtJS ist ziemlich groß, aber um nur die JS-Dateien zu erhalten, die Sie brauchen, bieten sie ein nützliches Tool, um nur die benötigten Teile zu finden:

* (main_site) / Produkte / extjs / build /

Nur eine Warnung: ExtJS hat gerade 3.0 veröffentlicht, aber ich bin nicht sicher, ob die Benutzererweiterungen aktualisiert wurden. Die "forum-search" wurde von einem 3.0-Beispiel übernommen, so dass es mit den neuesten und besten funktioniert.

(*) Anscheinend können neue Benutzer nur einen Link veröffentlichen ...

    
Harmon 21.07.2009 19:27
quelle

Tags und Links