Visual active state for coloured tree navigation

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

Answer

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

Attribution
Source : Link , Question Author : theringostarrs , Answer Author : Cai

Leave a Comment