it-swarm.com.de

Ersatz für lange Dropdown-Liste

Ich arbeite derzeit an einem Teil unserer Anwendung, in dem der Benutzer ein Dokument bearbeitet. Ein Teil der Anwendung ermöglicht es dem Benutzer, bestimmte "Teile" einzugeben. Wir haben dies als ein paar Dropdown-Schaltflächen implementiert. Dies kann jedoch für Benutzer frustrierend sein, da die Liste der Teile normalerweise so lang ist, dass sie vom Bildschirm abweicht (und die Pfeile oben und unten nicht einfach zu verwenden sind). Ich suche nach einem besseren Ersatz für diese Steuerung. Wir haben über eine Schaltfläche "Teil auswählen" nachgedacht, die einen neuen Dialog öffnet ... aber wir sind uns nicht ganz sicher, was wir in den Dialog einfügen sollen oder ob der Dialog überhaupt die beste Option ist.

Einige wichtige Punkte:

  • Die "Teile" haben eindeutige Namen
  • Der Zielbenutzer ist ein Verkäufer oder ein gleichwertiger Benutzer, und wir möchten den Vorgang so einfach wie möglich gestalten (weshalb das aktuelle Dropdown-Menü mit Pfeilen nicht das größte ist).
  • Die Liste der "Teile" muss geladen werden (einschließlich eines Dialogfelds, in dem der Benutzer zur Eingabe bestimmter Details aufgefordert wird). Derzeit machen wir das beim ersten Klicken auf die Schaltfläche.

Hat jemand jemals ein ähnliches Problem oder eine Lösung gefunden, die besser funktioniert? Ich würde mich über Beiträge freuen.


Screenshots zur Verdeutlichung (beachten Sie, dass dies nicht die eigentliche Anwendung ist; es ist ein Modell des spezifischen Problems)

Anwendung:

application

Auswahlliste:

short list

Lange Liste:

long list

7
NickAldwin

Da der Benutzer die Datenquelle auswählen muss, versuchen Sie, die Datenquellenauswahl inline einzubeziehen:

enter image description here

Dies hält ihre Augen auf ihre Arbeit gerichtet und nicht auf den Dialog, der gerade auf sie zukam. (Ich denke nicht, dass Dialoge per se böse sind, aber wenn sie eine Aufgabe inline erledigen können, umso besser für ihren "Fluss".)

  • Beginnen Sie mit dem Laden der Teile, sobald Sie feststellen, dass der Benutzer in das Textfeld geklickt hat oder wenn sich die Datenquelle ändert. Wenn Sie erraten können, was sie wahrscheinlich auswählen möchten, laden Sie es sofort.
  • Wenn der Benutzer warten muss, während Sie Ergebnisse abrufen oder sortieren, zeigen Sie ihm einen Drehknopf, vorzugsweise im Suchfeld oder im Ergebnislistenbereich. Wenn Sie das Textfeld ausgrauen müssen, ist das in Ordnung, aber im Idealfall können sie Text eingeben, während Sie Daten laden.
  • Fügen Sie das ausgewählte Teil hinzu, wenn es ausgewählt ist.
2
peteorpeter

Verwenden Sie eine Multi-Box

Die Benutzeroberfläche und die Erfahrung des ausgewähltes Javascript-Plugin sind möglicherweise genau das, wonach Sie suchen. Es ist ein Kombinationsfeld: Es beginnt als Dropdown-Menü, schränkt jedoch die Auswahlmöglichkeiten während der Eingabe ein. Schreiben Sie für den Desktop die entsprechenden Anforderungen.

enter image description here

6
Taj Moore

Wir haben ein ähnliches Problem mit der Auswahl aus sehr langen Listen in unserer webbasierten Software festgestellt. Dropdown-Felder wurden nicht skaliert, und Kombinationsfelder ermöglichten es Benutzern nicht, schnell eine lange Liste anzuzeigen und nach verschiedenen Kriterien zu filtern. Wir haben einen "Item Selector" entwickelt, der eigentlich nichts anderes als ein durchsuchbares Widget ist. Das vereinfachte Beispiel unten zeigt nur eine Liste von 3 Elementen, aber normalerweise überschreiten unsere Listen mehrere hundert oder tausend.

Diese Schnittstelle ermöglicht es uns, zusätzliche Filter (zusätzlich zur einfachen Suche) wie die Kategorisierung von Elementen in Ordnern oder die Auswahl eines Standardelements einzuschließen. In diesem Selektor haben wir normalerweise auch die Möglichkeit, ein neues Element zu erstellen (in diesem Fall fügen Sie der Liste ein neues Tier hinzu, falls es noch nicht vorhanden ist).

4
Renee Grebe

Sie können die automatische Vervollständigung basierend auf den Buchstaben verwenden, die der Benutzer eingibt, und diese dynamisch aktualisieren

enter image description here

Oder wenn Sie mit dem Konzept der automatischen Vervollständigung nicht vertraut sind, können Sie sich vielleicht ein Akkordeon ansehen, das zumindest die Länge der Liste verkürzt

enter image description here

Ein alternativer Ansatz besteht darin, zwei Dropdowns zu haben: Ein Dropdown, das die Super-Sets enthält, und das zweite Dropdown, das basierend auf dem ausgewählten Wert aus dem Super-Set-Dropdown ausgefüllt wird (d. H. Es enthält die Elemente dieser Gruppe).

2
Mervin

Die meisten Richtlinien für Benutzeroberflächen empfehlen die Verwendung einer Liste, wenn die Anzahl der Optionen in einem Dropdown-Menü etwa 20 Elemente überschreitet. Sie könnten eine permanente Liste auf der rechten Seite haben. Es gibt viele Möglichkeiten, dies zu tun. Es kann sich um einen Baum mit Gruppierungen handeln, um sich schneller zurechtzufinden, oder um mehrere Listen in einem kaskadierenden Stil wie Finder (Mac OS X-Dateimanager). Die Liste könnte eine Art Filterung unterstützen, um nur relevante Elemente anzuzeigen.

1
Erik Engheim