|
You have two edit boxes with labels on the same "line", and two lines. Do you prefer:
The label left justified, so you see:
label: [editbox] label: [editbox]
Another label: [editbox] Fourth label: [editbox]
or, the label right justified, so you see:
label: [editbox] label: [editbox]
Another label: [editbox] Fourth label: [editbox]
Is there a UI design guideline for this?
|
|
|
|
|
I would go with the first option.
I remember reading something a while back about how it's easier to read text when it is left aligned.
Apparently it's something to do with the eye starting at the same point.
“That which can be asserted without evidence, can be dismissed without evidence.”
― Christopher Hitchens
|
|
|
|
|
Left justified.
Do I get a stuffed animal for voting?
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.
|
|
|
|
|
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
modified 19-Jan-21 21:04pm.
|
|
|
|
|
Depends on the content. Strings left-justified, numbers right-justified.
Marc Clifton wrote: Is there a UI design guideline for this?
In WinForms, there's extensive guidelines for nearly every possibility. See the WinForms Ux guidelines.
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.
|
|
|
|
|
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.
|
|
|
|
|
That is my immediate reaction as well.
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.
|
|
|
|
|
First option, and with label text aligned to the text in the edit boxes rather than the controls top-or-bottom aligned
"I have no idea what I did, but I'm taking full credit for it." - ThisOldTony
AntiTwitter: @DalekDave is now a follower!
|
|
|
|
|
|
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
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
