Combining a variable size scrollable list, a fixed size scrollable form and a small fixed size non-scrollable form

Question

I'm trying to design a desktop app and I have an Entity that has three "sections" for its settings/parameters:

• a short section of 5 fields (text fields, checkboxes...) - probably doesn't need scrolling
• a list of variable size elements, the user can add, delete, edit those elements - usually needs scrolling
• a longer form section that has 20 fields - definitely needs scrolling

The desktop app has a side panel, and the content panel has a fixed header.

I'm struggling to find a way to present all of these options to the user in an elegant way. My thought process is that I shouldn't have any nested scrolling (because it's not user friendly, imo) so I can only think of three options:

• Multiple pages: you click a section and it takes you to a page. Since the header bar is always fixed, you'll always have a "back" button.
• Tabs: have a tab bar (either under the fixed header I already have or at the bottom) showing the three tabs, and changing the content to show the different "pages".
• Accordions: three collapsed sections and you can uncollapse one at a time. Drawback is that I don't have a scroll-to-the-top button (I simply don't know where to put it without covering the content) so to reach the other sections, you might have to scroll for a while or use the scrollbar...
• Some other option I don't know of

Out of the three, I'm leaning towards Tabs because I don't think they have any drawback and they can be changed later to be shown side by side on very large screens...

Any thoughts? Thanks!

---

Edit

Adding quick mockup drafts as requested in the comments

Initially, the naive way was to put the sections one after another, but this will have nested scrolls

Then next, I thought about Accordions, but they will have limited space and nested "card/panels" and those don't look very good...

Then maybe different pages, but then this page will be mostly empty

And then Tabs, on the top, a bit crowded

Finally, tabs on the bottom, seems fine, but maybe there is a yet better solution

Answer 1

I would use the dashboard page for simple navigation first, with three cards side by side. Every card with an icon on top, Small Title beneath it, and a small description underneath the title if necessary. Have a button at the bottom of each card to take the user to the respective form/page.

Make sure to keep the form simple with help-blocks beneath the ones that need some explanation. Also, keep the form nice and centered, with at least 20% padding on the right and left, because you don't want full widths forms.

Another idea is to show the form page in two columns. The actual form is in the left column, with a detailed explanation of the form in the right column.

• Do not try to juggle three different kinds of elements on one page, side by side horizontally or vertically. It might be a clever solution on your part but might end up very difficult for the user to understand and use. *

I have attached the navigation page example I explained above earlier.

Hope this helps. Imran

Answer 2

It looks like you are describing a stepper with each of the setup steps.

Similar to tabbed partition, but staying on the same screen and with the possibility of using different elements and scrollings in each step.

_{Example from Codepen}