Our brain is constantly aware of everything that happens because it is arranged for eye movements to occur and the particularly relevant information to selective pay attention.

Understanding that we only sample the visual world on a kind of need-to-know basis allows us to think about visual design issues from a new perspective and allocating our working memory resources to briefly retain in focal attention.

Visual thinking consists of a series of acts of attention, driving our eye movements, and tunning our pattern-finding circuits, always refer as a visual query.

Selective Attention

Selective attention is the process of reacting to certain stimuli when many stimuli are present. The reason I mention selective attention is to achieve the perception, but we also need to know that selective attention does not guarantee perception because we cannot perceive something we don’t attend to.

When our attention is drifted to an object, the perception process proceeds by three concurrent process:(Colin Ware, 2008, more details please find in this book)

Bottom-up analysis process, which is driven by salience and physical make up of the stimulus. The main feature processing stage occurs after information arrives in the V1 cortex.

If a designer can use the salience stimulus well, they can capture the attention of the audiences well, For example, combining basic features such as edges, lines, angles, curves, and patterns in visual design and ultimately converting them into meaningful objects.

Top-down processing, which is based on users’ knowledge and context, depends on expectancies stored from experience in long-term memory. It is driven by the need to accomplish some goals. For example, It might be a cognitive goal, such as understanding an idea expressed in a diagram.

Utilization, which is the combination of physical stimulus and experience. When there is information present in a clear and visual way, it may stimuli the ability of familiarity to degraded bottom-up processing, reflect in our brain to pulling out long-term memory drives top-down processing.

You can think of the top-down process as the ability to correctly guess what stimuli or an event are.

Our visual search appears to be guided much more by the top-down process than by the bottom-up process.

There are 4 factors that influence selective attention include salience, efforts, expectancy, and value. (Lee, Wickens, Liu, Boyle, 2017 | More details please reference this book.)

• Salience influence the attentional capture. Usually, salience contributes to the bottom-up process.
• Efforts refer to how difficult we need to find the stimulus we’re looking for.
• Value refers to the factors of stimulus we need to receive the attention.
• When expectancy and value together, it always drives the top-down process, which is knowledge-driven factors in allocating attention.

Our Perception Is Biased

As a designer, we need to understand that our visual perception is biased. it is always based on our past experience, the current context, which is the present, and our goal, which is the future.

We need to understand the biased factors to take advantage of them into the design. (Johnson, 2014| more details please reference this book.)

• Perception biased by experience. Our past perceptions—can bias our current perception in several different ways. If we prime to see the world one way, we may miss important information.
• Biased by familiar perceptual patterns or frames. This is also be called frames, include the objects or events that are usually encountered in a situation. For example, since the perceptual frames users of computer software and websites have, they often click buttons or links without looking carefully at them. Our perception of the interface display leads us to expect than on what is actually on the screen.
• Habituation. This happens when we repeatedly exposed to the same perceptions. For example, we experience habituation in computer usage when the same error messages or “Cancel reservation” (image 1–1) confirmation messages appear again and again. People initially notice them and perhaps respond, but eventually, click them closed reflexively without bothering to read them.

• Attentional blink. When people use computer-based systems and online services, attentional blink can cause them to miss information or events if things appear in rapid succession.
• Perception biased by the current context. Our visual perception — reading in particular — is not strictly a bottom-up process. It includes top-down influences too. For example, the word in which a character appears may affect how we identify the character. In image 1–2, the same character is perceived as H or A depending on the surrounding letters.

• Perception is also biased by goals. Our goal will guide our perceptual apparatus and filter our perceptions. Things that are unrelated to our goals tend to be filtered out preconsciously, never registering in our conscious minds. For example, when people navigate through software or a website. They scan screens quickly and superficially for items that seem related to their goal. For those unrelated items unrelated, they often don’t even notice them.

Taking Biased Perception Into Account When Designing

• Avoid ambiguity. Avoid ambiguous information displays, and test your design to verify that all users interpret the display in the same way. This can refer to usability testing.
• Be consistent. Place information and controls in consistent locations. For example, controls and data displays that serve the same function on different pages should be placed in the same position on each page on which they appear. This can apply to same color, text fonts, shading, and so on. This consistency allows users to spot and recognize them quickly. For example, the primary button is consistent with the orange and rectangle shape in every page (the image 1–3).

• Understand the goals. users come to a system with goals they want to achieve. Designers should understand those goals. Ensure that at every point in an interaction, the information users need is available, prominent, and maps clearly to a possible user goal, so users will notice and use the information.

Visual Search

Visual search refers to an active scan of the visual environment for a particular object or feature among some other objects or features. It usually contains two types:

• Parallel visual search. It refers to evaluate all stimuli at once to determine where the target is. This search drives well when an item is identified in parallel. For example, can you find there is a green square in image 1–4?Since the green square targets pop out on the screen. The parallel visual search happens.

• Serial visual search. It refers to evaluate each stimuli individually to determine if it is a target or not. Can you find the red circle in the image 1–5? Since the non-targets are noisy on the screen. The contrast with target isn’t enough, so we are required to look through each stimuli individually until we find what we’re search for.

People tend to search from top to bottom, and from left to right, but if information is not structured (like a map), search is more random.

Eye Movement

Understanding the eye movements is the key part of the skill of visual design. Visual details can only be seen via fovea, at the very center of the retina. the region of the fovea (This article introduced it), however, is only about the size of our thumbnail held at arm’s length.

At the edge of our visual field, the vision is terrible. Luckily, our eyes are moving so fast per second, the eyes move in a series of jerks pointing the fovea at interesting and useful locations.

Usually, there’s two-wave that occur when our eyes alight on a point of interest. The information-driven wave passes information first to the back of the brain along the optic nerve.

An attention-driven wave originates in the attention control centers of the forebrain and sweeps back, then sweeps forward to the forebrain, enhancing the most relevant information and suppressing the less relevant information. (Colin Ware, 2008)

Eye movements by two types:

• Pursuit eye movements. This type of eye movement is always used when we’re tracking a moving object. For example, our eyes are easy to attract by moving objects, such as the image 1–6, the moving ball. As you track the moving ball, our eyes do it continuously and smoothly as it across the screen.

• Saccadic eye movement. This is referred to as the ability to look at things is a familiar part of the process of seeing. The saccades direct our fovea onto an object or region of interest. A famous example is at image 1–7, The figure on the right shows a scan path of saccades and fixation made when people viewing the woman on the left. (credit to @scholarpedia.com)

As a designer, if you can design the pages with the expected elements as many as possible, the easier people can use the top-down processing to get attention.