3

My web app has a settings page.

It's pretty normal: some broad categories on the left, then pairs of option-name - option-value settings on the main right-hand section. Works OK.

However, on a full-size PC desktop screen like 1920x1080 or 2560x1440, there's a lot of empty space in the right-hand section.

Are there any ways to somehow make better use of the horizontal real estate?

Are there any examples of apps that have different designs for the settings-screen that work better in wide layouts?

We tried having the settings in two columns, moving the "HEADER 2" section to the right of the "HEADER 1" section. It works okay but i think not great for visually scanning to find things.

Improve this question
1
  • You have to limit the horizontal space taken up by the layout. Either you just stop the field stretching so far from the field, or you use a two-column layout. This can either use two columns inside the groups (header1 fields distributed over 2 columns, header2 fields likewise), or put the groups into different columns (all of header1 in first column, all of header2 fields in second column). Which of the three alternatives looks best depends on how many fields & groups you have.
    – virtualnobi
    Commented Oct 10, 2018 at 18:33

2 Answers 2

Reset to default
1

This scenario is pretty common and is solved by using a container block with a max-width equal to the width where all elements fit.

A perfect example is Bootstrap. You can use the .container-fluid class for full width layouts, but you can restrict the width (and center it) by using the .container class. And you don't need to create different designs, nowadays most sites are responsive and they simply adapt to the screen width.

btw, I'm mentioning Bootstrap as an example. As long as you set a max-width property to the containing elements you'll be fine using anything you feel useful for your purposes

Improve this answer
3
  • 2
    That restricts the settings area to not use some of the horizontal space. Instead, I'm looking for ideas about productively using that extra space.
    – mappu
    Commented Oct 5, 2018 at 0:16
  • @mappu I think it boils down to either add more columns or limit the container size. If you don't have so many elements perhaps your should consider limiting the container width, or the elements can be too far apart for good legibility.
    – Luciano
    Commented Oct 5, 2018 at 11:53
  • Obviously, I can only answer based on what you show and describe. Either way, I don't understand what would be "productively using that extra space" . Besides, white space is one of the basic rules of design and it aims to focus on the element and allows the user to quickly scan the page. There's a reason (well, hundreds of reasons) why most sites (including this one) restrict width. If you have a different scenario where you actually need that width for something, you should edit your question and explain it
    – Devin
    Commented Oct 5, 2018 at 17:53
1

Redesign the layout as below:

Use a two column layout. On right side, you can show your settings, maybe separated in sections as you already have with the "headers".
Now on the left side, you can describe these settings (section wise). Explain to the user what will happen if they change each setting.

That way your extra space is used productively.

in the attaching screenshot they are using white space for help information

Improve this answer
3
  • 2
    This is a good idea, but it should also be considered, how complex these settings are. If it's a simple setting but has a block of text explanation, the user might feel like he's being made fun of.
    – Big_Chair
    Commented Oct 5, 2018 at 9:49
  • we can't explain each and every settings fields, we choose complex field from the settings section and explain about that only. any how we need to consider about your point too while redesign the page.
    – B.Sadashiv
    Commented Oct 5, 2018 at 10:33
  • you should show the OP how this layout looks on 1920 or 2560px width, because that is where the problem is
    – Devin
    Commented Oct 5, 2018 at 17:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.