Hello and welcome back to the LAST post in the Psychology of UX series! I know, I know… it saddens me too. Maybe I’ll have to come up with my own psychological/anthropological insights which inspire me to write design-related posts, now that Susan Weinschenk’s list has been exhausted. Today’s post will be focusing on the visual system in humans, and how we perceive of the world around us visually, including the internet.
One of the most famous theories on how humans visually perceive of things is the Gestalt principle. The Gestalt principle was first introduced as a psychology concept in Germany in the late 1800′s. The term “gestalt” literally means “form“, and this represents the idea that the brain first sees the overall form of something and then begins to pick out the details. Let’s look at an example:
It's Don Quixote... or some guys with a lance.
At first you might see an old man with white crazy hair. But if you look closer at the details you’ll pick out the horse, the lances, the two men in their armour and the windmill (that looks aflame).
Here’s another example:
The face of death!
First we see the skull, but then we notice the couple drinking (a lot) of alcohol and….warming their hands over it?… Hey, I didn’t say the details needed to make SENSE.. but they are there if we look.
The point is: we notice the bigger picture first, then we hone in on the details. This idea has been expressed in the well-known phrase, “The whole is greater than the sum of the parts.” Gestalt psychologists believe that there are inherent mental laws which dictate how we perceive of objects. Here are some of those laws explained:
The Laws of the Gestalt Principle
The Law of Closure-
Our mind tries to close shapes and create objects even if only a bit of the shape is implied. We do this by ignoring gaps and completing contour lines. This was forms and shapes can be imagined in the mind, even if not drawn out, from the negative space of other shapes.
One great example of ‘The Law of Closure’ is the Kanisza Triangle, seen below. This illusion was first explored in the 1950′s by an Italian psychologist who showed that two overlapping triangles are seen by the human eye, even though no complete triangles exist in the image.
The Kanizsa Triangle
The IBM logo makes use of the ‘Law of Closure’ by suggesting letters with unconnected lines and gaps, but the human mind never for a second doesn’t understand that it reads ‘IBM’.
It's just a bunch of lines
The Law of Similarity-
Our minds group similar objects together to create collective entities. The similarity of the objects is determined by their shape, size, and colour.
Here you probably see vertical lines of squares and circles
In this example below, the human mind connects the lime green shapes together because they have a similar colour and form, even though they aren’t on the same plane or in the same area spatially.
Even with distance, the colours and shapes relate the objects
The Law of Proximity-
The spatial positioning of objects causes our minds to perceive of collective entities, or in layman’s’ terms: things that are close together are believed to go together. In the example below, the header navigational links are all close together (and in similar colours), the sidebar items are all close to each other, and the search results are all in alignment as well. These clear groupings and the distances between the groupings helps us establish similarity and relationships.
Related based on proximity
The Law of Symmetry-
Symmetrical objects are perceived to be collective entities, regardless of their distance apart. Really I think we can translate this to mean that any objects which are identical, or symmetrical, are understood to be related to each other. In the example below, a common remote control design shows how symmetrical buttons relate to each other and humans innately perceive of these similarities.
Opposites but equals
The Law of Continuity-
The Law of Continuity focuses on how our minds see visual flow and patterns, rather than broken up shapes or angles. Our minds naturally continue these patterns, like in the example below where we see two lines crossing each other, not two angles meeting.
Flowing lines, not broken up
The arrows show the path of our minds
The Law of Common Fate-
This states that objects with the same direction of movement are perceived to be a collective entity. Let’s look at this example of a graph below. All the bar shapes are of different heights, but because they move in the same direction (upward), we relate them to each other and collectively they tell us something.
These are somehow connected.
Two other important principles
The following two principles aren’t from the Gestalt theory of visual perception, but they also apply to how the visual system in humans work.
Canonical Perspective
The canonical perspective states that most people imagine objects from a similar perspective and that is: from slightly above as if they were looking down at the object, and to the right or left just a bit. Researchers who asked people to draw pictures of common objects and animals found that most people drew these objects from this subtle 3D perspective. Look at this example of coffee cup drawings:
All from slightly above
Here you can see that most of the coffee cups were drawn nearly identical and all from the ‘canonical perspective’. But why would that be? Surely we don’t see every object from the same perspective. Take a house for instance- you normally see a house from below as it is taller than you, yet people would still draw a house from a canonical perspective or straight-on. The reason for this is that a) we imagine objects in the canonical perspective in our minds and b) this perspective gives maximum information about the visual depth of an object. Interesting. So this view helps us understand the size and depth of an object.
Affordance
James J. Gibson, a Gestalt psychologist, coined the term visual ‘affordance’ after he studied the affects of gradients and textures on the human retina and found out that they allow us to have better depth perception. When we can see the gradients, shadows and textures on an object, we can understand it’s size, weight, depth and overall form.
Credits to Paul Flavius Nechita
This button has depth, form, shadows, lighting, texture and context.
How does all of this affect web design?
Simply, humans first see the whole form and then notice the details and small changes. If your site has an “unpleasing” form, the design will never be taken to. This means that as designers we shouldn’t start designing the navigation, or the sidebar, or how our buttons will look– but first design the overall shape and then fill in the contents as we go. When creating webpages within a site, if you want to maintain a feeling of continuity and relationship, then the overall form of each page design should remain virtually the same, otherwise the website as a whole will feel disjointed.
The visual Gestalt principles we can take away for web design are:
- People observe the entire design/form first, and then dive into the details. Think about the flow of the overall look of the site, rather than obsessing over minute details.
- Similar colours help suggest relationships. Maintain colour schemes throughout similar items and functions.
- Similar shapes help suggest relationships. Make items that do similar things look the same in form.
- Grouping of objects helps us identify relationships. Organising items with adequate proximity and negative space around them helps us clearly see the connection of those items.
- Patterns are easily noticed by and continued in our minds. Creating similar steps in a workflow or visual affordances with interaction will allow users to notice the pattern and remember it for future interaction.
I’m sure most of those principles seem pretty obvious to the average designer, or just an average person, and that’s because these principles are so innate to our human perception of the world, that not doing these things would seem unnatural or somehow chaotic.
In regards to web design and the canonical perspective, create icons and shapes from the canonical view as people will be familiar with that representation of the thing, and they will be able to read as much information as possible about it from the angle. Do this especially if it is a new brand or product where people aren’t familiar with your logo.
Credits to Arturo Martin
In this icon above, we can tell that it is a book because of the canonical perspective. We can also see the subtle A-Z engraving and the bookmark falling down thanks to the angle, which suggests that this is either an address- or phone-book application.
Visual affordance is crucial to “good” web design because it helps people relate to the web. By bringing the 3D aspect of the real world that humans are familiar with to the 2D realm of the web, it feels more familiar and we more intuitively know how to interact with it.
Credits to Henrik Wangstrom
Sliders are a concept we are familiar with in the real world since the 20th century. We understand holding something and dragging it. The gradients on the progress section of the bar hint at real-world lighting and suggest position of lighting (from above casting downward shadows). The deep shadow at the top of the bar suggests this is cut into the grey area and tells us about the object’s depth.
Credits to Johan Greijer
These buttons have dark shadows to suggest they are quite chunky and to really urge you to want to press them. Similarly the dial knob has a long shadow which hints at its height. The glossy metallic texture is familiar to the real world and how light hits metal. The engravings of the icons also hint at industrial processes for carving shapes in materials. Finally the subtle texture on the background mixed with the central gradient shows us where the light is focused.
Credits to Jakob Burkot
And finally in this example it brings to mind textures we are very familiar with throughout human history: paper and wood. The subtle gradient on the paper suggests it is a non-shiny, flat object. The sharp lines separating the mailboxes suggest scoring. The shadow behind the paper shows the tab is lurking there under. The stitching in the journal makes this have a very real-life feel to it (as if you needed stitching to keep together a virtual notebook). Finally, the search box looks as if it’s been shallowly etched into the wood. Overall it’s something we can relate to.
——————————–
I hope you enjoyed this post, but more so I hope you enjoyed this series as a whole (see, I went all “gestalt” on you). Thanks for reading and keep checking back! I’ll be back with something new in due time.
Sources:
Design Theory For Web Designers - http://bit.ly/dVWo4F
Gestalt Theory - http://bit.ly/tR1VOD
James J. Gibson- http://bit.ly/tsuUEX
Canonical Perspective- http://bit.ly/1oO7ua
Just a quick update to keep you all informed of why I’ve been so crap at blogging of late. Aside from having a splendid Christmas holiday overseas at home in the US, I’ve been very busy with trying to find a new UX job/place of work in London. As soon as I have the comfort of knowing I have a new job, I’ll start investing more time in writing again.
