48

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.

one list where one item has an orange triangle with white exclamation mark; another list where two items have similar triangles that are semi-transparent

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: Lists as in previous image, but items are grouped under headings

  • 36
    If they are mandatory why make the user select them at all? – Bakuriu Sep 20 '16 at 18:30
  • 7
    There is probably a solution to your problem. But my first thought was, why does it has to be that complicated? Whats the goal the user has to achieve? Maybe a list isn't the best suited way to represent your data at all. – luQ Sep 20 '16 at 19:10
  • 12
    Are the mandatory items exclusive (= radio buttons or dropdown menu, depending on how many), or is it valid to select both (= check boxes)? Though, regardless, I'd separate them out as in Tom.K's answer, unless you have some specific reason for trying to hide them among the optionals. – 8bittree Sep 20 '16 at 19:55
  • 5
    This is exactly what radio buttons were designed for. – Apologize and reinstate Monica Sep 23 '16 at 0:26
  • 3
    Actually, I just realized I missed out on mentioning a detail. It's not one OR the other, the user might want both, but AT LEAST one of them is mandatory. Sorry about that – efrethe Sep 23 '16 at 6:05

10 Answers 10

139

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.

enter image description here

  • 21
    +1 You've really answered the question by addressing two different aspects of the problem and combining the solution: a) reduce cognitive load by making groups that cluster questions with similar input b) increase task efficiency by using optimal input field. – Michael Lai Sep 20 '16 at 23:27
  • 2
    Hey! Thanks for a great answer. Unfortunately I had to change the question a bit, which will make this solution hard to use, I'm afraid. @Tom.K – efrethe Sep 21 '16 at 9:08
  • 2
    Alright, then let's see if we can solve the updated question! @efrethe – Tom.K Sep 21 '16 at 9:29
  • 4
    I think the answer is still perfectly valid. Even with a tree-like structure, the user has to solve two different tasks: First decide on one of multiple mandatory items - and second decide on optional items. – Falco Sep 22 '16 at 12:58
  • 1
    Oh, I see. The question was edited after the answer was posted. My apologies for my previous comment. This answer was clearly correct at the time it was posted. – Dawood says reinstate Monica Sep 24 '16 at 22:36
38

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

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • 3
    +1 I like this solution except that the disabled state might be a little bit confusing for new users when scanning the list of items. Would be worth testing :) – Michael Lai Sep 20 '16 at 23:21
  • 7
    I've seen the "checked but disabled" state used when something would normally be optional, but corporate policy requires enabling it. – Kevin Sep 21 '16 at 1:06
  • 1
    @TannerSwett that's exactly what I am talking about by the possible confusion. But always better to test rather than assume right? – Michael Lai Sep 21 '16 at 8:37
  • 2
    Yes, you both are right! Probably the best could be to write "mandatory" next the dropdown without the locked checkbox – Marco Tatta Sep 21 '16 at 16:45
  • 3
    "Note that the mandatory item is selected AND disabled" We had this for a while and it turned out to be confusing for users, sadly. We dropped it. For a time it was replaced with a styled → (basically just for alignment and some sense of symmetry) but the interface has since been completely refactored. – Lightness Races with Monica Sep 22 '16 at 9:09
11

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"

mockup

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.

  • 1
    Remember you also can't pick two activities at the same time – Ian Sep 23 '16 at 14:39
  • It's just some random example. I see that Class A clash with Class B; Mon / Tuesday – Realdeo Sep 25 '16 at 4:52
9

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

3

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.

0

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.

  • This is good advice for making mandatory items visible but doesn't answer the "one out of two" being mandatory issue. – DasBeasto Sep 20 '16 at 14:59
  • Actually it does I'd say - to my mind the information needs to be structured/presented differently. If it is difficult to get it explained how would the user be able to understand what's asked of him? – Imagestyler Sep 20 '16 at 15:25
  • 2
    I also don't see how this answers the question. Can you elaborate on what to do with mandatory items that are mutually exclusive? – jazZRo Sep 20 '16 at 18:12
  • I'd just want you to have a look at the solution Tom K presented. He visualised my comment. – Imagestyler Sep 20 '16 at 18:58
0

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.

0

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

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.

enter image description here

0

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.

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.