Alignment
is another way of creating associations between visual elements, which
help users quickly understand the relationships of objects on a page.
Alignment works by visually
associating a number of elements. When you see a number of aligned
elements, you instinctively believe that those elements are peers of
each other, or share some other common property.
This is a really useful tool for
quickly letting a user know what they're looking at by instantly
spotting relationships between different elements.
Properties of alignment
Alignment works on any screen
elements: paragraphs of text, images, buttons, pictures, links, even
combinations of all of them.
Although aligned elements are often
grouped spatially, they don't have to be. Alignment works across the
entire screen, even when the axis is broken by another element.
However, arranging elements in a line or grid is stronger because it
also benefits from grouping.
Top-edge and left-edge alignment are
stronger than right- or bottom-edge alignment, because of the natural
flow of the cascade. Groups that are aligned by their left or top edges
seem to be more important than they would be if right- or
bottom-aligned.
Alignment axes that start near the
origin (top-left of the screen) are superior to those that sit further
right or further down. This is a useful way of indicating a visual
hierarchy, particularly when you have too many elements to arrange into
a neat cascade. See the first example screenshot below. Spot the
top-level navigation links that are only associated by their alignment
axis. The second-level links sit along an axis that starts further out
from the origin. This makes them inferior to the first-level links -
even if they were above some of the first-level links.
In this example, the
2nd-level links (Warranties, Car preparation...) are still inferior to
all the top-level links (HOME, ABOUT, CARS FOR SALE).
Although the L2 links are superior to the CARS FOR SALE link, it is
associated with the higher first-level links by its alignment axis.
Because that axis goes nearer the origin than the L2 link axis, all the
elements that sit on it are superior to the members of the L2 axis.
Grids
Grids are a really useful tool for
page design, and for forms especially. Once you find a design that
seems to work because it uses strong and complimentary alignment axes,
you can take the grid made by those axes and re-use them on other
pages. Re-using layouts based on common (invisible) grids can
strengthen a site's consistency.
This is design company gpin.co.uk's homepage
(75% scale). I find the excellent top image instantly appealing, but
the page is really hard to work out, due to chaotic layout.
I think that one way to make this
design far more useful would be to apply a simple grid-based layout.
A simple example
In this example, there are four
alignment axes at work:
- There are three top-level
navigation links (Home, Cars for Sale, About)
- "About" also contains a group of
six other links. While they could arguably be viewed as either first-
or second-level links, they are clearly distinguished by the fact that
they attach to a separate invisible axis.
- The text in the main body is all
left-aligned, which clearly unifies the paragraphs.
- The footer links are unified by
top-aligning to the same horizontal axis.
The same image, with alignment axes
marked
A more complex example
- There are at least 10 alignment
axes in effect on this page.
- Note the 3 product ad panels
towards the bottom. They have no common alignment, which suggests a
weaker link than the 'Marketplace Areas', for example. In the absence
of grouping by alignment or containment, they are associated by
repeating a style.
Example of insufficient alignment
- The main content boxes are not
aligned, either by their left edges or top edges.
- It's impossible to guess which of
the boxes will contain the main content, which might contain secondary
information, or which you would look at first.
