User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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?
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:
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".
This is what is used by .NET WPF
I like the symbols from awesomefonts
Can see some on this question sample
