it-swarm.com.de

Bestes UI-Muster, mit dem ein Benutzer Elemente Gruppen zuweisen kann

Problem: Der Benutzer hat eine Liste mit ca. 5-20 nicht kategorisierten Elementen und muss diese in 2-4 Gruppen einteilen. Der schwierige Teil ist, dass dasselbe Element in mehr als eine Gruppe eingeordnet werden kann (dies ist ein Edge-Fall, der jedoch unterstützt werden muss).

Soweit ich sehen kann, gelten zwei Entwurfsmuster:

Drag & Drop :
Grundsätzlich wird dem Benutzer eine Liste von ziehbaren Elementen zur Verfügung gestellt, die er dann in Gruppen zusammenfassen kann

Das Hauptproblem bei diesem Muster ist, dass, da dasselbe Element in mehr als eine Gruppe eingeteilt werden kann, dies bedeutet, dass es sich nicht wirklich um eine "Verschiebungs" -Interaktion handelt. Das Element muss in der nicht kategorisierten Liste bleiben, damit der Benutzer dies kann Platzieren Sie es auch in einer anderen Kategorie. Eine weitere Folge davon ist, dass die nicht kategorisierte Liste niemals verkleinert wird, sodass nicht sofort klar ist, welche der darin enthaltenen Elemente gruppiert wurden und welche nicht zugewiesen wurden

Hier ist ein mögliches Design, das versucht, die oben genannten Probleme zu lösen. Elemente, die Gruppen zugewiesen wurden, erscheinen dunkler. Außerdem verwende ich Farbe (farbiger Punkt, der der Farbe der Gruppenbezeichnung entspricht), damit der Benutzer sehen kann, unter welche Gruppe (n) das Element gestellt wurde.

enter image description here

Checkbox-Tabelle :
Eine Benutzeroberfläche im Tabellenstil, in der jedes Element einer Gruppe zugewiesen werden kann, indem das Kontrollkästchen für die Spalte dieser Gruppe aktiviert wird. Aufgrund der Mehrfachgruppenzuweisung pro Elementanforderung werden anstelle von Optionsfeldern Kontrollkästchen verwendet. Hier ist ein Beispiel:

enter image description here

Der Hauptnachteil, den ich bei dieser Benutzeroberfläche sehe, ist, dass es nicht sofort einfach ist zu erkennen, welche Elemente zu einer bestimmten Gruppe gehören. Außerdem ist es etwas umständlicher, Elemente zwischen einmal zugewiesenen Gruppen zu verschieben (Aktion in zwei Schritten: Der Benutzer muss ein Kontrollkästchen deaktivieren und ein anderes aktivieren). Dies kann behoben werden, indem neben der Benutzeroberfläche der Zuordnungstabelle eine separate Liste der Elemente in jeder Gruppe bereitgestellt wird. Diese Liste kann entweder nicht interaktiv sein oder Drag & Drop zum Verschieben von Elementen zwischen Gruppen unterstützen. Beispiel:

enter image description here

Um ehrlich zu sein, bin ich mit beiden Lösungen nicht ganz zufrieden. Ich frage mich, ob jemand bessere Ideen oder Verbesserungen an diesem Design hat?

59
M.A.X

Es ist eher eine Frage, ob Sie das gesamte Mapping sehen müssen oder nicht. Wenn Sie nicht das gesamte Mapping auf einmal sehen müssen, gibt es eine andere Möglichkeit.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Wenn das gesamte Mapping wichtig ist, verwenden Sie am besten eine Matrix, mit der Benutzer das gesamte Mapping anzeigen können.

Beachten Sie, dass die Verwendung der Drag & Drop-Benutzeroberfläche nett ist, aber lästig sein kann, wenn die Benutzer sich wiederholende Aktionen ausführen müssen. Kontrollkästchen können sich wiederholende Aufgaben erheblich vereinfachen.

14
Mortalus

Viel hängt davon ab, wie viele Elemente und Gruppen Sie erwarten, und wie viele erwarten Sie, dass jemand gleichzeitig aktiv arbeitet.

