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?

Any suggestions/ ideas. Thanks in advance. 2 possible solutions edit- On desktop

  • Mobile or desktop? – Eric Stoltz Mar 17 '17 at 18:06
  • Will the dropdown have duplicate options, as suggested in your mockups? – Vince Bowdren Mar 20 '17 at 10:55
  • @Vince The duplicated options is just to showcase the direction of order (alphabetically) on the example. – christianmo Mar 21 '17 at 16:54

Between the two options you provide - Option 2 is better than Option 1 because :

  1. 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. 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.
  3. 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 :

enter image description here

  • Thanks for the response, I totally understand the 3rd option, but I don't think I can apply this solution to the GUI. I also agree that the (1 column option) is "userfriendlier", just can't show that many results... Thanks for the quick response @Safinah – christianmo Mar 20 '17 at 8:33

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.


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.