What is the fastest UI to enter a date within the last 30 days?

Question

My sales reps have a long list (200+) of their accounts and they need to enter the last date they visited each account. Most of the time this date will be within the last 30 days. What's the fastest interface to enter or select a date?

Answer 1

I would say the number keypad. This isn't a normal UI pattern for dates, so keep that in mind; it may require a short explanation or training. Let them simply enter only the day of the month (1, 14, 30, etc) and then do something like the following process in the background:

1. Get today's date.
2. If the entered day of the month is greater than or equal than today's date, automatically decrement the current month by one and add the year. (Note that you'll have to add additional logic for January/December and also to check that a day exists in a month).
3. If the entered day of the month is less than today's date, it was in the same month and year, so you can append both to it.
4. If the current date or a date later than one month ago is needed, they can enter the full date in your specified format.
5. You could optionally provide an auto-complete feature that will allow them to use the arrow keys and select the date once they begin typing.

To sum up, the user enters either one or two keystrokes indicating the day of the month and the system completes it for them automatically.

If you're not enamored with this method, you could always go with a JavaScript date selector. (MooTools, jQuery, Dojo, etc.) If you're unsure which way to choose, I suggest that you do user testing and see which way is faster for people.

Answer 2

When you say "visited each account" that implies they are viewing them on a computer system. If this is the case the best method would have been to log the date every time someone opens that account.

Alternatively, I would go for something like this:

                Last visited: [______________] [v]
  SA   SU   MO   TU   WE   TH   FR   SA   SU   MO
|_25_|_26_| 27 | 28 | 29 | 30 | 01 |_02_|_03_| 04

• First line is the textbox allowing user to enter date in full if they like
• Dropdown/calendar icon [v] brings up the last 30 days all in a row. Could be "always on" since it doesn't take up much space.
• Days might not be necessary if the weekends are highlighted (e.g. a different background color).
• Could include a scrollbar if it won't fit.
• Could use standard "one week per row" calendar instead, but with the last 30 days rather than month-by-month, e.g. two weeks from this month, two from last month.

Answer 3

Use a date picker widget showing a 2-month view (the current month and the previous month) with future dates disabled.

(That's the jQuery UI Datepicker.)

This arrangement allows one-click selection of any date in the last month (at least), and any other recent date can also be entered easily. It also means that reps don't have to mentally translate "last Friday" to "October 1st", as they would if they had to type the date.

If space is tight you could just use a text field to display the date, and have the date picker pop up when the field receives focus.

Answer 4

Depends on the user. That said, if one is entering lots of data, keyboarding is usually the way to go. If you have power users, let them type in the dates in a particular format.

Answer 5

Calendar widget (aka DTPicker). They're the best input method if you need to enter dates that are close to the current date. They takes a lot of space, so they aren't really suitable if you're space constrained; but otherwise, they're the perfect way for entering dates that close to the current date. If your date picking are mostly in the last 30 days, then you may want to give a 2-month view, with the current date always in the bottom part of the calendar (so that all dates within the last 30 days will be pickable within a single click).

However, if the rest of the UI is keyboard driven (i.e. there is no other UI that requires mouse), then you'd probably want to have a keyboard-driven date picker as well.

Answer 6

How about modifying the "visit form"? Instead of requiring the sales rep to enter the date of the visit and the name of the customer, they start where they left off.

For example, say that they last entered information on Friday, September 10. When they invoke your visit form, it comes up with the default date being the next business day, or Monday, September 13. The rep enters all the visits for that day. They click on an arrow or press a shortcut key such as Ctrl-RightArrow to move to the next business day and enter information for that day, and so forth.

This way, the sales reps are completely spared from having to enter a date.