it-swarm.com.de

Wie kann ich beschreiben, was Kontrollkästchen in einer langen Liste von Elementen tun?

In meiner Web-App habe ich eine lange Liste von Artikeln auf der einen Seite des Bildschirms und eine Warenkorbliste auf der anderen Seite.

Hier ist ein Beispiel: enter image description here

Die App aktiviert die Kontrollkästchen neben den Artikeln und klickt dann auf In den Warenkorb. Dadurch werden sie in die Warenkorbliste verschoben.

(Aufgrund der großen Anzahl von Elementen in der Liste denke ich, dass ich übrigens weiterhin Kontrollkästchen verwenden muss. Bitte betonen Sie diesen Punkt nicht zu sehr.)

Die meisten Leute verstehen, dass die Kontrollkästchen auf der linken Liste Dinge zum Warenkorb hinzufügen sollen, aber sie verstehen die Kontrollkästchen auf der rechten Seite nicht. Einige Leute denken sogar, dass Sie die Kästchen in der rechten Liste aktivieren müssen, wenn Sie sie zur Kasse bringen möchten.

Wie kann ich klarstellen, dass die Kontrollkästchen auf der rechten Seite tatsächlich Artikel in großen Mengen aus dem Warenkorb entfernen sollen?

5
JustCurious

Das Entfernen von Elementen ist per se keine "Massenoperation":

Auf den ersten Blick wäre "Mehrere Elemente löschen" eine Massenoperation, bei der das von Ihnen ausgewählte Kontrollkästchenmuster weit verbreitet ist und von den Benutzern (wahrscheinlich) gut angenommen wird.

Ihr Fall ist jedoch ganz anders, da es gibt keine andere Option außer "Löschen/Entfernen".

Daher haben Sie es nicht mit einem Lehrbuchszenario "Elemente auswählen und dann Aktion auf ausgewählte Elemente anwenden" zu tun.


Komplexität reduzieren:

Wenn wir die Transaktion ohne Massenbearbeitung betrachten, können wir die Komplexität für den Benutzer erheblich reduzieren:

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups


Was ist für den Benutzer drin?

Wenn der Benutzer in Ihrem aktuellen Szenario 2 von 3 Artikeln in seinem Warenkorb entfernen möchte, muss er:

  • Klicken Sie auf das Kontrollkästchen des ersten Elements, das entfernt werden soll
  • Klicken Sie auf das Kontrollkästchen des zweiten Elements, das entfernt werden soll
  • Suchen und identifizieren Sie die Schaltfläche "Aus dem Warenkorb entfernen"
  • Bewegen Sie die Maus zum Ziel (möglicherweise weit entfernt von seiner aktuellen Mausposition)
  • Klicken Sie auf das Ziel.

In dem vorgeschlagenen Szenario muss der Benutzer für dieselbe Aufgabe:

  • Identifizieren Sie den Zweck von "X" es
  • Klicken Sie auf das "X" des ersten Elements, das entfernt werden soll
  • Klicken Sie auf das "X" des zweiten Elements, das entfernt werden soll

Der Benutzer muss nicht nur 1 "Suche" und einen Klick weniger ausführen, sondern auch die Wahrscheinlichkeit von Fehlern (wie die in Ihrer Frage erwähnten "Klickelemente, mit denen ich auschecken möchte", die Sie erwähnt haben) wird verringert.

6
vzwick

Haben Sie darüber nachgedacht, sich das jquery-Plugin anzusehen Chosen

enter image description here

Die Mehrfachauswahlfunktion ist einfach, da Benutzer aus einer Dropdown-Liste einfach auswählen können, was sie möchten. Wenn sie ein Element löschen müssen, klicken Sie auf das X, um es aus der Liste zu entfernen und in die Dropdown-Liste zurückzukehren. Die Funktion zur automatischen Vervollständigung reduziert auch das Scrollen, da der Benutzer einfach den Namen des Produkts eingeben kann und es abgerufen wird

Unter diesem Dropdown-Menü befindet sich eine einfache Checkout-Schaltfläche.

1
Mervin

Ich weiß, dass Sie von den Kontrollkästchen überzeugt sind, aber haben Sie darüber nachgedacht, Benutzer nur Elemente mit einem einzigen Klick hinzufügen zu lassen? Ein gängiges Muster besteht darin, Plus-Symbole neben Elementen im linken Bereich zu platzieren und dann neben Elementen im rechten Bereich zu kreuzen. Durch Klicken auf Hinzufügen wird der Artikel in den Warenkorb gelegt, durch Klicken auf Kreuz wird er entfernt.

0

Entfernen Sie die Warenkorb Liste, halten Sie die Kontrollkästchen

Wichtig ist, dass ich davon ausgehe, dass beim Einchecken von verfügbares Material in dieser Liste verbleibt, aber überprüft wird. Angesichts dessen ....

Eingecheckte Artikel in verfügbares Material IS der Warenkorb im Wesentlichen. Und deshalb sind die Kontrollkästchen in Warenkorb = sind verwirrend. Was ich will, ist eingecheckt verfügbares Zeug aber nicht eingecheckt Warenkorb. Und ob überprüft oder nicht, "checkout" bringt alles in Warenkorb. Die Verwirrung ist verständlich.

Mit nur einer Liste ist sehr klar, was ein Scheck bedeutet - natürlich zusammen mit einem netten Hinweis darüber, sagen wir: "Überprüfen Sie, was Sie kaufen möchten."

Außerdem sollten alle markierten Elemente oben in der Liste sortiert sein.

Entfernen Sie die Kontrollkästchen, behalten Sie beide Listen

Eine alternative Lösung. Lassen Sie die Elemente physisch von einer Liste zur anderen verschieben. Jetzt sind keine Kontrollkästchen mehr erforderlich. Ein Doppelklick auf ein Element, um es in die andere Liste zu verschieben. Und natürlich ein netter Hinweis wie "Doppelklick zum Hinzufügen zum Warenkorb".

0
radarbob