3

I'm trying to design a node tree/navigation, which uses colours to denote the types of the tree node (which I thought was a useful pattern) and am struggling to find a way to show the active node because of the use of the colours.

This is for a web application that must support IE8+ amongst other modern browsers.

Does anyone have any ideas?

This is the tree:

node tree/navigation

2

One option is to add an outer stroke to the selected node. A few quick ideas:

You can keep the color of the nodes and add a prominent color not used in the tree like this:

enter image description here

Use the node color as the outline color and use another color as the new fill. This is more prominent and keeps the original color:

enter image description here

You could take the idea further by highlighting the selected path through the node tree. This may be harder to implement depending on how the web app is built, but maybe not.

enter image description here

Or for a more subtle effect you can use the node color as the outline and remove the fill color:

enter image description here

  • I had similar ideas, and really like highlighting the selected path. I'm attempting to implement it but falling back to just the circle if it's not possible. – theringostarrs Feb 25 '16 at 12:28
  • Highlighting the active path is a good option, I really like it. And anything is possible! wether it's worth the time and effort to implement is the question :) – Cai Feb 25 '16 at 13:51
  • Exactly, possible given existing implementation, time etc. Thanks! :) – theringostarrs Feb 25 '16 at 14:13
1

Maybe making the Active branch a lighter color and adding a shadow (à la Material Design):

branch

  • I think this is a good idea, the problem I had was that I don't have the use of box-shadow in IE8 (which I hadn't mentioned so apologies). – theringostarrs Feb 25 '16 at 12:29

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.