1

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.enter image description here

7
  • Why are there separate 'now' checkboxes for date and time, rather than a single checkbox that populates both?
    – Matt Obee
    Oct 15 '14 at 14:08
  • @MattObee 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".
    – Rex
    Oct 15 '14 at 14:10
  • @Rex I can understand having two separate inputs for date and time but I don't understand why you need a checkbox for each.
    – Matt Obee
    Oct 15 '14 at 14:11
  • I don't understand why are these checkboxes - it isn't state they deal with it is action and so they should really be buttons. What happens when the user uncheck the box?
    – Izhaki
    Oct 15 '14 at 15:27
  • 2
    "As per the requirements, they are supposed to be checkboxes" - if this is anything but a school assignment, that is a horrible requirement! Requirements should never mandate elements or flow. Unless this is a teacher saying you need to learn how to interact with checkboxes, you should be working to kill that requirement (and any others that call out specific elements of the UI). Oct 15 '14 at 16:31
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:

enter image description here

(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:

enter image description here

(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:

enter image description here

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:

mockup

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.

mockup

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.

0

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...

1

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.