"Cut and Paste" in a tree structure

Question

I am working on a web app that provides a visual programming environment to generate 3D models - Mobius

It involves creating a scripts by adding lines of coding and just editing parameters. We are using angular-tree-component to generate a tree to represent the code structure, like in the image below

The lines of code are draggable - but as the tree becomes bigger - dragging and dropping becomes cumbersome. Hence, we were thinking of adding a cut-paste functionality with which the user can select and cut lines of code and paste them somewhere else.

What would be the most user-friendly way of implementing this functionality?

Adding Ctrl+X, Ctrl+V shortcuts are one way - but I am not sure if it would be discoverable, given that this feature didn't exist before. What microinteractions should I be taking care of in this case?

Is there a better way to implement this other than keyboard shortcuts? Each line has a set of buttons that are visible when the line is focussed. Not sure if adding another button to that is a good idea?

Answer 1

To fix the keyboard commands issue: Microsoft softwares generally allow the user to achieve things in three different ways. the keyboard shortcut (which you've already identified), a menu-bar selection (where the keyboard shortcuts are often displayed next to the commands), and visible toolbar button (often with a tooltip that shows the command and its keyboard equivalent).

However, if you're talking about the reuse of blocks of code then why not give the user a pallet where they can throw chunks of code that can then be dragged back in to the code body in the same way that individual commands can. Dragging any parent bock should also drag its children so the user could drag a chunk of nested code into the pallet, give the block a name and then pull it out again however many times the need to.

For a really clever system you could even track where this block was used and make sure that whenever the 'master' block in the pallet was edited, the changes appeared in all the other instances - like the Sketch Symbols library.

Answer 2

IMO the most user-friendly solution is to support both CTRL+C, CTRL+V, as these are most intuitive for most users, and to another button, because that's where all the other actions are in your product.

If the UI has limited space, you could consider collapsing some of the less frequently used actions into a menu that's accessible from the button set.

Adding Ctrl+X, Ctrl+V shortcuts are one way - but I am not sure if it would be discoverable, given that this feature didn't exist before. What microinteractions should I be taking care of in this case?

If you're worried that the new functionality isn't discoverable, consider adding a walkthrough / tutorial that highlights new functionality in your product. Bootstrap Tour and IntroJS are excellent javascript plugins for this.

Answer 3

I can see three small icons on one of the rows which look like a printer, a check mark and a trash can. If those are commands that can be performed on that row, would it be possible to add your cut, copy and paste commands to those? Or better yet, could they be bundled into a contextual menu which would appear on right-click? If you’re worried about visual affordances giving users a clue that the commands are available by showing a menu icon on each row that appears on hover?

Answer 4

...we were thinking of adding a cut-paste functionality with which the user can select and cut lines of code and paste them somewhere else. What would be the most user-friendly way of implementing this functionality?

Questions which I think affect what will be considered "user-friendly:"

1. Who is the user? Is the primary target audience more like a programmer or a visual designer? What other programs do they have open right now, and what are they doing with them? (Note: I'm not asking about all the possible breadth of user types, just if you had to pick 1 or 2 important ones.)
2. What are they used to? Specifically, in terms of these copy-paste or code snippet operations? Can you build on what they are used to as a basis for comparison?

Example: as a designer I know that Illustrator lets me drag items to duplicate them via Option-click-then-drag. When I started using Axure RP7, I just assumed and was pleasantly surprised to discovery that they support the same functionality with the same input command.

So the theory is that the learning curve of a new tool is lowered when it builds upon experiences with tools the same target user is familiar with.

All the tactical ideas provided in this thread could certainly prove successful. As long as you first consider continuity and consistency with user expectations your "best guess" will be good enough.