Using cognitive psychology in UX Design

Over the past decades, psychological research has given us tremendous amounts of knowledge regarding the organization and functioning of human cognition. Below I would like to present a few basic principles of human cognition that, in my opinion should be embedded in all of UX design. I’m talking about actual theories stemming from empirical results, that have been replicated and solidified as the fundamentals of cognition. 

The proximity principle

Proximity is a principle of perceptual organization, stating that when we see stimuli or objects that are in close proximity to each other, we tend to perceive them as being grouped together. Below is a simple example demonstrating this effect.

CNX_Psych_05_06_Proximity

The Gestalt principle of proximity suggests that you see (a) one block of dots on the left side and (b) three columns on the right side. (Image from archive.cnx.org)

If we want to present information or visual items that are related to a common goal or task they should be grouped together.

Now, despite the simplicity of this idea, it has profound implications for the ‘feel’, ‘look’ and ‘task flow’ of any visual display. Following this principle if we want to present information or visual items that are related to a common goal or task they should be grouped together.

Let’s look at an example that demonstrates this principle in action.

dropbox proximity example

 

Dropbox uses colors and font sizes/types in order to emphasize the ‘grouping’ of compatible information. All actions that relate to the overall collection of my files are neatly placed on the left side of the screen, closely together, aligned vertically (continuity principle). All actions relating to sharing, uploading and deleting data from a specific folder and located on the right, they also share font type, color and vertical alignment.

By grouping information that relates to a singular function or goal (i.e. sharing research project results) we help users navigate through our interface in a more natural way, therefore creating a more fluent experience. 

 

The continuity and closure principle

Two additional principles of cognition, that play a big role in how we think about design, are the law of continuity (or good continuation) and closure. The law of continuity tells us that we are more prone to perceive smooth flowing lines rather than broken up lines and the principle of closure tells us that our brain and visual system is a predictive machine aimed at identifying patterns rather than just series of individual parts. Look at the two examples below.

CNX_Psych_05_06_Continuity

Continuation would suggest that we are more likely to perceive this image as two overlapping lines, rather than four distinct lines all meeting in the center.

 

CNX_Psych_05_06_Closure

Closure suggests that we will perceive a complete circle and rectangle rather than a series of segments. (Images from archive.cnx.org)

Both of these principles are so strong that they can even override prominent visual grouping features such as color. The best example of the principle of continuity in action can be seen in various online stores.

bol continuity

Browsing through bol.com we immediately perceive the selection of books ‘seen in media’ as related, due to their horizontal organization. Dropbox, described earlier, uses vertical organization to emphasize relation and connection of options

Using continuous or non-continuous lines can communicate relationships between information in a subtle, yet perceivable way.

These are just a few fundamental principles of cognition that can play a crucial role in UX design. I believe that understanding how people perceive and organize information can help us make not only informed design decision but also save valuable research time.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s