|
|
Cool. Though I wouldn't say "definitive" as there are pros and cons to each! 
|
|
|
|
|
Jakob Nielsen wrote an article that also gave rules of thumb on when to use which position (amongst other) but I cannot seem to find it at the moment.
|
|
|
|
|
|
CPallini wrote: The second one.
Don't you mean
The second one.
Social Media - A platform that makes it easier for the crazies to find each other.
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|
It took me a while  
|
|
|
|
|
Wow!
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.
INTP
"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 -
RAH
I'm old. I know stuff - JSOP
|
|
|
|
|
Marc Clifton wrote: Is there a UI design guideline for this?
Indeed there is. It's the unwritten Ferengi rule of acquisition: When no appropriate Rule applies, make one up!
I have lived with several Zen masters - all of them were cats.
His last invention was an evil Lasagna. It didn't kill anyone, and it actually tasted pretty good.
|
|
|
|
|
Right justified.
I feel that the UI element and its label should be close to each other. Otherwise, there's scope for confusion.
|
|
|
|
|
|
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.)
just saying
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.
M.D.V. 
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.
|
|
|
|
|
label
[editbox]
Another label
[editbox]
label
[editbox]
Fourth label
[editbox] That's the default in new ASP.NET Core projects.
They also have some stuff like this.
[button][another button] Where I'd prefer:
[ button ][another button] It's especially annoying when the buttons aren't next to each other, but under each oher.
[button]
[another button]
[ button ]
[another button] 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.
|
|
|
|
|
Yeah I agree ... what Sander said.
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.]
I'm retired. There's a nap for that...
- Harvey
|
|
|
|
|
I would want to know the usability context that requires two rows. Are there any constraints on label content, or what the user can do in the textboxes ?
«One day it will have to be officially admitted that what we have christened reality is an even greater illusion than the world of dreams.» Salvador Dali
|
|
|
|
|
Or re-word the labels so they're all the same width.
|
|
|
|
|
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).
|
|
|
|
|
Reports have the average age of deaths by COVID-19 at age 80. Logic then says to live longer than life expectancy, (~70), get the virus. On average, you'll die at a later age.
 
Social Media - A platform that makes it easier for the crazies to find each other.
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|
VB6 logic? 
One does not follow from the other.
Bastard Programmer from Hell 
If you can't read my code, try converting it here[^]
"If you just follow the bacon Eddy, wherever it leads you, then you won't have to think about politics." -- Some Bell.
|
|
|
|
|
Could be female logic then.
I have lived with several Zen masters - all of them were cats.
His last invention was an evil Lasagna. It didn't kill anyone, and it actually tasted pretty good.
|
|
|
|
|
Quote: Could be female logic then.
Oooooh! You can get in so much trouble with statements like this! 
Get me coffee and no one gets hurt!
|
|
|
|
|
Quote: If you know the enemy and know yourself, you need not fear the result of a hundred battles. If you know yourself but not the enemy, for every victory gained you will also suffer a defeat. If you know neither the enemy nor yourself, you will succumb in every battle.
Trouble? From whom? Women? Certainly not. I understand very well why they so crazyly at times and what they want to accomplish with that. And that's why I never give them any of the expected reactions. just indifference or mild amusement. As for knowing myself, I do my best that certain biochemical reactions never bomb my brain into the stone age and let me end up like many others.
I have lived with several Zen masters - all of them were cats.
His last invention was an evil Lasagna. It didn't kill anyone, and it actually tasted pretty good.
|
|
|
|
|
You're single aren't you?
I'm retired. There's a nap for that...
- Harvey
|
|
|
|
|
It's on my list, right after my funeral.
I have lived with several Zen masters - all of them were cats.
His last invention was an evil Lasagna. It didn't kill anyone, and it actually tasted pretty good.
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
