2

There are some features in my app which have high frequency of usage and the task involving those features are expected to be completed very fast. These features involve kind of serial data entry tasks and time to complete these transactions is expected to get lesser with increasing usage. I want to avoid using a datepicker as user will have to stop the flow of his fingers on keyboard and pickup the mouse to select the date.

At the same time I also want to give date-picker for other set of features which are not as frequently used such as generating report for a selected range of dates, etc.

How to ensure consistency in the app while avoiding datepicker for few features?

Improve this question

2 Answers 2

Reset to default
1

If I understand correctly, you don't want to break the "seamless keyboard usage" flow by using the mouse-based Date Picker and in the same time, you need the Date Picker component in some other scenarios.

I'd say use a hinted text field for that (with the hint above it in a smaller font). Also, you can use the OnFocus event to display the Date Picker below the text field (to maintain the consistency). Don't forget to use the OnBlur to hide the Date Picker though and consider the validation as well.

Here's what I mean:

Date Picker Example

Improve this answer
1
  • Thanks, I will give this a try. You are basically saying that I need to design a datepicker that is responsive to different date formats and doesn't warrant the mandatory use of mouse as well
    – gurvinder372
    Dec 26, 2015 at 0:30
1

It appears you are asking for an alternative to a date picker as a date field component. You could create a smart date component that accepts various date formats. Very similar to how Google search box anticipates your search query as you type. I can imagine the interaction could go like this...

  1. User starts typing "1" and the component gives the user three choices right below the field. "1", "11", "12". "1" being January, "11" being November, and "12" being December.
  2. The user can accept the first highlighted selection by typing "/" or by hitting space bar. They could also use the arrow up/down to select the other choices, and then use type "/" or space bar to accept.
  3. This interaction will continue until the user has completed the date in the correct format.

I have also seen another smart date component that accepts natural language as input, and then correctly formats the date. E.g. The user types in "Next Friday" and the component figures out the date based on the current week and day.

Improve this answer
1
  • This sounds cool and worth a try. Thanks for this idea.
    – gurvinder372
    Dec 25, 2015 at 15:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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