it-swarm.com.de

Elemente zwischen Listen verschieben

Ich habe eine Frage ... Ich habe es mit einer Oberfläche zu tun, die zwei Listen enthält, zwischen denen Sie Elemente ziehen und ablegen können.

Was wäre ein besserer Ansatz und warum?

a) Das Verschieben zwischen Listen ändert nichts am Verhalten der Schaltflächen zwischen ihnen. Wenn Element drei nach rechts verschoben wird, entfernt das System das Element aus der Quellliste, wählt das nächste verfügbare Element darin aus und fügt das gewünschte Element in die Zielliste ein. Der Fokus des zuvor ausgewählten Elements geht verloren und wird durch ein anderes ersetzt. (In der folgenden Abbildung wurde Punkt Drei in die andere Liste verschoben und Punkt Vier ausgewählt).

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

b) Das Verhalten der mittleren Taste ändert sich, da das ausgewählte Element nicht den Fokus verliert. Im Gegensatz zum vorherigen Beispiel wird durch einmaliges Klicken auf die mittlere Schaltfläche > das Element von einer Liste in die andere verschoben und in <.

mockup

bmml Quelle herunterladen

Meiner Meinung nach ist Option b freundlicher, da Sie so problemlos zu einem vorherigen Status zurückkehren (rückgängig machen) können. Es entfällt auch die Notwendigkeit, Schaltflächen zu deaktivieren und Elemente in beiden Listen auszuwählen, und das erleichtert mir die Verwendung.


Bonus: In Anbetracht der Lösung a) wissen wir, dass ein Element in der linken Liste nur zur Liste gelangen kann, wenn es ausgewählt ist rechts und umgekehrt; Wenn ein Element in der Liste rechts ausgewählt ist, kann es nur zur linken Liste wechseln. Wäre das Deaktivieren von Schaltflächen für den Benutzer möglicherweise ärgerlich oder sollte empfohlen werden?

11
edgarator

Schauen Sie sich das Gesamtbild an. Was wird der Benutzer als nächstes tun? Wahrscheinlich nicht rückgängig machen - möglich, aber nicht wahrscheinlich?

Wenn der wahrscheinlich nächste Schritt darin besteht, ein anderes Element von der linken Liste nach rechts zu verschieben, sollten Sie den Fokus auf das nächste Element in der Quellliste legen, damit der Benutzer mehrere Elemente einfach nacheinander durch Drücken der Pfeiltaste verschieben kann. Um die Elemente 2,3 und 4 zu verschieben, wählen Sie Element 2 aus und drücken dann dreimal die Pfeiltaste.

Ebenso, wenn Sie ein Element aus der rechten Liste nach links verschoben haben.

Angenommen, die Liste ist geordnet, sollten Sie in der zweiten Liste dieselbe Reihenfolge wie in der ersten beibehalten, es sei denn, es gibt einen guten Grund, dies nicht zu tun (so wie die Liste als Verlauf chronologischer Ereignisse fungiert und nach zuletzt hinzugefügt geordnet ist).

Es ist nicht erforderlich, Schaltflächen zu deaktivieren (grau), außer wenn eine Liste leer ist, und sie überhaupt nicht auszublenden, da dies die visuelle Erkundung der Vorteile der Szene verhindert.

Also Option a) ist es.

13
Roger Attrill

Hier sind die Punkte, die bei Übertragungslisten berücksichtigt werden müssen:

  • Einzelauswahl gegen Mehrfachauswahl (auch durch Ziehen);
  • Auswahl nach Übertragung;
  • Doppelklicks in Listen;
  • Mögliche Handhabung der ENTER/DELETE-Tasten zum Übertragen von Elementen, wenn der Fokus auf den Listen liegt;
  • Fokus Traversal Policy;
  • Sortierung.

Um ehrlich zu sein, halte ich es für am besten, die beiden Übertragungstasten beizubehalten, vorausgesetzt, das Verhalten ist wie folgt:

  • Wenn Sie ausgewählte Elemente von einer Liste in eine andere (in beide Richtungen) übertragen, sollten die übertragenen Elemente automatisch in der Zielliste ausgewählt werden. Auf diese Weise kann der Benutzer schnell zurückkehren, indem er auf die andere Schaltfläche klickt, falls er beispielsweise einen Fehler macht. Dies gibt auch eine gute Rückmeldung darüber, dass Elemente übertragen wurden, da der Benutzer leichter verfolgen kann, was gerade passiert, insbesondere wenn die Elemente in der Zielliste beispielsweise sortiert sind (das übertragene Element wird möglicherweise nicht am Ende der Liste angezeigt Zielliste).
  • Wenn Sie ausgewählte Elemente von einer Liste in eine andere (in beide Richtungen) übertragen, sollte das nächste Element in der Quellliste automatisch ausgewählt werden. Auf diese Weise kann der Benutzer schnell aufeinanderfolgende Elemente übertragen, indem er schnell auf dieselbe Schaltfläche klickt, ohne die Maus bewegen zu müssen, um jedes Element einzeln auszuwählen.
  • Abhängig von Ihrem Anwendungsfall kann eine Mehrfachauswahl in beiden Listen hilfreich sein, damit der Benutzer mehrere Elemente gleichzeitig übertragen kann. Wenn in einer Liste nichts ausgewählt ist, sollte die zugehörige Schaltfläche zum Übertragen in die andere Liste deaktiviert sein. Schaltflächen sollten daher nur aktiviert werden, wenn das Klicken tatsächlich Auswirkungen hat.
  • Stellen Sie die Durchquerungsrichtlinie so ein, dass die nächste Komponente, die nach der Schaltfläche> den Fokus erhält, die Schaltfläche <ist. In vielen Implementierungen (insbesondere Java Swing)) ist diese Reihenfolge nicht die Standardreihenfolge und überrascht den Benutzer (nicht natürlich).
  • Da viele Leute dazu neigen, auf Elemente zu doppelklicken, kann es eine gute Idee sein, doppelt geklickte Elemente in die andere Liste zu übertragen.
  • Einige Leute neigen auch dazu, die Taste LÖSCHEN in der rechten Liste zu verwenden (abhängig von der Semantik). Es könnte also eine gute Idee sein, dies zu unterstützen. In einem solchen Fall können Sie auch die EINGABETASTE in der linken Liste zulassen. Vielleicht ist dies jedoch nur eine Frage des Geschmacks, nicht sicher.

