Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

mockup

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?

share|improve this question
    
What is the content of "important information ..."? –  PatomaS Oct 22 '12 at 0:55
1  
@PatomaS: The important information are just things like the name of the user and main contact email + phone number (essentially things you most likely will need if you are viewing the profile). –  F21 Oct 22 '12 at 1:11
    
ok, so it's not much space used also, but the design of that area may affect the overall. In any case, if it's not very high, the answers posted so far would still be accurate. –  PatomaS Oct 22 '12 at 1:15
    
Why do you not center it? –  JOG Oct 22 '12 at 6:14
    
@JOG: I tried doing that, but there are just too many "alignment points" which makes the whole thing looks very unorganized. Result is similiar to the form in this question: ux.stackexchange.com/questions/16465/… –  F21 Oct 22 '12 at 6:44

2 Answers 2

up vote 1 down vote accepted

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:

mockup

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.

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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