Drawing Blanks

Read a book. “Designing Interfaces” by J. Tidwell.

Helpful. Attempts to systematically approach the subject: patterns, paradigms, common principles behind them.

However the book didn’t give a satisfactory answer to one question that has been bothering me for years: what’s the best way to align labels and input controls on a form?

The author mentions the “Right/left alignment pattern” and two pages later – the “Property sheet” pattern.

Here is what she writes about “right/left alignment”:

“use when: You’re laying out a form, or any other set of items that have text labels in front of them. This also could apply to the internal structure of tables, or any other two-column structure in which the rows should be read left-to-right”.

And “Property sheet”:

“use when: The interface presents an editable object to the user – perhaps something built in a graphical editor, a database record or query, or some domain-specific item (like a car or a stock purchase). The user needs to change the properties or attributes of the object”.

 

There are some details that make “property sheets” different, e.g. they don’t have an “apply/ok/submit” button and change the object “on the fly”, and the object being edited is tipically shown to the user at the same time.

But why do they have a different alignment?

I didn’t find a good answer in the book, and here is my take on it:

When the user needs to fill out or read out just a few (out of many) of the form values – use a two-column layout with left aligned labels and left aligned controls. Because it makes it easy to quickly locate the entries that you need. Add horizontal grid lines (or alternate colors) to connect labels to their referents. A vertical grid line may introduce additional visual flow but may also make the form less attractive and less usable. 

 

Label    Value or Control Longer Label    Value Label    Value or Control Longer Label    Value

Label Value or Control Longer Label Value Label Value or Control Longer Label Value

Jenifer Tidwell notices that a great way to improve a right/left aligned form is to break it into captioned sections and left-align the captions. This way you get advantages of both patterns.  She gives a really nicely layed out dialog box from a Macromedia app as an example.

 

But then she presents two examples of r/l aligned forms that imho are both terrible:

1. Mac OS X address book card: since the labels are right-aligned it’s very difficult to locate the data point that you need. In addition, they use same text to label multiple entries (“work” is used for work phone, work address and work IM contact).

2. Javadoc class method summary. The right-aligned “labels” are method return types. They don’t really label the entries. The method names (that are the real labels here) are left-aligned in the second column. I did use javadoc and I quickly got used to this layout so I don’t think it’s terrible. It is terrible as an example of right-aligned labels. (Although the MSDN layout with left/left alignment is way better).