I'm currently working on a Content Management System where authors can post articles. Before publishing, they must select a primary category for their article. For example "Entertainment", "Politics", or "Technology". This determines where to file the article in the overall hierarchy of the site. There are a predefined number of these to choose from, therefore, this is currently achieved using a radio button group.

However, if applicable, authors should be able to select multiple categories for an article, but with only one of them being the primary category. This is currently achieved listing the categories again, labeled 'secondary', and using checkboxes.

While the intentions are clear to the user, it makes the interface clunky, wastes space, is not scalable, etc.

Any ideas on a custom control that could combine these multi-selectors into one UI element?

  • With regard to scale, how many categories are we talking about? Is it a taxonomy tree with sub categories or just a flat list? – Charles Wesley Jul 19 '13 at 1:21
  • 1
    Just a flat list of 5-6 – gdub Jul 19 '13 at 2:05

You could allow the selection of all categories first, then the selection of the default one.


download bmml source – Wireframes created with Balsamiq Mockups

The drop down for the default category would only list the categories selected above. If there was only one category selected, then that would automatically be the default category.

  • Thanks, this could work. Side note: picking only a default category by itself happens probably ~75% of the time. – gdub Jul 19 '13 at 2:20
  • On top of that, human behavior studies suggest that user will usually select the default category first, follow by all the sub categories. Tap on that behavior and set the first selected option as the default category. (You might have to do some research on the human behavior studies.) – SimonTeo Jul 19 '13 at 3:16

Rather than having two separate lists, why not combine them?

Add a second column of radio buttons that only appear if the item has been checked. This way, the first user action is to define what categories are to be applied to the content and then within that subset the user defines the primary category:


download bmml source – Wireframes created with Balsamiq Mockups

This would allow you to use less screen real-estate and might be more intuitive for your users.

  • 1
    This was my immediate thinking too. The problem was it's unclear what the check box and radio were for. It became a visual labeling problem. I re-listed them side by side with primary and secondary labels above but it still seems repetitive. – gdub Jul 19 '13 at 2:17
  • 2
    This is confusing and user might be challenged whether to select the checkbox or the radio. And can I select only the radio ? – SimonTeo Jul 19 '13 at 3:13
  • The radio only displays if the checkbox has been selected. So upon first view, there would only be checkboxes. – Charles Wesley Jul 19 '13 at 3:15

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.