We are developing a date ranger picker and are in doubt how to present preset time periods. The scenario is this: EITHER the user utilizes a preset period, e.g.
- Next 7 days
- Next 3 months
- Latest 7 days
- Latest 3 months
OR s/he specifies a From and a To date. My question is this:
- How is the OR functionality best represented in the user interface?
Three of our multiple design alternatives are:
In the picture above the "Setting alpha" etc. are just there to show the date ranger picker in context of other controls.
On our team we are most kean on alternative (C) since it explicates the OR relation in a standard way using radio buttons. However, one might object that it's too explicated, and that e.g. alternative (B) is more terse. But, if alternative (C) is the way to go, how should that behave in more detail, e.g.:
- Should choosing a date preset automatically fill in the From and To fields below the preset dropdown?
- And if not: How do you convey to the user what e.g. "latest 3 months" means in terms of exact start date?
- Should the non-selected option be greyed out and reset?
- And if so, should the non-selected field become active when clicking on not only the corresponding radio button but also the input fields, e.g. the dropdown or the date fields?
What is your take on this? Which alternative do you prefer - or do you have any better suggestions? Do you have any good examples of how to present presets to users?