I have a Label and a Textbox next to it. I am trying to find out which layout is the best for usability?
Right-Aligned Labels
Left-Alignment Labels
asked Sep 8, 2017 at 8:47
Add a comment
|
2 Answers
It depends.
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:
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:
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.
-
1
-
1Given most screens these days are wider than high, and horizontal elements like menu bars, URL bars, window title bars and docks/task bars take up additional permanent vertical screen space, top labels might not be an option for longer forms, though. Sep 8, 2017 at 13:18
-
1An issue with left-alignment that is only mentioned in passing that I'd like to emphasize: it's easy to lose your line when your eye "jumps the gap" between label and field. Sep 8, 2017 at 13:19
-
5"Given most screens these days are wider than high", I'd imagine that a lot of users on mobile devices will use their devices in portrait mode the majority of the time so I don't think this statement is accurate. It would depend on the target users of the application.– RobbGSep 8, 2017 at 13:53
-
1A potential problem with top aligned labels is when multiple form controls are stacked too closely on top of one another. If using this layout it's important to leave enough vertical space between stacked "rows" such that the labels are clearly associated with the controls above them and not those below them. Sep 8, 2017 at 14:24
Or you could put the label above the input.
Why?
- proximity, so it is easier to associate label/input.
- faster processing
- improves readability
Only disadvantage would be you would get a bit longer forms, but everybody scrolls. http://www.hugeinc.com/ideas/perspective/everybody-scrolls
-
1Just because everyone scrolls, doesn't mean it makes the form easier to complete. Top labels effectively double the visual length of the form, and that can be very off-putting to users.– JonW ♦Sep 26, 2017 at 10:49
-
@JonW if the form is really long, there are other problems, like too many input fields. Break up the form into multiple steps (wizard) or progressively show the fields.– robertSep 27, 2017 at 8:37
-
Well you sort of illustrate my point really; there is no 'one solution for all'. Each form is different and would require a specific solution. For instance, if it's a form where you have to keep going back to make edits then top-field labels make it much harder to scan to find the relevant field– JonW ♦Sep 27, 2017 at 10:02