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've have a page with iss full form. What is the best practice to do this?

In the moment title is align to the top menu, with inputs textwith full widht of the page, and selectswith 50% centralized. I think that the inputs are to large, but, if I decrease the size, there's a lot of blank space in the right. Should I align the inputs with the top menu? The label for the inputs is on the left, should go to top? What is the best practice with this page with just form inputs?

enter image description here

share|improve this question
    
I'm not entirely clear what the question is, but in general, you don't want to arbitrarily stretch your form fields 'just to fill up the space'. The size should have some relevance to the content you expect people to input into it. –  DA01 Mar 7 at 20:31
add comment

2 Answers 2

Take a look at this article about web form usability: http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/

The choice of label alignment highly depends on the length of your form and whether your user should fill out all fields.

Typically for longer forms (5+ fields) where user should fill everything out, you want to place input label on top.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • This is the fastest layout to fill out
  • You want input sizes to be just large enough to accommodate majority of sensible input values. This makes it easier for the user to recognize whether you're looking a word, a phrase or paragraph of info.
  • Making all inputs the same width may look better for small forms (< 5 fields) but it can slow down the user for longer forms

When you have a form where user may be picking and choosing specific items to fill out, consider left aligning labels

mockup

download bmml source

  • User is slightly slower when using this layout, but the left aligned labels makes it easier for them to scan to find the particular item they are looking for
  • I like using this format for an "edit" form

Avoid right aligned form labels unless you really want the user to fill out the form slowly

  • For readers who read from left to right, right aligned labels form a ragged left edge that makes scanning difficult
  • Would recommend you avoid this unless you have a very very strong reason for right aligning your labels
share|improve this answer
add comment

I believe the best option will be to keep the length of all input fields the same, and on a grid, aligning them with the top menu, as you say.

Also, the blank space on the right shouldn't be a problem, as it helps in emphasizing the inputs anyway.

It anyway is a matter of choice and what improves usability.

Hope this helps.

share|improve this answer
add comment

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.