Visual Alignment

Your constantly-updated definition of Visual Alignment and collection of topical content and literature

What is 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.

Show Hide video transcript
  1. Transcript loading...

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.

Animation of visual objects moving into alignment on a screen

One of the most important aspects of visual sense-making is alignment. Elements that are aligned vertically or horizontally tend to be seen as related.

© Interaction Design Foundation, CC BY-SA 3.0

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.)

Animation of a column of left-justified labels becoming right justified to be closer to the prices that follow

While left alignment of text tends to be the rule in left-to-right languages, there are situations where other alignments are preferable. In this example, the right-aligned text reduces the gap between columns.

© Interaction Design Foundation, CC BY-SA 3.0

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 @ https://uxdesign.cc/principles-of-ui-design-alignment-dd707e983f29

A graphic designer’s view of alignment @ https://ux360.design/alignment-principle-design/

Design principles: Alignment @ https://uxengineer.com/principles-of-design/alignment/

The Grid System: Building a Solid Design Layout @ https://www.interaction-design.org/literature/article/the-grid-system-building-a-solid-design-layout

Using Grids in Interface Design @ https://www.nngroup.com/articles/using-grids-in-interface-designs/

Literature on Visual Alignment

Here’s the entire UX literature on Visual Alignment by the Interaction Design Foundation, collated in one place:

Learn more about Visual Alignment

Take a deep dive into Visual Alignment with our course Human-Computer Interaction: The Foundations of UX Design .

Interactions between products/designs/services on one side and humans on the other should be as intuitive as conversations between two humans—and yet many products and services fail to achieve this. So, what do you need to know so as to create an intuitive user experience? Human psychology? Human-centered design? Specialized design processes? The answer is, of course, all of the above, and this course will cover them all.

Human-Computer Interaction (HCI) will give you the skills to properly understand, and design, the relationship between the “humans”, on one side, and the “computers” (websites, apps, products, services, etc.), on the other side. With these skills, you will be able to build products that work more efficiently and therefore sell better. In fact, the Bureau of Labor Statistics predicts the IT and Design-related occupations will grow by 12% from 2014–2024, faster than the average for all occupations. This goes to show the immense demand in the market for professionals equipped with the right design skills.

Whether you are a newcomer to the subject of HCI or a professional, by the end of the course you will have learned how to implement user-centered design for the best possible results.

In the “Build Your Portfolio: Interaction Design Project”, you’ll find a series of practical exercises that will give you first-hand experience of the methods we’ll cover. If you want to complete these optional exercises, you’ll create a series of case studies for your portfolio which you can show your future employer or freelance customers.

This in-depth, video-based course is created with the amazing Alan Dix, the co-author of the internationally best-selling textbook Human-Computer Interaction and a superstar in the field of Human-Computer Interaction. Alan is currently professor and Director of the Computational Foundry at Swansea University.    

All Literature

Please check the value and try again.