I am going to display a small view in my application that contains contents to be picked. The contents are sorted in an undetermined quantity of categories.

Would it be preferred to sort them in different tabs, or have a choice box / select to choose from them? (The different controls just have placeholder names in this examples.)

Images: Choice Box/Select; Tabs; Tabs with expanded overflow

choice box

tabs tabs dropdown

  • Would you be having a drop down list on the tabs implementation like it is visible in the screenshot? – rk. May 1 '13 at 13:25
  • This are just the two different implementations of selecting the content of the view I think of using, the drop down list would substitute the tabs. – Appleshell May 1 '13 at 13:28
  • @3nafish Thanks for pointing that out. The tabs option sure is not thought to be used in such a limited horizontal space. But I am afraid the user does not immediately recognize that the dropdown is used to select the contents. – Appleshell May 1 '13 at 13:38

Use tabs if both of these are true:

  • the list is always only going to be short (say 3 items long)
  • the typical user will regularly switch between options

Use a dropdown if any of these are true:

  • the list is either long or is likely to need more options in the future. Tabs simply don't work when you have many tabs to show at the same time and not a lot of space.
  • the typical user will rarely change options, and so there is no need to switch quickly between them.
  • Well, it's a bit mixed in this case. It's not always short and the horizontal space is limited, but the user WILL regularly switch between them. Also, the little arrow on the side of the tabs pops up a small dropdown int this implementation, too. (See the edit to the question.) – Appleshell May 1 '13 at 13:43
  • If it's not always short, then you should use the dropdown. Note that the first list on tabs says "if both are true" and for a dropdown it says "if any of these are true" – JohnGB May 1 '13 at 14:03

In your tab design you are hacking in a drop down menu due to space constraint. Why not be consistent and use a drop down for the entire thing.

Also, drop down menus have good integration in the OS (atleast iOS does it, where they pop-up the menu options from the footer ) making the interaction not so clunky. It gives you a comfortable target area compared to a tab on a mobile device.

enter image description here

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