270912 - Alignment of widget headers wrong

Status: RESOLVED INVALID

(Calendar :: Sunbird Only, defect)

Description

[Eugenia Loli]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0

On "Calendar Event/Task" windows you align the widget text headers "right". This
is ugly. All Human Interface Guidelines that I know (including Gnome's and
Apple's) are strongly suggesting to align widget text on the left. It's more
readable like that, because our brain doesn't have to switch to different line
spacing each time. As for right-to-left people, the toolkit takes care of it
automatically.

-----------

Moreover, on the preference panel, many widgets (some combo boxes and input
boxes) are not aligned. It would look much better if you align them vertically.
Check the "Alarms" preference panel for example. The two "Off/On" combo boxes
should have been vertically aligned together, and then the three input boxes
below them, as well, aligned vertically together too.

Reproducible: Always
Steps to Reproduce:
1.
2.
3.

Comment 1

[Matthew (lilmatt) Willis]

Attachment: Apple iCal New Event drawer

Not to poke holes in your right vs. left argument, but here's Apple's New Event
drawer... aligned right

Comment 2

[Eugenia Loli]

That attachment only tells me that the engineer who coded this has never read
the HIG, or no UI engineer worked on this part of the app. :P

To explain myself a bit better:

The problem is that the brain has to re-align itself left and right each time it
moves to the next line, because the text starts with a different spacing from
the above line. The way you have it now, is better for people who have grew up
with right-to-left reading and writing. But for the western people,
left-to-right is more natural, and their brain has been exercised to work this
way better, and faster. So, if you don't want (western) people to have them take
about 1 more second to re-align their brain to be able to scan the window fast,
then, all headers should be aligned left.

And as for the right-to-left people, the toolkit takes care of it automatically
(or, it should be), when the right translation is used.

Comment 3

[Michiel van Leeuwen (email: mvl+moz@)]

the gnome says as muchs as 'align left, unless the length of the labels differ
too much, to prevent large holes between the label and the control'
'to' and 'calendar' differ a lot in length, so right aligning might not be too bad.
But we can just try. Hack it, create a screenshot and compare

Comment 4

[gekacheka]

Maybe the HIG changed.  The only mention of alignment I found was 

http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/XHIGLayout/chapter_11_section_2.html#//apple_ref/doc/uid/TP30000360/BEIBEAFJ

where it mentions that 

  In Mac OS X, controls should always be center-equalized in windows. 
  In other platforms, including Mac OS 9, controls are often left justified.

and gives an example of a preferences window where the left column of labels is
right aligned (fig 11-3).

Comment 5

[Joey Minta]

Attachment: Left aligned text

Here's a screenshot of how the window would look with left-aligned text.  Not
great, for exactly the reason listed, too much space in some areas because of
the difference between the length of 'End' and 'Calendar File'.

Comment 6

[Joey Minta]

Attachment: Slightly better window

In light of the other attachment, if you really want left-aligned text, this
was the best I could get it to look.  It moves a few things around, so that
'Event Status' and 'Calendar File' don't push the grid too far, and generally
uses space a bit better.  I'm not all that happy with the way the bottom 1/3
looks, but maybe someone can take it from there.  For now, I vote to keep
things the same.  However, if others like this, let me know and I'll attach a
patch for it.

Comment 7

[Eugenia Loli]

Jminta: Your first mockup attempt was nice, your second is really not. The
second one is mix-n-mash and with center alignments where it makes no sense.

Comment 8

[Michiel van Leeuwen (email: mvl+moz@)]

I think the gaps are way too big.
And as long as there is no HIG saying we should left-align, and there are HIGs
saying it should be right-align, i so no reason to change to left-align.

Comment 9

[Eugenia Loli]

Gnome's HIG does say to left-align. Never say never.
http://developer.gnome.org/projects/gup/hig/2.0/design-text-labels.html
"Left-align components and labels, unless all the labels in a group have very
different lengths. If they do, right-align the labels instead, to ensure that no
controls end up too far away from their corresponding labels." (which is not the
 case here)

Comment 10

[Michiel van Leeuwen (email: mvl+moz@)]

That's very much the case. There quite some difference between 'End' and
'Calendar File'. So much that i consider it ugly to left-align.

Comment 11

[Eugenia Loli]

No, there is not much space. And the "End" is only one field. Sacrificing the
overall usability and looks over a single text lable is not wise.

It seems that we simply have a difference of opinion: you like them
right-aligned, and I like them left-aligned. At least I gave a reason why I like
it left-aligned:
It's more readable like that (left-aligned), because our brain doesn't have to
switch to different line starting point each time. It's faster for our brains to
scan vertically the UI. As for right-to-left people, the toolkit takes care of
it automatically.

