11

I'm designing a website on which a user has to pick a date, which is today by default. The content of the site will be based on the chosen date. 90% of the time, the date will be chosen between today and (today+10 days). A past date cannot be chosen.

I want to do a one-line link-based date picker. Here is an idea (half-working live demo):

enter image description here

I'm not sure exactly if it's explicit for the user? Questions:

  • what to do when I click on "tuesday 26", to make new dates appear? Should it be like my live demo?

  • where to put a link for other date that would open a normal rectangular date picker (that looks like a calendar) allowing the user to choose another future date?

  • I think today link should be always visible, so that if the user is lost in the dates, he can always return to today


Note: I don't want a big rectangular datepicker to be present all the time:

This should only appear when the user selects other date. 90% of the time the user won't use it, that's why I really think a one-line date picker would be better for my use case.

  • Surely the point is the datepicker is only visible when you click on the date or the call to action, so it's not 'present all the time', only when needed. – Midas Apr 25 '16 at 12:01
  • @Midas yes indeed – Basj Apr 25 '16 at 12:28
11

If 90% of scenario is covered by Today+10 days, then perhaps something like this could work, without having to worry about Next | Previous or losing your current place.

It takes up more space, but it's also less finicky.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Today is indicated as bold. You also need month, because date range could cover current month and next month.

  • 2
    the days of month don't repeat in 10 days, so the month does not "have" to be displayed - after all the year can change in 10 days and you didn't feel the need to display year. perhaps a tooltip on hover with the full date would be enough? – Aprillion Apr 24 '16 at 8:27
  • 1
    to me Thu and Tue look better to have consistent 3-letter week names – Aprillion Apr 24 '16 at 8:29
  • @Aprillion If you use month/day together, it becomes clearer what those two numbers represent. But if you display just day by itself, they won't always be so obvious. For example "1 Today, 2 Thur, 3 Friday". My personal design philosophy is, don't make Ui finicky and simplify controls, even if it takes up more space. – Jung Lee Apr 25 '16 at 0:35
5

Have you thought about whether there is a preference for weekends / week days in the selection and highlight vs grey out the sections that are less important?

Concept 1

I think just a simple Next / Previous with a hidden calendar that can expand beneath it should work.

enter image description here

As per the comments here's a modified version, showing today:

enter image description here

There is no other more efficient method that I can see. Pretty much any design will take two clicks to get the correct date.

Concept 2

For example you could try this concept with effectively a horizontal accordion. Clicking on a date range wouldn't select a date, it would just expand that section that you could click on an individual date.

enter image description here

I'm not a designer, so I purely took inspiration from this dribbble events page design:

enter image description here

Concept 3

Also note, that similar to the design (which is pure coincidence as it has the remaining days in March), you could just have a neatly stacked double row of 2x5 for the next 10 days and then an expandable calendar below for the rest.

  • I really like your Concept 1, which is straightforward, easy to use and to understand. The only problem is : imagine I have clicked too much on right arrow, and I am lost in future days. How can come back to "today" ? – Basj Apr 25 '16 at 12:25
  • In that design you'd have to rely on the hidden menu to get you back to today. You could simply have a 'Today' link to the left of the left arrow, e.g. [ Today ] [ < ] [ 26 ] [ > ] [ Other ], you could then balance that out with the 'other' link that would open a calendar. – icc97 Apr 25 '16 at 12:44
  • This is nice indeed @icc97, but then my problem is : what happens when Today is selected? It would be either [ Today ] [ < ] [ Today ] [ > ] [ Other ] (uncool because redudancy) ... or something like ... [ Today ] [ < ] [ 25/04 ] [ > ] [ Other ] (then I don't see, in a blink, that today is 25/04) – Basj Apr 25 '16 at 12:47
  • For today, you'd grey out / disable [ Today ] as well as [ < ], this should give some indication that it is today. But beyond that most people should know what today's date is. The other typical thing to do is put a feint background circle around the date or give it a different background colour. – icc97 Apr 25 '16 at 13:10
  • There's lots of design ideas for indicating today's date: dribbble.com/tags/date_picker – icc97 Apr 25 '16 at 13:14
4

You can tell better but since you mentioned that 90% time the dates will be within next 10 days - I am assuming that the user pretty much starts off with a date in mind, rather than thinking which date to pick. So in essence he/she is clear with the date (which is approaching soon), and just needs to select what is in mind. With that assumption, check the solution attached.

enter image description here

1) Initially today is selected.

