Basic principles for designing interfaces
To create for people, we first need to know how we perceive and act as people.
You are about to read the first part of the article talking about basic principles for designing interfaces. The topic is quite broad, so the second part — the one about the psychological aspects is coming really soon. Those two articles will teach you about principles discovered and developed even 100 years ago, long before the first graphical interface was created.
Have a nice read!
Part I. How do we perceive the world?
On how we group what we see, how we perceive through colors, spaces, and visual aids
Gestalt, or connected wholeness
Gestalt is a theory of perception — how we perceive and how we subconsciously connect and simplify what we see.
The graphic above collects several Gestalt principles in one place.
Okay, but first things first.
Closure — the example of the letter “G” shows how despite the fact that it is broken, we have no problem recognizing the letter — we naturally follow the lines with our eyes and “close”/complete it subconsciously.
Common fate — the letter “E” has been “split”, but elements close to each other are naturally combined into a whole, so there is no doubt that it is the letter “E”.
Continuation — the principle is similar to the first one, except that here the letter “S” has been crossed by a vertical line, but this does not cause us any problem in recognizing the letter “S”.
Similarity — once we recognize the letter T (analogically — as some element of the interface), we do not have to subconsciously make an effort to recognize it again when we encounter the same element.
Figure-ground — People instinctively perceive objects as either being in the foreground or the background. In this case, the rocket looks like it’s standing in the foreground against a bright background.
Proximity — in the case of the letter “L” which is made up of squares, due to the fact that they are very close to each other our brain subconsciously puts them together.
Symmetry — symmetry is one of the factors that makes us perceive something as pretty. And as humans, we just like pretty things.
An interesting example to make us realize how we subconsciously close and look for simplified forms is the graphic above.
Although there is no figure on any of them, we perceive them as a circle, two squares, and two triangles.
The gif above shows how we subconsciously look for the whole in the random blobs and see the silhouette of a moving dog.
The WWF logo above features a panda, although its silhouette is not enclosed in the upper part — the designer deliberately left this task to the observers.
Create groups by the distance of elements from each other
The above example shows that we should treat empty space (aka “light”) as a passive interface element.
In the example of the dots above, you can see how in the “square” on the right the increase in space created columns for us.
Formation of groups by separating boundaries
A slightly less subtle way to delineate visual groups is to clearly mark them with boundaries as you can see in the graphic above.
Formation of groups by the similarity of elements
In the graphic above you can see how playing with the shape of objects also helps us to create visible groups with exact same proximity or without creating boundaries.
Okay, but why is this so important? Just because!
Grouping, in this case, overcame the fact that we read from left to right, top to bottom, and the fact that NO SMOKING has a different color. If you want to see more examples of these, there’s a subpage on Reddit: https://www.reddit.com/r/dontdeadopeninside/top/?t=all
Applying these principles to interfaces
Web forms are a good example of ‘Proximity’. Elements grouped together are perceived as belonging together. Grouping label and field together, as well as grouping together different sections of the form itself, helps the user to understand the form quickly and complete it correctly.
Using the example above, I wanted to show how not following these rules will cause us to have trouble separating these visual groups.
In the example on the left, you can see how “Header” is placed away from white blocks, especially the second or third ones look unrelated to any of the blocks making it very unclear.
On the right, we no longer have this problem, each “Header” has a clearly assigned block.
An example from the Pages application. Buttons have been thematically grouped by decreasing the distance between them and increasing it between the created groups.
An example of separating borders with horizontal lines in AppStore. The use of clear borders can also be introduced a bit more subtly, instead of full frames, horizontal lines are enough here.
All thanks to the use of larger distances here as well as separating visual groupings.
Another example of how separation through borders can be done more subtly through background.
So, here we learned the basic principles of Gestalt and how can we use them when designing interfaces. Stay tuned for the next part; more interesting principles are coming!
