Intro to UI Wireframing > 4. Design Principles > 4.4. Alignment

4.4. Alignment


The Alignment principle is about making it easier for users to process information by guiding their eyes through aligned objects.

When users can scan through information that has a clear line or path for their eyes to travel, they intuitively know where to look to take the next action. Think of how hard it would be to read a book where all of the text is centered. Blocks of texts in books are left aligned so that your eyes automatically return to the beginning of the next line effortlessly. We can use alignment this way with more than just text in our interfaces.


When to Use Alignment

Alignment can and should be used whenever you lay out a screen with information to process. Using alignment, you can ensure that nothing is placed arbitrarily on the screen.

Seemingly arbitrary placement and lack of alignment can lead to unintended consequences. In the United States Presidential Election of 2000, a voting ballot in the state of Florida featured a poorly aligned interface that led to many voters voting for the wrong candidate.

This ballot confused a lot of voters. Note how the Democratic candidate, Al Gore, is the second on the left side. It became apparent that the Reform candidate Pat Buchanan on the right side had gotten many more votes than expected, and it is believed that the Democratic voters punched the second hole, registering a vote for Buchanan.

There are quite a few elements that lead to this confusion. The lack of alignment and the multiple border lines and arrows are hard to make sense of.

When you need to make the path clear to information, you can use alignment. This redesigned ballot might have made it more obvious to voters which hole to punch for their candidate.

When you start to think that everything should be aligned to something on your screen, information becomes more clear and easier to use and your interfaces will begin to feel more cohesive.


How to Use Alignment

To use alignment, we look at everything on our interface and think about how each item relates to the related items around it. One exercise you can do is to try to see if each object can align with something else.

Let's take one last look at our Customer Information Screen. We did a good job at adding contrast and using white space to put related items next to each other. But take a look at the screen overlaid with blue and red lines below.

The blue lines show objects that have a strong left alignment to other objects. But the Red lines show how some of the objects don't align to other objects, particularly on the right of the form. The form inputs are sized so that they create a ragged right edge that makes the eye jump around on the right, compared to the strong left alignment.

We can create a more solid feeling layout that directs the eye down through the form by resizing and laying out objects so that each one aligns with something else.

Notice the blue lines now. All of the objects has a strong left alignment, and most of the objects also have an object they align with on the right side. Adding a light hairline in our white space between chunks of the form also helps to create this sense of solid alignment.

We even reinforced the sense of movement by using the natural direction our eyes take when reading (down and to the right with Left To Right languages) by moving the submit button to the bottom right of the layout.

Here's what our form looks like without the alignment lines.

There are lot of different ways you could have aligned objects out on this form that would work just as well. The goal here is to just think about how to help users move forward through the interface to completing whatever the intended task or goal is.

In this example, we showed how to use all of our our base principles to improve one interface. When you're working on your own products or websites, use this step-by-step approach to see if you can apply the principles to each of your screens. You might find it useful to take a screenshot of your work before to compare how much easier it is to use your interface after you've applied the principles.


Mike AngelesBy Mike Angeles
Got questions or feedback? Email mike@balsamiq.com.