The Lounge is rated Safe For Work. If you're about to post something inappropriate for a shared office environment, then don't post it. No ads, no abuse, and no programming questions. Trolling, (political, climate, religious or whatever) will result in your account being removed.
Personally I prefer left adjustement and to make it more attractive visualized something like this (where "......" should be as discreet as possible, can be. e.g. a slightly different colored background for the labels):
label............. [editbox] label............. [editbox]
Another label..... [editbox] Fourth label...... [editbox]
Btw: I'don't know about any design guid about this.
It does not solve my Problem, but it answers my question
Depends on how much the label sizes differ. Small differences, left adjusted, large differences right adjusted.
I can't remember at what difference one swaps between them but it's a balance between readability and actually seeing which label belongs to which box.
With two lines, it doesn't make that much difference; there is no (visual) doubt which label goes to which edit field. If each column has ten or twelve entries, especially if the longest entry is at the top or bottom, it could be essential. In multi-language applications, you cannot make any assumptions about which entry is longer.
Yet I must admit that in one of my applications, I did reorganize the entries so that all the fields with short labels was placed in one column, the long ones in the other, to save screen real estate. That was an internal tool never to be used outside the company and never to be translated to other languages.
I realize how prejudiced one gets from how the question is phrased though.
If I can put the controls in a left side menu I usually stack the labels above the controls. It depends on how many controls there are of course.
I was beginning to think I was the only one who thought right justification of labels was correct. But I am biased, that is how they have been aligned on documents as far back as I can remember. The colons should line up and the entry starts one space to the right of the colon.
In other words; the label is right justified in its field and the associated information is left justified in its field.
It is the cleanest and easiest way to present and read forms that I know of.
"Program testing can be used to show the presence of bugs, but never to show their absence." - Edsger Dijkstra
"I have never been lost, but I will admit to being confused for several weeks. " - Daniel Boone
Option 2, then there is no ambiguity as to the relationship between the label and the edit control. Although adding filler dots and left align may eliminate the issue.
However the web UI design gurus the bank hired had another solution - triple the size of the font and add enough white space to drive a truck through has the same segregation effect. Of course they had no problem with the user having to scroll down 15 times to fill a form.
Never underestimate the power of human stupidity -
I'm old. I know stuff - JSOP
bit late to the party
but I wouldn't write off right justifying the labels (nearer to the input fields)
If your form has translatable labels then what looks good in English may look odd or even become hard to use in say Chinese where 2 or 3 English words becomes just 2 or 3 Chinese characters
Some Long Label........: [blah ]
short .................: [bleh ]
Some Even Longer Label.: [ 77.5]
xyx....................: [blah ]
jk ....................: [bleh ]
abc....................: [ 77.5]
imagine a really long form, even using the dots to 'align for the users eyes' it gets harder and harder to relate the labels to the input fields. right justifying solves that. (Solution usually to blow out the white space, more distinct shading..., fine for once-in-a-while forms but for one example accountants don't like it, they always want as much info in sight as possible.)
pestilence [ pes-tl-uh ns ] noun
1. a deadly or virulent epidemic disease. especially bubonic plague.
2. something that is considered harmful, destructive, or evil. Synonyms: pest, plague, CCP
I go for the modified first option when adding a helping element to fill the gaps. Like 0x01AA or Lopatir said.
And if the elements get so long that even with the helping dots / alternating light background is difficult to order, I wouldn't right assign the labels. I would put the input boxes first, and then the labels on the right side but still left aligned after the input fields, so that the different lengths become less relevant.
If something has a solution... Why do we have to worry about?. If it has no solution... For what reason do we have to worry about?
Help me to understand what I'm saying, and I'll explain it better to you
Rating helpful answers is nice, but saying thanks can be even nicer.
Anyway, if I'd go for a design such as yours, which I also still do, I'd go for your first option.
If I have some very long label I try to shorten it somehow or give that control its own line, possibly with the label above it.
If you're thinking about responsive design you could start out like your first option and when the window becomes to small switch to my first suggestion here.
The text fields can be longer, the textboxes can be any size as appropriate, one per line or multiple textboxes as needed and the eye naturally connects the text with the box. You can (usually) put more content on a window without it looking crowded.
[And tab order and all that, but I know we're talking to Marc.]
Go the Microsoft way, make it a setting.
(To go full Microsoft: in a half-hidden setting menu with an unintuitive name, after several years of users complains, only for labels not containing figures, and with the option labels "right-justified" and "not right-justified", the former being random between centered to left-justified).