4

I'm developing a web application that already use a responsive design(bootstrap) and play well within any small resolution. But that's common that nowadays desktop screens go up to 1920px wide, and they are our main audience for now (it's a web app for IT professionals).

Most of our pages are forms that have some logical order of input and we are going to prefer a top-down reading and distribute they vertically. So, there's the problem, we need to use more height than width, leaving even more unused space in the screen.

The product owners already complained about the blank space on the left but it seems that distributing the form fields horizontally isn't a option as you can see in my draft below:

Draft with the two approaches for form content distribution

The scale in this draft isn't much right, a 1920px wide screen leave much more blank space on the left, making inputs far away from each other in the 2nd approach.

TL;DR

I need to choose between leave a blank space on wide screens or leave related inputs far away from each other. IMHO the #1 approach (see the pic) it's better, but I would be glad if your guys point out if it's truly the best solution, so I can convince the product owners that is better this way or another.

EDIT

Based on the DA01's answer I've updated my draft following his considerations.

Improved draft

About centering the content, I think this could conflict with the sidebar concept so I modified it's behavior. Before, the sidebar could be toggled from a button and the screen corner(swipe), now it's just getting hidden on small devices and the button for toggle appears on the screen as well the swipe gesture get's enabled.

It's much more cleaner now, but I'm not sure what's the ideal sidebar behavior for this setup...

Improve this question
2
  • What did you use to make those wireframes?
    – Robbie Wxyz
    Apr 4, 2014 at 0:52
  • @SuperScript Search for 'moqups', it's very simple and online :)
    – cvsguimaraes
    Apr 4, 2014 at 0:56

2 Answers 2

Reset to default
10

Clients that complain about 'all the extra space' are usually looking at things from a visual design layout standpoint rather than UX/usability standpoint as if they were printing out the site and hanging it above their fireplace as a work of art.

Yes, if you stretch your browser to 1920...a LOT of web sites will have lots of blank space. That doesn't change the usability of the site, and purposefully and arbitrarily stretching things to 1920 will usually make things worse from a UX/Usability POV.

In fact, rarely will you want your site to stretch beyond 900-1100 or so. Beyond that, the aspect ratio begins to get rather ridiculous and text line lengths become unreadable. People work mainly top-to-bottom when it comes to forms so you likely want to keep your forms layouts more vertical than horizontal.

The common 'fix' for this type of complaint it to:

  • set a max-width on the content area
  • center the content area
  • put some 'pretty pattern/color' behind the content area.

This will result in a nicely centered 'site' on top of non-literally-white space.

Improve this answer
2
  • Thanks. I've updated my question, if you don't mind I would be glad to hear your considerations about it.
    – cvsguimaraes
    Apr 1, 2014 at 6:58
  • If I understand your update, I think it's a responsive layout...which makes perfect sense to me.
    – DA01
    Apr 1, 2014 at 16:12
1

If you avoid borders in the form and use the same background color as the body it ll look visually better.

Limiting spaces with borders is required when content needs segregation. The form area doesn't need segregation here as there is nothing to be segregated from. The borders are just adding to the noise in my opinion. Also the vertical lines are ensuring it is not lost / floating in the page.

Improve this answer
4
  • 1
    Will it really? Why do you say this? Won't everything just get lost floating around without any borders? I think we need more explanation here from you as to what you're referring to and why it will be better.
    – JonW ♦
    Apr 1, 2014 at 14:26
  • 1
    Yeah, some more explanation is welcome, but I got your point... delimiting the form space with borders will make the blank space more 'explicit'. I'll consider that, thanks!
    – cvsguimaraes
    Apr 1, 2014 at 14:40
  • Limiting spaces with borders is required when content needs segregation. The form area doesn't need segregation here as there is nothing to be segregated from. The borders are just adding to the noise in my opinion. Also the vertical lines are ensuring it is not lost / floating in the page.
    – user46083
    Apr 1, 2014 at 14:57
  • While I agree that borders are usually superfluous (Chart Junk) I think we're looking at wireframes rather than visual comps. Wireframes tend to be boxy by design.
    – DA01
    Apr 1, 2014 at 16:50

Your Answer

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

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