How to draw a hierarchy button set and look less offensive than it is?

I’m trying to create a button set that can be used to move through hierarchical data and it’s looking like a swastika. I’m not sure how to correct it.

enter image description here

In the image above if “Panel” was selected and you press the top button it would select “AnimatedPanel”. If you clicked the left button it would select, “Script”. If you clicked the right button nothing would change since panel is the last item in the list. If you select the bottom button, “EventHandler” would be selected.

The button set will sit to the left of the label. The label and the button will be shown when an item is selected. For example, in a web page there may be a list of vertical or horizontal menu items. The button set and the label would sit above the selected menu. Then pressing “in” would select the first menu item. Selecting “left” or “right” would move through the menu items. I hope that makes sense.

Any suggestions how to make this less whatever it is?

More detail for @PremierBromanov:
The way I have it now I have 3 labels all in a row like so “Up” “L” “R” “Panel”.

enter image description here

I’m using the terms “up”, “left” and “right” but “up” is really “move out of the current row and back up to the previous row”. Those terms are based loosely on how it’s displayed in a horizontal like layout (although in a vertical it no longer makes sense).

In XML they use terms like branch node and leaf nodes. A branch has or can have leaf nodes. Hierarchical data also uses the terms parent node and child nodes. In that case, you have ancestors and descendants. You also have siblings. They are child nodes that share the same parent.

So in the last case you could have parent, previous sibling, next sibling and descendants of the current child node. You could also have Parent Branch, previous left, next leaf. In this case if a leaf has leaves it would be a branch. So parent branch, previous leaf or branch, next leaf or branch, and leaves of current branch.


Your arrow concept and what you plan to use it for seem appropriate. And from what I can see, I guess you don’t have much room for icons anyway.

Maybe what could help you is simply to use thicker and curved arrows to hide that effect you don’t like.

Below is a quick example:

You might need to adjust the arrows to your preference and clarity when at small size. It’s the same concept as yours, but different arrows.

example arrows grayscale

example grayscale big

The arrows can also be different colors:

example blue arrows

example blue arrow big

Source : Link , Question Author : 1.21 gigawatts , Answer Author : go-junta

Leave a Comment