Bug 99104 - Left or right aligned labels
Summary: Left or right aligned labels
Status: RESOLVED WORKSFORME
Alias: None
Product: LibreOffice
Classification: Unclassified
Component: LibreOffice (show other bugs)
Version:
(earliest affected)
5.2.0.0.alpha0+
Hardware: All All
: medium normal
Assignee: Not Assigned
URL:
Whiteboard: target:5.2.0
Keywords: needsUXEval
Depends on:
Blocks: Sidebar Dialog
  Show dependency treegraph
 
Reported: 2016-04-05 20:18 UTC by Yousuf Philips (jay) (retired)
Modified: 2021-05-25 13:11 UTC (History)
7 users (show)

See Also:
Crash report or crash signature:


Attachments
screenshot (96.32 KB, image/png)
2016-04-05 20:18 UTC, Yousuf Philips (jay) (retired)
Details
label alignment with headings and checkboxes (48.78 KB, image/png)
2016-04-09 01:15 UTC, Yousuf Philips (jay) (retired)
Details
sidebar (24.93 KB, image/png)
2016-07-13 05:00 UTC, Yousuf Philips (jay) (retired)
Details
Options for alignment (79.44 KB, image/png)
2016-07-13 09:21 UTC, Heiko Tietze
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Yousuf Philips (jay) (retired) 2016-04-05 20:18:53 UTC
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
Comment 1 Heiko Tietze 2016-04-05 21:10:10 UTC
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.
Comment 2 Adolfo Jayme Barrientos 2016-04-06 03:09:31 UTC
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
Comment 3 Yousuf Philips (jay) (retired) 2016-04-09 01:15:47 UTC
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.
Comment 4 Adolfo Jayme Barrientos 2016-04-09 14:00:29 UTC
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.
Comment 5 Heiko Tietze 2016-04-10 10:30:13 UTC
(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.
Comment 6 Yousuf Philips (jay) (retired) 2016-04-10 12:53:09 UTC
(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.
Comment 7 Cor Nouws 2016-04-12 15:43:02 UTC
(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.
Comment 8 Commit Notification 2016-04-12 19:15:04 UTC
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.
Comment 9 Adolfo Jayme Barrientos 2016-07-12 19:38:30 UTC
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.
Comment 10 Yousuf Philips (jay) (retired) 2016-07-12 22:25:27 UTC
@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
Comment 11 V Stuart Foote 2016-07-12 22:39:38 UTC
(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.
Comment 12 V Stuart Foote 2016-07-12 22:48:35 UTC
(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.
Comment 13 Yousuf Philips (jay) (retired) 2016-07-13 05:00:19 UTC
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
Comment 14 Heiko Tietze 2016-07-13 06:49:39 UTC
(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/
Comment 15 Heiko Tietze 2016-07-13 09:21:55 UTC
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?
Comment 16 Yousuf Philips (jay) (retired) 2016-07-13 13:37:45 UTC
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
Comment 17 Cor Nouws 2016-07-15 12:04:13 UTC
(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.
Comment 18 Yousuf Philips (jay) (retired) 2016-08-03 06:11:38 UTC
(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.
Comment 19 Robinson Tryon (qubit) 2016-08-25 05:49:40 UTC Comment hidden (obsolete)
Comment 20 Thomas Lendo 2018-10-25 00:12:01 UTC
(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.
Comment 21 andreas_k 2019-10-02 20:00:21 UTC
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.
Comment 22 Heiko Tietze 2021-05-25 13:11:58 UTC
HIG is now clear on this, see https://wiki.documentfoundation.org/Design/Guidelines/PropertyDialog