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

  • I have edited my answer with a quick draft of a scrollbar. I don't think there is a size problem. – Clijsters May 11 '16 at 12:22
  • What about using a 'spinner' control that is basically the scollbar but without the bars? – Michael Lai May 11 '16 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 May 12 '16 at 3:09
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

  • 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 May 11 '16 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 May 11 '16 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 May 11 '16 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 May 11 '16 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 May 11 '16 at 12:12

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.