Created attachment 124109 [details] screenshot I've noticed little by little left aligned labels have been changing to right aligned in the sidebar and dialogs and i believe this isnt a good UI, so i'm bringing it up so it can be discussed and put to rest and then added to our new HIG. KDE 4's HIG is an example of the right aligned label and left aligned controls. https://techbase.kde.org/Projects/Usability/HIG/Alignment
The KDE HIG (it is still relevant at the current version 5) wasn't written without discussion (https://mail.kde.org/pipermail/kde-guidelines/2014-January/000626.html). The decision is based on a survey (http://user-prompt.com/kde-hig-survey-about-how-to-align-controls-over-multiple-groups/) where 2/3 voted for this type of alignment. However, the drawback is clearly when labels differ in size, but in this case it works also not well with left-aligned captions. Another objection was based on the consideration that users read the labels - and that is preferrably done from left (given LTR orientation). Unfortunately this option wasn't included in the short poll. We should also take into consideration that alignment might depend on the OS. So familiarity would be likely violated in some cases.
I am going with the new alignment because it brings controls and labels closer. Awkward gaps have been the norm in the .src-based dialogs. This change is coherent with the recommendations of the following HIGs: https://developer.gnome.org/hig/stable/visual-layout.html.en https://elementary.io/en/docs/human-interface-guidelines#spacing
Created attachment 124196 [details] label alignment with headings and checkboxes (In reply to Heiko Tietze from comment #1) > The decision is based on a survey > (http://user-prompt.com/kde-hig-survey-about-how-to-align-controls-over- > multiple-groups/) where 2/3 voted for this type of alignment. @Heiko: I didnt see in any of the 4 options what we are currently following, so not sure how this is a relevant decision for us to follow based on the votes. (In reply to Adolfo Jayme from comment #2) > I am going with the new alignment because it brings controls and labels > closer. Awkward gaps have been the norm in the .src-based dialogs. This > change is coherent with the recommendations of the following HIGs: > > https://developer.gnome.org/hig/stable/visual-layout.html.en > https://elementary.io/en/docs/human-interface-guidelines#spacing @Adolfo: As we are current building our own HIG, we should discuss changes like this, as we are not current following those HIGs for other aspects of the UI. I see these right aligned labels cause problems with the alignment of bold heading labels as well as checkboxes, as can be seen in the screenshot.
Jay, the attached screenshot doesn’t have a problem. It would be one if the checkbox and the other controls were *in the same section*, and in that case the checkbox could be considered to be misaligned.
(In reply to Yousuf (Jay) Philips from comment #3) > I didnt see in any of the 4 options what we are currently following, > so not sure how this is a relevant decision for us to follow based on the > votes. We could run another poll, adding also the question how to deal with controls that put the label right of the input control, such as checkboxes.
(In reply to Adolfo Jayme from comment #4) > Jay, the attached screenshot doesn’t have a problem. To me it does have a problem as we have the headings aligned and the input fields aligned, but dont have the heading child controls aligned. > It would be one if the > checkbox and the other controls were *in the same section*, and in that case > the checkbox could be considered to be misaligned. You can see that in attachment 124109 [details]. (In reply to Heiko Tietze from comment #5) > We could run another poll, adding also the question how to deal with > controls that put the label right of the input control, such as checkboxes. If you think that user input is important to this decision, then please do, though i would assume that this could be settled with the ux team.
(In reply to Yousuf (Jay) Philips from comment #6) > If you think that user input is important to this decision, then please do, > though i would assume that this could be settled with the ux team. For me that makes sense. I find the new alignment OK.
Adolfo Jayme Barrientos committed a patch related to this issue. It has been pushed to "master": http://cgit.freedesktop.org/libreoffice/core/commit/?id=1d4018f15bed477a0a2a5f21a58e4ebcab69659a tdf#99104 Checkbox in User Data page isn’t aligned to anything in the section It will be available in 5.2.0. The patch should be included in the daily builds available at http://dev-builds.libreoffice.org/daily/ in the next 24-48 hours. More information about daily builds can be found at: http://wiki.documentfoundation.org/Testing_Daily_Builds Affected users are encouraged to test the fix and report feedback.
Closing since this change is desirable and consistent with recommendations of several HIGs. While we don’t have means to change this based on the platform, I don’t consider this to be a problem — it certainly doesn’t look awkward in Windows, and both macOS and Linux go this way.
@Adolfo: I disagree and heiko has on his to do list to do a survey to check with users on what they think. We are currently building our own HIG and dont necessarily have to follow the gnome 3 or kde HIGs. Windows - https://msdn.microsoft.com/en-us/library/windows/apps/jj839734.aspx Mac - https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/WindowDialogs.html
(In reply to Yousuf (Jay) Philips from comment #10) > > Windows - https://msdn.microsoft.com/en-us/library/windows/apps/jj839734.aspx > Mac - > https://developer.apple.com/library/mac/documentation/UserExperience/ > Conceptual/OSXHIGuidelines/WindowDialogs.html From the Microsoft ref: - Don't place labels to the left when there is a lot of variance in the length of the labels. In other words --align right-- as is now being done appropriately more often. OS X HIG does not address, but shows multiple dialogs with labeling alligned right, reducing the empty space. I find the reduced space more appealing than the left alignment, and have no issue with Adolfo's actions as in comment 2 Each dialog should get reviewed for layout (some widgets benefit from vertical alignment of indentation) but I don't see the move toward right aligned labels as problematic.
(In reply to V Stuart Foote from comment #11) Oops sorry, misread that. Microsoft seems to prefer left alignment, just not with varying length when the label and the attribute are on the same line. With multi-coulmn or varying length labels they prefer a label above and aligned with the element below. > From the Microsoft ref: > > - Don't place labels to the left when there is a lot of variance in the > length of the labels. > > In other words --align right-- as is now being done appropriately more often. > None the less, really have no issue with Adolfo's layout choices of predominantly right alignment of labels to attributes on the same line.
Created attachment 126189 [details] sidebar If the right alignment worked well, i would be all for it, but there is alot of instances where it doesnt work and you get right alignment in one place and left alignment in other places. The sidebar will likely be highly affected by this issue. Not sure how well gnome is implementing its own guidelines as we see instances throughout its UI where it doesnt right align labels. https://blogs.gnome.org/mclasen/files/2013/01/settings-privacy-lock.png https://www.suse.com/documentation/sles-12/singlehtml/book_gnomeuser/images/sound_devices.png (possibly not a gnome 3 app) http://img.netupd8.com/gnome3.8-notification-settings_2.png
(In reply to V Stuart Foote from comment #11) > In other words --align right-- as is now being done appropriately more often. Nope, the alternative is to place the caption above the control. The drawback of very left and very right alignment is the distance between label and control, which makes it hard to associate both. Right aligned captions moved as best as possible to the left is the opposite. However reading through the list of caption would be easier when the labels are left aligned (and the controls right of these as best to the left). Did a survey for KDE some time ago that shows the preference for label attached to control. As Jay says, we can run a similar survey once again. Would be interesting to see if there are differences between OS users. http://user-prompt.com/de/kde-hig-survey-about-how-to-align-controls-over-multiple-groups/
Created attachment 126193 [details] Options for alignment Option 1: Labels above controls, both left aligned (suited for two columns, which we use in dialogs, but visually noisy; no problems with lengthy localizations) Option 2: Labels left-aligned to the dialog (works still with two columns; best suited for reading the captions) Option 3: Controls left-aligned placed where the longest caption ends (cleanest UI, issues with two columns possible that may be solved by introducing scroll areas) Is this fair enough to run a survey? Any other arrangement possible?
Is there a particular gnome 3 application that i can see this implementation of right label alignment with headers. When looking at the example mockup given on the visual layout ( https://developer.gnome.org/hig/stable/figures/visual-alignment-correct.svg ), it didnt have the header in it, but when looking at its implementation, they right aligned the header, which does make it look good. https://www.linux.com/sites/lcom/files/joomla/images/stories/41373/fedora-user.jpg
(In reply to Heiko Tietze from comment #15) > Is this fair enough to run a survey? Any other arrangement possible? The examples are not good enough to judge the various situations in LibreOffice. I would have no problem with having more options to use in LibreOffice, depending on the situation.
(In reply to Heiko Tietze from comment #15) > Is this fair enough to run a survey? Any other arrangement possible? The mockups should be of a current dialog rather than the sidebar and contain a variety of controls (text, combobox, checkbox, radio button), so that it is clear how each element type would be placed. I think the option dialog's memory tab (attachment 124196 [details]) or the paragraph dialogs indent tab could be used as the basis of the mockup examples.
We're replacing our use of the 'ux-advise' component with a keyword: Component -> LibreOffice Add Keyword: needsUXEval [NinjaEdit]
(In reply to Heiko Tietze from comment #15) > Created attachment 126193 [details] > Options for alignment I tend to Option 1. In your example its the best combination of best overview and space saving.
80% labels are left align 15% labels are top arranged 5% labels are left arranged and right align. As section headers are top arranged I prefer left arranged and left align. The question is what should we do with long labels. Please find a solution and add it to the guidelines.
HIG is now clear on this, see https://wiki.documentfoundation.org/Design/Guidelines/PropertyDialog