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.

  • If you want ideas you could browse some of the flow diagram drawing tools listed in this question, many of which are free online tools. – user568458 Aug 26 '14 at 16:19

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.)

  • Would seem more natural to have the 'add parent' button directly on top of the node, while the 'add child' is directly on bottom? – Chris Aplin Aug 27 '14 at 1:10
  • This design was exactly what I was looking for. Thanks 3nafish! – Chris Aug 28 '14 at 13:31

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.