1

I have a combo box that lets user choose airlines. Below is the (draft) snapshot.

Snap shot of combo box that lets user choose airlines.

I want to keep an icon infront of it (right now I have a tick mark which has to be replaced with an appropriate icon).

Now what I really want to know is how to display the option of choosing all airlines to users. Also it would be great if you could suggest an appropriate text to display to the users. As of now the third option reads "All of the above" I want to replace this with shorter text.

  • try placing that check box in the right of the text and enlarge icon by 20% and checkbox by 10%. It will look neat. – prashantwosti May 18 '14 at 5:28
  • I've edited the title as the pattern in question is not a combo-box, it is called multi-select (the fact that you provide checkboxes makes it obvious users can pick more than one item). – Izhaki May 18 '14 at 14:23
11

Your "All" option needs to be first, not last. Otherwise a user who needs all airlines might go through the list and tick all of them before he gets to the end of the list and sees that he could've accomplished it with a single click.

In terms of text, either "All airlines" or "Any airline" is good (assuming that it's the same in your app).

Icon suggestions are generally off-topic on this site, but you can try on graphicdesign.SE

  • I didnot know that icon suugestions are off the topic in this site .This is my first question here :) Thanks for your suggestions :) – Smrita May 18 '14 at 5:31
  • Great answer! I'd like to point out there's difference between the meaning of 'Any' and 'All'. 'Any' by itself implies a random selection of one e.g., 'Any one airline'. It does not imply as unless you explicitly include a number e.g., 'Any two airlines'. 'All' on the other hand implies 'every'. This could be a group of 0-N size. – Patrick Berkeley Jan 26 '16 at 4:37
4

Make them different - not similar

I'm not sure why you want the all option to have an icon. What's the rationale behind this?

I'd strongly argue that making the all option similar to the choices is counter-usability.

You see, the choices and the all option are distinct - they are not the same. By making them look the same you only make things more confusing. You should promote distinction here, not similarity.

One question to ask is whether when users pick all they do so because:

  • they really want all companies, or
  • they want all items to be ticked so they can filter ones they don't want.

If the former is more common, I'd assume that after selecting all, the combo should close. But that's not the normal behaviour of items in a multi-select boxes.

Another issue is - what happens when users deselect the all option? What should happen then to all ticked items? Users won't be able to predict that, suggesting you are employing the wrong pattern.

I'd consider the following designs, which could work very well if you reckon that the all option will be a popular one:

A photo showing two alternative design, with the all option as a button/link

These still have issues - what if users select all by mistake and then want to deselect all? Should you offer deselect as well? Only you should know how users will be using this and what case would be more common.

Top position revisited

Vitaly made a fantastic observation - putting them at the top is imperative given that the all option is just another option (First-hand experience, users don't see it when at the bottom).

But if the all option becomes a button or a link, do consider putting its panel at the bottom and only make the options container scroll. Like so:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Mind them old technology constraints!

You may be basing your design on very old technologies, where there would be just a long list of options from which to choose one (selects in HTML). This has led to a lot of usability problems that sadly many have been conditioned to take as a norm.

But nowadays we've moved forward and you can do pretty much anything you want in design. With technology constraints no longer there we can make things work the proper way. So why think with old constraints in mind?

1

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, enter image description here, 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.

  1. 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.

  2. 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".

enter image description here

  1. 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.

enter image description here

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.

  1. 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".)

mockup

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. enter image description here

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.

outlines are useful - copyrighted images (two copyrighted images)

Again, these are just my opinions and research results after wrestling with similar questions.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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