Visual Perception and Its Influence in UX Design

Though working in UI development, there are certain things that we need to consider from the UX aspect as well. One of them being visual perception, which influences the human interaction with the UI. There are many ways in which human perception varies, especially in the way we observe different visual information. First, we’ll start from knowing what visual perception is. 

Visual Information

Visual information are images or videos that contains data other than plain text. Visual Information could carry colour, emotion, culture, an inspirational concept or a complex explanation.

Visual Perception

Ideally, the input to the eye is the same, while the difference is with the way human brain processes that visual information. This ability of our brain to process information is called visual perception. Visual information can reach people across languages/platforms. Research states that human brain takes only 13 milliseconds to process an image. That is, 60,000 times faster than text. Visualisation can be a greater way to convey an information to even non-readers or dyslexic.

For instance, every one of us must have come across people who do not read newspapers, yet skim across only pictures in them. Some people even scan through pictures of magazines to find the topics that interests them. Basically, our brain tries to know the story from the images itself without having to read all that text under that topic. This process is called visual perception.

Let us see some of these processes influencing the real world, that influence UX design as well.

Top-Down Processing

Visual perceptions are simply a combination of what we see, and our past experience or knowledge, says Richard L Gregory, a British psychologist, through one of his studies in perception and illusion. According to Gregory, our brain processes present visual information with ease or difficulty based on past knowledge. This is called top-down processing. According to his study, 90% of the data observed though our eyes are lost even before it reaches our brain. Thus, our brain only has to make up from the other 10% of the received visual data and the past knowledge it has stored.

Top-Down Processing in UX

When user searches something on the UI, the brain automatically processes that search into colours, images and categories related to that information. So, it is important to set a theme that compliments your information and follow certain hierarchy which can be easily traced.

Colour Palettes

Psychologists found that adding colour to a visual information not only processes the data with ease but also helps the brain remember them better. Thomas Sanocki and Noah Sulman, psychologists from the university of South Florida, studied how colour usage on a visual is processed by human brain. It was found that colour relation has strong influence over the brain on holding a memory longer and with ease, and results showed that human brain finds similar colour palettes as harmonious/more balanced, unlike dissimilar colour palettes. Also, the patterns were remembered longer when the elements were built/aligned more systematically.

Colour Palettes in UX

It is always recommended to use colours that compliments the visual information. Using harmonious colour palettes for complex UI results in a more pleasant UI experience. Whereas dissimilar colour palettes can be used to differentiate visual information from the background. We can also use dissimilar colour palettes to create colour dominance and grouping wherever required. However, to encourage prolonged usage, it is not advisable to use disharmonious colour palettes that are too harsh for users’ eyes.

Binocular Rivalry

It is seen that when two different elements are presented to each eye, instead of the two elements being superimposed, only one element is seen at a time suppressing the other and vice versa randomly as long as the eyes keep seeing that information. This process is called binocular rivalry.  

Binocular Rivalry in UX 

Basically, binocular rivalry prevents users from focusing on important information in a UI. For instance, if content is cluttered the user will not be able to differentiate important information from the other contents. Another instance is where icons within the same UI are different in terms of colour/design, which might confuse the user, making it difficult to accomplish the task.

Typography

In a study conducted by Kevin Larson(Microsoft) and Rosalind W. Picard(MIT), it was determined that typography could influence users’ ease of learning and mood. Given a magazine with two different typography to two different set of people, the people who were reading the magazine with good typography showed more interest and positive mood over the set of people who were given bad typography. People with good typography felt like they had more control and could easily navigate between contents than people with bad typography. People reading good typography were also able to accomplish the given task successfully during the session while none of the people who were reading bad typography could.

Typography in UX

For our brain to process the visual information more effectively it is important to use more readable font types. Using sufficient white space between visual contents and texts could enhance readability and focus.

Perceived Affordances

The concept of affordance was initially proposed by James Gibson, a perpetual psychologist in late 70s, while it was introduced to interaction design by Don Norman in late 80s in his book “Psychology of Everyday Things.” Perceived affordance is a term used where human brain perceives how things work. For instance, you know you will fall off a cliff and need to be careful when you see one. Qin Zhu and Geoffrey P. Bingham in one of their studies in human perception and performance found that perception of affordance can only be learned through practice. However, basic affordances do not need learning says James Gibson.

Perceived Affordances in UX

 In UX design, affordance is convention. When we create a button, the user should feel the affordance to click on it for action. Poor affordance is when the user is not sure if a button is clickable or not, or if the user is not sure what a UI element does when interacted upon. Similarly, every action element in a UI should follow perceived affordance in an interaction design. Affordance helps create intuitive design.

Final Analysis

Human brain is wired to recognise or learn from images. Through centuries, we evolved through images, while letters and words came later. Visual perception is constructive. Every action in a design needs to be comprehensive. It is through visual information from the user interface that the user takes his/her cue to advance towards completing a task without any misperception. Hence, using suitable icons/images, colour palettes, typefaces, hierarchy, white space and affordance to lead the user measures the success of a UX design.