The power of Visual in Product Design
How visual elements affect our perception, recognition and memory by interacting with digital products.
How visual elements affect our perception, recognition and memory by interacting with digital products.
Getting Started
Almost all the information we see is consciously or unconsciously absorbed into our brain. This information plays a huge role in our decisions and behavior.
Neglecting it wouldn’t be wise.Just to get an idea of how we live in an age of visual information, more than 500 million people watch videos daily on Facebook, with 85% of them being muted. Snapchaters share 9,000 photos per second. Per-second. M
ore than 500 million people use Instagram daily to like photos, comment and post stories.
The first reason comes from our DNA. Eric Jensen, in his book Brain Based Learning, shows that 40% of the brain nerves are connected to the retina; more neurons are devoted to vision than all the other senses combined, and probably 90% of everything that comes to our mind is triggered by visual stimuli. In addition, recent studies show that approximately 65% of the population are visual learners, preferring to study and engage with information when linked to visual elements.
And it goes beyond. Our brain can capture images that the eye sees for as little as 13 milliseconds, 10 times faster than a wink. This means that we’ve evolved to absorb visual information at an absurd speed.
We’ve used images to express ourselves for thousands of years. Through paintings and drawings, humans were able to convey key information about the world around them, for example by drawing maps and warning of the presence of predators. Like we do with the tangible world, we’ve also used visual elements to represent subjectivity: gods, nations, spirits, and local culture were constantly depicted on the walls around us.
User Interface
With that in mind, it’s normal to assume that the use of visual elements on user interface — such as icons, shapes, colors, typography, images, and illustrations — will bring relevant impacts in the products we design.
No wonder this topic has been exhaustively discussed in the design community over the years.
Well Fitness App by Hesham mohamed for Fireart Studio
But are these visual elements effective? How do they benefit us? What ‘s their impact? And finally, what leads us to believe that they play a relevant role in user interaction with the product we design?
To answer these questions, I’ve gathered some of my experience, interviewed designers of large and small design teams; and I’ve looked into some research about user behavior.
With that, I’ve listed 5 reasons to explain why Visual Design is so important regarding user behavior and the overall product experience.
In this article we’ll go over how visual elements:
1. Speed up data perception
2. Retain data for much longer
3. Trigger pleasure
4. Guide attention
5. Make user interface universal
Reason 1
Visual perception is one of the most productive and fastest ways to send information to the brain.According to Kahneman, writer of the book Thinking Fast and Slow and winner of a Nobel in Economics, this happens because our minds are split into two systems.
The first one, called System 1, operates extremely fast, automatically, intuitively, involuntarily and with almost no effort. The second, System 2, manages our attention to laborious mental activities, including complex calculations, or anything requiring a lot of effort and focus.
The point is that when we use visual components such as icons, colors, images, and illustrations, we run System 1 right away.
The result: we absorb information much faster.For example, when we look at the picture below we intuitively trigger System 1, and only if we need to, we jump into System 2.
Illustration by Ariana Sánchez / Mi Amor Es El Mar
The result is that as soon as you see the girl’s dark hair, you realize she’s angry, guess her tone of voice and might even have a prediction of what she’d do next. You didn’t intend to evaluate these points. You just did. It just happened to you. This is an example of System 1 acting.
It happens very fast. According to a study by S.Thorpe, D.Fize and C. Marlot called The processing speed in the human visual system, it takes only 150 milliseconds for the brain to process an image and another 100 milliseconds to understand its meaning.
Other recent studies show that images, illustrations, and icons are recognized up to 60,000 times faster than words or medium-long contents by our brains. Evidently, using illustrations, images, and icons doesn’t replace text and label. By combining them, you make the mental processing of your interface faster and more efficient, especially when many of our basic interactions need to be done in a few seconds.
However, recognition rate is not the same for all users.
A study of 60 participants to understand Icon Recognition Speed in interactions in digital interfaces showed that although gender is not a relevant factor — the recognition rate shown by men candidates was only 4% higher than the women candidates — recognition varies dramatically with age.
Participants over 60 had a 60% recognition rate for icon meaning, while participants between 20–30 had a recognition rate of almost 90% — a substantial difference.
In addition, the same study showed that icons illustrating real objects were more recognizable than symbolic and subjective icons. That’s why it’s so important to consider user background before designing visual components for your interface.
An example of this is 60 pp variation in the recognition rate for a simple alarm icon. While in representation 1 — using a concrete representation of the clock — the recognition rate was 100%, in representation 2 — using a calendar — the recognition rate was 40%.
Reason 2
Human beings have an impressive ability to remember images in the long-term, even if they are exposed to them only once. This makes using visual stimuli in our product flow a relevant tool for user experience.
In a study by Roger Shepard called Learning 10000 pictures, it was shown that an audience exposed to 612 images for about 6 seconds achieved a 98% hit rate when asked to remember them in two-alternative tests. Compared with similar tests to remember words and short sentences, the rate drops to 88%.
Memories by Gustavo Zambelli, Adapted.
The experiment also showed that picture memory is consistently superior to verbal memory. First, because the image memorization capacity is almost unlimited and second because images result in better memory rates than texts. Also, vivid images were better retained in our brains than normal ones.
By comparing visual context and listening context, the difference still remains. A study by Edgar Dale shows that when people hear information, there’s a 10% chance they’ll remember it 3 days later.
However, when the same information is paired with visual elements — images, icons or colors — nearly 65% of what was transmitted is retained even after the same 3 days.
Although the retention rate in the early hours (short-term memory) is slightly different (72% when written and read; 80% when visual), when analyzing long-term memory, the difference is significant, presenting 10% of memory retention for writing and reading and 65% for visual stimuli.
So with the use of visuals we see faster information recognition (250 milliseconds as shown before), and also longer retention time in our brain (lasting up to 65% over 3 days).
Other variables certainly have an influence on information assimilation. Age, subjectivity, and contrast curves have an impact on recognition and memorization, but the use of visual components is still a powerful tool for improving the user’s learning curve, especially when designing complex products or flows that require more attention.
Reason 3
When our mind reaches a quick understanding by being exposed to a small cognitive effort, our body reacts positively, triggering a sense of pleasure. This is what’s shown by a study called “Mind at ease puts a smile on the face” by researchers Piotr Winkielman and John T. Cacioppo.
The experiment had participants watch a series of images while their expressions were monitored. Some of these images were made easier to recognize and some slightly more difficult.
Leaking, by Nick Staab
Because changes in expression are too subtle and too brief for observers to detect, equipment has been placed on the cheek, eyebrow, and around the eyes to monitor for evidence of mood swings over images.
Results from both studies revealed that easy-to-process stimuli were associated with greater activity in the zygomaticus region, which is responsible for controlling our smile.
A few faces on a fine Friday, by Sebastian Abboud
As expected then, people displayed a slight smile and relaxed foreheads when images were easier to see and recognize. It seems to be a System 1 feature that cognitive comfort is associated with good sensations.
Thus, since the use of visual elements first drives System 1, fast and automatic, it can be said that the use of these elements also provides users with pleasure during product use.
Reason 4
Visual elements can improve the entire interface navigation. Fonts, whitespace, CTA’s, typography, and images can all play as visual dividers between sections, giving users a clear view of what’s happening in front of them.
In addition, eye-tracking studies show that readers pay more attention to information loaded with visual elements. They spend even more time looking at them than reading the text itself when images are relevant.
A study by Nielsen Norman Group has found that users spend 10% more time looking at speaker photos than reading their biographies, even though text content consumes 316% more screen space.
Another example was how Uber optimized the Landing Page by changing visuals elements.
By replacing the cover image in the first fold, the headline was seen by 100% of testers while the previous version was viewed by 90%. This means that 10% of people didn’t focus on the headline for a moment.
In addition, the new version of headline was viewed after 1 second, while in the old version, users took 1.5 seconds to see the headline. It’s a huge difference. Users came back to the new slogan more often and spent 8% of their time on the first fold, while in the previous version, the number was 3%.
Why these changes? Despite minor adjustments, such as centering the page title and improving the content, what most impacted in the conversion was changing the cover image.
A slight difference in the characters placement on the images made a huge difference in user’s attention.
The boy “looking at” users drew more attention than the page content, while a man looking at the text redirected all attention to the slogan. Check out the full study here
Reason 5
Lastly, icons, colors, illustrations, and other types of visual components in the interface can make an app or website more accessible, especially when it’s used by people from different countries.
Thus, we can say that the use of icons improves overall comprehension. In addition, images push the boundaries of perception for people who are affected by text recognition disorders, such as dyslexia, have difficulty reading or who can’t read.
This article was possible thanks to the following studies, experiments and discussions:
1. Scene Memory Is More Detailed Than You Think: The Role of Categories in Visual Long-Term Memory, by Talia Konkle, Timothy F. Brady, George A. Alvarez, and Aude Oliva;
2. Photos as Web Content by Jakob Nielsen;
3. Values of the Product Illustration by Katarzyna Dziaduś;
4. The Power of Visuals in eLearning Infographic; Unsupervised Learning of Visual Features through Spike Timing Dependent Plasticity by Timothee Masquelier and Simon J. Thorpe;
In UIs, do people recognize icons faster than words?, Big Reasons to Apply Illustrations in UI Design, and Visual Perception. Icons vs Copy in UI by Marina Yalanska;
5. The role of working memory, inhibition, and processing speed in text comprehension in children by Erika Borella, and Anik de Ribaupierre.
6. Thinking, Fast and Slow by Daniel Kahneman
7. Sapiens: A Brief History of Humankind by Yuval Noah Harari,
8. The Culture Map: Decoding How People Think, Lead, and Get Things Done Across Cultures by Erin Meyer
9. Thanks to designers Matheus Bueno, Christiane Lynn, Victor Rosato for their contribution to this article.
10. Thanks to Juliana Arthuso for proofreading this article.
Get a 30-minute call to go through portfolio reviews, interview preparation, career growth, and much more.
