it-swarm-eu.dev

Interaktionsdesign zum Kopieren von Teilbäumen

Angenommen, wir haben zwei Datenbäume A und B in der Benutzeroberfläche in dieser Richtung visualisiert:

enter image description here

Der Benutzer möchte die markierten Teilbaumknoten von A nach B kopieren. Die beiden Bäume haben einige gemeinsam genutzte Knoten, wie durch die IDs angegeben.

Wie würden Sie die Interaktion für dieses Szenario gestalten? Ein möglicher Ansatz wäre, Kontrollkästchen neben den nicht gemeinsam genutzten Knoten und eine Schaltfläche "Ausführen"/"Kopieren" zwischen den beiden Bäumen zu platzieren. Ist dies jedoch die beste Lösung, wenn Sie Drag'n'Drop deaktivieren?

Haben Sie Ideen für alternative Designs?

6
agib

Es ist für Bäume selbstverständlich, dass Sie per Drag & Drop auf neu anordnen Knoten ziehen können. Sie scheinen jedoch die Hierarchie beibehalten zu wollen und nur zusammenführen die Ergebnisse ...

Daher kann es für die Anwendung hilfreich sein, nur die Unterschiede zu identifizieren und dem Benutzer dann zu ermöglichen, jede Änderung auszuwählen/festzuschreiben (Einfügen, Aktualisieren oder Löschen).

1
Nescio

Sofern mir keine Einschränkung fehlt, würde ich Drag & Drop verwenden.

1
Hisham

Eine von Ihnen vorgeschlagene Objektauswahl-Aktionssyntax ist ein gängiger Standard-GUI-Ansatz, der sich gut eignet, wenn Sie ihn auf andere Befehle als das Kopieren erweitern (z. B. Löschen, Verschieben, Eigenschaften). Dies sorgt für eine einfache, konsistente und dennoch leistungsstarke Benutzeroberfläche. Ich bin mir jedoch nicht sicher, ob ich Kontrollkästchen zur Auswahl empfehlen würde. Angenommen, Benutzer kopieren normalerweise jeweils nur einen Knoten der oberen Ebene, würde ich das Verhalten in Dateimanagern wie Windows Explorer nachahmen und Symbole verwenden, die standardmäßig einzeln ausgewählt sind, aber die Mehrfachauswahl über Metakeys (Umschalt und Strg) und unterstützen Drag-Auswahl. Durch Auswahl eines Knotens sollten dieser Knoten und alle seine Unterknoten hervorgehoben werden, um zu verdeutlichen, was der Benutzer auswählt. OTOH, Kontrollkästchen können bevorzugt werden, wenn Benutzer normalerweise mehrere nicht zugeordnete Knoten kopieren müssen, insbesondere wenn Sie nicht sicher sind, ob sie mit Standardmethoden für die Mehrfachauswahl vertraut sind.

Die Alternative zur Objektauswahl-Aktionssyntax ist der objektspezifische Steuerungsansatz, bei dem Sie für jeden Knoten ein kleines Kopiersteuerelement einfügen. Ein Klick und es wird kopiert. Dies kann bevorzugt werden, wenn der Benutzer nur mit den Knoten kopieren kann. Im Gegensatz dazu wäre es wahrscheinlich zu unübersichtlich, separate Steuerelemente zum Kopieren, Verschieben, Löschen, Eigenschaften usw. für jeden Knoten zu haben. Wenn Sie sich für ein objektspezifisches Steuerelement entscheiden, können Sie ein Kopiersteuerelement nur für die Knoten in A anzeigen, die gemeinsam genutzte Knoten in B haben, und so einen klaren Hinweis darauf geben, was kopiert werden darf.

In Ihrem Beispiel sieht es so aus, als ob Ihre Kopierfunktion auf das Kopieren auf gemeinsam genutzte Knoten zwischen den Bäumen beschränkt ist. Ist das wirklich alles, was erlaubt werden kann? Gibt es immer nicht mehr als einen Zielbaum? In diesem Fall ist Ihre einzelne Schaltfläche "Kopieren" wahrscheinlich die beste und Sie haben Recht, sich von Drag & Drop fernzuhalten. Drag & Drop ist schlecht erkennbar und schwieriger als das einfache Klicken auf die Schaltfläche Kopieren. Durch Ziehen und Ablegen können Benutzer auch glauben, sie könnten willkürlich kopieren (z. B. Node 4 in Baum A unter Node 18 in Baum B) oder sogar verschieben Knoten um innerhalb Baum B).

Wenn es jedoch möglich und vorteilhaft ist, beliebiges Kopieren zu unterstützen, sollten Sie zwei Schaltflächen in Betracht ziehen, um die Redewendung "Kopieren" und "Einfügen" zu verwenden (fügen Sie eine dritte Schaltfläche "Ausschneiden" hinzu, um das Verschieben zu unterstützen). Wenn Sie das willkürliche Kopieren unterstützen, sollten Sie auch Drag & Drop als Expertenverknüpfung zum Kopieren und Einfügen verwenden.

1