User Experience (UX) design is all about creating a website or web application that best helps to accomplish what they set out to do. Whether this is browsing an online clothing store, reading a blog or completing an online application, many UX aspects will affect your users’ online experience. These include information architecture (the organisation of information), user interface design, visual design, and content design (effective communication).

Using these, how do we know how to optimise UX? We need to understand the user. And for that – we need psychology!

 

Psychological Theory One: Schemas

On entering a coffee shop on the way to the office, we automatically join the queue, wait in line, order, pay, and collect our coffee to go. Why? We are following a schema. This is a mental representation that enables us to organise our knowledge into categories and simplify how we view the world.

These mental models are created through all our combined interactions with the same object, place or event. They allow us to create believes about future similar experiences that help us navigate and know what to do. We have schemas for all kinds of things, from what a typical dog looks like to what happens at a restaurant. You can think of them as a tool for understanding, like a map or a guidebook.

THEORY BACKGROUND
Schema theory was first proposed by Jean Piaget in 1923, who used it to explain how children learn about the world, grouping information together. For example, a child’s schema for a dog might be ‘four-legged’ and ‘furry’, and they might assume a horse is a dog until they add details to the schema and create a new one for horse. The theory was then developed by Frederic Bartlett with his famous ‘Portrait d’Homme’ experiments. He suggested that when an individual is confronted with information that fits with their existing schema, they perceive the information following that mental model.

Unsurprisingly, we also have mental models for our online experience. Chances are, when you enter a website homepage, you and have a pretty good idea of what you expect to see. If you’re looking for a blog, you might look to a navigation menu at the top. Or, if looking for contact information, you might first scroll to the bottom.

When navigating a web page, the user’s online experience is optimised if their actual experience closely matches their mental model. The closer the user’s experience to their expectation, the higher the individual’s satisfaction and the greater their experience.

What does this mean for UX design?

  • Is the relevant information organised as the user would expect? Information architecture is really important when considering how best to create a website in line with users’ mental models. Information is much easier to discover when it’s in the location that matches the user’s belief, as this is where they will look for it first
  • Is the user able to interact with the site as they would expect? For example, do the clickable text and images look clickable in the way they know? Are checkboxes able to be selected in line with their knowledge? Is the progress bar in the format that they recognise?
  • Does the website or web application look like the user’s belief of what a web page should look like? Whilst you may want your web page or web application to stand out, there is value in following a standardised template
  • Is the copy on the page written with the tone and language that they would expect? Are all of the communication elements (copy, video, images) relevant?

If the website or web application does not follow the user’s schema, with no mental framework to follow they won’t know where to start!

This means they don’t know where to find the correct information or how to engage with the site. This means they will struggle to complete their desired action. Therefore, making your website look, act and feel like the users mental model of a website is critical to ensure optimal UX.

Psychological Theory Two: Cognitive Load and working memory

Often likened to a post-it note or the RAM of a computer, our working memory store is our mental workspace to hold and process small amounts of current information. Cognitive load refers to the load on working memory when carrying out a task. When the cognitive load of a task exceeds our working memory capacity, processing information, decision making and remembering information becomes nearly impossible.

THEORY BACKGROUND 
The concept of working memory was first demonstrated by Baddeley and Hitch, in a series of experiments where the participants had to remember 1 to 6 digits whilst carrying out a second small task. When holding a small number of digits (1-2) in the working memory, the second task was not affected. However, when participants had to remember longer sequences (4-6) their ability to work on the second task at the same time was compromised. This is simply because there was less working memory capacity left to hold and process the second task information.
Miller investigated a similar but distinct concept of short-term memory, which is simply a temporary memory store. His famous findings of “the magic number 7, plus or minus 2” were derived from a series of experiments; when measuring how many ‘bits’ or ‘chunks’ of information participants could hold in their short-term memory, the number consistently fell at around 7. Additionally, he found that we can hold this information for around 20-30 seconds.

The higher the burden on the working and short-term memory, the higher the cognitive load.

