User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have a list of checkboxes under header titles (at least three, one of them has sub headers, all in one page), something like this:

enter image description here

Problem is, these checkboxes may end up with 10 elements per group, I really don't know how to go about making them more user friendly, any ideas?

Note, I can't use the suggested way in other questions of a search box and move selections to another box, I have one group too many... second, the elements are pretty well defined and database driven, no search is required... third, it's only 10 - 15 elements

share|improve this question
Could you add a link to the question/answer with the solution that you can't use? – Jørn E. Angeltveit May 26 '11 at 7:48
up vote 10 down vote accepted

Without knowing anything about the information architecture or the users work-flow, I've taken your suggestion as a starting point and added a few improvements based on the gestalt principles and visual hierarchy.

Then the main grouping should be done without underlined header (due to the law of proximity/grouping), and the sub titles should have a slightly different font (due to the law of similarity).

enter image description here

share|improve this answer
problem is im talking about 10 items per group and 10 items per sub group, these boxes are going to extend vertically so long that it solves part of the problem only.. i needed a way to make them use space wisely tho – Ayyash May 28 '11 at 9:16

Classic faceted navigation design issue. Here are some things we've done:

  • Show the first 5 elements per group by default with a "More..." option that expands the list to show all of them. It's hard to pick which 5 to show. I prefer to show the "first" 5, eg. alphabetically, but business goals sometimes dictate showing the "most used" 5 or something similar.
  • If each individual category doesn't have too many results associated with it, step one level up and remove this level of selection. Eg. make the subgroups checkboxes and get rid of the "solid dosage forms", "liquids", etc.
  • Sort alphabetically, which increases scannability and readability. Right now when I go through the list, it's hard for me to find anything because I can't predict where it'll be based on any kind of sorting. Sort alphabetically because it's immediately obvious ("A... B.. oh!") and because it scales.
  • Use all the tips Jørn E. Angeltveit gives to improve the visual design by changing up colour, typography, size, etc.
  • Once facets have been selected, rather than forcing users to go through the list again to deselect things, keep a list of "what you've selected" somewhere in the UI that allows them to remove selections there.
share|improve this answer
I only partially agree with your first suggestion: Not showing all elements should only be done if the content is predictable for the user but not if the user doesn't know what's behind the "more..." button. +1 for the rest of the suggestions. – Phil May 26 '11 at 8:33
@Phil Sort alphabetically and print "12 more..." to make it easier to predict what else there is. But I agree, the first option isn't ideal. – Rahul May 26 '11 at 9:34
2 and 3 are things i didnt give much thought to, i'll work it around a bit and see how it goes – Ayyash May 28 '11 at 9:20

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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