How do you align information in a layout with a lot of horizonal space?

Question

I am building a profile page for a web app with a fixed layout with a width 985px (essentially to fit a maximized browser window on a 1024 x 768 monitor).

I currently have a problem where there is too much horizontal space in the "extended profile information page" and I am looking for a way to make the content look cohesive and "together:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Currently, the information is in a table with the labels right aligned and bolded. As can be seen, there is a lot of horizontal space and the alignment of the table makes the page look out of place and not cohesive.

I have looked at the various layout and formatting questions here, but still haven't found anything that applys to aligning things in a page with a lot of horizontal space.

How can I align the table of information so that everything feels cohesive and "together" without overwhelming and losing the user?

Answer 1

In general, anything that spans all the way across a screen is difficult for users to read. I'm not entirely sure if I understand the content you will have on this page, but assuming that what is shown would be all of the content, I would recommend making the profile box into a left sidebar and aligning the "about" text in the remaining 2/3rds (or so) of the screen, like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}

This would also allow more room for longer "about" info, since yours would clip longer text and force users to scroll.

If there would not be enough content to fill a layout like this, then maybe you could use your layout but in a skinnier page with wider side margins, which would make it look better proportionally. Of course, this would not be a solution if there are other pages to this site that would with the wider layout.

Answer 2

Your question is very specific, so, the answer is also very specific, although it has many variants.

Your presented option is good, you can increase the font size a bit, but is good, clear and doesn't distract the user with non related extras. Plus if you keep the content close, then the white space is just space, but doesn't look bad.

You can use a schema of title and content, like the one showed by sacohe. But if you keep the same layout you have now, then there could be too much space and the feeling of a wasted page.

With the content you have so far, if you don't want to do big changes, you can move the text a bit lower, and the link to the bottom left of the visible area. If you change the text from "back to ..." to "Activity summary", you can move the link to the bottom right, and use it as closure for the process of the page.

But considering little changes that you can do, there are also a few options.

If at that point you already have a picture from the user, you can place it on the right or left side, with some padding plus the user name below. And move the text to the other side. Then you can keep your actual text layout, but the one with title and contents works very well. You still keep the "important information" on top.

In any layout you decide, you can use part of the space to show some help text to the user about each field or the one that's active at the moment.