Best Icon for minimize [closed]

Question

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?

Answer 1

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

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

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

Answer 2

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.

Hope that helps!

Answer 3

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

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

Answer 4

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.

Answer 5

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.

Answer 6

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?

Answer 7

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 -)