1

Let's say that a user has to enter a start date and an end date for some activity, and that activity usually requires a known (default) amount of time (period). To help the user out, let's go ahead and add or subtract the default period when the start date or end date is entered.

Every once in a rare while, the user may want to manually edit both days, not using default period. What kind of control does one use? I've seen (and done) various things in the past but none of them felt really polished and easy. For example, only calculate the value if the field is blank, or detect if the value was manually entered and don't override it. These all required more clicks by the user and wasn't always clear if the default period was used, or if the user manually entered both values.

I'd like to use as little real estate as possible with the least clutter. Here's what I've come up with so far:

enter image description here

The icon indicates the two dates are linked, and the broken link indicates the dates are no longer linked - the default period has been overridden. Is there a more obvious or intuitive way to do this?

1

This start/end dates problem is quite common in UX. With accounting, for instance, there is often the invoice date and (payment) due date - but there users are often interested in days (period) rather than due date.

Anyhow, your solution is not bad at all. You could add lines to create a better visual grouping between the fields and the icon. The obvious problem is that is quite a bit of invisible stuff for users to infer:

  • There is a period
  • The end date automatically updates based on it
  • What does the icon mean?

But, if you provide a tooltip on the icon, like "fixed period of 30 days", most of these issues will be solved, on non-touch devices at least.

Another good solution for this is:

A discrete axis of dates from 5th April to 21st April, with a two sliders, one of the 8th and one on the 18th and another line in between those dates

Where the user can drag the start date, end date or the whole period (keeping the same period length but changing both start and end dates).

While rare are the cases where such solution is sensible (it takes a lot of space, requires drag, and will be completely odd with long periods) its form translation could be of some use:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I'm sure you'll be able to work out how this works when the user edits any of the fields, whether fixed is ticked or not.

| improve this answer | |
  • This is a legacy app in WinForms, and space is at a premium. I like the Days/Fixed checkbox, and if I had more vertical space I'd lean toward that. The tool tip is a great idea - love it. – Shmoken Mar 24 '15 at 1:37
  • In the last mockup, it might (depending on the situation) be a good idea to toggle between the "Days" field and the "End date" field (i.e. only showing the field which is enabled for input) – Josef Engelfrost Mar 24 '15 at 20:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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