it-swarm.com.de

"Ausschneiden und Einfügen" in einer Baumstruktur

Ich arbeite an einer Web-App, die eine visuelle Programmierumgebung zum Generieren von 3D-Modellen bietet - Mobius

Mobius



Dabei werden Skripte erstellt, indem Codierungszeilen hinzugefügt und nur Parameter bearbeitet werden. Wir verwenden Winkelbaumkomponente , um einen Baum zur Darstellung der Codestruktur zu generieren, wie im Bild unten

Procedure-Tree



Die Codezeilen sind ziehbar - aber wenn der Baum größer wird, wird das Ziehen und Ablegen umständlich. Daher haben wir darüber nachgedacht, eine Funktion zum Ausschneiden und Einfügen hinzuzufügen, mit der der Benutzer Codezeilen auswählen, ausschneiden und an einer anderen Stelle einfügen kann.

Was wäre die benutzerfreundlichste Art, diese Funktionalität zu implementieren?

Das Hinzufügen von Strg + X- und Strg + V-Tastenkombinationen ist eine Möglichkeit - ich bin mir jedoch nicht sicher, ob dies erkennbar wäre, da diese Funktion zuvor nicht vorhanden war. Auf welche Mikrointeraktionen sollte ich in diesem Fall achten?

Gibt es eine bessere Möglichkeit, dies zu implementieren, als Tastaturkürzel? Jede Linie verfügt über eine Reihe von Schaltflächen, die sichtbar sind, wenn die Linie fokussiert ist. Sie sind sich nicht sicher, ob das Hinzufügen einer weiteren Schaltfläche eine gute Idee ist?

4
Akshata Mohanty

So beheben Sie das Problem mit Tastaturbefehlen: Microsoft-Software ermöglicht es dem Benutzer im Allgemeinen, Dinge auf drei verschiedene Arten zu erreichen. die Tastenkombination (die Sie bereits identifiziert haben), eine Menüleistenauswahl (wobei die Tastenkombinationen häufig neben den Befehlen angezeigt werden) und die sichtbare Symbolleistenschaltfläche (häufig mit einem Tooltip, der den Befehl und seine Tastaturäquivalente anzeigt).

Wenn Sie jedoch über die Wiederverwendung von Codeblöcken sprechen, geben Sie dem Benutzer eine Palette, auf der er Codestücke werfen kann, die dann auf die gleiche Weise wie einzelne Befehle in den Codetext zurückgezogen werden können. Das Ziehen eines übergeordneten Bocks sollte auch seine untergeordneten Bocks ziehen, damit der Benutzer einen Teil des verschachtelten Codes in die Palette ziehen, dem Block einen Namen geben und ihn dann wieder herausziehen kann, wie oft dies erforderlich ist.

Für ein wirklich cleveres System können Sie sogar verfolgen, wo dieser Block verwendet wurde, und sicherstellen, dass die Änderungen bei jeder Bearbeitung des 'Master'-Blocks in der Palette in allen anderen Instanzen angezeigt wurden - wie in der Bibliothek mit den Skizzensymbolen.

2
Andrew Martin

IMO ist die benutzerfreundlichste Lösung, sowohl STRG + C, STRG + V zu unterstützen, da diese für die meisten Benutzer am intuitivsten sind, als auch eine andere Schaltfläche, da sich dort alle anderen Aktionen in Ihrem Produkt befinden.

Wenn die Benutzeroberfläche nur über begrenzten Speicherplatz verfügt, können Sie einige der weniger häufig verwendeten Aktionen in einem Menü zusammenfassen, auf das Sie über die Schaltfläche zugreifen können.

Das Hinzufügen von Strg + X- und Strg + V-Tastenkombinationen ist eine Möglichkeit - ich bin mir jedoch nicht sicher, ob dies erkennbar wäre, da diese Funktion zuvor nicht vorhanden war. Auf welche Mikrointeraktionen sollte ich in diesem Fall achten?

Wenn Sie befürchten, dass die neue Funktionalität nicht erkennbar ist, sollten Sie eine exemplarische Vorgehensweise/ein Lernprogramm hinzufügen, in dem neue Funktionen in Ihrem Produkt hervorgehoben werden. Bootstrap Tour und IntroJS sind ausgezeichnete Javascript-Plugins dafür.

0
staccato

In einer der Zeilen sind drei kleine Symbole zu sehen, die wie ein Drucker, ein Häkchen und ein Mülleimer aussehen. Wenn dies Befehle sind, die in dieser Zeile ausgeführt werden können, können Sie dann Ihre Befehle zum Ausschneiden, Kopieren und Einfügen hinzufügen? Oder noch besser, könnten sie in einem Kontextmenü gebündelt werden, das beim Klicken mit der rechten Maustaste angezeigt wird? Wenn Sie sich Sorgen über visuelle Vorteile machen und den Benutzern einen Hinweis darauf geben, dass die Befehle verfügbar sind, indem in jeder Zeile, die beim Hover angezeigt wird, ein Menüsymbol angezeigt wird?

0
chrisdwells_

... wir wollten eine Funktion zum Ausschneiden und Einfügen hinzufügen, mit der der Benutzer Codezeilen auswählen, ausschneiden und an einer anderen Stelle einfügen kann. Was wäre die benutzerfreundlichste Art, diese Funktionalität zu implementieren?

Fragen, von denen ich denke, dass sie sich auf das auswirken, was als "benutzerfreundlich" angesehen wird:

  1. Wer ist der Benutzer? Ist die primäre Zielgruppe eher ein Programmierer oder ein visueller Designer? Welche anderen Programme haben sie gerade geöffnet und was machen sie mit ihnen? (Hinweis: Ich frage nicht nach der möglichen Breite der Benutzertypen, nur wenn Sie 1 oder 2 wichtige auswählen müssen.)
  2. Woran sind sie gewöhnt? Speziell in Bezug auf diese Operationen zum Kopieren, Einfügen oder Code-Snippet? Können Sie darauf aufbauen, was sie als Vergleichsgrundlage gewohnt sind?

Beispiel: Als Designer weiß ich, dass Illustrator es mir ermöglicht, Elemente zum Duplizieren zu ziehen sie per Option-Klick-dann-Ziehen. Als ich anfing, Axure RP7 zu verwenden, ging ich einfach davon aus und war angenehm überrascht zu entdecken, dass sie dieselbe Funktionalität mit demselben Eingabebefehl unterstützen.

Die Theorie ist also, dass die Lernkurve eines neuen Werkzeugs verringert wird, wenn es auf Erfahrungen mit Werkzeugen aufbaut, mit denen derselbe Zielbenutzer vertraut ist.

Alle taktischen Ideen in diesem Thread könnten sich sicherlich als erfolgreich erweisen. Solange Sie zuerst überlegen Kontinuität und Konsistenz mit den Benutzererwartungen , wird Ihre "beste Vermutung" gut genug sein.

0
Luke Smith