0

I'm working on an app that allowed users to filter their photos based on time period. Between a dropdown and tabs, which one is best for the user?

Dropdown:

enter image description here

Tabs:

enter image description here

The advantage of using tabs is its less work for the user - in other words, they see all the available filters at once without having to click a dropdown. But my concern with this type of UI is that it might give the impression that it allows multiple selections when they can really only pick one time period at a time.

  • 1
    How frequently will users likely change the date range in a single session? Would they want to set it once, or toggle between multiple date views (such as when looking at analytics data)? – Izquierdo Jun 18 at 22:50
  • Thanks @StacyH. Unfortunately, we don't have any data from this functionality yet because it's a new feature that has yet yo be introduced. – Jan Jun 19 at 4:18
  • Just a comment about your options. "Older than a year" is inconsistent with the other values. The other options all include "now", as in "now - X days", where as older than a year doesn't. I would probably just call it "Last 12 months" and then let "Any time" handle when the user wants anything older than that. – musefan Jun 19 at 7:06
1

Note: This answer is based on the fact you don't have any user feedback at this time.

Go with the drop down filter, not the tabs.

As you have rightly said, the benefit of the tabs approach is easier for the user in that it turns a 2-click process, into a 1-click process.

However, this is only really going to be beneficial if the user is expected to change the filter often. I would anticipate that given the purpose of the filter, and the nature of the data (photos), this isn't going to be something the user does often. So saving a click isn't going to matter.

Therefore, we should look at the disadvantages of tabs. For example:

  • They can take up a big chunk of screen space, and with an application that is focused on showing lots of images, screen space is in high demand
  • They can imply multi-select (as you suggested). Although this can easily be nullified with a good design

I can't think of anymore right now, but the screen space is an important one in this instance. Especially when you consider mobile devices.

So when we compare the frequency of the user saving 1-click, with the extra screen space required by tabs, then the drop down easily wins here (unless usage data later proves otherwise).

| improve this answer | |
  • I agree with this answer. If you do see data later showing that users are toggling between views, you can use a Toggle Button pattern to imply that only one answer is selectable (see the toggle buttons above that say Active | Oldest | Votes. – Izquierdo Jun 19 at 15:49
0

Good question to go with. Also I am sure you have a good assumption and empathy towards the design decisions too. I agree to your statement on it takes 1 interaction more to filter from dropdowns. The second image is similar to a Chip that is designed and defined in Material Design System.

[https://material.io/components/chips#filter-chips]

Do take a look at this link it might be helpful.

I am unsure about using filter chips but do check if you can use choice chips(they serve single selection).

| improve this answer | |

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.