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!

enter image description here

  • I'm curious if @Conor ever solved this problem. My first thought was to use vertical tabs instead of horizontal. Also that users should be given a clear indicator of what "phase" they are in, so they know what to do now and what will be done next. Rather than any kind of UI that lets you choose any phase, it should auto-advance to the next phase after the user has completed the current phase. – Tim Holt Mar 29 at 17:07

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.

  • Thanks @xtothel, I appreciate the answer, will look into testing this out! – Conor Sep 11 '18 at 14:19

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.