Options to place "now" for a date input

Question

I have a section of a web page where there is a heading called "date and time" and "duration". I have two labels named 'date time' and 'duration' and two input boxes where the user can enter a date and time. I also have two checkboxes which are labelled 'Now' and 'until changed'. If a user has checked these I am supposed to take the current system time and a value for default duration respectively. I am struggling to group the input boxes and the two checkboxes. Any advice is welcome.

Answer 1

Don't show irrelevant form controls that clutter your UI. Luke W has a good video up on YouTube titled "How to Make Form Input Faster" -- he talks about mobile, but the concepts do translate to desktop.

In a Date & Time widget that I recently defined, I wanted to make it more compact and wanted to hide less used information. In my case, must users wanted a scheduled event to start on a certain date and keep going; only sometimes did they want a solid end date.

I ended up with this:

(Note: the red text is documentation markup, it does not appear in the UI)

Given a label to the left (or above) the user has a quick and easy way to input the date through keyboard or through clicking the calendar icon. If they need an end date, they can request it via the link below:

(Note: the red text is documentation markup, it does not appear in the UI)

In my case needing an end date is much less common. Tucking it into the "select an end date" link allows us to keep the UI must cleaner and easier to visually parse for the majority of our users, while making it easy to quickly get an end date for those who need it.

But what about time, and what about "now"?

For time, in our case this is less common but is sometimes required. We put it in the calendar popover as a result. When the user clicked the calendar icon they get this:

They can add time if they need. In my case the text field string updates to include the time, such as "10/15/2014 @ 1:15:23 AM".

Date and time are separate as per the webservice I am hitting on the backend as it has two separate fields for "Date" and "time".

A side note on this comment you made under your post. Just because your backend has two separate fields doesn't mean your UI has to. Your UI should do what is right for the user, not what is right for your backend. More work may be required to reconcile the two, but a better user experience is not guided by how the system stores the data.

But also notice there is a "Today" link. This allows the user to quickly jump back to Today's date if they need to. If you need both Date & Time to update, you can update the language used to "Now" or some other appropriate wording that tells the user both date and time will update.

If you need something that looks for like what you already have, here is a quick suggestion:

^{download bmml source – Wireframes created with Balsamiq Mockups}

I am not clear on what "Until changed" does, based on your explanation. The wording implies that the schedule will continue until I change it, which simply means it has no end date. If you required a duration and have a default, just give it to the user.

^{download bmml source}

Also be aware that your duration doesn't currently have a unit on it. Is it minutes, hours, days? I don't know. Don't make your user guess! If you prefer to have the user enter a duration (rather than an end date) be sure you tell them what units are needed.

Answer 2

Do you need a Now checkbox? Can't the date and time just be set to "now" when opened and if it's not changed to any other date and time, then it will simply be now...