I would like to de-emphasise the contents of the following text fields when one of the dropdowns is selected. I do not want to turn them grey as that would suggest they are disabled. They effectively become information when a dropdown is used, but are still available for editing at which point they will become prominent again. What is the best way to achieve this?


download bmml source – Wireframes created with Balsamiq Mockups


We have a web application used for data analysis and you select the time range to look at using two simple text fields (with calendar controls attached):


download bmml source

We are experimentally introducing presets to easily allow selecting of common time ranges. We do not want to remove the existing time fields though in order to allow the selection of arbitrary times if required. They also serve to show the exact time range chosen when a preset is used (as in the example above).

If a preset is picked from the dropdown menu, the text fields are updated to match. If the text fields are edited the dropdown selection is cleared. This means that only one set of controls is in use at any time.

What I would like is that when a preset is selected, the text fields should be de-emphasised somehow, to show that they are not being used. The simplest approach would be to grey out or even disable the controls but I do not want to do this as they are still perfectly usable if needed.

What would be a good way to address this problem?

It may be that I am focusing too much on the text fields. My main goal is to indicate that only one set of controls is in use but that the other set can easily be used. My secondary goal is to also not change the UI too drastically to reduce friction with existing users of the system.

2 Answers 2


Based on the constraint that you want to keep both sets of fields visible and indicate that they are both usable at any point, you could wrap them in a radio button group if it's not too confusing for your users, since what you're trying to say to the user (if I'm interpreting you correctly) is that they can use a preset, or they can set a specific range.

Duration Selected

Then if the user changes the range fields or selects the second radio button, you flip the radio button over to indicate that this is what's being used, and clear the presets as you described if they enter a custom range.

Specific Range Selected

It may be worth "disabling" the controls that aren't being used just to de-emphasise them. The radio buttons tell the user that they can use either option.

With Disabling

  • I like this approach. It makes the switching between the two a bit more explicit (and not "clever"/"magic"). It also addresses the current requirement of having them both visible at the same time.
    – Burhan Ali
    Dec 12, 2013 at 9:23

I don't think that both options should be visible at the same time. Having a control that allows to view one option at a time greatly simplifies interface and reduces cognitive load. You need to make a decision which option should be a default one based on business requirements and past usage analytics. I believe tabs allow to solve this problem quite effectively.

enter image description here

We've been using a similar solution at work for several years without any negative feedback.

  • The idea of reducing cognitive load (and also visual clutter) makes sense. If we went down this approach we would still need some method to see the exact time range that will be used.
    – Burhan Ali
    Dec 12, 2013 at 9:20
  • Once user selects the date range and submits the request, the results page should have clear indication of what date range was used. You can also have greyed out exact date range displayed under ui controls in 'Standard Range' tab. But it won't be editable by user, just for display only.
    – adesigner
    Dec 12, 2013 at 13:10

Your Answer

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

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