it-swarm.com.de

Was ist eine intuitive HTML-Oberfläche zum Auswählen von Elementen aus einer Liste in mehrere Teilmengen?

Ich habe eine Liste von Elementen, von denen einige in eine unbestimmte Anzahl von Teilmengen eingehen. Ein Element kann höchstens eine Teilmenge enthalten. Ein Element landet möglicherweise nicht in einer Teilmenge.

Es ist einfach, wenn es immer höchstens 1 Teilmenge gibt. Dies macht es schwieriger, da es mehr geben könnte (bis zur Anzahl der Elemente in der Liste). Kann mir jemand ein gutes Beispiel geben?

Bearbeiten: Um es einfacher zu machen, wird dem Benutzer eine lange Liste von Elementen angezeigt. Der Benutzer möchte einige von ihnen in verschiedenen Gruppen zusammenfassen. Jedes Element in der Liste kann gruppiert sein oder nicht. Wenn ein Element in eine Gruppe eingeordnet wird, kann es nicht in eine andere Gruppe eingeordnet werden. (Oder anders gesagt, ein Element in der Liste kann nur in null oder einer Gruppe sein).

2
Dave

Das häufigste Beispiel für das, was Sie beschreiben, ist ein Dateisystem.

2

Es hört sich so an, als würden Sie beschreiben, wenn ich meine Wäsche in Stapel zerlege. Ich habe einen Haufen Kleider, die Weiß, Schwarz und Farben tragen sollen. Dazu habe ich 3 Stapel und nehme jeweils einen Gegenstand und füge ihn einem Stapel hinzu.

Dieser Denkprozess ist etwas schwierig auf einer Webseite darzustellen, aber ich glaube Google Plus macht es ganz gut. Sie haben effektiv zwei Hälften eines Bildschirms. Eine Hälfte enthält die Liste der Elemente, die derzeit nicht Teil einer Gruppe sind. Es sollte möglich sein, mehrere nacheinander auszuwählen und die Auswahl aufzuheben (die von Google+ angebotene Option "Neu auswählen" ist eine lebensrettende Bonusfunktion!). Sie können sie dann auf die andere Hälfte Ihres Bildschirms in Richtung der Gruppen und über die Gruppe ziehen, in die Sie sie einfügen möchten. Es sollte ausreichend Feedback zum Hover geben, damit Sie sicher sind, dass die Aufgabe ordnungsgemäß ausgeführt wird.

Dies funktioniert in Ordnung, wenn nur wenige Gruppen vorhanden sind, die in einem Teil eines Bildschirms angezeigt werden können. Z.B. Kreise in Google+ für die meisten Menschen.

Bei diesem Ansatz weiß Ihr Benutzer, welche Elemente noch keiner Gruppe zugewiesen wurden. Diese Seite der Dinge sollte also gut funktionieren.

Alles in allem ist Google+ ein gutes Beispiel. Aber es ist eine schwierige Benutzeroberfläche, die sich hervorragend durchsetzen lässt. Viel Glück!

2
Amadiere

Verwenden Sie eine Drag-and-Drop-Oberfläche, damit Elemente in verschiedene Listen sortiert werden können

Verwenden Sie mit dem jQuery UI Sortable Plugin eine ungeordnete Liste pro Teilmenge und verknüpfen Sie alle Teilmengen, wie in diese Demo : gezeigt

enter image description here

(Ich habe die Header zum obigen Modell hinzugefügt, aber ansonsten entspricht der Code genau der Demo der jQuery-Benutzeroberfläche.)

Dies ist eine "arme Mann" -Version der Google+ Circles-Oberfläche, aber sie ist etwas einfacher zu implementieren und die Nutzer sind wahrscheinlich besser damit vertraut (zumindest bis mehr Nutzer Google+ erlebt haben). Es gibt einige Ansätze für die Implementierung:

  1. Fügen Sie zunächst alle Elemente in Teilmenge 1 ein und fordern Sie den Benutzer auf, die Elemente per Drag & Drop in die richtigen Gruppen zu ziehen.
  2. Sortieren Sie Elemente nach dem Zufallsprinzip in mehrere Teilmengen und fügen Sie dann dieselbe Anweisung hinzu.
  3. Platzieren Sie alle Elemente über den Teilmengen in einer "unsortierten" Gruppe und fordern Sie den Benutzer auf, sie zu sortieren (was Google+ mit der Circles-Oberfläche macht):

enter image description here

Stellen Sie in jedem Fall sicher, dass Sie die Drop-Ziele einfärben, um sie sehr deutlich zu machen (möglicherweise einschließlich "Hier ablegen" -Text, wenn die Teilmenge leer ist), und lassen Sie das Drag-and-Drop-Widget ganz weg, wenn der Besucher einen Touchscreen verwendet.

1
Nick