Problem statement: User is overwhelmed with the options in UI. UI is not intutive.

Current state for application: I'm working on a notification feature for ecommerce, where user can set notifications for individual product and globally.

If you refer to attached screen below; category 1,2,3 are the options who drives the values further ex:

  1. For category 1 (basic): Out of 30 options only first 5 will be selected.
  2. For category 2 (Advance): All the 30 options will be selected.
  3. For category 3(none) : None of the options are selectable.

I'm looking for intitutive option for layout. Also all the options (30) must be upfront to user for quick selection.

Challenge: Avilable realestate- The UI rendering into slider window(400 px width) which is similar to quick chat design pattern.

Goal: Intutive and simple UI enter image description here

  • 1
    Could you elaborate on what the 30 options are? A common way to make a UI with many items more accessible is to group the items into sublists. – wintvelt Oct 24 '16 at 10:44
  • Options are when a user want notification likea) when item is ready b) When item left for delivery c) if the new color, size etc is available c) Order on hold. b) Delivery date changed ... etc. App is for business users. Yes, i'm grouping information. – UXbychoice Oct 24 '16 at 11:49

The screenshot has been attached below.

  • Use an accordion to display the categories
  • Provide the top list items, most frequently used, most suggested options, most selected options, etc. on the top and place the options which are rarely used or never used at the bottom.
  • Clicking on “Show all”, shows all the options, but the view may have a scrollbar (depends on the viewport area) which cannot be avoided because of the page real estate and 30 items. Provide the search for searching the options, this is required if you are providing lots of options to select.

Finally, try to avoid too many options (30) if possible and group them appropriately for the easy scan.

enter image description here

| improve this answer | |
  • Good solution, but you should also have the option to "select all" checkboxes in the category – Big_Chair Oct 24 '16 at 12:16

it depends on what your case is....like if you have a list and if multiple items can be selected...keeping a list with 10 items per view and show how many items are selected..... if it is for a single item selection from 50+ items-this would not work..

please mention your case..so that we could understand more

| improve this answer | |
  • Sorry it is 30 not 50. I've updated the question. – UXbychoice Oct 24 '16 at 9:30

50 options with either checkbox or radio button will not work as it will cause decision fatigue. Strongly suggest to rework to divide the options into sub-categories to help users narrow down their decision.

| improve this answer | |
  • Sorry it is 30 not 50. I've updated the question. – UXbychoice Oct 24 '16 at 9:30

I think 50 options displayed with radio buttons are not ok with any design solution. I suggest you replace that section with a select (multi-select for checlboxes) and if the number is bigger than 50 option, try to divide the options.

| improve this answer | |
  • Apologies! I accidentatly used radio buttons insteed on checkboxes. but in the application they are checkbox. I'm updating the screenshot as well. – UXbychoice Oct 24 '16 at 7:39
  • It is ok. You can use a multi-select in this case. – Madalina Taina Oct 24 '16 at 8:51

Radio buttons can be replaced with dropdown lists when the options are too much. See if it can be replaced by dropdown lists.I've always found it convenient to replace radio buttons with drop down lists as it we can control the size of the list.

| improve this answer | |

Had a similar challenge few months back and the patterns that we found useful were accordions and tabs. They could be used separately or in combinations. accordions within tabs made sense more than the other way around. show more/less also would be classified as a kind of accordion.

However for mobile screens tabs were limited to 3 visible at the most, unless using horizontally scrollable tabs.

Accordions and tabs have been my work horses for organizing and aligning detail heavy infomation.

| improve this answer | |

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.