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

User Experience Asked by Conor on December 2, 2020

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

One 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.

Answered by XTOTHEL on December 2, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP