Responsive UI Pattern for selecting from a list of exact values greater than 5?

Question

I'm designing a page where users should be able to sort between exercise videos categorized by "phase." (see image). These phases start with "Pre-Op" then proceed linearly 1, 2, 3, etc. Since these phases can exceed 4 or 5, i'm hesitant to make a tab ui because of tricky mobile usability. And I don't want to use a slider ui because the "pre-op" phase is distinct from the other numeric values which complicates things, plus our users are generally very old and tend to only understand very simple interactions.

Any ideas for an optimal UI pattern here? Is a dropdown a necessary evil?

Would really appreciate any feedback or insight you might have, thanks!

XTOTHEL · Answer

From what I understand, you're essentially creating UI for a filtering functionality.

In this case, your filter is really only based on one criterion, the "phase".

I think using a select menu here is correct. I'd recommend something like:

Filter by phase: [select phase] [filter button]

Also, don't forget about letting users clear the filter to view the whole list.

Responsive UI Pattern for selecting from a list of exact values greater than 5?

One Answer

Add your own answers!

Ask a Question