The power of visuals in product design
How visual elements affect our perception, recognition and memory when interacting with digital products.
The Age of Visual Information
Almost all the information we see is absorbed by our brain, consciously or unconsciously. This information plays a huge role in decision making and behavior. It would be foolish to neglect this.
Just to understand how we live in the age of visual information, take a look at the following numbers. More than 500 million people watch videos on Facebook every day, with 85% of them without sound. Snapchat users share 9,000 photos per second. Per second! More than 500 million people use Instagram daily to like photos, write comments and post stories.
It s in our DNA
The first reason lies in our DNA. Eric Jensen, in his book “Brain Based Learning“, demonstrates that 40% of the nerves in the brain are connected to the retina. More neurons are responsible for vision than for all other senses combined, and probably 90% of all incoming information is triggered by visual stimuli. In addition, recent research shows that approximately 65% of the population learns visually, preferring to explore and interact with information when it is associated with visual elements.
Our brains can pick up images that the eye sees in only 13 milliseconds, which is 10 times faster than blinking. This means that we have developed the ability to perceive visual information at an absurd rate.
It s in our history
We have used images for self-expression for thousands of years. With the help of pictures and drawings, people could convey key information about the world around them. For example, drawing maps and warning of the presence of predators. As in the case of the tangible world, we used visual elements to represent subjectivity: gods, nations, spirits and local culture were constantly depicted on the walls around us.
User interface
We can assume that the use of visual elements such as icons, shapes, colors, typography, images and illustrations in the interface will have a corresponding impact on the products we design.
Unsurprisingly, this topic has been extensively discussed in the design community over the years.
But are these visuals effective? What are their benefits? What is their impact? Finally, what leads us to believe that they play an important role in the interaction of users with the product we are designing?
To answer these questions, I interviewed designers of large and small design teams and studied a number of user behavior studies. That being said, I ve compiled a list of 5 reasons why visual design is so important in terms of user behavior and overall product experience.
In this article, we ll look at how visuals:
- Accelerate data perception
- Retain data much longer
- Cause pleasure
- Direct attention
- Make the interface universal
1. Accelerate data perception
Visual perception is one of the most productive and fastest ways of transmitting information to the brain.
The point is that when we use visual components such as icons, colors, images and illustrations, we absorb information much faster.
As a result, as soon as you see a girl s dark hair, you understand that she is angry, you can guess the tone of her voice and even, you can predict what she will do next. You were not going to evaluate these points. But you just did it. It just happened.
This happens very quickly. According to a study by S. Thorpe, D. Fize and C. Marlot entitled “Processing Speed in the Human Visual System”, it takes the brain only 150 milliseconds to process an image and another 100 milliseconds to understand its meaning.
Other recent studies show that our brains recognize images, illustrations, and icons in 60,000 times faster than words or medium-length content. Obviously, the use of illustrations, images and icons does not replace text and labels. By combining them, you make the mental processing of your interface faster and more efficient. Especially when many of the basic interactions have to be completed in a matter of seconds.
However, the recognition level is not the same for all users.
A study of the speed of icon recognition when interacting in digital interfaces, which was attended by 60 people, showed that the degree of recognition varies greatly with age. At the same time, gender is not an important factor – the level of recognition shown by men was only four% higher than women.
Study participants over 60 had an icon recognition rate 60%, and participants aged from 20 to 30 years – almost 90% – a significant difference.
In addition, the same study found that icons illustrating real objects were more recognizable than symbolic and subjective ones. This is why it is so important to consider the user s background before creating visual components for your interface.
An example of this is changing the recognition speed of a simple alarm clock icon to 60%. Whereas in view 1 – using a specific clock image – recognition rate was 100%, in view 2 – using calendar – the recognition rate was 40%.
2. Retain data much longer
Humans have an impressive ability to remember images for a long time, even if they have only seen them once. This makes the use of visual stimuli in our products an appropriate tool for the user experience.
A study by Roger Shepard called Learning 10,000 pictures showed that an audience who saw 612 images in about 6 seconds reached 98% success when asked to select them in a test comparing two alternatives. With similar tests for memorizing words and short sentences, the score drops to 88%…
The experiment also showed that image memory consistently outperforms verbal memory. Firstly, because the ability to memorize images is almost unlimited, and secondly, because images give a better speed of memorization than texts. Moreover, vivid images better remembered than ordinary…
When comparing visual and listening context, there is still a difference. Edgar Dale s research shows that when people hear information, there is 10% the likelihood that they will remember her after 3 days.
However, when the same information is associated with visual elements – images, icons, or colors – almost 65% what was transferred is retained in memory even after 3 days.
Although the retention rate in the first hours (short-term memory) does not differ much (72% when writing and reading; 80% in visual perception), in the analysis of long-term memory, the difference is significant. She makes 10% holding memory for writing and reading and 65% for visual stimuli.
Thus, using visual elements, we see faster recognition of information (250 millisecondsas shown earlier), as well as longer memory retention times (up to 65% within 3 days).
Other variables, of course, also affect the assimilation of information. Curves of age, subjectivity and contrast affect recognition and memory, but the use of visual components is still a powerful tool for improving the user s learning curve. Especially when developing complex products or scenarios that require more attention.
3. Induce pleasure
When we quickly comprehend information, with little cognitive effort, our body responds positively, inducing a sense of pleasure. This was demonstrated by a study by Peter Winckelmann and John T. Cacioppo entitled “Mind at ease puts a smile on the face”.
During the experiment, the participants watched a series of images while their reactions were observed. Some of these images were easier to recognize, while others were not.
Because changes in facial expression are too subtle and too short-lived to be noticed by observers, equipment was installed on the cheeks, eyebrows, and around the eyes to monitor for signs of mood swings.
Results from both studies showed that easily treated stimuli were associated with greater activity in the area zygomatic bonewhich is responsible for controlling our smile.
As expected, people displayed a slight smile and relaxed their foreheads when the images were easier to see and recognize. Cognitive comfort is associated with good feelings.
The use of visuals also makes the product enjoyable for users.
4. Direct attention
Visuals can enhance the entire navigation interface. Fonts, spaces, calls to action, typography, and images can act as visual dividers, giving users a clear idea of what s going on in front of them.
In addition, research on eye tracking shows that readers pay more attention to information loaded with visuals. They spend even more time looking at them than reading the text itself when the images are relevant.
A study by the Nielsen Norman Group found that users spend 10% more time looking at speakers photos than reading their biographies, although text content takes up 316% more screen space.
Another example of how Uber optimized the landing page by changing the visuals.
After changing the cover in the first fold, the title was seen 100% testers, whereas the previous version was noticed 90%… It means, that 10% of people didn t focus on the headline for a minute…
In addition, the new version of the title was viewed after 1 second, while in the old version, users needed 1.5 secondsto see the title. This is a huge difference. Users more often returned to the new slogan and spent eight% of its time for the first fold, whereas in the previous version this figure was 3%…
What caused these changes? Despite minor changes such as centering the page title and improving content, the biggest impact was cover change…
The slight difference in the placement of characters in the images greatly influenced the user s attention.
The guy looking at the users got more attention than the page content, while the guy looking at the text redirected all the attention to the slogan. You can read more about the study here.
5. This makes them versatile.
Finally, icons, colors, illustrations, and other types of visual components in an interface can make an application or website more accessible, especially when used by people from different countries.
Thus, we can say that using icons improves general understanding. In addition, images push the boundaries of perception for people who have OCR disorders such as dyslexia, have difficulty reading, or cannot read.
Acknowledgments
- Thanks to designers Matheus Bueno, Christiane Lynn, Victor Rosato for their contributions to this article.
- Thanks to Juliana Arthuso for proofreading this article.