At least one is mandatory. How do I make this clear?

Question

I have a list where the user has to select some items. Sometimes none of them are mandatory, sometimes one is mandatory, and sometimes at least one out of two is mandatory. But how do I show this?

Right now, the solution to mark a mandatory item is to use a warning triangle. But how do I show the "one out of two"-scenario? One suggestion is to make the triangles partly transparent. But I don't think it is clear enough.

Do any of you have a better suggestion of how to make this clear? Should I use the warning triangle at all? Or is there a better way?

---

EDIT:

I actually need to change my question since something that changes everything showed up yesterday. The list is actually a tree structure. Like this:

Answer 1

You could split the list.

• mandatory items as radio buttons.
• optionals as checkboxes

This also makes sure the attention per importance isn't divided, and allows for easier comparison between mandatory items.

Answer 2

I think this solution could be usable. Note that the mandatory item is selected AND disabled. The user is forced to select one of the mandatory items through a dropdown menu

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

In my campus's admission site, some study is optional, some study is mandatory to take. From mandatory studies, some study must be taken at a specific time while another study is mandatory, but there are multiple times avaliable and you can pick the schedule that suits you the best.

This is what they did: instead of relying on visual graphics, why not just lay down what you need in text?

You need to take class A at 10.00pm Tuesdays & Wednesdays

You need to take class B. There are multiple schedules avaliable that you can check.

A mandatory class on a mandatory schedule is disabled and checked. Every mandatory class with an optional schedule has a red triangle. What does this red triangle means? Go up to the text. The triangle is not an imperative "pick one of these", but simply "remember this"

^{download bmml source – Wireframes created with Balsamiq Mockups}

If someone fails the mandatory class with optional schedule, a red message is thrown telling you where you went wrong.

You need to pick a schedule from Class B.

When visual fails, go classic-text.

Answer 4

I think for this unusual situation, well-known solutions wouldn't work. You could experiment new solutions.

One solution I can come up with is given in the mock-up below. Link the options that are mandatory. You should show the warning as in the right if none of them is selected. You can optionally show the warning even if any of them is selected but in a different color (yellow preferably). You should also show the warning message when user hovers over the guide lines.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 5

To address you question on the "one or the other", consider adding some instruction to the user that spells it out for them, something to the effect of "Please select one of the following" right above the two options. It might work best to put the triangle right by this call to action, instead of on each of the options you are choosing from.

The functionality you described on these options sound like radio buttons, where only one can be selected at a time, so one thought is to make those options appear as radio buttons to give an extra hint to the user that only one can be selected.

Your exclamation triangle icon suggests that I need to fix something on the page in order to continue. Although having a field to fix does give a slightly different feeling then a required field that needs data entered, if that is what you are going for, then I think it works.

I am not a big fan of the partially transparent triangle, as that suggests to me that option is currently disabled or inactive.

Answer 6

This is not a solution I would go for. Best keep it clean and simple. Less is more as the saying goes. Currently all your items are bold - and I would change that in order to differentiate more, improve on focus and on readability.

So one suggestion could be to make the mandatory ones bold to make them stand out or secondly keep them inline with the others but add an (*) Thirdly you could put all the mandatory ones on top of the list

This way you keep the hierarchy of your information intact.

Answer 7

One solution I haven't seen yet, but it really depends on the context. Could it be sort-of know to the user that these choices are mandatory? If I were the user I would like it if the triangle didn't mean "Mandatory" but rather "Hey, look at this, this is probably the one you are looking for".

That way, you can just put a triangle for each of the three specials in your example. If you select the true mandatory, the triangle disappears. And if you choose one of the two "OR-Mandatories", both the triangles disappear there.

Will depend on context, assumption is that there is that the user should know what is mandatory himself, so the triangles are not the only thing guiding him. But after that he only has to try combinations until all triangles are gone.

Answer 8

You could explain these requirements with footnotes. This will probably only work well if mandatory options are rare.

A parent
    ☐ An option
    ☑ An option¹
A parent
    ☐ An option
    ☐ An option
    ☐ An option²
A parent
    ☐ An option²
    ☐ An option

¹Because of ______, this option must be selected. 
²Because of ______, at least one of these options must be selected.

Answer 9

Group the options with that propriety (at least one is mandatory) in fieldsets or add a wrap for them. Change the background for that group of options and add the same background-color for the options that are mandatory.

Keep the icon positioned in the middle of the group (vertically centred) or before the option in the case it is just one.

Answer 10

This is one behavior that is easily supported by marking required fields with a fill color. Once the requirement has been met you drop the color so that it looks like any other input on the page.

Now in your case when the user is required to select at least one then all the checkboxes are colored until a single option is chosen. The rule can apply to any number of required choices in a list.

But if you have a option that has to be selected then it should be default selected and disabled so that the user can not make the mistake of deselecting it. This behavior can also be driven by business rules so that what is pre-selected is driven by choices made in other areas of the form or application.