3

I'm working on an application that allows you to filter your files by month and year. This is what I have so far.

As you can see, the "Apply" button is disabled if fields are empty:

enter image description here

But once the user fills them out, the "Apply" button gets enabled, and a "Clear" button appears so they can clear the form:

enter image description here

  • What do you think of this approach?
  • Is the year text field clear or do I need to label it yyyy?
  • If Month were a label outside the dropdown, what would be its default? "Select month"?
1

The biggest thing is that "Clear" shouldn't appear out of nowhere and stretch the other elements. At first, I'll wonder whether I can easily clear these fields or not. And once I enter some data, in the best case, I'll be disoriented as my targets shift. In the worst case, I'll misclick "Apply" when I meant to click "Year". Instead, it should always be present, but disabled when not available.

The word "Year" is clear without it needing to be "yyyy". But if you're concerned about people entering well-formed years, I personally prefer a number field, i.e. a spinner with arrows in usual browser implementations. Some people prefer a dropdown, but that's only practical if you have a few finite years (although plenty of websites ignore this fact and make you scroll through 100 years to choose your birthday...). Another advantage is that you can populate them by analyzing the data; in the case of a dropdown, that also serves as a visual cue to the person of that analysis and what's available.

If you want labels outside the fields, just "Month" and "Year" are fine. Also, if you do so, you could begin the fields on (current month) (current year), or "Any", or a specific value logical for your data.

Here is a pen you could fiddle with that has these ideas.

| improve this answer | |
  • Thanks for your reply! What did you mean by "stretch the other elements"? – Jan Jun 16 at 17:55
  • Whoops, more specifically "compress"! To my mind any changing of dimensions out of proportion is stretching. The way the clear button make the other fields and button smaller when it appears. Unless that's a visual artefact of your screenshot size, now that I look closer... But even if they don't change size, I think it's still a downside to have functionality be hidden rather than visible but disabled. – Luke Sawczak Jun 16 at 18:43
0

I know that I may sound dumb for saying this, and I know that you didn't exactly ask, but another part of date filters that always bothers me is when the month index is omitted from the input.

Everytime I fill out a credit card form that just lists the name of the month I have map the month number on my card to the month name. It's a minor inconvenience, and saves only seconds, but when a form input has something like "07 July", I breathe a small sigh of relief because I know I don't have to look like an idiot while counting months on my fingers.

I suppose this mainly applies to month select inputs as you have in your question. If these were text inputs, we would probably have to just type the 2 digit month index. However, with that, I'd probably double check myself anyway and do the inverse of the mapping I said above.

| improve this answer | |
  • Oh I see what you're saying. Yes, that makes sense. It doesn't particularly apply to this use case since this doesn't pertain to payments, but I do get what you mean. That's something good to note about because I myself have to do manual counting in a situation like that. – Jan Jun 17 at 16:32

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.