Visual Alignment

How we organize information on a screen determines how it will be understood and how easy it is to perform specific tasks with it. Some of this is to do with the mechanics of vision – the eye needs to find the beginning of each line and this is quicker to do when it’s predictable.

Visual Meaning

As well as being important for the mechanics of vision, alignment also plays a big role in the semantics – the meaning – of what we see. Most of the information we’re presented with is arranged in horizontal lines (at least in Western cultures). Tables and spreadsheets also make use of strong vertical alignment. After all, a column is nothing more than an array of entries that are vertically aligned. But alignment is also important at higher levels. The layout of a page or screen uses alignment, among other things, to create panels and groups.

Alignment also brings us visual hierarchies – indented elements are subsidiary to those above. In left-to-right languages, the leftmost elements are at the top of the hierarchy. In right-to-left languages, it is the rightmost that prevail.

Types of Alignment

So far we’ve been considering edge alignment. In left-to-right languages, text is usually aligned to the left edge as this improves readability, but there are situations where right alignment has some advantages, particularly when proximity to other elements is relevant. For example, a column of right-aligned labels of varying length will have less white space following it, so the relationship to following elements is clearer. (The reverse is true for right-to-left languages.)

However, center-alignment is also possible. This is sometimes described as more dynamic than simple left or right alignment, but it does come with a cost to reading and scanning speed. Our visual perception needs to work harder to find the beginning of each line.

Similarly, flush left-and-right typographical alignment, sometimes called “justified”, has a very orderly appearance on the page but is generally not recommended for large amounts of text. That’s because in order to make lines exactly the same length, the space between words must be varied. This is similar to climbing stairs that are unevenly spaced. Even though you may not notice it immediately, users will suffer some fatigue. Flush left/ragged right (they are the same thing) avoids these problems, as we’ve discussed above.

Object Alignment

While edge alignment (left or right depending on the reading direction) is most common for text, central horizontal or vertical alignment tends to be the preferred solution for objects. If the objects are of similar size, these two approaches are approximately equivalent. But when objects vary noticeably in size, central alignment is aesthetically more appealing. (Central alignment for objects means aligning their horizontal or vertical mid-points.)

Layout Alignment

Layout alignment refers to the overall shape of a page or screen. For most purposes, layouts have fixed margins at the top and left (for left-to-right languages). The right and bottom margins vary with the actual content. Other arrangements are possible, but in UX design we need to be careful that our overall approach can be made responsive for smaller devices – particularly smartphones and tablets. Note that on paper mobile devices have at least as many pixels as desktop displays, but the physical screen is very much smaller. The extra pixels are used to render text and curves more smoothly. So, we still need to treat the two types of device differently.

Grids

Having consistent layouts between the screens of an application or pages of a website makes it much easier for users to know where important page elements can be found. Common examples on websites are top or left-hand menus, a footer area for global links relevant to the whole site and perhaps right-hand panels whose content depends on the purpose of each page. The best way of achieving this consistency is through the use of layout grids, which have been used in graphics design long before computers became commonplace. See our layouts article below.

Learn More About Visual Alignment

Discussion of the general principles of alignment in user interface design.

A graphic designer’s view of alignment.

Design principles: Alignment.

The Grid System: Building a Solid Design Layout.

Using Grids in Interface Design.