Comment 12

[Michiel van Leeuwen (email: mvl+moz@)]

'end' was just an example. Title, Start, End, Note and URL are all less then
half the size of Event Status and Calendar File. Most fields have a huge gap
between the label and the field.

So we disagree on what 'huge' is. But according to comment 4, the apple HIG says
to always do right-align. Wouldn't it be better to err on that side? Then you
honour the apple HIG, and maybe the gnome HIG. If you left-align, you may fllow
the gnome HIG, but you are sure you violate the apple HIG.

Comment 13

[Eugenia Loli]

Just because someone at Apple wrote that detail doesn't mean it's right. In
fact, most of Apple's own pref panels and other third party mac apps, are
left-aligned.

Comment 14

[Joey Minta]

One possible solution:
    If 'Event Status' just became 'Status' and 'Calendar File' became 'File' or
'Calendar' (or 'Server' as it's getting called in a lot of the code), that would
make the longest name then 'Catgeory'/'Location'.  On the other hand, these new
labels might not be as clear, and there's also the l10n issue, since I don't
know how long any of these labels are in other languages.  Opinions?

Comment 15

[Joey Minta]

Attachment: Align pref widgets patch

Regardless of the Event Dialog discussion, I believe Eugenia Loli has a point
about some of the preferences widgets.	They don't look very good.  This patch
just adds a few vbox's to line them up properly.  Michiel, I hope it's ok that
I flagged you for the review, since you were already commenting on this bug.

Comment 16

[Michiel van Leeuwen (email: mvl+moz@)]

Comment on attachment 180195 [details] [diff] [review]
Align pref widgets patch

>diff -u content/calendar/pref/viewPrefs.xul mozpatch/viewPrefs.xul
>        <hbox  align="center">
>+           <vbox>
>+              <description>&pref.numberofweeks.label;</description>
>+              <description>&pref.numberofpreviousweeks.label;</description>
>+           </vbox>
>+           <vbox>
>+              <menulist id="nbofweeks" prefstring="calendar.weeks.inview">
>+                 <menupopup id="nbofweeks">
>+                 </menupopup>
>+              </menulist>
>+              <menulist id="nbofpreviousweeks" preftype="int" prefstring="calendar.previousweeks.inview">
>+                 <menupopup id="nbofpreviousweeks">
>+                 </menupopup>
>+               </menulist>
>+            </vbox>
>        </hbox>
This structure really wants a grid. Then it will align properly.
(I only checked this one, because it was the shortest)
Also, can you attach screenshots of the new look?

Comment 17

[Joey Minta]

Attachment: Align pref widgets patch v2

Changed to use a grid style, per MVL's first review.  Corrects 'General',
'Alarms', and 'Views' pages in preferences.  Screenshots of these to follow.

Comment 18

[Joey Minta]

Attachment: Tweaked General Prefs view

Comment 19

[Joey Minta]

Attachment: Tweaked Alarm Prefs view

Comment 20

[Joey Minta]

Attachment: Tweaked Views Prefs view

Comment 21

[Eugenia Loli]

jminta, that looks good. However, (not sure if that's fixable through your
patch) please make sure that the default window size is NOT more than 720x500
pixels wide (current one is about 800x575) because then it does not actually fit
on most SVGA desktops (you have to take into account the two gnome panels and
the window manager). SVGA is still used by 21% of the internet users (according
to a big stats company last year), and many companies in Europe still use that
resolution.

Comment 22

[Michiel van Leeuwen (email: mvl+moz@)]

The size of the window is a different bug. Please don't try to morph bugs.

Comment 23

[Eugenia Loli]

I am not trying to "morph" anything (your assumption was rude btw), I simply
stated that *IF* that is fixable through that patch gminta submitted, let's fix
it. I don't know anything about XUL, and so I can't know if that problem is part
of another piece of code or gminta's new patch. I had to make sure it wasn't,
and so I mentioned it, just in case.

Comment 24

[Joey Minta]

(In reply to comment #21)
My patch changes nothing in terms of the overall window size.  It wouldn't be
appropriate to try to fix it here, either.  Thanks for the positive feedback though.

Comment 25

[Joey Minta]

Comment on attachment 180205 [details] [diff] [review]
Align pref widgets patch v2

Removing review request.  This bug depends on new prefs.

Comment 26

[Matthew (lilmatt) Willis]

The code referenced in this bug was replaced when bug 333923 was checked in.

-> INVALID