TL;DR - Of the solutions below, I think that the Gmail solution (#3)
is best, especially if supplemented with a dynamic tooltip. (I might
also replace the minus sign.) Its checkbox is supplemented by a
dropdown (which I consider optional), but both are compact. The
dropdown not only clarifies the "Select All" and "Select None"
options, but can also provide additional useful options should you
need them. What do you think is best?
This is a good question that I've been trying to figure out too. What
follows is my personal opinion.
It seems better to me to have the multi box (the Tick/Untick All control) be more similar to the single boxes than it is different, assuming it really is a check box. It's enough to simply distinguish it using positioning (usually top-left, preferably non-scrolling) and sometimes also with clues such as
- size (bigger)
- small visual changes (cascade of two tick marks, or one lengthened tick breaking out of its box, , etc.)
If it's much different, you lose the visual connection between the control and what it's controlling.
The other big advantage of a box-shaped control is that it can simultaneously display state, especially the states of all-selected and none-selected. But the mixed state of some-selected is tough; there, the double-duty becomes a liability.
For mixed, Microsoft programs sometimes use a solid square inside the box (e.g. when handling properties such as read-only), when click means clear-all.
They use an empty box at other times (e.g. when selecting files with checkboxes--an optional feature available in Windows Explorer), when click means tick-all.
Both examples are shown in this one image. The multi box for files is top-left, next to "Name".
- Gmail's approach is to use a dash / minus sign, since clicking it will clear all. Their static "Select" tooltip isn't very helpful, but there is also a dropdown with explicit actions, which include helpful bulk-tickers beyond just All and None.
The Gmail approach is both powerful and clear/transparent. It's also minimalist and very compact, though not as compact as a box by itself. It works well with the minus sign, though I might use a box like Microsoft's instead.
- If just All and None are sufficient, a compact box-only approach could be done as in the first image below, especially if a more dynamic tooltip could be displayed on hover, as below. (Dynamically switch between "Select All" and "Select None".)
download bmml source – Wireframes created with Balsamiq Mockups
5a. The second mockup in the image above shows a dynamic-button approach. If you have room for a largish button (or link), you can compensate for the visual loss with explicit text. You can even reintroduce the visual connection by placing a similarly-stylized tick in the button. Here, clicking the All button hides it and shows the None button.
5b. But the "X" here is problematic and might be better left off, since it doesn't visually correspond to unticked boxes, and since some people, operating systems, and paper forms prefer to use "x" rather than a check mark to tick boxes.
5c. If your button or link has a very clear non-checkbox identity, you can get away with using identical images (i.e. box images inside the button).
5d. (not shown) Keeping this distinction obvious is probably done most clearly if the real boxes have black strokes whereas the entire button/link uses blue strokes. (The button outlines could be replaced by a lightly colored background, but something is needed to unify them.)
The blue/black distinction helps a lot, but alone it isn't enough. (Using color alone for non-trivial information violates best practices, although blue and yellow are the safest colors.) Also, I don't want to rely much on this because sometimes it's nice to aim for all clickable controls (even checkboxes) to be blue.
5e. If for the Unticked state you use a special empty-outline image inside a box, rather than just an empty box, then that image might also be useful in a "Select None" button/link.
(two copyrighted images)
Again, these are just my opinions and research results after wrestling with similar questions.