Mobile app version of vmapp.org
Login or Join
Berryessa866

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

@Berryessa866

Posted in: #Critique #Icon #InterfaceDesign

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.



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



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.

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Berryessa866

2 Comments

Sorted by latest first Latest Oldest Best

 

@Miguel516

You might consider a simpler, "flat" approach, using buttons that purely traverse the list up-and-down regardless of how deep the hierarchy goes, and providing a way for the user to adjust the speed of the traversal, e.g., four buttons:


[up faster]
[up]
[down]
[down faster]


"up" and "down" would traverse item-by-item, and the "faster" buttons would traverse folder-to-folder.

10% popularity Vote Up Vote Down


 

@Rambettina927

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.





The arrows can also be different colors:

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme