8

I have a form with these elements:

  • A checkbox
  • A dropdown with a list of options

It is an eCommerce site which uses points as currency. During checkout user has the following options: The checkbox allows user to pay the order with a credit card instead of the site points, and the dropdown allows user to select delivery method (Standard, Expedited, In Store Pickup, etc.) All the delivery methods are available if user pays with points, however when user check the option pay with credit card, some of the options are not available.

What should be the best from a UX perspective? Display the non available options but show them as disabled? Or simply do not show the options in the dropdown? Or is there a better solution?

4
  • Possible duplicate of Don't hide or disable menu items? Sep 27, 2017 at 14:59
  • This isn't a question about menus. The question specifically refers to a form, and dropdown list populated with items in relationship to a checkbox.
    – dennislees
    Sep 27, 2017 at 15:11
  • @dennislees you interact the same with both; click to open, click to select your choice. Sep 28, 2017 at 10:36
  • Even in your brief description you show how these are not the same interaction. "Click to open". You're not clicking to open the dropdown in the web form. It's being opened as a result of its relationship to the decision you made about which checkbox to check. This is not usually how menu interactions work. These interactions are similar in that they involve (eventually) selecting from a list of (presumably) vertically arranged text options. Otherwise they are different.
    – dennislees
    Sep 28, 2017 at 13:47

3 Answers 3

7

If the menu (and it's choices) is present regardless of the checkbox, don't hide unavailable options: show them disabled instead.

It sounds like some menu options are always available, and are scoped when the checkbox is checked: Is that correct?

You don't have much specific info regarding your use case, so if my initial assumptions are incorrect, let me know.

Your users need to understand the relationships between objects in your application. If elements start to disappear, these could be mistaken for a failure of the application.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

You'll also see this in Chrome's dropdown menu:

enter image description here

From Apple's human interface guidelines:

Keep menus enabled even when menu items are unavailable. It’s important for people to be able to browse the contents of all menus to learn where commands reside, even when those commands aren’t available.

Perhaps this advice below applies a little more for form dropdowns, from Nielsen Norman

Gray out any unavailable options instead of removing them: any items that cannot b­­e selected should remain in view. For extra UX credit, consider showing a short balloon help message if users hover over a grayed-out option for more than a second, explaining why that option is disabled and how to make it active. If disabled items are removed, the interface loses spatial consistency and becomes harder to learn.

4
  • 2
    This is a great answer if the question is about UI menus, but we're talking about a web form, in which case there are lots of examples of why items should be excluded from a dropdown list.
    – dennislees
    Sep 27, 2017 at 15:08
  • If I knew more of the use case, I think I agree with you. I work on some technical tools, where during modification of options, it's necessary to show dependencies and all available and unavailable choices. I'm sure dealing with those situations have biased my answers :). That's why I ask more about his use case to see if my assumptions might be relevant here.
    – Mike M
    Sep 27, 2017 at 15:12
  • I updated the description to give you more context. basically: It is an eCommerce site which uses points as currency. During checkout user has the following options: The checkbox allows user to pay the order with a credit card instead of the site points, and the dropdown allows user to select delivery method (Standard, Expedited, In Store Pickup, etc.) All the delivery methods are available if user pays with points, however when user check the option pay with credit card, some of the options are not available.
    – Amapola
    Sep 27, 2017 at 15:30
  • 1
    Thanks for the update! With that in mind, I think @dennislees has a good answer. I have to deal with forms for complicated objects, so that's more what I'm watching for...
    – Mike M
    Sep 27, 2017 at 15:33
4

For web form dropdown lists, only show options that are relevant to the user in some way, anything else is a distraction

If there is some value in the user being aware of the disabled options e.g. it helps the user understand the interaction, process, product offering better then you should show disabled options.

In our application we often show full product lists to users who only qualify for entry level products, so that they are aware of the existence of the bigger and better options

Also, as suggested by Mike M in his answer to this question, there are some UI situations (e.g. menus) where unavailable options are important for context, they should be shown as disabled.

But in your case, with a dropdown in a web form, if there's no value in the user being aware of the unavailable options, if the interaction (and future interactions like this one) would be exactly the same if they never saw those options, then they are unnecessary and should be hidden or removed.

e.g if the checkbox asks to specify an operating system, and the dropdown includes a list of software, it would make sense to hide software options that are irrelevant to the selected operating system.

1
  • The specific use case this answer mentions may be a good reason to hide options, sure, but be careful of this in most cases. Often, hiding options causes confusion. I have had users complain, "Why don't you offer option X anymore?" "I do, but it is not shown because of Y." If you hide a shipping option because it does not apply to the order, customers may be silently disgruntled and assume you do not offer the option at all.
    – Aaron
    Sep 27, 2017 at 17:29
0

It's hard without knowing more details, but there's potentially more at stake here than just conforming to 'best practice' for hiding or disabling options. The most important thing is that the user is able to make informed progress throughout checkout.

It's unclear whether you're expecting users to use the checkbox or the dropdown first, or if they are available at the same time which is leading to this conflict. It should be an ordered but easily correctable flow.

Consider the two possible order of events:

1) Choose payment option with checkbox, then delivery option via drop down.

This seems wrong. People choose a payment option once they know the final price. An expedited option may mean the user doesn't have enough points or doesn't want to use their credit card.

Shipping method can make or break a deal. If I can't get expedited delivery for this weekend, I'm not interested. If I had chosen a payment method first and then been denied the option to choose a delivery option (perhaps one I had previously used) then I might abandon.

2) Choose delivery option, then the payment method

This is the usual method. You add stuff to your basket, choose a delivery method, add coupons, etc, and finally select a payment type when you have a total, and immediately prior to enter actual payment details.

Here, the user still has all the delivery options. The user may still be expecting to pay by credit card, so silently or invisibly rejecting a payment option in the next step may confuse the user, so they should be made aware at the point of choosing delivery method.

If some delivery options mean that the credit card option wouldn't be possible then you want to indicate that up front. Then there should be no surprises when it comes to the payment option.

One way to do that is to default to the delivery option which enables both (or all) payment options - giving the user the most choice. Then when (if) the user changes to a delivery option that disables/hides a shipping option, the user will see the payment options change. The user can then switch delivery option back again if they want to - because they saw the impact.

As an example, XCart do something very similar - In the example below, the user initially sees options for 'pick up in store' or via 'courier'. The default 'in store' option means cash and card payment options are available. If the user changes to courier option, then (in this case) only the cash option is available.

enter image description here

enter image description here

You could still indicate discretely to the user that they can 'Change delivery option for more payment methods'

Your Answer

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

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