|Website Workshop: Usability|
Alignment helps the reader's eye
Align every object with an edge of some other object
Every item should have a visual connection with something else on the page. Even when elements are physically separated from one another, if they are aligned there is an invisible line that connects them, both in your eye and in your mind.
Most beginners automatically choose a center alignment, because it seems safe and comfortable. However, this often gives a dull or amateurish look to the page. A strong flush-left or flush-right alignment gives a much more sophisticated look to the page and is easy for the reader's eye to follow down the page.
The biggest alignment problem that I saw in the seeUthere pages was a mixed alignment... centered headlines and subheads over left-aligned text or images, followed by a centered set of buttons at the bottom of the page. This makes the page look unpleasant, since our eyes like to see some sort of orderly alignment.
In the first example below, the headline and the button look like they're just hanging around. This effect was made even worse on the seeUthere pages, because the nav bar and the left margin of the page body were all left-aligned. Then suddenly, a centered title and centered buttons! They looked lost on the page.
The second example shows a clean left alignment, which is what most of the seeUthere pages were changed to.
It's not practical to align every single thing on the page to the same line, but as I mentioned above, you can make every element align with something else on the page. Below is a simple example.
Two elements have different alignments, but the edge of the descriptive text below aligns with the right edge of the title above, connecting the elements with an invisible line:
Compare this to a page where the two elements are not aligned to one another. It looks messy and disorganized. Can you begin to see how alignment is so subtly important?
Next Topic: Links