Questions on User Experience Stack Exchange are expected to relate to user experience within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.
If this question can be reworded to fit the rules in the help center, please edit the question.

Where are you implementing this On the web, or in a desktop application ?
–
Harald ScheirichDec 16 '10 at 14:33

7 Answers
7

I would definitely say no to the underscore, it is specific to minimizing a window, it also does not really have a reverse, what would you use for opening the surface back up.

Both Windows and OS X use the disclosure arrow/triangle/control in the situation that you are describing, it even occurs on the iPhone even though in that case it does not open up the subcontrol in place but changes the view

And as was already mentioned, the JQuery Accordion uses the same look for this kind of functionality.

In most of these cases the arrow rotates with the opening and closing of the hidden section

Regarding your worry that it is mistaken with the arrow that is used in the dropdown box, in most cases it looks completely different, but it also actually fulfills a similar purpose, in exposing a hidden view, even if the view is over the current content instead of inside the content.

If you do want to go with the +/- note that the way windows uses it is not just freestanding, it is on a graduated surface hinting to a button

I'd argue the dropdown arrow does something /slightly/ different - it displays a screen element that is overlaid on top of the current interface, whilst what we're discussing here is something that significantly changes the existing layout. But still a +1 for the overall point :)
–
Bobby JackDec 16 '10 at 16:12

I think this is the worst of the choices, the underscore is very specific to a physical window and not an shrinking and expanding area, and Windows the operating system, it also does not really have an appropriate reverse icon
–
Harald ScheirichDec 16 '10 at 14:34

@Harald: I think Chris made that point - it's just not clear in the original question whether an accordion is the only thing that's required, or if we're also dealing with elements representing windows.
–
Bobby JackDec 16 '10 at 17:15

@Bobby - I updated my answer just after Harald's comment. I should have indicated that either in the answer or via a comment. Sorry for causing confusion.
–
ChrisFDec 16 '10 at 17:16

The underscore or "-" is safe, but it also depends on exactly how the menu/panel is minimizing. For example, in Photoshop, the tool panels minimize with a small double arrow pointing in the direction that the panel minimizes when collapsing. I think in this instance the double-arrow works better than an underscore would.

Windows 95 popularized the underscore, as described in ChrisF's answer, but I think that's because of the association with the taskbar, which the window 'minimises to' and its most common position. One potential issue is that the taskbar can be moved (to the top of the screen, for example), at which point the icon's analogy falls down. Windows 3 used up and down arrows.

I think if the minification is analagous to a windowing system, the underscore makes sense. An accordion is quite different, though, and I think the most common examples don't have any icon, just a solid backgrounded horizontal block which expands on click. Normally, there's some kind of hover effect to convey interaction.

The arrow, the underscore, and +/- would all most likely work, what I'd say you should think about are the associations each of those have, and see what makes the most sense in your situation.

The underscore, like ChrisF said, has the association of minimizing a complete unit off of the screen - not collapsing it in place, but sort of a "get this out of my face" feeling. It would minimize it to a location that's out of focus, rather than keeping it in place but making it smaller.

The +/- (only where it switches between the two - either one on its own would signify adding or removing an item from a list of similar items, like the tabs in FF/Chrome) has a specific association with trees and collapsible nodes. The assumption is that the title will stay in place when you hit the [-], and the content will expand. As far as I've been able to tell, it's also related more to lists and names/titles of content, rather than the content itself (as in, you can use it to expand a list of files, but not to see the files themselves).

I'm seeing more of the arrow/triangle in various forms recently, like in Adobe's panels and in various web apps. This one is a down-side arrow, where it's similar in function to the +/-, where the + is a side-arrow (as shown) and the - is a down-arrow. It's doing something similar to the +/-, although I'd argue that it has less emphasis on the enumerated values in the submenu that +/- has, and leads more towards a generic "content." It wouldn't be strange to see a new panel, unrelated in style to the list it pops out from, come out from underneath the arrow - check out jQuery's accordion menu for an example of this style. I'd argue that the pop-out menu association of it is more when it's not placed directly beside the title/identifier, and when it looks more like a button, like this:

Here you have three arrows, each separated from a title, and looking more like buttons than anything else. As expected, they all pop out menus. (Another interesting twist is the right-arrow that doesn't move at all - sort of signifying "link.")

In all honesty, if it's an accordion menu, why not eschew any icon and just make the title/identifier clickable, with a hover to indicate as much? The example at UI Patterns has that, I actually prefer the style - it removes the associations of all of those icons.