Under the influence: psychology in UI/UX
Every design is about perception and interaction. Whether it’s a façade of a building or interface of an app. The whole purpose of designing lies in the appeal to a target audience no matter how wide or diverse. That’s when we rely on psychology as means of understanding how to apply user’s experience into the end product, increase involvement and improve the overall reception.
As we center our products within human-oriented design, it’s vitally important to develop a system of principles and psychological approaches that would increase efficiency of apps and websites, reach essential goals of users. Eventually, any implemented feature, any UX approach is driven by the two main elements: attention and action. The level of engagement becomes a crucial metric.
Laws of Perception
To get deeper into the perception of a user, we have to understand what psychological connections lie beneath the whole user/interface communication. Although ever-evolving, user’s cognition and perception abide a particular set of ground rules:
User perceives what he expects. It’s biased by experience, context, goals.
Vision is optimized to see the structure. This rule is detailed in Gestalt theory (when looking at a group of objects, we see the whole, after – the individual parts) researched in 1920s by a group of German psychologists inclines there are 6 basic principles of perception we apply to UI:
Proximity. Also called Proximity Law. Close arrangement of elements creates a group association for user. This emphasizes the importance of being careful in locating elements together since user may recognize them as connected with each other.
Similarity. Individual elements that seem similar, will tend to be perceived as a single whole or a group
Continuity. Users tend to see continuous forms
Closure. Human brain tends to perceive collections of fragments and elements as a whole
Symmetry. Very much like closure, user tends to see whole figures in relationship, rather than parts
Figure/ground. When objects overlap, user will see smaller figure/element layered on a larger on (ground)
Color vision is limited. Users find it difficult to discriminate pale colors, small color patches and separate patches in design. Around 8% of male and 0,5% of female users of Northern European ancestry have color-blindness. No interface can rely solely on color.
Peripheral vision is poor. It requires very strict and precise allocation of elements within the interface. The main actions and most important features be implemented into the design bearing the serial position effect in mind (described further)
Users think mostly about tasks, not tools. Generally speaking, users don’t like to think that much. They focus on achieving the goal and prefer familiar paths to exploration of new design.
They seek and use structure. It is easier to perceive. Visual hierarchy gets users to goal faster.
Inductive reasoning is easy; deduction is hard. UI design must avoid making users deduce things (to reach an answer or a decision by thinking carefully about the known facts) – only explicit and exact reasons and demands for action. No extra calculations for user – anything that overloads software’s mission.
Recognition is easy; recall is hard. Humans evolved to recognize things quickly, but not to recall arbitrary (random) facts – it remains a challenge for the majority.
Attention is limited and memory is imperfect. Short-term memory usually holds 3-7 unrelated items: goals, numbers, images, other information. Long-term memory stores lifetime experience, but can be alternated with time. Some seldom-followed routines can appear hard to recollect.
– Grab user’s attention
– Manipulate user to perform required operations
– Keep user involved
Design equals attention
First, let us understand what exactly is user’s attention we seek so desperately to get a grip of. Attention is the ability of our mind to selectively concentrate on a discrete aspect of information, whether it is a process or stimuli (something that incites to action or exertion or quickens action), whether subjective or objective, while ignoring other information flows.
When we regard user’s attention in terms of UI, we mainly concentrate on the visual information. That said, there are two basic types of visual attention:
– Spatial (Object-based) attention: user directs his attention to a certain location in the interface.
– Feature-based attention: user directs attention to a certain feature of the object (shape, color, etc.)
Now that we have determined the two main principle by which user’s attention operates, let’s give a more precise scope for UX designer to focus on while projecting any interface. Much like the main logic of the interface listed earlier (grab, hold, manipulate), there are four types of attention.
Selective attention, the foremost type that makes a choice which stimuli is the most important in a particular situation. This type of attention is the most versatile and useful psychological tool for designer to grab user’s attention with while creating software environment.
The most common example of divided attention is watching any movie/sitcom or Youtube video and talking over the phone. This type of attention allows us to respond to multiple demands of the surrounding simultaneously. Within the interfaces, it can be observed as in games where user has to take control over multiple, sometimes not closely connected elements or in interfaces that are somehow split into separate regions.
Alternating attention is the ability to switch your focus back and forth between tasks that require different cognitive demands. Like when you check your route via Google maps app, and make changes to your driving direction.
But the most important type of attention UX designer should focus on when creating interface in dynamics and building the flow is sustained attention which allows user to focus on a particular stimuli for an extended period of time. Basically, this type of attention is the key of understanding the bounce-rate of any interface, the means of keeping user involved within the interface as long as possible. It forces designer to insert a certain goal the UI/UX interface to serve.
Von Restorff effect
One of the most common and basic practice of grabbing user’s attention from his first interaction with any interface is based on the works of German psychiatrist Hedwig von Restorff (1906-1962). His 1933 study revealed a pretty obvious, yet game changing observation: from a certain number of displayed elements person will most likely remember the ones different from the rest. Also called ‘isolated effect’ this leads to the first and the foremost psychology principle we can operate with when creating interface that should grab user’s attention.
Fonts, buttons, or pictures – anything we can highlight, emphasize or alternate from the rest of interface can become an eye-catcher. Something user gets hooked upon and remembers. This becomes the first step when we grab user’s attention, whether we speak of an app, or desktop. Isolation effect also serves as a manipulation to guide user into the interface. We’ll come back to that later. As you can witness on the following example, this particular interface uses von Restorff centering user’s attention on the illustration below. Von Restorff Effect is the reason why call-to-action buttons are differentiated from the rest of the interface elements. Means of grabbing user’s attention with fonts, colors and elements is covered by Susan Weinscheck in her article.
Serial position effect
The serial position effect was studied by German psychologist Herman Ebbinghaus, is the psychological tendency to remember the first and last items in a list better than those in the middle. This effect is a form of cognitive bias based upon two other effects: primacy and recency.
The primacy effect determines our brain’s inclination to remember information perceived in the beginning of any interaction much better than anything that follows. This effect can be reduced when the amount of information is increased or presented quickly.
The opposite one is recency effect. It is believed to be caused by more recent information blocks to be stored in short-term memory, which generally lasts for 30 seconds. It can be reduced with a distractive task between the information load.
Now that we understand how serial position effect is formed, it’s easy enough to see a great scale of implications for in advertising and design. To influence buyer’s decision, e-commerce websites position the most important to sell items on their pages in the beginning and the end of lists, manipulating buyer’s attention. This effect is the key to SEO for obvious reasons.
Most of the apps favor bottom or top bar navigation instead of hamburger menu. Following a simple rule of serial position effect, designers put the most important user actions in the navigation bars to the right or left. The logical flow of user’s attention from left side to the right side determines which buttons or features should be placed first and last to manipulate user and provide his the most effective UX design.
User engagement issue #1: Cognitive load
Before we follow with psychological laws and principles behind any design, it’s important to determine a grand issue in creating interface that engages user – cognitive load. This is the total amount of mental effort required from a user to complete a particular task or set of tasks.
Australian psychologist John Sweller formulated three types of cognitive load in his theory:
Intrinsic cognitive load is the level of difficulty associated with the particular instructional topic. This is why any microcopy or copy within the interface become vital for UX, as they should provide user with prompt and short action instruction
Extraneous cognitive load determines anything that distracts user and makes it difficult for him to perform the task or achieve the desired goal within the interface.
Germane cognitive load is focused on enhancing the information processing. It allows user to acquire an understanding of UX schema and organize the information flow in the most effective manner.
User engagement issue #2: Hick’s Law
Along with the Gestalt laws described earlier, one of the most popular psychological principles is Hick’s Law (or Hick-Hyman). Named after a British and an American psychologist team of William Edmund Hick and Ray Hyman this law implies that the time it takes user to make a decision depends on the available choices. The more choices user faces within the interface, the longer it will take to reach a decision. This obvious conclusion is very often neglected while focusing on functionality of the app or website. Yet Hick’s Law allows designers to analyze the number of features they can implement without overloading user. This also allows controlling user involvement by increasing or decreasing the number of decisions user can should make within the logic of the app’s flow.
Grabbing user’s attention may appear to be the foremost mission of any app, but keeping it and manipulating the decisions – that’s why it is important to take into the account principles described earlier. That’s why it’s important for UI/UX designers to learn psychological basis to understand user: how he perceives objects and how he interacts with the environment of the software. This is the only way to create a coherent and successful design for the audience.
All illustrations: Maxim Gedrovitch