I'm currently trying to make a user friendly date filter, where users can enter a custom date or select a date, e.g. Last Year or Last Fiscal Year etc.

I've tried looking for a design for similar requirements online, but haven't found anything so far.

See attached images of my 2 attempts at designing this date filter page (on the second design, I will use custom icons for each date section). Will this suffice or, how can I improve?

First Design Second Design

  • 1
    I think this is question is too open ended. Could you ask a more specific question? – Mayo Oct 14 '20 at 13:28
  • Is the range selection restricted? i.e. users have to select one of the following: a day, a week, a month, a quarter or a year? – Eric Chia Nov 12 '20 at 23:00
  • 1
    @EricChia yes, there is a set of values for the user to select from, see the first screenshot for the list of options. – ViqMontana Nov 13 '20 at 9:43

not sure if you’ll be comfortable with my answer but based on the information given in your question, you may like to explore sticking to 2 date pickers only (one for the from date and the other for the to date). Then build in an accelerator which will allow the system to produce the respective report depending on the length of time selection.

For instance, if the user picks a time frame of one year on the date pickers, an annual report is generated automatically. And if the user picks a time frame of one week on the same date pickers, the output changes to a weekly report.

By doing so the interface will be very clean it will only have 2 date pickers like the system in the image below.

image of a web page highlighting the 2 date pickers

However, there will be 2 concerns when adopting this approach. Firstly, you need to provide ample user feedback so that users know which reports are being triggered. Secondly, this approach removes constraints on date selection so you can expect more errors if the feedback is not adequately designed.

Edit 1:

If what you are asking is that users would have an option to "quick pick" the dates available, then you can consider using a combination of 2 date pickers plus a filter for the design. Copying the design from Google Calendar, you can use this. Plus a combination of 2 date pickers for custom date range.

Menu to select date range for users

  • 1
    I disagree with only having 2 date pickers. The reason for having many options such as Year, Month and Week is so that a user can quickly and easily select a date range, without selecting the exact dates in a date picker. – ViqMontana Nov 13 '20 at 10:29
  • Noted, I edited my answer please have a look if it's what you are looking for. If not, perhaps you can illustrate the question with one use case as an example. – Eric Chia Nov 14 '20 at 7:45

There are three things that – for me – seem to "not work" as well as they could in your first attempt:

  • Having the early headings ("Fiscal Year" through to "Week") directly above the buttons makes it seem "cluttered" to my eye. If you were to keep essentially the same layout, moving the buttons to the same line as the heading I think would be clearer:

                    +------------+  +----------------+
    Fiscal Year     | < Previous |  | < < Previous 2 |  etc.
                    +------------+  +----------------+
  • While I can understand why you've used the left-, right- and down-pointing arrows, to me their meaning is too much move to the previous/next item, and not enough select the previous/next period.

  • For the last two lines of the "Day" buttons, you switch from "the past on the left; future on the right" to having the past on one line and the future on another (and, arguably, the order of the buttons for the "Last nn Days" buttons is reversed).

With all that in mind, I've come up with the following. The aim was to keep left=past; right=future consistent, and to use button-size to indicate the depth of the past/future range.

enter image description here

Some notes:

  • Having both financial years/quarters and calendar years/quarters gives a slight "problem" as to the best order of their lines. My original attempt mirrored the order you had (year-month-year-month), but gives a slightly untidy "in-out-in-out" effect. Swapping the order of the two fiscal lines gives – I think – a slightly better outline, while keeping the two fiscal lines together and the two calendar lines together. The "cleanest" arrangement (from a visual perspective) would be to have both year lines first, then both quarter lines, at the possible complication of alternating fiscal-calendar-fiscal-calendar. Choose whichever works best for you.

  • The two "Last 2 Years" buttons slightly "get in the way" (as no other time unit has them). I felt that putting extra "year-long" buttons on the left for those lines only would "unbalance" the effect, so I "stole" some space from the "Last xxx Year" buttons.

  • Those buttons, and the "This Year" buttons have some ambiguity as to whether they refer to fiscal- or calendar-years. My feeling is that the surrounding buttons on those two rows are sufficient to pin-down which applies. If you feel more clarity is needed, you could widen the central column of buttons to accommodate "This Calendar Year" and "This Fiscal Year". Alternatively...

  • Partly for simplicity in creating the original mock-up, I chose not to use line-dividers and headers for the different categories of buttons. I think the result works sufficiently well without them, but also see how having dividers might help, especially to keep the fiscal/calendar rows apart (but I probably wouldn't have a divider between every row).

  • You may want to consider adding legends such as "FY19" (financial year 2019), or "Q3" (third [fiscal] quarter), as these seem to be common references, at least for fiscal periods. This idea could be extended to adding years and other details to the later buttons... but could easily lead to a case of trying to get "too much" information in, and losing clarity.

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.