2

The Mac Finder, in hierarchy view, uses a triangle, or arrow, facing right to indicate not-expanded, down to indicate expanded folder. It could be considered counterintuitive because it points to the current state as opposed to what it will do. This is for a website navigation, so would non-Mac users understand this?

Would simple "+" to expand, changing to "-" when expanded, be more universally understood?

Any other good symbol sets for these kinds of actions?

Improve this question
2

Windows explorer (at least in Windows 7) also uses the right arrow for a closed level and an arrow pointed to the bottom right, so I don't think it would be confusing to non-Mac users. I think the most three typical sets of expand/contract symbols are as follows:

  • plus / minus
  • right arrow / down arrow
  • right arrow / arrow pointing to the bottom-right corner
Improve this answer
1
  • Thanks. I bump thee one. I'm now leaning toward "+" and "-" because I currently use a down arrow for another purpose - see comment below. – obelia Oct 22 '12 at 0:56
1

The right/down arrow is good now because it is already common, but as you mentioned, it's counterintuitive and time ago there where a lot of problems with that. Like with many new interfaces/mechanics.

+/- is, in my experience and opinion, the best option since it says clearly what is happening and what you can expect. more things, less things.

Up/down arrow in delimited areas is also a good and clear option. For instance, you have some contents in a list or paragraphs and each has a shadow or border that delimits that idea or content and you place the down arrow on the left of the content. when pressed, expands the area to show more and the arrow to point up.

more/less (in words) a few pixels smaller than the normal text is even more clear, but it may affect the design.

Any icon should also have the title with the meaning to help the user, then almost any kind of icon would be ok. They still should make sense, of course. And the text should be descriptive, for instance "more content".

Improve this answer
1
  • 1
    Thanks, bumped you 1. I realize now I need to use "+" & "-". I'm using an arrow triangle for phone versions of websites to drop down the navigation, down-arrow drops it down and changes to an up-arrow, which will collapse it back up. Using arrows, even different looking arrows to collapse expand hierarchies a la Finder/Explorer would collide my drop down nav arrow. – obelia Oct 22 '12 at 1:02
0

This is what is used by .NET WPF

Expander control

I like the symbols from awesomefonts
Can see some on this question sample

Improve this answer

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.