Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
add comment

2 Answers

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
share|improve this answer
    
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
add comment

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

share|improve this answer
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
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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