Don’t arrange content haphazardly on the page! Arrange objects and text in rows or columns. While there might be space between objects and text instead of lines and borders, arrange objects and text neatly on the page with everything lining up.
Make objects, such as icons, the same size. Make text fields the same size. Sometimes text fields have to fit different lengths of data; in this case, commonize as close as possible. For example, addresses. Addresses are a long text field, cities can be long, however state and zip are short. Each may require a different length. For the sake of appearance, take the address and city and make those the same length, then make the state and zip code fields the same length. Line up the boxes so that they align on the left and the right.
This section should not require a lot of description to explain. Yet there are still a ton of websites where text fields do not align, spacing between fields changes, icons are different sizes, and so on.
No matter how you slice it or dice it, the page looks neat and orderly or it looks cluttered or messy. Aligning and sizing fields and elements makes it look neat and orderly. Neat and orderly wins the day.
Here’s an example of a PDF form from the US Gov to fill out a passport. Note that this form is used to demonstrate the difference between poor and good alignment of fields.
(Important note: The third version of this form is NOT an example of the best way to design a page, not by a long shot! This example is used to show the impact of bad alignment, and the difference or improvement when you clean up the alignment.)
Their online form is much cleaner, fortunately, however this PDF form is a great illustration of the WRONG things to do. At first glance, it’s confusing. The switch between one solid field and one box for each letter is visually odd. Spacing between data fields varies and similar data fields have different lengths.
About the only positives on this page are 1) it fits on 8-1/2 x 11 sheet of paper, 2) it contains all the needed info, 3) the left margin is consistent.
Converting this form to change the letter box fields to standard data fields, keeping the same locations of the fields, it looks like this:
This is an example of what some web forms look like. I have filled out web forms like this! It’s hard to visually follow what data goes where and users spend additional time trying to find where specific data fields are.
If we clean up this form so that data fields line up, and rearrange a few to keep similar data fields in a column, it looks better:
Notice the difference?
This version is much more pleasing to the eye, and the alignment conveys a sense of order instead of confusion. Without the constraints of fitting this on an 8-1/2 x 11 piece of paper, even better alignment of data fields can be achieved.
An important note, while outside the scope of this chapter, the brown background color is a poor choice for customer satisfaction. Light blues, greens, grays, even light pink or yellow is much more pleasing to the eye. Please refer to the appropriate chapters for background colors, fades, etc.
The first example does a nice job using three different field lengths, and has them nicely aligned in columns.
The second example below has all the fields the same length, even if not needed, like for the zip code. However the consistent alignment makes the form look clean and neat.
The important point of this chapter is to make the content align. Many examples can be found on the internet of good and bad forms.
While forms have been used to illustrate the Alignment principle, good alignment applies to all page layouts, whether web pages, installed app UIs, reports, icons, descriptive text with images and icons, interactive menus and so on. Keep the content on the page aligned. It makes for a much cleaner UI, is pleasing to customers, and helps achieve that all-important customer satisfaction.
© 2017 Curt Larson. All rights reserved.