Wenn Sie mit einer großen Anzahl von Gruppen und Elementen arbeiten, wird die erste Option unbrauchbar. Obwohl ich mich davon abwenden würde, selbst wenn die Zahlen klein wären.

Die zweite Option sieht vielleicht nicht schick aus, ist aber sowohl einfach zu bedienen als auch zu verstehen und kann sich auch gut an eine größere Anzahl von Elementen und Gruppen anpassen. Ich sehe keine größere Schwäche als die Tatsache, dass es keine neue Methode ist, dies zu tun. Aber das ist seine Stärke.

Die dritte Option ist eine nette Verbesserung gegenüber der zweiten, jedoch nur mit einer geringen Anzahl von Gruppen und Gegenständen.

Ich würde Option 2 mit ein paar Änderungen vorschlagen. Fügen Sie die Möglichkeit hinzu, nach einer der Spalten (Gruppen) zu sortieren, und haben Sie rechts ein Zusammenfassungsfenster, in dem angezeigt wird, in welchen Gruppen sich ein Element befindet, wenn dieses Element ausgewählt wird.

11
JohnGB

Warum nicht beides kombinieren? Verwenden Sie die Anfangsanzeige der zweiten und ermöglichen Sie Benutzern, Kontrollkästchen zu aktivieren. (Das Auswählen von Kontrollkästchen ist viel schneller und einfacher als das Ziehen und Ablegen, wodurch dies Option 1 überlegen ist.) Damit der Benutzer durch einen Blick in die Spalte leicht erkennen kann, welche Elemente sich in einer bestimmten Gruppe befinden, muss jedes Kontrollkästchen in eine Schaltfläche als umgewandelt werden sobald es überprüft wird. (Diese Schaltfläche kann wie die aussehen, die Sie ganz rechts in Option 2b mit einem x anzeigen. Klicken Sie dann auf diese Schaltfläche, um das Element aus der Gruppe zu entfernen und die Schaltfläche wieder in ein deaktiviertes Kontrollkästchen zu verwandeln.) Sie können dies sogar tun dass ein Benutzer auf die Schaltfläche klicken und sie ziehen kann, um sie in einer fließenden Bewegung zwischen Gruppen zu verschieben, während er dennoch die intuitive, aber etwas langsamere Option hätte, die Auswahl einer Spalte aufzuheben und in einer anderen mithilfe von Kontrollkästchen erneut auszuwählen.


Bearbeiten: Hier ist ein kurzes Modell dessen, was ich meine.

enter image description here

6
Graham Herrli

Ich denke, dass beide Paradigmen sinnvoll sind, aber nicht, wenn sie gleichzeitig präsentiert werden.

Als Folgefrage: Müssen Sie diese Aktivität auf einer einzigen Seite ausführen? (Ist es beispielsweise Teil eines Formulars?)

Wenn diese Aufgabe Teil einer Artikelverwaltungserfahrung ist, die für das Produkt von zentraler Bedeutung ist, würde ich einen zweiseitigen Ansatz empfehlen, wie er in iTunes für Wiedergabelisten und Google+ für Kreise verwendet wird.

Auf der Seite "Liste der Elemente" kann der Benutzer eine Liste aller vorhandenen Gruppen anzeigen und Elemente in diese Gruppen ziehen und dort ablegen. Jede Gruppe kann die Anzahl der hinzugefügten Elemente anzeigen. Sie können dann jedes Element mit der Anzahl der Gruppen kennzeichnen, zu denen es hinzugefügt wurde. Wenn ein Element ausgewählt wird, können die Gruppen hervorgehoben werden, zu denen es gehört.

Wenn eine Gruppe ausgewählt wird, ändert sich die Struktur der Seite, um die Elemente innerhalb und außerhalb der ausgewählten Gruppe deutlich zu unterscheiden. Elemente, die nicht zur Gruppe gehören, können dann hineingezogen oder mehrfach ausgewählt werden, um sie in die ausgewählte Gruppe zu verschieben.

5
Nathan Brothers

