How to layout form elements

Question

Are there any good resources for the layout of elements in a form? Possibly large forms as they are common in applications for highly specialised users.

I am talking about choices like:

• go down in columns first, then right to the nex column vs.
• go right in rows first, then down to the next row
• what to do in the presence of especially high and/or wide elements (lists, tables ...)

What aspects are to be considered?

Do the same rules apply for web and conventional rich GUIs?

How does grouping of elements factor in? For example you want the elements concerened with address information stay together.

The perfect answer would take the form of an algorithm producing a reasonable layout for an arbirtrary grouped list of elements to layout.

Answer 1

It depends on the platform what the guidelines are:

• Windows has the Windows User Experience Guidelines
• GNOME has its Human Interface Guidelines
• Mac OS X has Human Interface Guidelines
• Even the iPhone has Human Interface Guidelines

These are all excellent reads, especially the one for the platform you develop on.

Answer 2

I have also found these sites useful:

• UI Pattern Factory
• Interface Hall of Shame

Answer 3

You should go to your local library and pick up Mullet and Sano's "Designing Visual Interfaces". It is not neccesarily the definitive resource, but I find it worth a read.