Article
Design process

updated on:

5 Mar

,

2024

7 Psychology Laws Behind UI/UX Design and Ways to Implement Them in Your Product

7

min to read

Table of contents

At Eleken, we often work with data-heavy B2B products that leave little space for playing with human psychology. It’s quite different from a social media app that has to use every little trick to engage users. Still, psychology is a basis of every UI/UX designer expertise, and its principles are important in the design of professional products, too. 

Since the psychologist is not typically a member of the product team, the job of understanding user behavior lies on designers. Let’s see how psychology laws work in UX design.

Zeigarnik effect

Has it ever happened to you, when you open your music player app and unexpectedly find out that the last unfinished song is the same one that has been playing in your head all day? 

This is how Zeigarnik effect works. It claims that human brain remembers the matter related to the unfinished task better than to the finished one. In the 1920s, researcher Bluma Zeigarnik noticed it while observing waiters: they remembered well the details of orders that were not paid yet, and remembered worse the ones that have been paid.

The power of unfinished things is responsible for our addiction to TV series. Script writers finish each episode with a cliffhanger to create that feeling of unfinishedness that would make us remember to come back to the screen the following day.

Ok, but how does it work in a digital product? Designers add elements like progress bars that show that the task is not finished, which motivates users to make that last effort and finish the task. An on-point example here would be an onboarding for PicaSaaS, designed by the Eleken team.

An example of Zeigarnik effect in UX. A screenshot of onboarding in PicaSaaS (Fruitful Source)
Noticed a blue line on top that shows that you are in the middle of the onboarding process? Read the case study to learn more

Cognitive load

Computers have RAM, and human brains have cognitive load, or working memory, as it is also called. The term was invented in the 1980s by John Sweller. He noticed that overloading working memory slows down the learning process and decreases the number of completed tasks.

When it comes to UX design, the law of cognitive load says “don’t put too much stuff on one screen if you want users to pay attention to it”. 

We often get redesign requests from products that were designed more than ten years ago. Overloading the screens with information is a common feature of such interfaces. In the 2020s, however, good UX design shouldn’t overwhelm users with information.

Having been working with complex and data-intensive products for years, we have come up with our list of top UX patterns that help reduce cognitive load:

  • Wizard pattern
  • Two-level menus
  • Versatile filtering systems

In UX design, the volume of optimal cognitive load is set to 5+-2 objects. It’s also known as

Miller’s law

The “magic number of seven, plus or minus two” was introduced by George A. Miller in 1956. Decades later, it became a golden rule in UX design. It’s not recommended to have more items on the menu, in a series of checkboxes, and so on.

We at Eleken often work with products that have lots of features, so trying to fit into Miller’s law can become a real challenge. Here is an example of Spoonfed, a food logistics company. New features were added to the product until the navigation became overloaded. It took us a while to systematize and rearrange the navigation system, but once we were done, each card contained five or fewer items.

An example of Miller's law in UX. Navigation design. 9 cards, 2-5 items each
Spoonfed. Design by Eleken

Social Proof

Let me tell you about one curious experiment that took place back in 2006, when MySpace was the most popular social network. A small music website with songs from unknown bands was created. There was one group of users who could see the number of downloads each song had, while another group couldn’t. Also, the ones who saw the number of downloads were divided into eight “worlds”, each one with its own count of downloads.

The result? The most popular songs were different among the groups. People listened more to the ones that were already “popular”. It doesn’t turn the world upside down: the best songs were downloaded anyway, while the worst ones were not. However, out of the majority of “average” songs, the number of downloads impacted their rating a lot.

Users tend to act as others do. That’s why apps tell you information about other users whenever possible. For example, Duolingo in between the exercises shows how many people learn the same language as you do. Duolingo is a true hacker of human psychology: if you want to learn more tricks like this, just open the app (and try not to get addicted).        

An example of social proof in UX. Two screens of Duolingo: "Right now, over a million people have a 365+ day streak!""

