
In the previous article we explored the theory of fluency – which states that fluent designs are easy to process , hence improves user engagement. In this article we will explore nine practical ways to implement this theory.
Simply put we can make a design easy to process by simplifying a design and reducing redundant visual information or alternatively by using ways that our brain finds a particular image type easier to process.
1. Making use of familiar form but with intriguing details
Designs that are complex can be liked by a user if they convey a lot of information per design element i.e. designs that have high proportional density. Furthermore, designs which turn out to be easier to process than expected by the user are also liked by the user.
Putting these ideas together we can say that – the existence of a lot of details sets an expectation among users that it will be more difficult to process, yet its overall familiar easy-to-process form comes as a surprise to the user creating a positive experience.
2. Clarity and Contrast
A contrasting subject and background can increase the processing fluency of a design. Research has shown that when shapes are viewed with a higher level of contrast to the background, people are more likely to find them attractive.
3. Self-Similar Patterns
These designs use underlying low Kolmogorov Complexity patterns for constructing the design. The overall design uses simple but repetitive patterns making it look naturally integrated and harmonious. The smaller elements of the pattern are similar to the whole. In other words, there is a pattern that repeats at different scales.
4. The Fibonacci sequence
The Fibonacci sequence is a sequence of numbers or shapes in which the new element is the sum of the previous two elements.
For example- 1,1,2,3,5,8 …
5. The Golden Ratio
The golden ratio is a pair of lengths in which the difference between the long and the short length is the same as the difference between the total length and the long length.
In the above design, the left part of the banner and the right part of the banner are in the ratio of 1.618, making it pleasing for human eyes.
6. The Rule of Thirds
Divide the available canvas with two equally spaced horizontal and vertical lines. The idea is to place the most important information at the intersection of these lines, at points A, B, C and D in the figure below.
Placing the most important information on the co-ordinates A, B, C or D makes the design convey the information with more clarity.
7. Symmetry
Our brains can process symmetrical designs easily. Even infants as young as four months can identify symmetry. Research shows that people have a higher preference for vertical and horizontal symmetry compared to diagonal symmetry.
8. Pseudo Neglect and our preference for left over right
Our brain has a tendency to pay more attention to visuals present in our left visual field than in the right. It is because signals from the right eye are sent to the left side of our brain (designed to understand languages and logic) and signals from the left eye are sent to the right side of the brain (designed to decode visuals).
Hence, designs in which images are placed to the left and words to the right look more appealing to the people.
Which bar looks darker?
9. Perceptual subitizing and our preference for integrated visuals
Perceptual subitizing is our ability to instantly compute how many things are there in a design – how many individual elements make up a design without counting them one by one. This ability is linked to human’s hunter-gatherer past. The ability to instantly size up whether a group of predators or prey animals in a distance determined our ancestors’ survival. All they needed to know was whether there were one, two, three, four or many animals. Knowing the difference between seven or eight prey was not as critical as knowing the difference between one and three.
An average human being can instantly compute the count of elements in a design but only up to four.
A design with a minimal number of individual graphical regions that are positioned in an integrated way is easier for a user to process and decode compared to designs which have many unintegrated elements in it.
Here is a free tool to check visual vitals of your website.
Do follow our LinkedIn page for updates. [ Myraah IO on LinkedIn ]