Screen layout
I am currently building reports. A typical parameter input screen looks as folllows:
I do not like this layout because the labels are left aligned instead of right.
Many years ago when there were only non-graphic screens, I was told to read and follow 'Handbook of screen format design' by Wilbert O Galitz. One of his major points was that the labels for the data entry fields should be left aligned so that the above should look like:
I suspect you agree that this is a better layout. Given the same treatment, the Customers|Information screen looks like.
Again, I suspect you will agree that this is an improvement.
If there is general agreement that this is a better layout, I suspect that the change to this is very easily done - just change the style for the label fields to 'align right' - and I hope it only has to be done in one place.
I had hoped that I could just stick the following in the Label defaults part of default.stylesheet but it didn't work.
<property name="textAlignment">
<alignment horizontal="right"/>
</property>
Comments invited. Regards, Tim G
Re: Screen layout
This seems sensible to me.
The other place this may help is in search/select boxes where the location of the word field with its assocated tick box is sometimes a bit confusing.
e.g.
Re: Screen layout
I also find this confusing. However switching to right alignment of the labels will not fix the problem because on this screen the layout manger is using not columns, but 'string of fields'. If you shorten 'Include Deactivated' to say 'Inc Deactivated' then all that happens is things squash up.
I tried left padding the "Include Deactivated" entry in messages.properties, but I can find no way of pushing it to the right (apart from something crude like "_____Incl.Deactivated").
I also had a look at default.stylesheet, but I cannot see how to adjust the above layout so as to pad the label text on the left.
Regards, Tim G
Re: Screen layout
There's a good discussion of right aligned labels here:
http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
And some background here:
http://www.lukew.com/ff/entry.asp?1502
An issue with right alignment is that it makes it harder to scan down the page. This might not be a problem if you are tabbing from one field to the next.
Right aligned:
Left aligned:
If there's strong preference to change it to right alignment, its a relatively small code change.
With regards to check boxes - when these are displayed in a grid as above, the box is displayed to the right of the label. In other situations, as in the patient query, the label displays on the left. This is the standard layout. This could be switched around, although the http://www.openvpms.org/project/display-active-status-when-searching project would remove the Include Deactivated checkbox entirely.
-Tim A
Re: Screen layout
Tim A - I think that Penzo article is very telling: "Alignment of labels—In most cases, when placing labels to the left of input fields, using left-aligned labels imposes a heavy cognitive workload on users. Placing labels above input fields is preferable, but if you choose to place them to the left of input fields, at least make them right aligned." We don't have the screen real estate to use 'labels above', so I think we owe it to our users to reduce their cognitive load.
I do agree that when scanning for an item, left align is better, BUT when asking either 'what goes in this slot' or 'what does this slot hold' right align is far far better.
Left align get worse when the labels are of different lengths - compare the left and right columns above. The left is not too bad because the labels are more uniform in length. The right is awful because of the length disparity.
With regards to check boxes, it is not the 'sometimes on the left, sometime on the right' that is the real problem but rather the effect of using a single line grid.
As you can see this is 'heavy cognitive overload' territory because there is no visual clue about whether the boxes are with the left or right label. Is there any way of pushing in a pad on the right of the entry fields so that it becomes
Regards, TimG
Re: Screen layout
Hi,
Fascinating articles.
I agree with TimG and noted the summary note he mentioned. Because we are not just scrolling down the page and for the reasons mentioned above I think the right aligment of labels works better in this case.
In regards to the check boxes TimG's example above is clearly an improvement. Other option is a grid system (see hastily constructed example below)? Not as good for screen real eastate preservation, but as OVPMS displays only a certain number of searched entries per page, and for us at least this doesn't fill the screen, perhaps this isn't a big issue?
Cheers,
Adrian