How it this relevant to UX? According to a 2020 study:
 “Reducing cognitive load leads to all-around better user experience (UX), less fatigue, better and faster decision-making possibility, improved productivity. When the user is interacting with smart-designed, optimally implemented, and user-focused UI, the data is perceived and processed faster and decision making becomes easier. A well-designed UI ensures that the user cognitive load is not overloaded, and the user has good chances to make a better and timely decision”

What does this mean for UX design?

Providing working and short-term memory support:
  • This means keeping website response times as low as possible. All the while a user is waiting for a web page to load, and to become interactive (referring to googles TTI principle https://web.dev/interactive/) the information stored in their short term memory is decaying. In fact, reducing a page response time by just 0.1 seconds has been found to significantly improve user experience.
  • This also means keeping the workload at a minimum. Users enter a page to perform an action or task. Some tasks use a large cognitive load, such as filling out a form or completing a checkout process. To ensure the users mental ‘post-it note’ is not filled up, and their short-term memory store not overloaded (7 chunks for 20-30 seconds), UX design should break up these tasks into smaller manageable chunks, separated on separate pages linked by a progress bar, for example.
Recognition over recall:

Recognising pieces of information uses less cognitive load than actively recalling the same information. This draws on another well-known psychological theory, bringing us to…

Psychological Theory Three: Gestalt Principles.

THEORY BACKGROUND
Developed in the 1940’s, Gestalt theory provided the basis of the study of perception.  The basic idea is that we make sense of visual elements by seeing them as a whole rather than the individual parts.

What does this mean for UX design? 

  • Similarity: We group together items with similar characteristics. In UX design similarity is important for communicating to users which items can be grouped together. The characteristics could be colour, shape, font and size, and more. For example, clickable buttons could be the same colour or quotes formatted in the same way. This communicates to the user that these are similar elements, which have the same purpose and act in the same way.
  • Continuation: The human eye follows the smoothest path when viewing lines. We follow objects that are visually aligned until this is interrupted. Therefore, important elements should fall within this pathway uninterrupted.
  • Closure: The brain’s tendency to fill in the gaps of an image to create a whole. This principle can be used in UX when displaying partial image off of the screen, to inform the reader they need to scroll as further information is available.
  • Proximity: We group together objects that are close to each other. By physically placing elements close, the user will automatically group these in this way. If the spacing does not provide obvious information about a workflow order, for example, the cognitive load will be employed.

  • Figure / Ground: As seen in the image above, when we look at a scene, we automatically separate some shapes into the foreground and others as the background. It should be made clear which is which, so that this doesn’t cause us any confusion and employ cognitive load.
  • Order: We find alignment and symmetry attractive to look at. This should be a central element in design; we will find a web page more aesthetically pleasing if it is symmetrical and ordered.

The above Gestalt principles all contribute to minimal effort in consumption by allowing the user to focus on the overall picture rather than small inconsistencies. This creates a seamless interaction with minimal cognitive load, ultimately improving the UX.

Psychological theories are the foundation for effective UX design. The importance is on the individual’s ability to understand, perceive and use the system from their knowledge and perspective. Schema theory, Cognitive Load Theory and Gestalt principles are just a few psychological theories central to understanding what makes optimal UX.

References

  • Carbon, C. C., & Albrecht, S. (2012). Bartlett’s schema theory: The unreplicated “portrait d’homme” series from 1932. Quarterly Journal of Experimental Psychology65(11), 2258-2270.
  • Graham, L. (2008). Gestalt theory in interactive media design. Journal of Humanities & Social Sciences2(1).
  • Kodzhoshalieva, A. (2020). Reducing Cognitive Load for a Data-Intensive Web Application User.
  • McLeod, S. (2018). Jean Piaget’s theory of cognitive development. Simply psychology, 1-9.
  • Qian, X., Yang, Y., & Gong, Y. (2011, December). The art of metaphor: a method for interface design based on mental models. In Proceedings of the 10th International Conference on Virtual Reality Continuum and Its Applications in Industry (pp. 171-178).