3

enter image description here

Take a look at the screenshot above. I found it here and it offers a handy pattern for what I need to do in my own app: show a lengthy list which should be easily filterable. The only issue is that I need to allow the user to select/deselect from a larger number of categories - 9 at present. The options I have considered

  • Using a dropdown for the purpose but it looses the intuitiveness and immediacy offered by a horizontal row of radio buttons.
  • replacing the text with icons would offer a mechanism to pack in a larger number of buttons but a good number of users would be left scratching their heads trying to figure out just what the icons mean
  • Using multiple rows of buttons which is liable to look clumsy

I should explain that the context for all of this is an Android app destined for phones rather than tablets and intended for use only in portrait mode so the width I have available to play with is rather limited.

I hope that someone here might be able to offer some suggestions.


Thank you for the suggestions. I should mention that the buttons I mention are more by way of being filters rather than tabs - they allow the user to drill down to a specific category of list items. I like the idea of a few items and then a "More" drop down. In the mean time I had done this

enter image description here

Clicking on the menu button, top left, shows this list of categories from which the user can elect to drill down. It lacks the immediacy of showing a few categories and then a More... dropdown so I might in fact do that in the end. However - not being a real designer or Material Design guy - I am curious to know how such an implementation (i.e. my current one) would go down with users in general and the design crowd in particular.

2

If I understand correctly, your buttons are Tabs. In Material design, these are the different solutions:

  • "More" dropdown menu

  • Overflow pagination

  • Scrollable tab bar

The last one is only meant for touch devices. The first two are meant for desktop, and although the last one is more appropriate, I think these could also be used.

0

You could use a scrollable tab bar, similar to https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp (but with better indication of being scrollable). That way people can still switch between adjacent/nearby categories in 1 tap.

However it might be simpler to use icons for tabs, depending on the subject matter and categorization.

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.