De-emphasise text box without making it look disabled

Question

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}

Background

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.

Answer 1

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.

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.

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.

Answer 2

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.

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