Drawing Blanks

Premature Optimization is a Prerequisite for Success

Form layouts

leave a comment »

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 all (or most) of the form values – use “right/left alignment”. Because it defines visual flow and because labels are close to their referents.
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).

Written by bbzippo

11/06/2009 at 4:46 am

Posted in programming

Tagged with

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: