Understanding Visual Layout in GUI Design

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.

Proximity

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.

  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.

Continuity

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.

Similarity

Objects of similar shape, size and color are related.

Closure

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.

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

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.

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.

--

--

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
Erik Engheim

Erik Engheim

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