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?
Answer
In that order: B (with the handling detailed below), A (spelled it out), C.
C is for me the "typical techie solution": you first decide how to specify the duration, then you specify the data required for that algorithm. However, it's just two additional controls to manage, and the users don't know the options ahead. That said, if your users are techies / analytical thinkers, and it's easiest to implement, go for it.
B would be preferrable:
Minimum requirements:
- Both "preselect" and date/time controls are always available (never disabled)
- changing the preselection changes the time displayed in the range controls
- changing the range controls changes the preselection to "other"
Almost Perfect:
- compare manual selection to your presets, and show "other" only if there is no match
- when the user select "other" manually, show a hint like "slelect start and end date here"
Advantages:
- Users with a vague idea of your app have a set of typical options
- Users get immediate, concrete feedback for their choices
- Choice can be refined, e.g. "next 3 weeks" can be refined to "4 weeks" easily
Variants:
- Instead of "other", generate suitable textual representations (e.g. "next 17 days").
- If the app is used mostly by regular frequent users (few casuals), consider a free text input like Hisham suggested: clicking around to enter three timespans in a given day is fine, for entering 30 in an hour is a pain, and free text wins.
(I can't think of a simple combined interface that doesn't somehow penalize novice users, but if you expect a wide range of users, you might need to conside some solutions for that)
Layout notes:
- I'd omit the "from" purely for clean look, but there's a tradeoff. I generally try to give controls an equal size, and line them up on few lines to avoid a "restless form" look.
- Group preset and date picker together (i.e. give them some distance from the other selections)
- "Duration" is of course a stupid label, sorry ;)
(side note: Instinctively I'd assume an interval of seven days to go "from Feb 17, 0:00 to Feb 23, 23:59:59.9999..", but I'm not sure if this universal.)
No comments:
Post a Comment