HCI for Designers: Visual sensory

Why do you group icons?, why do most designing methodologies follow grid systems? Why is black text and white background preferred? Why we should not use charring color?. The answer to many such design question lies in the earliest theories for designing software for HCI, which were based on visual perception.

Once such prominent theory is Theory of Visual Perception put forward by Colin Ware.

Assumptions

As with all the theories, there are few underlying basic assumptions:

Most of the people are hardwired the same way i.e. their neural visual structure is the same. Therefore, it obviously implies the exclusion of special cases like learning disabilities, cognitively challenged and other special people.
The hardware which we all posses have a minimum and maximum level of capability with which we can understand the world around us.

Goal

The primary goal of this model is to provide you with the ability to understand and map a set of human sensory processing function (hardware inside our brain) to tangible design strategies. It would become more clear as we move towards the applications part.

Theory explanation

Simply put our complicated hardware inside the head can be divided into three simple parts -

Theory of perception (attributed to HCI model, theories and framework book)

Stage 1 or pre-attentive perception is the first point of entry for any visual elements we will eventually absorb. It is also called early vision. (Fun fact: It is this early vision which guides the design of LCD and LED displays available in the market). Early vision absorbs the entire on going event in front of our eyes as a single big picture. It is also called pre-attentive processing. This process happens in lot of small sub-divided parallel processes. They can be categorized into roughly three useful process for our understanding:

Trichromatic system which consists of 3 dimensional cones to allow us perceive the range of color which we see. It is basis for the color science.
Spatial and temporal system take into account the shape, depth, rate (flicker) at which we perceive moving objects.
Luminance system take into account how bright and contrast are the images which we are observing.

Stage 2 or pattern perception takes data from stage 1 and allows us to understand patterns in the available big picture. These patterns were explicitly studied by Gestalt psychologists and are very useful for designers because of one particular reason - revealing patterns will allow easy problem solving by user. Few important patterns for designers are:

Proximity rule says that visually closed elements are naturally perceived as grouped.
Good past experience says objects are perceived together if they have been previous observed within closed proximity.
Symmetry says objects are pleasing to eyes if the user can divide the perceived objects into symmetrical parts
Similarity says that people perceive elements grouped together when they are similar in the characteristics.
Connectedness says that object connected by continuous shapes are perceived to be related.

For complete list visit here.

Stage 3 or object perception takes the data or the problem perceived in stage 2 and breaks it down into small objects which are stored in memory for very short period at a time at rapid succession to solve the big problem. (Fun fact: Visual memory is very small both in terms of duration for which it can store information and amount of information which it can store).

One way to maximize the potential for short retention and quick processing is to map some kind of unique attributes to the visual objects.

How theory is applied in design?

Stage 1 or pre-attentive perception

Stage 1 is used in deciding the how the new television, projector and hand-held devices screens should be designed. AMOLED, UltraHD are few such examples.
Stage 1 allows us to design the refresh rate of monitor as 60Hz display rate because the study of temporal system tells us the limit of the 50Hz flickr-fusion threshold we have.
Luminance system in stage 1 gave us the concept of contrast ratio. That is the reason why it is best to design UI with black text on white (it gives maximum luminance of 10:1 light to dark ratio.) background or yellow text on blue background.
Temporal system in stage 1 is also used to design warning signs in specific colors (like red) and shapes, annoying ads as animated bright GIFs.

Stage 2 or pattern perception

Designers group elements in any form based on categories, in general from left to right to provide good proximity.

Windows form (attributed to netbeans.org)

Designers use or even design various information flow tools like flowcharts, UML transition diagrams to find connectedness and understand problems.

Use-case diagram (attributed to uml-diagrams.org)

Grid system used in responsive website design is an example of symmetrical application.

Stage 3 or object perception

Designers breakdown a design (for eg. signup form, online checkout experience) which has long user engagement into smaller modules or pages avoiding the case of working memory overflow.
Using icons, symbols instead of textual connotations improve users ability to relate to a objective better. For eg. having a descending order icon is more meaningful than just text.

Sorting option in excel (courtesy of Exceltrick.com)

Note: Most of the content is derived from the book HCI models, theories and frameworks by Carroll JM.