Intuitive Placement of Buttons In Flow Diagram

Question

I have implemented an interactive, one-to-many flow diagram.

The user should be able to build the structure of the flow diagram by adding child nodes to a parent node, as well as be able to change the parent node of child nodes by adding a new parent node.

Parent and child nodes are connected by a dotted line that is approximately 100 pixels in length/height.

I've designed an icon that is a 20 px by 20 px circle with a plus sign inside of it that users can click on to add a child node or add a new parent node. I can't determine what the best placement would be for the icon that users click on to add a new parent node and the icon that users click on to add a new child node.

Imagine a parent node that is a 100 x 80 pixel rectangle, with a 100 pixel dotted line that connects it to it's child node, which is the same dimensions as it's parent. The user wants to perform one of two actions: change the parent of the child by adding a new parent, which will effectively make the new parent a child of the old parent and make the new parent the parent of that child, or, add another child to the parent node. What are some ideas on where I could place the icons to perform both of these actions, that would be user friendly and intuitive? I'm also totally open to ditching the current icon that I am using and taking a totally different approach.

Answer 1

It sounds like when a parent already exists, your "add a new parent" isn't so much an "add a new parent" as an "add a node between the parent and child".

Acknowledging that there are really three distinct actions, you could put an "add parent" on every root of the tree(s), an "add child" on every leaf, and an "add between" on any connector.

^{download bmml source – Wireframes created with Balsamiq Mockups}

(In this mockup, the white button adds a parent. Blue buttons add a child. Green buttons add a node between existing nodes. If that wasn't clear before reading this comment, it's probably not a good design.)