Not available options: Disabled or hidden?

Question

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?

Answer 1

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.

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

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

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.

Answer 2

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.

Answer 3

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.

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