Effective Visual Design – A Journey Through the Nerves While working on a design, what is always on the top in a designer’s list is to make the visual most effective.

The definition of effectiveness may differ from person to person and sometimes it is also industry dependent. But generally speaking an effective visual should be like a shop with a very attractive window display to drive your steps into the shop; and once you are inside, you are also extended attractive offers that encourage you stay there for a long time. And finally, you leave that shop with a handful of bags. :)

But in this flashy generation of digital content presentation, most designs are like shops which have very good window displays, but you feel like stepping out the minute you enter. The designs seem to lack that ‘something’ that would hold you there for a while.

In short, a visual – to be considered effective – should contain the following two attributes:

• The visual should be attention grabbing for the viewer.
• The visual should hold the attention of the viewer for a decent period of time.

Both of the above mentioned attributes should be in perfect synergy in a visual. Making the visual attractive addresses the first objective, and adopting a good architecture of information (IA – information architecture) and visual flow takes care of the second purpose.

I think this is sufficient background for the following reading, so let’s move to the real stuff :) ….. but let me make it clear that I am not going to explain any Mantra on how to make effective visuals . I’ll just explain how things work in the background when someone looks at the visual. By internalizing the grass root level understanding of how human mind interprets visual cues, you can actually develop your own approach for effective design.

One interesting fact about this article is that I am not going to build it around the aesthetics of Art & Design. It may seem surprising that we’ll not consider the aesthetics aspects of Art & Design while discussing about the effective design. We’ll stick to the “Grass Root Level”, as I mentioned in the previous paragraph. We’ll understand biological facts on how the most civilized and intellectual animal (Human) uses its basic instinct to render visuals. Interesting, isn’t it?

The whole story starts and ends with “Human Vision System”. Human Vision System (going forward I’ll refer to this as “HVS”) tells us how cells in the visual system (which are part of the human mind) process information. A parallel processing of different kinds of visual information (like form, color, depth, and movement) happens very smartly and systematically in the human mind.

For visual interpretation, two sub systems works in background. These are the:

• Where subsystem
• What subsystem

“Where” is responsible for the ultra fast visual snatch but “what” manipulates the finer points. Each vision system is made of different types of neurons. Therefore, the ways in which they process information gathered by the retina of our eyes are different. Let’s dig deeper into the details now … the primary task of attracting the viewer is actually done by the “where” system while “what” holds the user on the same spot for a long time.

All this happens very transparently each time we look at a visual. So, once you are aware how the where and what elements actually work … you can control the nervous system of your viewer.

“Where”

“Where” is the subsystem that is actually very sensitive to motion, high contrast, directions, edges and shapes. This is a very primitive kind of subsystem in “HVS” and basically it is a protective system. The primary task of “Where” is to ensure the survival of the creature; so it always keep reading the surroundings for motion, high contrast, directions, edges and shapes to focus the attention on them. After that, the other systems or subsystems take over, while the “where” system keeps looking for any other changes in the surrounding. So, the “where” subsystem grabs and looses attention very quickly.

The “where” system is completely color blind, as it works on contrast only. It doesn’t show any kind of sensitivity to texture and details. This seems to be valid because of two reasons –

• It is not programmed to do so. :)
• It is not possible to render such details because of its super quick nature.

How “where” works practically

Just imagine that while sitting in a garden, you saw something in motion in the bush near you. This will trigger your "where" subsystem and turn your attention to that area quickly to examine any danger. Your "where" raises an alarm in your mind and you give attention to that motion (which might be a snake or some other harmful animal). Because "where" can't examine the details for color, texture and resemblance, so other systems take over from here to further investigate the threat and "where" goes back to its work of collecting new visual inputs.

In the image above, it is quite obvious that the first white circle in the image above grabs the attention very quickly – because of its high contrast with background. And for this the credit must go to the “where” subsystem. :)

Here is one more image:

I need not mention that, again, the “where” subsystem has been triggered by this image. But the image can’t hold your attention for a long time because “where” looses interest very quickly. On the other hand, this image doesn’t have enough elements to stimulate the other systems like “what”.

So, in a visual design where you want the viewer’s attention, you need to trigger his/her “where” system by placing “where” type elements. However, too much of “where” can spoil your design. In effect, the “where” element should be present in a logical balance with “what”.

“Where” in short

• Very primitive type of survival system
• Sensitive to motion, high contrast, directions and shapes
• Initiates and terminates very quickly
• Does not process any color, texture and detail

“What”

The “what” subsystem is not as primitive as “where”. It came into existence after “where” in the evolution cycle. Mostly “what” works in a linear fashion and follows “where’s” inputs to render the areas for further details.

Unlikely the previous system, “what” is highly sensitive to color, texture and details. It works the best with low contrast visuals. “What” takes time to trigger, but once this subsystem is triggered, it stays activated for a long time to process the details. While looking at the details, it tries to correlate them with the memorized details, and also sends the new information to the other subsystems to make it permanent.

This image above activates your “what” system by using colors, texture and soft curves. But your attention may wander because this image is very much “what” in nature. By balancing it with a perfect amount of “where” factor you can actually achieve the goal of holding on to the viewer’s attention.

“What” in short

• A detail-oriented system
• Sensitive to color, texture and details
• Takes time to terminate and stays activated for a long period
• Can be terminated by a new and stronger “where” signal

Where + What = Effective Visual

Because “where” is normally followed by “what”, so when we are adding “where” type elements, we must add enough amount of “what”. This is done to ensure that the attention which has been grabbed by the “where” element can be held by the “what” element. Too much of any one of them can wipe out the overall effectiveness of a visual.

I hope this article will help you to enhance the effectiveness when you design something next time. However, this is not the only Mantra for effective visuals. There are many other factors involved that we need to take care of.

one interesting thing which I haven’t covered in this article is the behavior of text in visuals as per “Human Vision System”. I’ll post a detailed Blog on the same soon.

I would really like to mention the name of 2 forces behind this article -

Manish Sahajwani - for motivating me to start this Blog ( actually I should say: by pressurizing me, as he used to ask every day J – “Hay Harsh …. Have u posted anything?????”

Shamik Chowdhury – for providing the fantastic enhancement to this article.

  ¶ 10:02 PM