0

I'm building a form in which there is one input with checkboxes. The list comprises of 3 or 4 popular options, and about 10 rarely used ones:

enter image description here

I think I've seen ways in which websites hide the rarely used ones until a user clicks some kind of "more options" icon, but I can't find anything about it anymore.

Does anybody have any examples/best practices of how to hide rarely used options in a list of checkboxes? All tips are welcome!

5
  • Are these "Rarely Used" dependent on any other of the Checkboxes' being ticked/unticked? Sep 7, 2015 at 8:42
  • I'm in hurry so I can't search through this article to know, if it fits for your question, but here are some thoughts for good forms: smashingmagazine.com/web-form-design-showcases-and-solutions Sep 7, 2015 at 8:44
  • Ah and check out some Dating Sites. There you need to tick your interests. Sometimes, they're specified, so they've a form with many checkboxes at one time. Sep 7, 2015 at 8:45
  • @SwapnilBorkar - No, the rarely used items are not dependent on any other choices. They are simply not so common, but we have to list them for completeness.
    – kramer65
    Sep 7, 2015 at 9:10
  • It also depends on what you ask. If you ask "please rate us on a scale of 1 to 10" then you can't just hide 3 and 6 just because they arent ticked as often. My example isnt very good but i think it gets the point: you cannot hide items that are part of a bigger concept - such as a 1 to 10 scale or a scale from "Miserable Support" to "Excellent Support". Also people might find it manipulative if you hide some of them
    – BlueWizard
    Sep 8, 2015 at 13:25

1 Answer 1

6

Progressive disclosure is what you want

http://uxpatterns.org/affordances/progressive-disclosure/

By knowing which controls are often used and which are only rarely or almost never used, you are already done with the important part.

Removing screen elements that are infrequently used reduces clutter and information complexity and makes the remaining content count more.

The "Show more" button is a common control to deal with this. I don't even have to look far, UX Stack Exchange has one right in the comments section:

UXSE show more link

YouTube has multiple of those to keep the UI clean and less complex:

enter image description here

You will need to find a sweet spot for what information to put inside the invibile space and what to put outside of it, being always visible. People who do not use the additional controls will never see them. Those who will use them eventually will go through a short learning phase, discovering the "show more" button, clicking it and then finding the control they need.

You are supporting discoverability by putting the button right where users would look for the "missing" information, so next to or under the available information should be ideal. Using a hyperlink or accordeon style helps afford clicking.

1
  • +1 - hiding the extra elements will likely make those elements even less frequently clicked, especially in a choice system like this where the user will choose one of the top ones for simplicity. But only showing the 4 most used options will lessen cognitive load from the 10 choices list getting more people to use it in the first place, its a bit of a trade off.
    – DasBeasto
    Sep 8, 2015 at 10:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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