6

Suppose we have two data trees A and B visualized in the UI along these lines:

enter image description here

The user wants to copy the highlighted subtree nodes from A to B. The two trees have some shared nodes as indicated by the id's.

How would you design the interaction for this scenario? One possible approach would be to place checkboxes next to the non-shared nodes and an "execute"/"copy" button in-between the two trees, but is this the best solution when opting out on drag'n'drop?

Do you have any ideas for alternative designs?

3 Answers 3

1

It is natural for trees allow you to drag-n-drop to rearrange nodes; however, you seem to want to keep the hierarchy and just merge the results...

Therefore, it may be helpful for the application to just identify the differences and then allow the user select / commit each change (insert, update or delete.)

2
  • Thank you for the answer. You're spot on, merging (of tree B with selected nodes from tree A) is a good way to think about it, I believe.
    – agib
    Oct 18, 2010 at 16:29
  • drag & drop in two phases: 1. id=5 with hierarchy and 2. id=4 May 31, 2011 at 14:15
1

Unless I'm missing some constraint, I'd use drag-and-drop.

1

An object-selection-action syntax like you suggest is a common standard GUI approach that good to use if you'll be extending it to commands other than copying (e.g., deleting, moving, properties). This makes for a simple, consistent, yet powerful UI. I’m not so sure I’d recommend checkboxes for selection, however. Assuming users typically only copy one upper-level node at a time, I’d imitate the behavior in file managers like Windows Explorer and use icons that are single-selected by default, but support multi-selection via metakeys (Shift and Ctrl) and drag-selection. Selecting a node should highlight that node and all its sub-nodes to help make it clear what the user is selecting. OTOH, checkboxes may be preferred if users usually need to copy multiple unassociated nodes, especially if you can’t be sure they’re familiar with standard multi-selection methods.

The alternative to the object-selection-action syntax is the object-dedicated-control approach where you include a small Copy control for each node. One click and it’s copied. This may be preferred if copying is the only thing the user can do with the nodes. In contrast, having separate Copy, Move, Delete, Properties, etc. controls for each node would likely be too cluttering. If you go with object-dedicated-control, you can present a Copy control only for the nodes in A that have shared nodes in B, providing a clear indication on what may be copied.

In your example, it looks like your Copy feature is limited to copying to shared nodes between the trees. Is that indeed all that can be allowed? Is there always no more than one destination tree? If so, your single Copy button is probably best, and you’re right to stay away from drag and drop. Drag and drop has poor discoverability and is harder to do than simply clicking a Copy button. Drag and drop may also make users think they can perform arbitrary copying (e.g., put Node 4 in Tree A under Node 18 in Tree B, or even move nodes around within Tree B).

If, however, it’s possible and advantageous to supporting arbitrary copying, then consider having two buttons to employ the Copy and Paste idiom (add a third Cut button to support moving). If you support arbitrary copying, then it’s worth considering also having drag and drop as an expert shortcut to Copy and Paste.

1
  • Thank you for the detailed answer. The UI is intended for users not very likely to be familiar with the use of metakeys. I think a global copy button/the like is more appropriate compared to objected-dedicated-controls. The copy feature is limited to copying non-shared nodes, and most often a top-level node and all it's children are selected collectively for copying.
    – agib
    Oct 18, 2010 at 16:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.