2

I am looking for a better way of designing settings page, where users can define which layout preset they want to use based on their screen size.

Use case 1: I started session on a 27" desktop and then switched to 13" laptop - I want my layout to fit my device without the need of manually changing it for each device.

Use case 2: I use laptop with 13" size, but then I connect it to a 27" monitor, so I have same device, but larger screen - I want my layout to fit this new large screen.

What I came up with is that user need to specify screen size ranges and then add preferred layouts within each range, but I am not sure if that's easy enough and maybe there are better ways of displaying that.

My take: enter image description here

--- Update --- Another idea: enter image description here

Improve this question
4
  • use responsive design and teh design will adapt to teh screen
    – Devin
    Commented Oct 26, 2023 at 18:46
  • this doesn't work since the application is very complex and users can modify the amount, size and arrangement of widgets on their screen, so instead of trying to guess how they want their layout to look like on other screen sizes, we give them control over it. For example on large screen you might want to see all possible widgets (around 20), but on a laptop you only want 5 most important widgets visible.
    – Romqa Ivanov
    Commented Oct 27, 2023 at 6:10
  • 1
    With the little information given it seems advisable to keep the implementation simple and don't put too much effort in it. Then monitor if and how users are using this and improve from there.
    – jazZRo
    Commented Oct 27, 2023 at 12:53
  • @jazZRo Indeed, it is a first implementation of this feature, so it makes more sense to keep it simple :)
    – Romqa Ivanov
    Commented Oct 27, 2023 at 15:47

1 Answer 1

Reset to default
0

I think there are a few things to consider when offering users the option to choose multiple layouts based on screen size:

  1. Most people (unless they are geeks) don't want to bother with configuring settings. They want the default layout to simply work out-of-the-box for most situations. This means that your default layout must be good enough to cover most cases (let's say 80-90% of cases).

  2. When people do want to make tweaks, they don't want to put mental effort into deciding which breakpoints to choose. People prefer to have a small list of options carefully selected for them. This means that is your responsibility to determine which breakpoints are the right ones.

  3. Most people (unless they are geeks) don't like math. They don't want to measure breakpoints. They want simple and intuitive options to choose from (like mobile, tablet, laptop, desktop). This means that you should create an abstraction over the breakpoints and adjust the layout based on how users perceive the device. If it's a phone, it should look good on a phone. If it's a desktop, it should look good on desktop, without knowing the exact resolution.

  4. Nowadays, especially with new AI tools, people expect to use a service and let that service to do the work for them. It's not enough to give them the possibility to customize the layout, your system must do most of the work and let the users just give a small feedback at the end (whether they like the result or not). This is especially important if people are also paying for the service, because they are paying for someone else to do the work for them.

That being said, I think it's better that you create a default responsive layout, make it as good as possible and then see if you need other variations for special scenarios. And only after that, let the users choose if they meet those special scenarios and need a different out-of-the-box layout.

Improve this answer

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.