17

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.

Improve this question
7
  • 1
    Try using two diagonal arrows.
    – Paolo Gibellini
    Commented Nov 11, 2015 at 9:31
  • 7
    Fun fact: a left facing swastika is actually a symbol of peace in Hinduism and is readily being used on maps to represent the places of worship. A right facing swastika is a symbol of evil but still isn't offensive in Hinduism.
    – John Dvorak
    Commented Nov 11, 2015 at 10:32
  • 3
    Both swastikas have been used as good-luck signs in Western culture from the early 20th century on (wiki). Until someone came along and kinda ruined stuff.
    – Vincent
    Commented Nov 11, 2015 at 14:39
  • Have you tried making a simple left right up down arrow system? It might make more sense visually as you traverse the file structure and it would be more like a "+" and not a swastika. Up and down would be moving from "Panel" to "script" and left and right would go out and in respectively.
    – Premier Bromanov
    Commented Nov 11, 2015 at 21:42
  • 1
    It's not a swastika, it's missing two legs, I don't think you should worry about it, only a nazi is gonna spot that out, I read the title of your question and then I took a look at your set of buttons and I didn't get the "offensive" (I thought you meant it was too ugly :P it's not), I had to read your question in order to know what you meant by "offensive", by the way I've been studying WW2 for 10 years now, even so, I couldn't spot out the swastika
    – Kyle
    Commented Mar 8, 2016 at 11:31

2 Answers 2

Reset to default
32

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

Improve this answer
2
  • 2
    I think the curved arrows work well even without changing the colors. Nice idea +1
    – Aistis
    Commented Nov 11, 2015 at 14:20
  • At small sizes, it might even be preferable to make the curved arrows the same color as the straight ones.
    – thirtythreeforty
    Commented Nov 11, 2015 at 19:20
1

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.

Improve this answer
4
  • Why not Up folder and Down folder. And how should them drawed as asked in the question?
    – Mensch
    Commented Dec 14, 2015 at 19:05
  • I would try Up Folder: double chevron pointing up. Up: single 'up' chevron. Down: single chevron pointing downward. Down folder: Double 'down' chevron.
    – Matt Smith
    Commented Dec 15, 2015 at 0:22
  • Good idea. Out and in. So I'm guessing something like, ^ << >> \/ where "^" and "\/" are centered above and below the "<< >>".
    – 1.21 gigawatts
    Commented Dec 15, 2015 at 2:57
  • Yes, it's like the well-known pagination design pattern, only vertical.
    – Matt Smith
    Commented Dec 15, 2015 at 5:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.