UI Patterns and Techniques

Diagonal Balance

From MS Word
Use when:	You're laying out a page or dialog that has a title or header at the top, and some links or action buttons -- such as OK and Cancel, or Submit, or Back and Next -- at the bottom. The page is short enough to fit on the screen without scrolling.
Why:	Visually-prominent features such as titles, tabs, and buttons should contribute to a balanced composition on the screen. They're already at opposite ends of the page; when you put them on opposite sides too, they often balance each other out. (Think of them as weights -- the bigger or more "contrasty" the features are, the heavier they are; the closer to the edge they get, the more you need to put on the other side to compensate.) Besides being nicer to look at, a diagonal balance also sets up the page so that the user's eye moves easily from the top left to the bottom right -- an ideal visual flow for users who speak left-to-right languages. The rest of the page should support this visual flow, too. The eye finally comes to rest on elements representing the things the user might do next, like close this UI or go somewhere else.
How:	Place the title, tabs, or some other strong element at the upper left of the page; place the button(s) at the lower right. Content of any width goes in between. If the content itself contributes to the balance of the page, so much the better -- don't put too much white space on only one side, for instance. Consider what the color dialog above would look like if you pushed the OK and Cancel buttons to the left edge instead of the right edge. The whole dialog would feel left-weighted and precarious! In Windows, the placement of the title in the upper left and the conventional placement of buttons in the lower right do this for you automatically. In Mac OS/X, many elements tend to be centered -- title bars, tabs, and action buttons -- so it's much less common there. The idea of a diagonal balance is described in Kevin Mullet and Darrell Sano's classic pre-Web book Designing Visual Interfaces, pages 102-104: "Symmetrical layouts provide ... visual equilibrium automatically. Asymmetrical layouts can achieve equilibrium as well, but their tenser, more dramatic form of balance, depends on careful manipulation to compensate visually for differences in the size, position, and value of major elements." See below for examples of how this is done.
Examples:
From http://eleganthack.com/ A diagonal balance can work with text-only interfaces too. The eye goes first to the upper left, reads the content, and then comes to rest on the links at the bottom right. These links are the "next things" the user might want to do with this blog posting.
From http://miniusa.com/ Likewise with heavily graphic UIs. The focal points in this site are the logo, the moving car, the "Let's Motor" tag line, and the dealer-locator text field at bottom right -- all in a diagonal line (approximately). The motion of the photograph pushes the eye down and right even more forcefully than the other examples! Undoubtedly the designers of the site wanted to encourage people to use the text field... If it were at the bottom left instead, the page would lose much of its punch, and the text field might get lost in the page.