Cognitive Psychology Principles in User Experience Design

The following content is an extract from a research study I have been doing since September 2015. The study explores how the human mind responds to a given graphical user interface, how we can create an efficient GUI design by applying knowledge about our minds and how we can make use of the existing research to create a better user experience. Basically, I tried to understand and establish a connection between a great user experience and cognitive psychology theories.

Cognitive psychology is the scientific study of the mind and mental processes which includes memory, attention, perception, reasoning, language and decision making. It explains how people acquire, process, store and learn information. It helps us to understand people better. Imagine an industrial designer who is drafting designs for a car. Without knowledge of human physical limitations and capabilities, designing the interior of the car that will be usable and comfortable for the people, will be a struggle. Similarly, a user experience designer will struggle to design a web-based interactive system that will be usable and intuitive without knowledge of human cognitive capabilities and limitations. Hence, it is crucial for interaction engineers and UX designers to understand the underlying principles of cognitive psychology before creating any interaction designs.
User experience in the Internet world can be defined as the experience a user receives when using a web or mobile application through its graphical user interface (GUI). The diagram below illustrates this relationship.

Fundamentally, if the user does not have to spend much time in learning and understanding how an information system’s GUI functions, that information system is considered to have a very effective GUI. A high-quality GUI must be able to efficiently perform user tasks and meet their demands.

The term user experience design or UX design is still ambiguous to many, including those working in the software industry. It is defined as “The process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product.” UX design cannot be confined to just the software industry, design industry or psychology. It is interdisciplinary. People with different background, experience and education have different perspectives of UX design and it may be that all of them are correct.

A great user experience cannot be achieved without an efficient user interface design and to design an efficient user interface it is important to consider some cognitive psychology principles. Cognitive psychology itself is a vast area of study and has plenty of previous research history and much current activity. It is difficult to understand cognitive psychology entirely as it embodies a vast array of research areas including neuropsychology, neuroscience, philosophy, artificial intelligence, linguistics and anthropology. Let us discuss few cognitive psyschology theories.

Perception is the information about our surroundings that we gather through our senses. It is our ability to recognize and respond to the objects from the surroundings. Humans perceive information using the five senses: vision, touch, taste, smell and hearing. In the case of GUI design, visual perception is the most prominent factor to be considered. Perception through hearing is limited to systems using sound, mostly as means of feedback. Currently, the impact of other senses on interface design is significantly lower. It is important to study perception before designing a GUI as the information to be delivered should be comprehended correctly and in a timely manner by the end users. Icons and symbols should clearly and intuitively convey their meaning to the users. Users should be able to easily interpret the message in sounds and audio used in an interactive system. Text should be easy to read with sufficiently large fonts and text color should be selected in such a way that it assists the users in reading and does not conflict with the background color. Readers make mental associations among different objects (text or images) depending upon the visual cues present on the screen.
Memory and its limitation
Human memory limitation is one of the important aspects that needs to be considered while designing a GUI. According to cognitive psychology, the way memory works can be explained with the help of the block diagram given below. Some information from the environment enters our system through our senses. It briefly passes through the sensory memory and some of the information is encoded and stored in short term memory, also known as working memory. Some of that information from the short term memory gets encoded and stored in long term memory. Ideally, we should be able to retrieve the information from long term memory to short term memory so that we can act on it. Also, there is an omnipresent process of forgetting that mostly occurs in the short-term and sensory memory stages.

Above figure is adapted from Atkinson, R.C. and Shiffrin, R.M. (1968). 'Human memory: A Proposed System and its Control Processes'. In Spence, K.W. and Spence, J.T. The psychology of learning and motivation, (Volume 2). New York: Academic Press. pp. 89–195.

In GUI and interaction design we are basically concerned with the short term memory. Short term memory has a limited capacity to hold and process information. According to renowned cognitive psychologist George A. Miller, people can hold seven plus or minus two pieces or chunks of information in their short term memory at the same time. Some current cognitive psychologists and UX experts doubt the figures presented by Miller. They contest that the limits of human short term memory are actually somewhere around four chunks of information. That is people can remember four plus or minus one items or chunks of information at the same time. This aspect of chunking is extremely important for UI design, since encouraging chunking through design allows people to deal with more complex interfaces. Hence, we can hold more than four things in our memory if we encode it in a certain way. Let us demonstrate the fact by the example shown in the figure below.