Diese Implementierung, die 2 Übertragungstasten erfordert, ist sehr praktisch und ermöglicht es dem Benutzer, sehr schnell zu arbeiten, und es ist auch einfach genug, Fehler schnell zu korrigieren.

Beachten Sie, dass wir hier zwischen Auswahl und Fokus unterscheiden. Bei der Tastaturmanipulation sollte der Fokus die zuletzt verwendete Komponente bleiben. Ich habe viele Implementierungen gesehen (in Java Swing again), bei denen Schaltflächen während des Zwischenauswahlstatus in den Listen vorübergehend deaktiviert werden, wodurch der Fokus von der aktivierten Schaltfläche auf die nächste Komponente übertragen wird. Dies macht die Tastaturhandhabung sehr nervig.

Ein letzter zu berücksichtigender Gedanke ist die Sortierung : entweder in keiner der Listen oder nur in der ersten Liste oder in beiden Listen. Dies hängt wirklich davon ab, ob die Reihenfolge in den Listen eine semantische Bedeutung hat. Es wird jedoch häufig empfohlen, die erste Liste zu sortieren, insbesondere wenn sie anfänglich viele Elemente enthält. Dies erleichtert das Auffinden von Artikeln. Sie können sich diese Frage ansehen: Bin ich richtig, die RHS-Listbox alphabetisch in einer GUI mit gepaarten Listboxen zu sortieren? .

Ich hoffe das hilft ;)

4
Padrig

Ich würde empfehlen, Option A zu wählen, weil dadurch die Rolle der einzelnen Schaltflächen deutlich hervorgehoben und der Benutzer über die Aktionen informiert wird, die er ausführen kann.

Wenn Sie in Option B die Schaltfläche basierend auf der ausgewählten Spalte wechseln, besteht eine gute Möglichkeit, dass Benutzer die Änderung der Schaltflächenaktion nicht bemerken (ich habe nicht und die erste Reaktion war, wo die umgekehrte Option ist). Darüber hinaus ist Option B nicht intuitiv, da Sie möglicherweise die verschiedenen Funktionen der Schaltfläche zum Verschieben verbergen, die nur angezeigt werden, wenn eine Aktion ausgeführt wird, und Benutzer auf den ersten Blick den Eindruck haben, dass das Verschieben von Elementen aus Spalte 1 nach 2 irreversibel ist.

In Bezug auf Option A würde ich empfehlen, den Pfeil von rechts nach links deaktiviert zu lassen, wenn sich keine Elemente in der rechten Spalte befinden (und umgekehrt), und ihn zu aktivieren, sobald ein Element über die Spalten verschoben wird würde den Benutzer darüber informieren, dass er zwischen Spalten wechseln kann. Wenn Sie es zunächst deaktiviert halten, ist dies in Ordnung, da Sie nur verhindern, dass ein Fehler den Benutzer dazu bringt, Inhalte aus einer leeren Spalte zu verschieben.

1
Mervin

Wenn Sie Option B in Betracht ziehen, müssen Sie einen visuellen Hinweis (z. B. "-------") der vorherigen Position in der ursprünglichen Liste hinzufügen. Sie müssen auch beachten, dass dieses Trennzeichen nicht mehr sichtbar ist, wenn der Benutzer das Element in der zweiten Liste nicht mehr fokussiert: Die Liste auf der linken Seite wird zurückgesetzt, und das Zurückschieben des Elements würde logischerweise dazu führen, dass es am Ende (nach dem Element) platziert wird vier). Beachten Sie, dass die Elemente nicht den Fokus verlieren sollten, wenn Sie auf die Schaltfläche klicken.

Sie müssen sich daran erinnern, dass die Schaltfläche einen ursprünglichen Status haben muss: Wenn die Liste rechts anfänglich leer ist, ist die Auswahl einfach (>). Aber was passiert, wenn beide Listen Elemente enthalten? Das würde ich empfehlen: Setzen Sie beide Schaltflächen, aber wenn die Elemente fokussiert/schwebend/gezogen sind Blenden Sie die inaktive Schaltfläche aus oder ändern Sie die Umrissfarbe der aktiven Schaltfläche.

Meine Antwort lautet also beides auf interaktive Weise: Das Verhalten sollte sich an den Benutzer anpassen und nicht umgekehrt.

0
Knu