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!
Adding quick mockup drafts as requested in the comments