9. Layout: Some rules

Although there is an infinity of layouts out there, good layouts share some common features.

Keep the screen uncluttered

A busy screen is difficult to work with. Leave plenty of space to visually separate items.

Group related items

To make it simpler for users to find related items, keep them together. For instance if the application allows the font to be altered, then font selection, font style, font colour, font size should all be grouped in one place. It would be a poor design if the Font Style was under one menu and Font Size was on a completely different menu.

Labels positioning should be consistent.

Typically labels are on the left side of input boxes. Also keep the style of label consistent - don't alter sizes or weight

Align consistently

Text is usually left aligned with perhaps some special sections being centre justified.
Numbers are often right aligned so the same units remain aligned below each other.
Graphics, images and other items are usually vertically or horizontally aligned.

Highlight important information

Use colour, placement and styling to help users spot important information. For instance use a strong font and weight with perhaps a different background colour to draw the eye towards it.

Button placement

Be consistent with command buttons. Most forms have the 'submit' button at the bottom of the form.

Reduce emphasis on minor information

Just like important information, use placement, colour and styling to de-emphasise minor information. For instance a copyright notice could be in small font in a low contrast style. The user can see it, but the eye is more drawn to the more relevant information they need to consider.

Use a consistent design for command buttons

Although you can use any kind of size and shape for a command button, keep it consistent. For example you may have selected to use a 160 pixel wide beveled blue button in Arial font as a command button, do not then use a tiny, yellow button somewhere else. Users want to quickly understand the logic of the interface.

Be logical

Consider you have ten items to lay out on a screen numbered 1 to 10. Does it make sense to lay them out in a random order like this?

3 10 5 7
1
4 2 6
8 9

There is no logic to this layout and so users would find it difficult to find any particular item. So lay them out logically

1 2 3 4
5 6 7 8
9 10

Items are usually set out from left to right and top to bottom. If tabbing is used, then it should tab in a logical order.