0

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 Issue with 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... accordions

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

And then Tabs, on the top, a bit crowded tabs on the top

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

2
  • 1
    hi @RationalFragile, welcome to ux.stackexchange. You could also add some screenshots of what options you have tried to describe the question better Jan 12 at 17:34
  • 1
    @harshikerfuffle Thanks, I added them :D Jan 12 at 19:10

2 Answers 2

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.

Make a simple navigation with help descriptions for the user

Hope this helps. Imran

1
  • I can't show these sections as cards because there isn't much data to display on each card... Take for example the small fixed height section, it has 5 fields. If I put it in a card it's the same as the second itself. Same for the variable height card; it's a list, and other than the number of items in that list, there is really nothing to put on the card ¯_(ツ)_/¯ If I misunderstood, maybe you can show me what you mean with an image? Jan 12 at 21:07
0

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.

stepper

Example from Codepen

2
  • Thanks. My sections don't have an inherit order; a user can edit any or none, in any order... But I think tabs are exactly like what you suggest, just without order and without a finish step. Jan 13 at 9:17
  • A stepper doesn't imply a specific order. The sample image is not customized for the question, it's just a generic one to show what's described in the answer.
    – Danielillo
    Jan 13 at 12:02

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.