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.

I'm always struggling with choosing the correct icon for minimizing action. For ex: In accordions menu or on panels that can be minimized what would be the best icon :

An arrow that rotates like in OSX finder (right side/ deveices panel, for ex.)

A +/- button ?

The problem I have with the arrow is that one is often used as advanced menu (dropdown)

For ex. you've got them on firefox/ie/windows OS. It highlights the fact that this is not just a button but there is a dropdown menu that will come.

The problem of the +/- is that is often used for create/delete(remove)

Any ideas? suggestions?

share|improve this question

closed as off topic by Benny Skogberg, JonW May 19 '12 at 7:57

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 Scheirich Dec 16 '10 at 14:33

7 Answers 7

up vote 13 down vote accepted

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

Windows Disclosure controls

This set of controls is from the Microsoft UI Experience Guidelines while it contains the +/- icons all the other ones are arrows and triangles.

The appropriate Apple Document calls it the Disclosure Triangle

Apple Disclosure Triangle Example

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

share|improve this answer
    
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 Jack Dec 16 '10 at 16:12
    
you are right changing the wording –  Harald Scheirich Dec 16 '10 at 16:34
    
+1 especially since the disclosure triangle is so prominent to reveal and hide content in both Windows and Mac OS. –  Oskar Duveborn Dec 17 '10 at 0:50

The "Microsoft" one - an underscore at the bottom of the button would seem a safe approach at first glance.

Minimize Icon

but it would depend on where the window minimised "to" and perhaps doesn't work when you are collapsing a panel "on itself".

share|improve this answer
1  
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 Scheirich Dec 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 Jack Dec 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. –  ChrisF Dec 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.

share|improve this answer

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.

share|improve this answer

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.

Minimizing in Google Chrome on Ubuntu

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.

Plus-Minus Icon, meaning "collapse a tree"

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:

alt text

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.

Hope that helps!

share|improve this answer

So to summarize,

_ (underscore/square), why not depending on the animation that will come. My question is I never see that symbolic on OSX system. Is i Windows OS only metaphor?

› Arrow seems widely used. But won't suit an expand/minimize behavior (such as in iGoogle)

-/+ (minus/plus) doesnt look very popular. and it gets confused with add/remove content.

Right?

share|improve this answer

The underscore won't work on OSX (It's - in a circle)

I think you should ask yourself something a little different.

How does you maximize icon look? Then you will know how your minimize icon will have too look. (for instance + then -)

share|improve this answer

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