Have you ever wondered why you instinctively love a particular app the moment you install it? Have you ever noticed why you find it easier to browse through certain websites, while others are a disaster? Do you feel that the checkout process on one website was a breeze while most of the other ones are a pain in the ass?
One of the reasons that we give is that the application is (or isn’t) designed well. When the designs are strategic and crafted through a well-researched thought process, they delight the users and help them accomplish their goals. On the other hand, bad design is not only misleading, but it also confuses users. So, what’s the solution which can help designers avoid these mistakes and help users in achieving their goals?
The answer to this question lies in human psychology.
But wait, how is human psychology related to design?
Design is all about understanding people and understanding their view of the world to solve their problems. Understanding human psychology takes us a step closer and helps us understand the human mind and its complex behaviors. It helps us see why people react in a certain manner, what their actions mean, how emotions work, what are their motivations and expectations. Therefore, the basic knowledge of the psychological principles of human behavior can help designers create better designs and more meaningful interactions.
Donald Norman, the author of The Design of Everyday Things, says-
“Design is really an act of communication, which means having a deep understanding of the person with whom the designer is communicating.”
I know what you’re thinking- designers should learn to code, designers should learn human psychology, designers should learn to write clear words in their designs! Is there a thing that we should keep our hands off?
Cool down, Hulk!
You need not be a Ph.D. in human psychology. All you need is understanding and knowledge of some basic principles so that you’re better informed while making design decisions.
If you’re convinced, let’s jump straight into some psychology principles every UX designer should know-
Understand how people accomplish tasks
Most people visit websites and use mobile apps for a reason- they want to accomplish a task. The task could be anything from making a purchase to reading the news or browsing tweets and posting a picture on their feed.
So, no matter what your app does, the first thing that you need to figure out is what are the user goals. In fact, find out the percentage of users who are coming to your website with/without a goal.
Why is this such an important study?
It’s important because psychologists have figured out the existence of two patterns of activities in our brain- task-positive network and the task-negative network.
In layman, the task-positive network is a state of mind when your entire focus is on completing the task. For example- when you are making a purchase, or when you are reading, or when you are driving a car. It’s like “stay-on-the-task” “don’t-let-your-attention-waver” kind of mode in our brain.
On the other hand, the task-negative network is when your mind is wandering. For example- when you’re in a queue and waiting for your turn, or when you are staring at the ceiling because you’re sleepless. Your brain is still thinking something, still in action, but thoughts have a free flow at that moment. You aren’t really into them.
Psychologists found out that when users had a specific goal in mind (task-positive), they took a totally different navigation route as compared to users who had no goal in mind (task-negative). Task-positive users want to complete their goal in a minimum number of steps and get out quickly. They don’t want to see unwanted distractions. On the other hand, the situation reverses with task-negative users. They welcome the intrusions. They are happy to gulp down any amount of information you feed them.
So this knowledge of the two brain states can be used by designers to make smarter decisions about the placement of UI widgets such as search, links, buttons, CTAs.
For example- MailChimp’s website has a search box on the top-right corner of the page. The users who come to the website usually come with a specific goal in mind- to create a new account, to look at their campaigns in the dashboard, to check out the pricing of the product, or to browse the resources on the website.
Hence, the design here helps the task-positive network side of users’ brain to stay focused on their goal.
Study users’ attention pattern on the web
Given people, nowadays, are swarmed with all kinds of information, it’s important to understand how they allocate their attention? That too, within a limited period of time when they are using the product.
One of the famous psychologists, Yarbus, did a fascinating experiment with a group of people. He performed an eye-tracking study where he asked people to look at a reproduction of Ilya Repin’s “An Unexpected Visitor” painting.
He asked those people to look at the same painting in different ways like- guess the age of the characters in the painting (picture 2), guess the material circumstances of the family (picture 3). And he plotted the gaze of people when they looked at the picture. Below is the picture-
The plotting of the eye’s gaze tells us that users look at things which quickly helps them meet their goals. When they were asked to guess the age, they looked at the face and other bodily attributes. However, when they were asked to guess the material circumstances of the characters, they looked at the clothes, shoes, accessories, etc.
Similarly, web users consume the content on the website in a peculiar way. Jakob Nielsen has done many kinds of eye-tracking research for the web and mobile and he says that people look in various patterns, one of them is the shape of the letter F.Source- NNGroup
So, now that we know about how users scan information, we can use this knowledge in our designs and place the most important pieces of information in the first two paragraphs. If users go for headlines first, make sure that your page layout is such that headlines, important words, and phrases appear in bold.
Understand the Gestalt principles
The Gestalt principles are almost 100 years old. When applied in design, they help the users learn the interface quickly without much assistance. However, when designers overlook implementing them, it causes mayhem in users’ learning experience and they often commit mistakes.
Gestalt theory talks about how the human mind takes a guess of the function just by judging it on the appearance. For example, if the two things look similar in shape, size, color or are clubbed together, human mind treats is as related.
A few Gestalt principles are:
Elements in close proximity
When elements are placed in close proximity, the human mind perceives them as related.
The proximity of (heading) Phone Numbers with the two listed numbers (011 40520112, +91 7838406000) tells the user that these numerals belong to the above heading, not to Cuisines.
Similar for Average Cost, Opening Hours and Address. The headings are related to sub-text through appropriate spacing and proximity.
Elements in a similar size, color or shape
When users see web elements that look similar, they may automatically perceive them as the individual elements of one group. The similarity gives users the sense of coherence between the design elements.
Elements in continuity
The Human brain tends to group things that (appear to) move in the same direction or are grouped together closely. An example from an e-commerce website is as shown below-
Here our brain experiences visual connection with these cards as they are grouped together. The arrows on the right and the left help in understanding that users can scroll in the established direction to browse through other categories.
Other Gestalt principles are elements in the same line, elements that share a common region, elements that are connected.
Knowledge of these principles can help designers to avoid designing interfaces which put a cognitive load on users. If designers caution against these mind traps and use Gestalt principles smartly, it can help users to quickly learn the interface without making many mistakes.
Learn to use Hick’s law in UX design
Humans are fickle minded. We want to see all the possible options in the world in front of our eyes but when we get them, we get confused. A very relatable example is the number of choices we see in the food menu. Or, while navigating alleys to pick your favorite cheese in the Walmart store.
Hick’s Law states that when you present too many choices in front of the uses, they are more likely to get confused and spend more time in decision making. Knowledge about this human psychology can help designers in simplifying the decision-making process by eliminating unnecessary steps.
In UI design, Hick’s law is often used in combination with other design principles. How? Here are a few steps you can take-
Categorize– When you group related things together, it helps users take decisions quickly by eliminating the entire category or selecting from the category which best describes their goal. For example- in the food-ordering web app below, the user can discover the restaurants by the type of meal they offer- lunch, dinner, breakfast, luxury dining, etc.
“The shorter way to do many things is to only do one thing at a time.”
Take for instance the flow of the checkout process. Instead of overwhelming the user to do eight steps on one screen, you can design it in such a way that they are prompted to do one step at a time. And they know how many steps will it take to finally accomplish their goal.
Below is a good example of this (designed by Andrei Dorin)
One of the many struggles of designers is understanding what plays in the minds of the users while they are doing a task on web/mobile and why they abandon it?
The answer lies in human psychology. Let’s try to understand it by an example.
You’re about to signup for Amazon Prime membership. The page says that you can sign up for a monthly plan or choose a yearly plan.
Now here’s what I have learned from the screen above-
- Lots of benefits of prime, something that I don’t get in a regular account
- I’ll have to give my credit card information to get access
The other subvocal concerns that come up in my head are-
- Will I be able to cancel the membership anytime I want? Will this be automatically deducted?
- Which plan is better? Which one do most people like me prefer?
- Can I get a refund if I don’t like their service?
- It says unlimited free delivery! I wonder if it’s on all products or specific products?
This happens to everyone. In psychology, this is called approach-avoidance. It means that when we are far away from completing our goal, we think about the positive things (like FREE delivery, free movies, and videos). However, as we move closer to our goal, we start looking at the negative aspects in order to avoid doing it.
This is true for users of web and mobile applications as well. Approach-avoidance results in indecisiveness which eventually leads to abandonment of the task.
In order to resolve it, designers must learn strategies to overcome this resistance rather than ignoring it. Answer your users’ concerns proactively by demonstrating the advantages of taking membership or downloading your app.
A good example of this is the membership page of Medium where they have listed everything that a user will get when they opt for the paid plan.
And when you go and click on the “Get Started” button, it takes you to the payment page where all your queries are answered.
Everything from the refund to billing cycles.
There are many more psychology principles which play a crucial role in the design. Discussing all of them in one blog post is just not possible. Moreover, the human attention span is lower than that of Goldfish. So, I’ll take a pause here.
I would love to hear what psychology principles do you keep in mind while designing. Also, if you want me to talk more about these principles, drop in your comments and I’ll write the second part to it.
Thank you for reading!