Really long list inside a modal-- fix the height of the list and make it scrollable?

Question

I have a modal with some options that are selectable. It's currently longer than the screen. You can of course still scroll the full screen.

Should we make the list a smaller fixed height and the list scrollable?

Does either or work better on mobile?

Answer 1

Yes - your idea sounds well. Scroll.

I'm not sure if the practice of placing such a list in the modal is appropriate.

Maybe the product search system should be redesigned and minimized to the minimum necessary for the user?

Also looking at the elements in the list - maybe someone should create them an architecture of the category - using the Card Sorting method (for example). I mean there are a lot items, which can be categorizing into energy (energy storage(...), - whereas in the energy category there may be a battery sub-category(II level) (battery chargers, battery accessories(...).

This approach give a lot gives many possible affordances in long term after implementation (filtering - sorting by category etc.)

Answer 2

I agree with the scrolling as well. I would also highly suggest putting the list in alphabetical order and adding a search to if not search through the content of the categories, search through the headers.

Answer 3

If your popup contains so much content that the User needs to scroll: popup was a poor choice for hosting that content. To display the modal on top of main content you sacrifice valuable screen real estate that would be better used for the display of the large amount of information, it also makes it slightly harder to read and access the list.

I suggest you make the modal full-screen and treat it as a screen of its own. Perhaps a wizard flow would suit better?

The interface prompts the user to select multiple products however the list looks like one whereby the User can navigate to a single product. Checkboxes or another means of multi-selection would be more appropriate. You may also want to distinguish close from cancel vs save (e.g. Done/Discard pattern).

Answer 4

I think the main problem is not scrolling page vs modal, there are two other issues which are more important:

Make the content more accessible:

• reduce number of entries (e.g., do you really know that your users can distinguish all the "inverter" options?)
• sort entries (if your users know the options so well, the don't want to scan through the entire list, but rather know that "M" starts somewhere in the middle)
• make the list searchable (e.g., add a search input field at the top)

Make the design unambiguous:

• What is the difference between the "X" and "Close" buttons? Use only one, or clarify their difference (and place them near each other).
• Is this a selection (as indicated by title) or a navigation (as indicated by the line-end chevron icons)?

If it's a navigation already (i.e., if the selectable options are on the next screen, you may think about adding more hierarchy levels (as proposed by Piotr already), but then you should reduce the number of categories to at most 10 per level.

If it's (single) selection, remove the chevron. (Multiple selection requires a selected state on the rows [by checkbox or background color] and a "Select" button at the bottom.)

If you combine search and hierarchy, make sure the search works across hierarchy levels, i.e., list all categories where the search finds matching options.