1

So im currently developing a to-do list of sorts which can be filtered by category. Both category and profiles have an unknown number since users can add as many as they want. This means the categories will have to be horizontally scroll able when the user adds more than the screen space allows. I am struggling with what to do with the profiles, however, since the number of profiles also is unlimited and I don't want to put two horizontally scroll able rows on top of each other. The profiles are also more of a legend in that they aren't tappable, so making them horizontally scroll able may give the user the impression that they are tappable elements. Is there a way I can account for an infinite number of profiles within a finite amount of space?

I have considered an accordion/dropdown style, but I'm not sure if theres a better alternative. Heres a wireframe:

enter image description here

Improve this question

2 Answers 2

Reset to default
3

One option would be to make them tappable, and switch from using horizontal space to a vertical list showing the other members.

If it helps the user to know how many people are doing these tasks, you can indicate the overflow number with a badge that could bring a sliding panel showing the rest of the members.

enter image description here

You can also use the sliding drawer to accommodate your filters. Material design (2) uses a side sheet for this:

enter image description here

Let me know if I understand your use case here, and I'll update my answer as needed.

Improve this answer
3
  • 1
    I came to anser the same, you did it better and faster than me, haha
    – Devin
    Commented Mar 9, 2023 at 14:30
  • @Devin good to hear from you :)
    – Mike M
    Commented Mar 9, 2023 at 15:05
  • 1
    Yes this is very much the use case I needed! I like the idea of the sliding panel for the overflow items. I will consider using the slider to accommodate the rest of the features, but for now the first solution is exactly what I was looking for
    – Gene
    Commented Mar 9, 2023 at 17:04
0

Assignment is a filter. You already have filter bar. just add person selection there as a dropdown or popup window:

mockup

Improve this answer
1
  • Unfortunately, I don't think this would work because the filter categories (exercise and medication) can be customizable. So when there are 20 categories, the person selection would be pushed outside of the screen. Additionally, since the images are a legend and not a filter, it would not make sense to put them in a dropdown like this. The user might assume it is filtering by profile, which is not the case. The images are just there so the user knows the name associated with the image. Nothing else.
    – Gene
    Commented Mar 9, 2023 at 17:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.