Understanding Visual Layout in GUI Design

How do you place buttons, dropdown menus, checkboxes etc so that your user interface is easy to understand and navigate for users? Here I’ll cover some theory for how to think about layout of UI components in a user interface.

The Four Gestalt Principles

Humans perceive naturally perceive certain relationships between visual objects depending on how they are placed relative to each other. This can be summed up in four principles referred to as Gestalt principles.

Image for post

Objects which are close are assumed to be related or influencing each other. So e.g. objects in A and B are perceived to be two separate groups of objects.

Below is an example of when proximity is not taken into account. It is impossible to guess which list will get elements added and removed when you click the add and remove buttons.

Image for post

We can solve this problem by moving the icons so that they are clearly closer to one list than the other.

Image for post

This is such a common problem that I see all the time. I’ve recreated a case here from the software I work on for modeling rock formations in the subsurface. The options and labels are not important. Just pay attention to the layout.

Image for post

There are two mistakes here:

  1. There is no visual separation between the two radio button groups. It looks as if all options belong to one group.
  2. The headlines to each group is so far away that they create a weak association to the groups they are headlines for. Each group is closer to each other than their headlines.

To solve the problem, we need to move each group apart and bring the group headlines closer.

Image for post

Aligned objects are perceived to be related. Hence users will perceive the groups of objects on either side of the straight line formed by aligning objects as separate groups.

Objects of similar shape, size and color are related.

Humans will naturally attempt to mental enclose objects if they form a sort of boundary. You can use this convey that objects within an enclosure are part of a group. B forms a clear closure but not A.

Visual Hierarchy

We use visual hierarchy to indicate relationships between objects. I have marked these relationships master M and detail D. Master components will control or influence detail components.

Image for post
  1. Indent detail below master.
  2. Put the detail to the right of master.
  3. Arrange the UI in columns where a column to the left controls a column to the right. This is a common arrangement for e.g. email applications or file managers. The left column contains a an overview over emails while the right shows details about a specific email.
  4. Visual hierarchy can be arranged at any level of depth. Below I show how A is master to B which is master to C.
Image for post
  1. Just use multiple levels of indentation.
  2. Use multiple columns to indicate deeper hierarchies. This is common on e.g. the macOS Finder (file manager on Mac).
  3. More complex applications often made the overall organization of the UI into multiple columns. However they don’t need to be heterogenous. E.g. here A is a of objects, while B has a view of multiple objects. You see the properties of the object selected in B in the C column.

The blueprint styled images might look to abstract, so I’ll show some concrete examples of indentation to represent a hierarchy of options.

In the macOS system settings we can choose how to display time and dates. In the image below you can see all the options below “Show data and time in menu bar” are grayed out. These options are all indented to indicate that this checkbox is the one enabling the options below.

Image for post

If you enable showing time, you enable the opportunity to show analog or digital watch. The options below are grayed out because they relate to the digital watch which has not been enabled.

Image for post

However if we select the digital choice all the options below are enabled. You can see that the options for digital watches is placed indented under the label “Time options.” This is what tells the user what the relationships between the options are.

Image for post

Balance and Harmony

While not so important for usability and ease of use, we still like to make our UIs visually pleasing and harmonious. By following these principles you don’t have to be talented UI designer to make your UIs look nice.

Image for post

The idea is to achieve visual balance in your UI. You think about your UI as balancing on the middle and that each UI component has weight corresponding to its size.

In (2) the UI tips over to the left. We restore the balance in (1) by moving the bottom UI component to the right.

All of this probably seems blindingly obvious when pointed out. But it is common for people to follow fixed conventions of e.g. always filling in their UI components starting from the top left.

If you have your UI in multiple tabs, you might not have the opportunity to resize it to remove whitespace elsewhere, hence you easily end up in a visually unpleasing situation similar to (6).

However be on the watch out that you don’t accidentally destroy usability while maintaining balance. You don’t want to accidentally communicate a hierarchy that isn’t there.

Credits

The salmon colored UI designs I am using here must be credited to 365psd.com, which provide a lot of awesome designs for UIs.

Written by

Geek dad, living in Oslo, Norway with passion for UX, Julia programming, science, teaching, reading and writing.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store