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.
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.
We can solve this problem by moving the icons so that they are clearly closer to one list than the other.
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.
There are two mistakes here:
- There is no visual separation between the two radio button groups. It looks as if all options belong to one group.
- 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.
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.
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.
- Indent detail below master.
- Put the detail to the right of master.
- 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.
- Visual hierarchy can be arranged at any level of depth. Below I show how A is master to B which is master to C.
- Just use multiple levels of indentation.
- Use multiple columns to indicate deeper hierarchies. This is common on e.g. the macOS Finder (file manager on Mac).
- 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.
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.
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.
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.
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.
The salmon colored UI designs I am using here must be credited to 365psd.com, which provide a lot of awesome designs for UIs.