Try to count the number of diamonds in both the boxes. Note which one of the boxes takes more time. Ideally, the fewer number of diamonds the less time it should take. However we find it easier to count the total number of diamonds in the right hand side box as they are arranged in groups of four. Although the total number of diamonds in the left box is less than that in the right box we end up taking more time to count the total number of diamonds in the left box. Chunking allows us to treat each group of four in the right box as a single item. Also, recalling or retrieving the box on the right would be much easier due to its recognizable pattern. Another example is phone numbers. People remember better if the numbers are broken down in groups of three or four digits, for example recalling 510-365-1285 is easier than remembering 5103651285. We can draw some inferences from these findings that would help in designing a better GUI.
Attention is a human characteristic present right from birth. Babies attend to environmental stimuli such as touch or loud noises. Attention is an integral part of the cognitive system yet there is no clear definition of attention in cognitive psychology. Vaguely, attention is how we actively process specific information in our environment. It is a collection of cognitive phenomenon that has something to do with selectivity of processing. We might wonder why the brain has to select a process and why it can’t process all the information at once. Well, the brain receives massive amounts of information from all the five senses every second. A huge portion of this information comes from vision. The brain has deal with this overload of information; hence it has to prioritize and select the information which needs to be processed first. The brain does this selection either subconsciously or consciously. We have to consider some of these brain characteristics while designing an interface as our design should be able to attract and direct attention. There are three things to remember when studying about attention.
User’s mental model
According to human computer interaction expert and computer scientist prof. Ben Shneiderman, there is no average user, either compromises must be made or multiple versions of each system must be created. Hence, we cannot design a single interface that meets the needs of every user type.

An interface should be designed such that users can learn quickly how to use it. A well designed interface provides only basic functionalities to novices and advanced features to the experienced users. If a new interface is given to users and if they are asked to learn its functions, people would prefer to explore the system by the trial and error method over reading manuals and tutorials. It is a natural human tendency to complete a task as quickly as possible, therefore people jump right into discovering the options and learn on the go. Fundamentally, people form and test hypotheses and they learn by exploration.

In our designs, we can facilitate or enable this learning process by allowing users to build an accurate mental model of how things work. We do that by placing a layer of usable interaction design between the system model and the user’s mental model. These two models need not be always identical. It is the dream of UX designer to mask the complicated and confusing system model with a much simpler and user friendly UI. It could be considered as an example of abstraction levels. People are building these mental models progressively as they are interacting with the system. We can support them to build a good mental model by doing the following things:

We can give them a starting point that suggests to them where to begin and how to move effectively among the actions the system provides. Consider the case when people land on a new website, they need to know where have they arrived, what can they do and where to start. Without these hints, it is almost certain that they would get lost. So it’s very important to give people a good starting point and to orient them into the new system. This is often known as a ‘virtual tour’.

We can continuously encourage them to explore the system further. If they are continuously being encouraged, they will be building on their mental model, creating a more accurate and more complete model that will help them to use the system much more efficiently. For example, getting started videos and help message boxes on hover.

Cognitive Load Theory (CLT)
Cognitive Load Theory is an instructional design theory that defines information processing which involves long-term memory, and short-term memory or working memory. According to the cognitive load theory, learners retain information best when they do it in a way that does not overload their mental capacity. During learning, information must be held in our working memory until it has been processed sufficiently to pass into our long-term memory. As seen earlier, working memory has limited capacity, when too much information is presented at once, it becomes overwhelmed and much of that information is lost.
Gestalt Laws
Gestalt means shape in German. In psychology it implies the idea of perception in context. We don’t see things in isolation, but as parts of a whole. Gestalt law is one of the foundations for instructional screen design. Some of the Gestalt laws are explained below:

