Topic: Human perception and visual structure

This material covers week 5 of the course.

Note that this material is subject to ongoing refinements and updates!

Overview

This theme covers human perception and features of how we structure the world visually.

Human perceptions

We perceive, often, “what we expect to perceive” (Johnson, 2021, p. 1), and our expectations are biased, according to three things:

Biased by our experiences
Biased by the current context
Biased by our goals.

Perceptions biased by our experiences

Have a look at this illusion here before you read any further.

If you weren’t told to look for it, there’s every chance that you missed the dalmatian hiding amongst the seemingly random dots. However, if you were told beforehand that the image contains a dalmatian, you would likely find it quickly. That’s because prior knowledge imposes a structure over what we see. This idea is related to Gestalt theory, which we will come back to.

There is a strong chance that you use software on your PC or phone without thinking twice about the actions you're undertaking:

"Users of computer software and Web sites often click buttons or links without looking carefully at them. Their perception of the display is based more on what their past experience leads them to expect than on what is actually on the screen. This sometimes confounds software designers, who expect users to see what is on the screen. But that isn’t how perception works" (Johnson, 2021, pp. 3-4).

This means that as designers, we need to carefully consider consistency in all aspects of our design.

Perceptions biased by the current context

How we perceive something depends largely upon the context in which it appears. As the textbook notes, the phrase “Polish silverware” changes its meaning if it appears between “Fold napkins” and “Wash dishes”, as opposed to appearing between “French napkins” and “German dishes” (Johnson, 2021, p. 5).

What one sense perceived can also be influenced by what our other senses perceive, e.g.,

What we see can be biased by what we are hearing, and vice versa
What we feel with our tactile sense can be biased by what we are hearing, seeing, or smelling (Johnson, 2021, p. 5).

If you have any doubts about the connection between the senses, there is a Japanese word game that demonstrates this well. Try writing the word コンパス (compass) while saying the word パソコン (personal computer). What happens? Probably something like this (use subtitles if you can't understand Japanese):

Perceptions biased by goals

We tend to focus only on what we're interested in. For example, take a look at the diagram of a toolbox on page 7 of the reading from Johnson, and see if there were scissors included in there. Now, without going back, can you say if there was also a spanner? There's every chance that you don't remember what was in there aside from the one thing you were looking for.

This is an example of perceptual filtering. Another example in the textbook is how air traffic controllers manage to stay focused on their conversations with pilots in a room with several other conversations going simultaneously. The same also applies to how users navigate a webpage. If the user has a specific task in mind, it’s likely that they will ignore all the other bit of information.

Design implications, based on our perceptions

Avoid ambiguity – in terms used, and in the way that visual elements are used
Be consistent – Information should be consistently placed, and keep styles (fonts, colours, etc.) consistent throughout your design
Understand the users’ 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" (Johnson, 2021, p. 9)

Gestalt theory

Review Gestalt principles that are relevant to design (Covered in DESN1001), in particular:

Proximity
Similarity
Continuity
Closure
Symmetry
Figure/Ground
Common fate – "objects that move together are perceived as grouped or related" (Johnson, 2021, p. 22).

A clear explanation of Gestalt principles:

Visual structure

Applying Gestalt principles such as proximity and similarity allows to create meaningful structures of information. By providing a structure through grouping similar items, and removing unnecessary repetition, information becomes much easier for users to process.

Structure also makes it easier for us to process numbers. This is why payment forms often separate credit card numbers into four groups. Or consider which way the phone number for the GLA office is best presented:

+81726652492
+81 72 665 2492

Structuring even small pieces of information like this makes them easier to scan.

Creating a visual hierarchy

You should create a visual hierarchy for your users which:

"Breaks the information into distinct sections, and breaks large sections into subsections
Labels each section and subsection prominently and in such a way as to clearly identify its content
Presents the sections and subsections as a hierarchy, with higher level sections presented more strongly than lower level ones" (Johnson, 2021, p. 30).