2

I'm working on an application that allows users to sort their photos.

Please note that in the mean time, we hit a technical hurdle where an actual calendar is not possible to implement for an MVP. But for now, we'd still at least like the user to be able to input custom time periods, but limited to month and year only.

In addition, we offer other preset date ranges like - Any time, Last 7 days, Last 30 days, etc. When one is selected, it applies the filter immediately. There is no confirmation button.

How should the "Custom" option behave?

(A) When "Custom" is selected, a dialog box appears right below it that allows the user to input custom month and year. When they click "Apply", the dropdown value changes to their custom selection, and the filter is applied.

This works very similarly to Gmail filtering, just that Gmail has a full calendar date range instead of just month/year filters.

enter image description here

B. When "Custom" is selected, the month/year fields show up right next to it. User selects a month/year, clicks "Apply", then the filter get applied.

enter image description here

Both are pretty much functionally the same except for the presence of the dialog box in (A).

My concern about (B) is that since the rest of the filters get applied immediately, "Custom" will be the only one that has a button that's within the same hierarchy. So while it's functionally the same as (A), the hierarchy of it all feels incorrect.

7
  • Do you have any concerns about A?
    – Mike M
    Jun 20 '20 at 19:02
  • @MikeM - No. I was just trying to see if there are other options to explore that doesn't involve a dialog box.
    – Beans
    Jun 20 '20 at 20:34
  • I've updated my answer in terms of trying to keep everything in one control
    – Mike M
    Jun 20 '20 at 22:21
  • Thanks MikeM. Did you find other issues with option (B) in addition to it resulting in clutter?
    – Beans
    Jun 21 '20 at 0:54
  • Note that you should probably make it clear whether the filter is for all photos taken that month, or that month or later. Jun 22 '20 at 0:46
5

Since space in full screen applications is often an issue, choice A seems to work fine. A dialog is temporal, and won't add clutter to the UI.

'Custom' implies more UI/interaction

You can also use a UI hint that custom... will bring up an additional dialog if you have concerns about surprise.

In addition, we offer other preset date ranges like - Any time, Last 7 days, Last 30 days, etc. When one is selected, it applies the filter immediately. There is no confirmation button.

It's a common pattern for Custom... to imply a further interaction. That's because 'Custom' is a call to action to add values outside of the system defaults. Nothing will apply until the values have been inputted.

File command menus: One way to suggest a prompt is standard in menus: Here's one from Balsamiq... enter image description here

In your mock, since the dialog appears directly under the menu, users don't have to move their attention.

If you want to further hint that there's a different interaction, you can also add a border or some similar design device...

enter image description here

Another option: A choice that reveals custom inputs, but keeps one control.

After rereading your question, you could also keep the differentiation at the bottom of the menu, and selecting custom can reveal inputs for month and year.

enter image description here

NOTE: Once you offer more granular customization, you can have a visible calendar month (or 2) to the side that can be manipulated directly. The main thing is that this becomes more powerful than a simple dropdown, but retains all functionality in a single widget.

2
  • Thanks for your response. With (B), in terms of hierarchy, do you think there's an issue with it? It's progressive disclosure, but it being the only single option in the dropdown that requires a confirmation button in the same level/hierarchy seems incorrect?
    – Beans
    Jun 20 '20 at 20:30
  • I think users understand that if you say 'custom', they will have to extend the interaction in some way to apply their desired values. This applies to either option. (B) feels separated, both in pixel space and orientation (horizontal, as opposed to a vertical list). That's the reason for attempting to blend the interaction into one widget, as I've put above. Once you have more flexible custom dates, and even go down to a small specific range (say, 1 week but 6 months ago), you can have a calendar widget added for more ways of inputting data. It scales.
    – Mike M
    Jun 21 '20 at 13:28

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.