I have a
Label and a
Textbox next to it. I am trying to find out which layout is the best for usability?
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
LukeW has covered this in his book Web Form Design. It's not a new book, but covers most of the common web form problems.
Each has an advantage/disadvantage:
Right-aligned are a bit slower to complete but require less vertical screen space. They do, however, have flexibility issues when the labels change widths. When localizing applications, it is important to note that languages like German or French can be twice as long as English. Right-aligned labels also don't work well when people need to scan a set of labels to see what is required as a left rag text impedes readability.
Left-aligned forms are the slowest of the three to complete because of the number of eye fixations they require to parse. However, for forms with lots of optional fields or unfamiliar data (like preferences dialogs or advanced settings), they allow users to effectively scan labels. In fact, if you want users to slow down and consider each input in a form more carefully, left-aligned labels are a good way to go.
And top-aligned: (have you considered this option?)
Top-aligned labels tend to reduce completion times (how long it takes to complete a form) the most for familiar data (i.e. address, credit card, etc.) because they only require a single eye fixation to take in both input label & field. Top-aligned labels also work well for forms that require localization or long labels as there is plenty of horizontal real estate to expand/contract the label without negatively impacting the overall page layout. Top-aligned labels, however, do take up a lot of vertical real estate.
Nielsen Norman Group has a preference towards top aligned labels
We recommend placing field labels above the corresponding text fields. Although this increases the form's overall length, it makes the form easier to scan, because users can see the text field in the same fixation as the label. Top placement also allows for longer field labels, as horizontal space isn't an issue.
Or you could put the label above the input.
Only disadvantage would be you would get a bit longer forms, but everybody scrolls. http://www.hugeinc.com/ideas/perspective/everybody-scrolls