Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Context: I'm designing a web form that allows users to enter information about some work they've created (title, description, image, etc).

One of the optional fields will be a date field. After discussing the product with some target users, I've found they have different needs with regards to this field.

  • Some want to enter a specific date (e.g. March 3, 2013)
  • others would like to enter a year only
  • while some others have the need for a range (e.g. 2012-2013).

One of the other requirements of the product is that users can filter/sort their work by date, so a generic text field won't work unless a specific format is followed. I'd love to hear some options for what's worked for others in the past.

share|improve this question
    
Just a thought about a potential pitfall for 'other requirements' that came to my mind: If date is optional and some entries do have a date, some a range and some no date, how does this impact the filter/order by date feature? –  greenforest Apr 15 '13 at 14:32
    
Agreed. We will likely have to have separate rules for filtering from ordering... –  julie p Apr 24 '13 at 1:00
add comment

4 Answers 4

up vote 3 down vote accepted

A series of dropdowns or comboboxes could work well, allowing the user to specify the date at whatever level of granularity she wants.

Initially just show:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

If the user elects to choose a year, you can then show an additional dropdown for a month, as well as revealing an option to add an end range to the year, defaulting to the current year.

mockup

download bmml source

...and then if the user decides to specify a month, give her the option to specify a day.

mockup

download bmml source

Even if the user is choosing a range from a specific day to specific day, the year and month of the two will usually be the same, so by setting the end date to default to the same as the start date, you make it so that the user will usually only need to select only four dropdowns to specify a precise date range. At the same time, you allow her to choose only one or two dropdowns if she wants to specify a more granular range.

share|improve this answer
1  
I like this idea, but it doesn't address the range. If I follow this method, the user could theoretically have to do 6 pulldowns to enter one range. I wonder if there's a way they can choose the date type prior to entering it?? –  julie p Apr 13 '13 at 15:27
    
@juliep Good point. I've expanded my answer to address this need for a range. Using default values, the user would likely never need more than four selections, even if she wanted to specify a precise range from a day to another day. Most choices would require fewer selections. –  3nafish Apr 13 '13 at 16:29
1  
TY 3nafish. I've shown this to some of my users and they think this is the easiest, although I'm going to use a text field so I don't have to have 100 dates in the dropdowns :) –  julie p Apr 14 '13 at 14:38
add comment

Just stumbled across this on linkedin. Linkedin uses a simple toggle link to change between range and single date.

You have a standard single date picker by default:enter image description here

and you can toggle that to enter a range: enter image description here

In your case, if the user wants to avoid month, they can leave the month dropdown empty (have the first option as null) and just select the year.

share|improve this answer
    
I like this, thanks! –  julie p Apr 15 '13 at 15:41
add comment

I'd go for a single text input field and allow free form range entry along the lines that Fogbugz and time trackers are doing for durations. These allow input in various forms and interpret it themselves without requiring all kinds of date specific controls.

For example Jira (an issue tracker) will interpret a tasks duration from a single text field:

  • 1h => 1 hour
  • 2d 5h => 2 days 5 hours
  • 3w 4d => 3 weeks 4 days

You'll "just" have to come up with some simple clear rules for parsing the input.

An absolute necessity will be to give immediate feedback on how you are interpreting the input. This could be in a label under or to the right of the text input field.

share|improve this answer
add comment

To make complicated things easy, you need something that's familiar to users and doesn't take a lot of effort from the users. How about an (intelligent) slider where you can chose year or date without end date (mockup 1)? This could be improved by a second slider for end date (mockup 2) so you really don't need to change the control itself or make use of multiple dropdowns which are a lot of work for your users.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

This design would solve all three of your users problems...

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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