Visual Balance also known as Optical Balance in User Interface is an important factor for creating a good user experience. The correct placement of each element, no matter how simple it is, creates optical balance, meaning that the eye will go through the page in a natural way and that there are no obstacles for the eye to get to where you want it to go. Typical elements are blocks of text, icons or images that need to be put into their respective positions, aligning them with other relevant elements. But this does not mean that all elements must be aligned – sometimes they should not be aligned because you want your design to be asymmetrical and this helps to create an optical balance.
How to create balance in the user interface
This square and circle are exactly the same sizes, but appear to be different sizes because of the peculiarities of human visual perception. To overcome this problem, some changes needed to be done while designing Logos, Icons, Typography, User Interfaces.
In this image, the size of the circle and square is clear. To balance visually, the circle should be wider and taller.
Example 1
Icon
Which one looks perfect to you? The one on the right side isn’t it?
Let’s check how they are aligned
To position the triangle better, more left padding is used than right padding.
Example 2
Text Boxes
You can see two text boxes in the above image. The first text box is paired with a round button with an equal diameter of the box height but the button seems smaller to our eyes. On the second image, the button diameter is a little bit increased to make the text box and button balanced.
Example 3
Logo
Take a look at these Google logos. Which one looks perfect to you? Are they both the same?
Let’s take a look at the next image
Now the difference is clear. On the left is the official logo of Google. Here we can see that they have not used a perfect circle for their logo.
Google explained about this:
“The Google G is directly derived from the logotype “G,” but uses increased visual weight to stand up at small sizes and contexts where it needs to share space with other elements. Designed on the same grid as our product iconography, the circular shape was optically refined to prevent a visual “overbite” at the point where the circular form meets the crossbar. The color proportions convey the full spectrum of the logotype and are sequenced to aid eye movement around the letterform.”
User interfaces are one of the most used mediums in a person’s day-to-day work. People are interacting with a mobile for setting the alarm, booking a cab, checking their emails, calling, etc.
There are many types of apps and websites which people use every day, some of them will treat users with a good user interface and user experience. Some of them will provide good user interfaces, but they will fail when it comes to the user experience, this happens because of simple mistakes in the user interface. This error will be in aligning, typography, placement of buttons, etc.
The alignment of an object can be done in many ways. Maintaining the correct proportions like length and width are the most widely used ways, and some user interfaces will look bad even after such aligning. Optical balance can help with this problem. Type designers use optical tricks for creating readable and well-balanced fonts. This kind of small asymmetrical alignments can be helpful for user interface designers to build more convenient and clean designs that build better user-machine communication.
