Friday, November 6, 2015

gui design - Dealing with a node-edge-node view


I'm coding up a graph db style (neo4j) UI for a tablet and am wondering how best to implement the actions on nodes and edges.


Actions:



  • add / remove node

  • link / unlink nodes (edge)

  • other actions on a node (set / unset properties)


The nodes to add will come from a finite list with max one instance of each.



Have considered putting a tree / accordion on the left but am not sure where to put the list of actions for a selected node. Have also wondered about a dropdown menu on a 'selected' node but the typical node display has them moving a bit so this will get confusing. (node displays typically have 'gravity' and 'repulsion')


Lately have been considering sliding / hidden menus on the left for 'add' and on the right for 'properties / actions'. This doesn't strike me as standard though.


Does this UI make any sense? Suggestions on other avenues?



Answer



I'll give two ideas.


(1) More direct
When the user selects a node, show a callout with all the possible actions. It is direct, which is important as you are working with a NUI. Also, if it is possible, I believe you should lock the node in its position until the user takes action.


Callout solution


(2) Less direct
If things moves around and if you think it will be hard to do solution one, you can keep a menu on the bottom of the screen with all the possible actions. Note that the buttons are disabled and no node is selected. If the user tap on a button show a simple label above them saying "You must select a node" fading out after a few seconds.



Buttons solution


Keep all the buttons disabled until the user selects a node, then, highlight the buttons to indicate that now an action is possible.


enter image description here


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...