Alignment and spacing

Alignment and spacing will discuss how to make it easy for users to understand which elements on a screen are related to other elements, and how best to use those elements. Watch the video to learn more. 

We will start with the basics of alignment and spacing.

Consistent alignment and spacing make it easy for users to understand which elements on a screen are related to other elements, and how best to use those elements. Inconsistent alignment and spacing demand that users have to sort out what elements are for, how they are connected, and how to work them. The same rules apply to buildings and construction codes for exactly the same reasons. The height from the floor to door handles, the height from floor to light switches should be consistent. Imagine walking up a flight of stairs on which each stair — each riser — was a different height. You’d have to really concentrate, or you might trip.

Now imagine trying to complete business tasks while walking up those inconsistent stairs. Would it affect your ability to efficiently and accurately complete those tasks? Of course, it would. Building a UI with inconstantly aligned and spaced elements is like building a house with different stairs heights or using doors with different doorknobs on every door.

As a software professional, you need to make sure that any UI you produce has been thoroughly checked for alignment and spacing issues, and that design systems — the patterns and guidelines set up by your design team — use a formula that defines all spacing and alignment. The space between elements should be consistent, and ideally should be proportional to spacing within and around all elements. This keeps things neat, organized, and proportional, making it easier for users to decipher how elements are connected, such as how rows of read-only data are related to each other or which fields are grouped logically in a form.

Here we see a typical alignment problem. The red lines show where left-justified items should align to. Notice that the top-most data in each column does not align properly. Spacing should also be consistent vertically, and this is especially true in a form or when showing read-only data. Without consistent spacing, your users will struggle to understand the context of the presented data, specifically how data or fields are related. For the same reason, we must also avoid large horizontal spacing between items. Scanning across a screen to see related fields or data slows down production work, is very inefficient, and will likely lead to errors.

In this example, the spacing between the Current manager field and the New manager field is awkward. Because the two fields are logically related to each other — their context — there is no reason for them to be that far apart. Additionally, there is too much space between the first row of fields and the second row (the Authorization reason field). Lastly, the Authorization reason field is far too wide. The maximum width of any form or form element should be 80em — essentially 80 characters. There is no reason for the “authorization reason” field to be wider than the first row. Failing to remove the spacing of the last item in a list or stack of items is another common mishap. When using a list or stack of items, we should remove spacing on the last item. The default setting for any new stacked layout is set to remove the space on the last item, but older layouts may not be set up correctly.

You should double and triple check spacing if you’re using any nested sections or nested containers, as the parent layout may add spacing to the nested element itself: layouts consider an embedded section or container to be no different from any other element. If the nested elements in the embedded section or container also have spacing, you will get inconsistent spacing in the final UI. Issues also arise when a nested section or container contains visibly hidden elements, and the show/hide logic has not also been applied to the embedded section. When the nested elements are hidden, the section itself — again, like all elements in a layout — will take up space, causing inconsistent spacing.

Check your knowledge with the following interaction.