Scarcity

People value things more when there are fewer of them.

In the last few months, there was news of low sunflower harvest. Once, I came to the neighborhood supermarket and saw a big sign on the shelves with oil saying “we sell no more than 5l of oil to one person”. And, guess what? The shelves were empty. How often do people buy 5 liters of oil at a time? Rarely, I bet. The feeling of scarcity makes them buy more — and value the oil more than they did before.

Just remember the panic around toilet paper in the first days of quarantine in 2020. Scarcity can make people do some irrational actions. But what does it mean in UX? When an app wants to encourage users to do something, it shows that the opportunities are limited. It makes users more likely to use the opportunity.

Too Good To Go, food saving app, always shows you how many offers are left from every place. 5, 3, 1 left… And “last chance” when the time for pick-up is almost over.

Scarcity effect in UX. Too Good To Go app screen. Each offer has a tab "1/2/3 left""

In this case, the trick is relevant to the purpose of the app: saving food from waste. Sadly, some other products use it just to cause the unreasonable feeling of scarcity and boost sales.

Labor illusion

People value things more when they think there is more work/time invested ( and no, we are not talking about times when you had to go to government agencies and wait for weeks to get your document ready).

The most famous example Kayak booking service (it`s commonly believed that they were the first to use the labor effect in UX design). Now, you can see it in almost any flight booking service. 

When you hit the Search button, you don’t receive all the results immediately. Instead, you get a waiting sign and a message like “we are checking 264 websites for the best deals”. That way, people appreciate the information they get even more (since even a digital algorithm cares about your trip and does its best!).

This trick is used a lot, both in cases when there is a loading time that needs a justification (it`s not the slow connection, it’s how hard we are working for you!) and in cases when waiting time is artificially extended to a few seconds.

Labor Illusion. Skyscanner search process. Loading circle "Checked 7 of 10 providers""
Skyscanner, flights search service

Weber’s law

Users adapt better to small incremental changes

The dislike for change is in human nature. We like our routines and habits and most people are not excited about changes they didn’t ask for. It’s a common challenge when we’re talking about the redesign of digital products. Users feel annoyed and start criticizing it right away just because they’re not used to it.

That’s why smart companies go for incremental changes. Urban Sports club started with an unbelievably profitable offer: 30 visits to any sports location in any city for just 59 euros.

It was quite obvious that this model can’t be sustainable and profitable for the company and sports clubs. So, when at some point they decreased the number of visits to 15, it was expected but still frustrating to some users. In a few months, Urban Sports introduced another change in pricing: now, you could only make 10 visits a month for 66 euros. Of course, people were still frustrated, but gradual changes helped decrease the churn compared to abrupt big changes.

An example of Weber's law in UX. Urban Sports pricing page. M tier for 66 eur
Now, one check-in is 6,6 eur compared to 2 eur a year ago

How can we use it in our design? For some of our clients, we make a big redesign and an interim version that would introduce some small changes. 

This was the case of Spoonfed that we mentioned above. They were in the process of big changes, which included moving to a new platform, and therefore, needed a redesign. Such a large project takes a long time, up to a year.

The interface of the product required many changes, so, in order to improve user experience faster and get users accustomed to the new look, our designer prepared an interim version of the design. It didn’t need that much time to be implemented and included new navigation (left side instead of the top bar) and an updated visual style.

Initial design vs interim version. Menu location is changed

Final thoughts

To be honest, basic knowledge of psychology would benefit most professionals, not just designers. The laws described in this article, are just an arbitrary selection out of hundreds of rules that humans invented to describe our complex and often irrational behavior. 

Want to know more? Read our article “Psychology in UX Design: The Science of Making People Happy”.

Share
written by:
image
Masha Panchenko

Experienced editor, project manager, and content writer. In collaboration with Eleken's UI/UX designers, created articles on data-driven design and marketing to help SaaS companies grow.

imageimage
reviewed by:
image

imageimage
Top Stories