• Law of Closure - Closure occurs when we mentally ‘fill in the blanks’. People perceive incomplete objects or shapes as complete by filling in the missing information.
• Law of Continuity - Elements aligned in a line or curve are perceived as more related than unaligned elements. Our eyes tend to follow a direction as shown in a GUI.
• Law of Similarity - Similarity occurs when elements on screen are similar to one another. People often perceive objects as a group or pattern if they share some common characteristics.
• Law of Proximity - We perceive objects that are closer together as more related than objects that are further apart.
• Law of Pragnanz - Pragnanz in German translates to pithiness. People will perceive complex and intricate shapes as the simplest form possible.
• Law of Symmetry - The Law of Symmetry states that people tend perceive objects as symmetrical shapes that form around a center point.

Apart from these theories there are some other important concepts from cognitive psychology worth considering while designing an efficient GUI.
Placement of Text and Images
Text and images should be placed in such a way that the interface looks attractive and the text and data are easy to comprehend. For designers to better understand their users it is essential to learn some information about our brain’s functioning. Brain science is still in its nascent stage and there is a lot to be discovered about the brain’s functioning. There is still an ongoing debate on left-right brain theory. Some people believe in the left-right brain theory while others are skeptical. However it’s an established fact that the brain has distinct areas to process spatial and contextual data and that the brain is divided into two halves or hemispheres which both perform different functions. Most cognitive abilities require involvement of both the halves. The left side processes small details of things we see, like text, and it also performs analytic processing. The right half processes the overall shape of an object and deals with perceptual and spatial processing. The brain processes information contralaterally; that is the left hemisphere controls the right side of the body and the right hemisphere controls the left half. Hence, a user can identify text quickly when it is displayed in the user’s right visual field and images are identified quickly when presented in the left visual field. Also, important and more information should be placed at the top and less important information at the bottom of the screen. Proper placement of texts or images according to the human visual field will reduce the cognitive load faced by users.
Color Theory
Colors play a crucial role in UI design. They help in identification and recognition of objects and also increase memory retention of objects by 50% . Colors boost attention, recognition and interest from users. Appropriate colors should be selected for text, button, icons and background. As we have seen earlier, humans short term memory is around 4+-1 chunks, hence it is important to restrict the number of colors to 4+-1. A limited number of colors also reduces a user’s cognitive load. Bright colors have always been used as ‘attention grabbers’. However, cognitive psychology has determined that human pupils contract while looking at bright colors and dilate when looking at dull colors. Looking at large areas of bright colors causes strain to eye muscles. Moreover, it is worse if we have a mixture of dull and bright colors as the eye muscles get tired contracting and dilating in quick succession. The choice of background color is also affected by cognitive concerns. Users prefer light background colors as opposed to dark as it enhances readability. It has been found that the color blue makes an ideal background color since blue has a short wavelength and human fovea have few blue-sensitive cones. This makes it difficult for the eye to focus on blue, which makes it an ideal background color, as it won’t distract the user from the information presented on the screen.
In the book Emotional Design: People and Things, UX pioneer Donald Norman proposed a framework for analyzing products in a holistic way to include their attractiveness, their behavior, and the image they present to the user and of the owner. Norman proposes that there are three levels by which people process design. The three levels are Visceral, Behavioral and Reflective. Visceral design is about initial impact or reaction, and appearance. Behavioral design is about look and feel, the total experience of using a product. Reflection is about one’s thoughts afterwards, how it makes one feel, the image it portrays, the message it tells others about the owner's taste. It’s like driving a Porsche, you have a desire to drive that car as you are blown away by its aesthetics, this is on a Visceral level. The joy and excitement you get when you actually drive the car holding its steering wheel is on the Behavioral level and the overall experience of having driven a Porsche and the long lasting ecstasy is on the Reflective level.

A user experience is basically a human-human interaction science and how humans relate to an experience is through cognition. Cognitive psychology or understanding how knowledge is acquired is the backbone of user experience design. Understanding the complexities of how people think, perceive and remember is critical to understand how a user might engage with a design or how a design causes problems and creates stress. Therefore, it becomes critical for user experience designers, interface developers and programmers to recognize the cognitive psychology reasoning behind a GUI design.

P.S. All refernces and credits are given in the original survey paper. Information presented here is an extract of the original paper written by me. Feel free to contact you are interested in reading the complete paper.