Wie wäre es, wenn Sie Gruppen mit einer Auswahlliste anzeigen würden, die automatisch vorschlägt. Diese Gruppe könnte weiter in ein responsives Raster eingefügt werden (organisieren, wie es Ihre Layoutregel vorschreibt).

Sie können ausgewählte Elemente zusätzlich in einer Tag-Cloud-ähnlichen Komponente wie Gruppe 3 anzeigen

enter image description here

4
Aftab

Was ist die Hauptaufgabe?

  1. Elemente einer Gruppe zuweisen
  2. Gruppen vergleichen
  3. Elemente zwischen Gruppen verschieben
  4. Etwas anderes?

Ich denke, dass # 1 am besten mit Drag & Drop unterstützt wird. Ein gutes Beispiel dafür in der Praxis ist Google + Kreise . Nr. 2 und Nr. 3 werden wahrscheinlich am besten mit dem oben gezeigten Kontrollkästchen oder einer Variation dieses Konzepts unterstützt, obwohl ich denke, dass es Probleme mit der Informationsüberflutung mit einer großen Anzahl von Elementen oder Gruppen geben könnte. Dies kann je nach Verwendungshäufigkeit für die Zielbenutzergruppe mehr oder weniger problematisch sein. Wie andere gesagt haben, würde ich es vermeiden, Muster zu kombinieren, und mich nur an das halten, das die Hauptaufgabe am besten unterstützt.

1
Max E

Ich würde eine Variation Ihrer zweiten Option vorschlagen, aber jeweils nur eine Gruppe anzeigen, um die Verwirrung des Benutzers zu minimieren. In vielen Fällen bedeutet Drag & Drop für den Benutzer nur mehr Arbeit, wenn eine einfachere Methode vorhanden ist.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Im obigen Modell wird die Gruppe aus der Dropdown-Liste ausgewählt und die Kontrollkästchen ändern sich je nach ausgewählter Gruppe dynamisch. Beachten Sie, dass sich die Schaltfläche Speichern über der Gruppenauswahl befindet, um anzuzeigen, dass alle Gruppen und nicht nur eine gespeichert werden. Wenn Sie die Gruppenauswahl in einem Dropdown-Menü haben, ist dieses Muster unabhängig von der Anzahl der Gruppen wesentlich skalierbarer.

Wenn Sie dies für eine Weboberfläche tun, können Sie dies als schrittweise erweiterte Lösung verwenden, wobei der Fallback darin besteht, dass alle Gruppen gleichzeitig übereinander angezeigt werden.

1
Virtuosi Media

Die physische Größe der Arbeit, die Sie verwenden werden, muss berücksichtigt werden. Wenn diese Aufgabe über den gesamten Bildschirm verteilt ist, wird das Ziehen und Ablegen zu einem Problem. Einige Systeme, an denen ich an der Rückmeldung gearbeitet habe, haben beim langen Ziehen die Maustasten gedrückt (die Rückmeldung sagte lange). Entfernungen führten zu vielen Fehlern, da die Finger nach oben kamen, bevor sie sollten. Wenn das Ziehen und Ablegen ein Klicken, eine leichte Drehung des Handgelenks oder ein Absenken ist, können die meisten Menschen problemlos damit umgehen, auch ältere Menschen mit einigen Bewegungsproblemen.

Das Kontrollkästchen ist eine großartige Idee für Raster nahezu jeder Größe und eignet sich besser für Benutzer, die Tastaturen anstelle von Mäusen verwenden möchten.

Wie üblich würde der Vorschlag einer Kombination beider Methoden meine Stimme gewinnen, da er den meisten Benutzern eine Lösung bietet. Die Entwicklung wird etwas länger, aber das ist nicht das Anliegen Ihres Benutzers.

Die Antworten scheinen alle darauf zu beruhen, ein Element zu nehmen und es einer Gruppe zuzuweisen. Ich verstehe die relative Bedeutung von Element und Gruppe nicht, aber ist es sinnvoll, die Gruppe als primäre Quelle zu verwenden und Elemente aus der Liste in die Gruppe zu "ziehen" und dann zur nächsten Gruppe überzugehen.

0
Adelaide Robin