Psychology Behind User Experience | Byte Orbit

Psychology Behind User Experience

Written by: Jo Jackson

25 March 2019

User Experience

Psychology Behind User Experience

Written by: Jo Jackson

25 March 2019


Have you ever seen a one year old using a tablet? It doesn’t take a lot of exposure before they’re tapping and swiping their way to their favourite game or story book. It might be tempting to praise the child’s exceptional intelligence, but what we really ought to be praising is the intuitive design of the product and its apps. They apply techniques and principles that speak to our most primal psychology, which explains why even a baby can understand how to use them.

When it comes to using a product or engaging in a human-computer interaction, there is a lot going on beyond the user’s conscious awareness. How much thought and attention is paid to the user’s overall experience will determine whether or not it feels seamless and enjoyable. Ideally, “the operator needs to provide minimal input to achieve the desired output.” 

The techniques, theories and principles that help us to achieve this come under the large umbrella of User Experience (UX). Phil Barrett, Executive design director at Absa’s Africa Design Office, explains that UX is all about “understanding what customers really want, why they want it and then making things useful, reliable, easy, delightful, and persuasive”. Simply put, UX is the difference between whether we’ll like a product or not.  

What does it take to deliver an exceptional user experience?

Let’s think about this in terms of an app or a website. There is an assortment of guiding principles that ought to be taken into consideration when designing digital spaces - especially if we want people to enjoy spending time in them.

THE GESTALT PRINCIPLES

Through studying visual perception, German psychologists in the 1920s determined that humans naturally perceive objects as organized patterns. We don’t just see, we apply meaning to what we see. It was they who established that "the whole is other than the sum of the parts" - often translated as “the whole is greater than the sum of its parts”. The psychologists, who belonged to the Berlin school of experimental psychology, established a set of laws that delineate our cognitive tendencies. Good design caters for these tendencies:

Symmetry

The principle of symmetry is based on the fact that the mind naturally sees objects as forming around a centre point. “Symmetry is indicative of a natural order,” and that harmony is inherently appealing to the eye. Symmetry lies at the heart of objective beauty.

Applying the principle of symmetry creates a sense of balance and order.

Proximity

“The principle of proximity is based on the cognitive tendency to perceive objects close to each other as related, especially in comparison with those which are placed farther away.” This is why we intuitively understand that the password we need to type in is related to the email address we’ve just entered.

The principle of proximity also explains why we understand that a box of copy relates to one image and not another.

By applying this principle to web or app design, one creates a layout that a user can quickly scan and understand.  

Similarity

The principle of similarity states that “things which share visual characteristics such as shape, size, color, texture, value or orientation will be seen as belonging together.”

Using the principle of similarity is essential for creating relationships, and helping the user make connections and perceive unity. 

Continuity

Images create movement. Once the eye begins to follow something, it is compelled to keep going until it encounters another object. 

Harnessing the principle of continuity enables the designer to guide the user’s attention. Anything from eye line to actual lines can act as a powerful means of directing focus to where it needs to go.

Closure

The principle of closure is closely related to continuity in that the eye naturally has the “momentum” to complete incomplete or obscured objects. “If enough of the shape is indicated, people perceive the whole by filling in the missing information.”

This is why the designs below can get away with obscuring some of the lettering using the athlete’s limbs or leaving the toucan’s beak unattached.

Using the principle of closure stimulates the mind and creates a visually compelling experience.

Figure and Ground

The figure-ground principle - often referred to as positive and negative space - is based on the eye’s tendency to differentiate an object (figure) from its surrounding area (ground).

The figure-ground principle is essential for creating depth and hierarchy.

“Using unusual figure/ground relationships can add interest and subtlety to an image.”

VON RESTORFF EFFECT

If you’ve ever used a pip slider on a website or an app to navigate between pages, or flip through photos on a carousel, then you’re already familiar with the Von Restorff Effect. 

Also known as the isolation effect, the Von Restorff Effect “predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered.” Using this effect can assist with anything from clear navigation to creating memorable visuals.

SERIAL POSITION EFFECT

The Serial Position Effect is the tendency of a user to best remember the first and last items in a series. Understanding the limits of short-term memory is the key to designing interfaces that reduce the strain, and maximize information retention.

Apple’s product pages are a great example of how to make the first landing page pack a punch with clear and simple messaging around what makes the product unique and desirable... 

While the middle section contains in-depth information that isn’t as important, but remains available for the more invested reader…

Which leaves the final page open for the calls to action that will facilitate the acquisition of the product.

COGNITIVE LOAD

In the same way that the Serial Position Effect recognises the need to cater for our limited attention span, designing with cognitive load in mind, entails reducing the amount of thought needed in order to complete a specific task.

Any one task involves intrinsic cognitive load. This is the unavoidable difficulty associated with executing the task. On opening an app, we are prompted to complete a task. The unfolding is part and parcel of the user’s experience, but to facilitate the process, “the copy needs to be short, simple and with the appropriate words in order for the user to be able to easily follow the instructions.”

A website or app that elicits the response, “Wow - that’s busy!” has failed to eliminate unnecessary strain, and has fallen into extraneous cognitive load. Through “superfluous pictures, external interruptions, confusing animations or unexplained interactions”, the design drains mental resources, without enhancing the user’s overall experience or helping them understand the content.

AESTHETIC USABILITY

Steve Jobs had a keen understanding of the Aesthetic-Usability Effect, which is a condition whereby users perceive more aesthetically pleasing designs to be easier to use than less aesthetically pleasing designs.

It’s not uncommon to hear people rave about how beautiful Apple products are. The enormous emphasis that the tech giant places on the look, feel, weight and overall quality of their products can be explained because, as researchers at Hitachi in Tokyo demonstrated, “the apparent usability is less correlated with the inherent usability compared to the apparent beauty.”  In other words, how useable a product is, isn’t quite as important as how beautiful it is.

Bad UX can destroy even the most phenomenal concept, while great UX can elevate the most ordinary. In order to design products and interfaces that people will enjoy and come back to time and again, the psychology behind user experience needs to play an integral role in their development.