3

I have a calendar control which currently has "Previous Year" and "Next Year" button to switch years. I want to improve it, as most of the time a user has to go 3-4 years back.

Currently, I plan to remove both buttons, and put a dropdown there. Problem is the dropdown size gets too large for comfort if I add +/- 20 years range. If I set fix height, then there is a scroll bar. Sure, it is still fewer amounts of clicks if I have to use dropdown to go five years back. However, it is more time consuming with a scroll bar, and finicky to deal without fix height.

I am thinking of other options, like using an auto complete box, but that requires user to move from mouse to keyboard. Or I can use multiple dropdown, one to choose a decade and second to choose a year, which will cause extra clicks (especially for selecting a next year's date in 2019).

What other ways can I implement this?

P.S. I can't use the default calendar control as that requires a lot of changes with the application (way too many to justify to management).

Current implementation with range +/-15

Improve this question
3
  • I have edited my answer with a quick draft of a scrollbar. I don't think there is a size problem.
    – Clijsters
    Commented May 11, 2016 at 12:22
  • What about using a 'spinner' control that is basically the scollbar but without the bars?
    – Michael Lai ♦
    Commented May 11, 2016 at 22:52
  • I will see how I can use the spinner control. That seems like a good idea. Not sure, if I can add it easily in the existing code. If not, dropdown with scroll bar is the way forward, I guess.
    – jitendragarg
    Commented May 12, 2016 at 3:09

1 Answer 1

Reset to default
1

As this is a little opinion based and depends on the use case of your application, I think there isn't a complete answer like "use this, that, or nothing".

I would recommend the first idea - the dropdown list - with scroll bars.

To improve the experience the dropdown should stay over the current year, when the user expands it. This allows the user to change the calender up to n Years before or after now, without scrolling.

Also an important feature (IMHO) is the handling of key inputs. Some users (not only power users) use their keyboard to jump to items fast.

EDIT:
Here is an example of the dropdown with scrollbar (just a fast Paint draft) Also if you use a full-with scrollbar (this is taken from Win7) it doesn't has to have to change its width: Scrollbar example

Improve this answer
6
  • This is my initial plan. Problem is just the size aspect of the dropdown. Scrollbars in a dropdown does not seem like a good idea. Maybe I can put a link in the dropdown saying, "More..."?
    – jitendragarg
    Commented May 11, 2016 at 11:43
  • Or an autocomplete textbox with a dropdown (for autocompletion). In fact it is the same like a dropdown, but with the option to type in it... Do you have a screenshot of your current implementation? It's not so easy to get a good feel of the size problem
    – Clijsters
    Commented May 11, 2016 at 11:45
  • I think a More... Link wouldn't be a good idea. It's not easy to find and perhaps hard to implement. A Scrollbar has not to be as thick as a classic Eindows scrollbar is. It could also be thin (like some smartphones implement them)
    – Clijsters
    Commented May 11, 2016 at 11:45
  • No, I meant like show only 10 items in the dropdown (+/-5 range), and a link as the 11th item in dropdown. Click on the link will change the dropdown values in place. Or I can put button next to dropdown to change range (like there were earlier for previous year and next year). I can make previous decade and next decade thing?
    – jitendragarg
    Commented May 11, 2016 at 11:56
  • Click on the link will change the dropdown values in place So, you want to put one link on top, one at the bottom? This could be easy to implement. The decade thing isn't a good solution. My strict recommendation stays at the scroll bar. The size should not be a problem as your current dropdown leaves space enough.
    – Clijsters
    Commented May 11, 2016 at 12:12

Your Answer

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

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