Im currently working on displaying a chip/filter with a dropdown that could contain a small or a large amount of brands to select through checkboxes. The amount could vary between users (some might have 10 brands in the filters others 200). Which of the following options is feasible, or which is a NO NO?
Between the two options you provide - Option 2 is better than Option 1 because :
- 2-directional scanning vs 1-directional : It is easier for our eye to scan in one direction (y-axis) compared to 2 directions (x & y axis). So even though you can see more number of items in Option 1, you can find something quicker in Option 2.
- 2-directional clicking vs 1-directional : Since your options are check-boxes (which implies multiple clicks), it is easier to move along 1-axis. It increases precision.
- Alphabetic arrangement : One of the reasons option 1 would have worked better for discoverability of options is that you can see more options at once - but since your options are arranged alphabetically (which is best practice, unless some options are significantly more dominant than the rest), discoverability is easy.
But there is also an Option 3, which is used for a large number of options - Chunking of options. If some of the options are similar, they can be chunked together, and category headers. An example of this is Apple's System Preferences :
in your case, without seeing the actual products, i would say option 2 on the right. the way you have the letters displayed is much easier on your brain and eyes to process it. when you have the real products in option2, try to test for any possibilities for group them. it will minimize your scroll and most likely users wont's skip and of the products that are displayed towards the bottom.