2) Next stage shows tomorrow being selected.

3) Lets assume, user has 2nd May in mind (within 10 days), then user could either use the arrow buttons (keyboard as well as in UI), to +/- the date or type in the date in mind.

4) If the user types in say 2 in the date field, the month field should automatically change to May (next month), as its known that it would be most probably choice. (Range being +10 days)

5) This interface allows any date to be input, still allowing the user to use the calendar facility to choose a desired date in future.

The idea is - Since user already will have the date in mind, its easier that you provide him an easier way to input that rather than providing all possible 10 day options at once, which can lead to confusion.

  • Yes! Showing all 10 options is too much information and would slow down the user in her rush thru the end of the form. Allow for keyboard entry, and especially enable keys like + and ↑, and the mouse wheel to increase the date number. – Juan Lanus Apr 26 '16 at 19:38
  • Also, ask yourself (or better the users) if they are mouse-prone or keyboard-ninjas. This would help you choose a design. If they are mouse-ers you would like to display the big calendar upon hover on the calendar icon in order to save them a click. – Juan Lanus Apr 26 '16 at 19:43
1

I had a similar design concern a few months ago.

My implementation was a text box displaying the default date formatted as you desire. When the user issues an onclick event a date picker is launched. I used a jQuery datepicker on the backend

In that case your page would not appear excessively bulky.

Let me know if that was helpful.

  • 1
    Can you give a link to a live demo? Or a screenshot, it would be useful to understand. – Basj Apr 24 '16 at 12:04
0

I just wanted to share here how I improved my original version, it works now. Live demo.

enter image description here

Not optimal yet in terms of UX, I'll update thanks to all your contributions in the different answers and useful remarks.

As pointed by some people, I'll add the months as well. (Any idea of how to do it is JavaScript without hardcoding ['Jan', 'Feb', 'Mar' ...]?)

  • I see no issue in hardcoding the months... They don't change too often ;) – maxathousand Apr 26 '16 at 5:41
  • @maxathousand : haha that's right ;) But then if I want to internationalize the website, I hoped the monthnames and daynames could be generated automatically from system locale (with something like strftime(...)) instead of hardcoding the names in every language... – Basj Apr 26 '16 at 6:28
  • You can look at this jQuery picker for localising dates: 2008.kelvinluck.com/assets/jquery/datePicker/v2/demo/… – icc97 Apr 26 '16 at 11:18
  • that jquery calendar is very useful and well documented, but very ugly. I created a prettier version in a fork of the original code github.com/ianchanning/jQuery-datepicker – icc97 Apr 26 '16 at 11:24
0

enter image description here

You can also use Windows Phone Date Picker Format.

To Select Date you have to swipe up or down to change date.

-5

I see a lot of confusion. In my humble opinion what you need is an interval picker and not a single date picker.

I think you must leave the idea of date picker and start to work at the idea of interval picker.

Interval picker it's simple to comunicate than your solution so you can fix a side of the range (today) and on the other side you can propose a date with the picker. For example: Today ------> 25th May

  • What do you mean by interval picker? The user has to choose only 1 date (I edited question to emphasize this aspect). – Basj Apr 23 '16 at 19:03
  • I undestand you show on the site content from today to the date that user select. So I think, user doesn't select a date but an interval. – Oroki Apr 23 '16 at 19:08
  • No no, maybe I misexplained. I show the content of the single day that the user selects. – Basj Apr 23 '16 at 19:15
  • you need to explain what you mean by "interval picker" – Aprillion Apr 24 '16 at 8:24
  • I mean a UI element like a slider with one side fixed, for example "today" and the other side free to move and to set a date for the interval but It isn't the right solution for this case. – Oroki Apr 29 '16 at 12:28

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.