How do I align too much of information in minimum space?

Question

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

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

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.