These 10 Psychological Rules Will Make Your Design More Appealing

Agnieszka Cieplińska
10Clouds
Published in
6 min readJun 12, 2018
Illustration by Oliwia Przybyła

When I graduated in psychology, I never thought that I would end up working as a UX Designer. However, my studies have not been in vain — I always knew that psychology is important in all areas of life, and design is no exception. Applying the laws of cognitive psychology helps me and my team to create stunning, intuitive projects. After all, when it comes to usability, it’s crucial to know how users think.

I identified 10 psychology principles that can improve usability and comprehension of almost every design.

Some of their names may seem scary at first glance, but I assure you that they are in fact very easy to understand and implement. Check them out if you want to take your designs to the next level. I know that images speak louder than words, so every principle is illustrated by an example created by our design team — yes, we follow them on a daily basis 😉

1. Mental Models

Conceptual “maps” help people predict an object’s behavior as it reminds them of something they already know.

For example, the triangle icon of “play” commonly used in music devices should turn on the play function on the interface. The same happens with a “heart” symbol, which means liking something. Respect your users’ habits — there is no need to try to reinvent the wheel. Or a play button 😃

Online Music Streaming Service concept by Mateusz Piątek

2. Principle of Focal Point

Users’ attention can be easily drawn towards an element which has a significantly different shape or color. In prehistoric times, this function was to protect us from potential danger, such as a tiger lurking in the bush. A focal point can be used to bring user’s attention to the vital element or action.

Design below presents the perfect example of the CTA button, which stands out from other elements.

Finance Landing Page by Mateusz Piątek

3. Principle of Similarity

When objects look similar, people perceive them as elements of one group. It can be achieved by using the same color, shape or texture in all of them. This small trick gives users a consistent design experience.

Take a look at the example — it presents several books genres in different shapes and color than other elements of the interface.

Books Library App concept by Aga Ciurysek

4. Principle of Continuation

Our brains naturally prioritize following lines — elements on a curve are perceived as related.

Just look at this listing of movies and tell me, that your eyes didn’t follow it quickly! Or you know what? Don’t say anything — I wouldn’t believe you anyway ;)

Filmography Library Landing Page concept by Damian Denis

5. Principle of Closure

We see elements with a close distance between them as a solid form. In other words, our brains tend to close incomplete shapes. This suprising rule gives us a free hand to follow our designer’s instinct and be sometimes non-literal.

Check the following picture with number “ten” created from cut shapes.

Blog Landing Page concept by Damian Denis

6. Principle of Proximity

When you place elements near each other, the eye receives them as related objects.

In this concept, every copy block is positioned close to an icon and a number. The user easily understands that they belong to each other and present a single piece of content in general layout.

Nello Product Landing Page by Mateusz Piątek

7. Principle of Figure and Ground

Human eyes usually separate objects from their background — it seems so obvious, that we didn’t think about it very often. However, with this principle in mind, we can guide users and suggest them which part of the design should they focus on.

This bank login panel uses the principle of figure and ground for the white text on the right, which stands on top of the dark background.

Bank Login Panel concept by Damian Denis

8. Principle of Common Region

Objects close to each other are considered as a group. When we add borders, we create a visible barrier between groups.

Our concept of food app uses this law to separate dishes from each other.

Food Delivery App concept by Mateusz Piątek

9. Hick’s Law

Simplicity is the key! This rule states that with every additional choice users have, it takes them more time to make a decision. Don’t overwhelm them with dozens of options — they might get lost.

This real estate app uses Hick’s Law by giving users with a reasonable, but limited number of choices for the type of house.

Flytta App by Aga Ciurysek

10. Fitts’ Law

This scientific law assumes that the time required to get to a target is a function of the ratio between its width and the distance to the target.

As designers, we can apply this law to the hit areas of clickable objects. The larger clickable area we create, the easier it will be for users to click on it.

This cryptocurrency exchange landing concept follows this rule with the CTA button clickable on the whole area.

Cryptocurrency Exchange Landing concept by Mateusz Piątek

So, it wasn’t a rocket science, was it? 🚀 I bet that you were using at least a few of these principles simply by trusting your gut.

However, I believe that those rules should become a 101 of every designer — the ability to employ them on purpose will open up your mind to thousands of new possibilities.

As a psychologist by degree and passion, I think that there is no better approach for a great design than understanding the people for whom we create it.

A human-centered mindset gives more added value to your work, even if it is not so apparent from the beginning.

My team in 10Clouds is trying to apply cognitive psychology laws in almost every project. What are the results? Well, users and clients love our designs — even if they don’t realize what makes them so appealing 😆

How often do you employ those psychology rules?

Please share your own experience by leaving a comment — I’d love to get to know your opinion. Understanding the rules is essential, but there is no substitute for a good conversation :)

--

--