The psychology of web design: How cognitive bias and design principles make users come back to your website

Image: Design kit - The psichology of web design Image: Design kit - The psichology of web design

While reading Daniel Kahneman’s book "Thinking: Fast and slow” I started to think about how the human brain takes decisions when it comes to choosing one brand instead of another or be captivated by one ad vs another.

The book shows that we’re all biased when it comes to decision-making. But how do we behave when the decision is conditioned by design-based elements?

The interrelation of design and psychology is nowhere new. Researches about buyers’ preferences and decisions towards a brand are relevant for almost a century now and it’s the factor determining the preference of certain colors, words, and other market-based strategies adopted by some companies.

In this article we bring the relation between design elements with psychology based on some cognitive bias pointed in Daniel Kahneman’s book1 and other authors.

We bring 7 variables for analysis, and detail how each one of them is being used in design in general and then goes on detailing how it can be used in web design.

These variables are related to the need of instructing the user while interacting with your product; the demand to follow the Gestalt principles; understand the limited attention span of the human brain; transmit the sense of community and trust; exploit the loss aversion people have; and also the effortlessness to which the brain gets addicted.

1. Instruct the user while interacting with your product

People seem to know how to use certain products once they buy it or get used to it. Imagine buying a new cellphone or computer. Once you unbox it, you’ll skip the manual because you already know how to use it. But that was not the case when you bought or used it for the first time. You had to read the manual and tutorials to learn how to use the device.

That’s the same with a website. Remember your first days using Instagram? You probably had to ask a friend or browse faqs on how to use the app.

If you detect that the user is visiting or logging on your website for the first time, guide him on how to use it, either by a pdf manual, either showing examples about how to fill form fields and use certain features, or displaying the instructions through pop-ups every time the user hovers or clicks an element.

Image: Google drive example
Image 1: Google drive pop up

You should also be able to predict the mistakes your users can do while using your website and address the proper answers by displaying messages that highlight the errors and show examples of how to fix them.

This guidance will make the user more comfortable by knowing that, even if he doesn’t need it, there are instructions available for them.

People are more likely to do or buy things that seem familiar to them and showing them manuals is the best way of creating in them the sense that they already know how to use your product.

2. Gestalt principles

The Gestalt principles were created by the psychologists' Max Wertheimer, Kurt Koffka and Wolfgang Kohler to understand how the information gathered by the human eyes influence the decisions taken by the brain.

Since their identification, Gestalt principles have been used in design to predict the responses of users toward products and brands.

These principles set the basic rule that we perceive parts of objects before depicting the whole object and the adoption of them is important to make the user feel comfortable.

There are seven principles applied to web design2. They state that we create groups of objects based on their similarities, proximities, closure, symmetries, juxtaposes, and balance.

a) Law of proximity

The law of proximity of objects in design states that objects that are part of one group should be separated from those of another group. Hence, elements close to each other are perceived as being part of one group. An example of this applied to web design is the relation between the image, header, and short description we show at each article on our website. As the user's eyes go through each one of these elements, the brain understands that they are all part of the same group – a single article.

Image: Retrate Labs article
Image 2: Retrate Labs article

b) Law of similarity

This law states that similar objects should be grouped together. It assumes that similar colors, icons, fonts, images, and lines for example should be stacked together to transmit the user’s sense of unity. On our website, we separate the “portfolio section” and sort the objects of this group over a black background, while at a section bellow we present the “recent blog articles” section on a white background.

Image: Retrate Labs homepage sections
Image 3: Retrate Labs homepage sections

c) Law of closure

Relate this to the rush of system 1 to always jump into conclusions over unclear facts, mentioned by Kahneman. This law states that we tend to complete objects, words, and groups that are not complete. These objects are generally shapes composed of patterns, such as colored lines followed by white-spaces, that lead the user to create the whole figure in his mind.

A website that shows the usage of this principle is Closer. Look at the silhouette of a man at the background. Although its transparent you can fill the image and understand that it’s a man. The same process goes on in your brain once you read the name of the product (“sleep”), presented in almost transparent letters, beyond other graphics at MA’s website.

Image: Closer example
Image 4: Closer's example
Image: MA's example
Image 5: MA's example

d) Law of continuation

Either straight or curvy, pointy, or soft edges, lines have the power of directing the user’s attention to a specific goal – learn about something, identify, memorize, and click any object. This law presumes that a user will create a continuous line, representing the beginning, or the end of an object, even if there aren’t lines or dots connecting it.

Jam3 makes a good use of this principle and the closure principle in one of their pages, as it invites users to understand the infinite symbol as both the A and the M of their brand name.

Image: Jam3 100 awards celebration page
Image 6: Jam3 100 awards celebration page

e) Law of symmetry and order (Law of Prägnanz)

As humans, we tend to perceive ambiguous shapes simply as possible. We tend to break complex shapes in small units to understand it. When applied to web design, that’s why we prefer balanced instead of messy websites, with friendly faces and without overlapped elements that aren’t properly distinguished.

f) Figure-ground

We can understand elements according to their relative backgrounds or foregrounds. Text, images, tables, forms, and logos will only be visible on a website based on the background they are placed on. Black text (#000) on a black background (#000) is not going to be visible. The same is valid for some tones of gray. So, a proper match between background and foreground will offer the brain the proper contrast and understanding of information.

g) Focal point

Users are prone to click the element that stands out more or is different from others, such as a green button or red button surrounded by grey elements.

At this example from Mixlegno, look how the squares at the center of the screen call the user to click at the link inside them.

Image: Mixlegno homepage
Image 7: Mixlegno homepage

The usage of Gestalt principles is important to make a great first impression on new visitors and they take good advantage of the failures of our brain. We do what we’re guided to do (although we consider ourselves autonomous). We assume that the noisier or shiny object is best one or more important. And overall, we hate math or stats. If someone could sort elements in groups and give it to us sorted, we’d be very happy.

3. Attention span

We have trouble focusing on tasks. Our attention span gets shorter as we execute tasks to a level in which we end up letting distractions move us away from what we were doing.

We can very well login to a restaurant booking platform, start the booking process, and mid-way be distracted by an ad, totally forgetting why we went there. If that’s the case, for example, we can remind the user he was there to book a table by showing an exit pop-up when he moves the mouse towards the closing or open new tab button, displaying them the restaurants available, the benefits, the promotions or other triggers than remind them their goal.

To grab the attention of the user, we can also mirror their behavior by asking questions that confirm their actions (using pop-ups or chatbots) and lead them to follow the process as you planned. For example:

If the user clicks “book a table”; Reply: You clicked “book a table”. How many people do you want the table to be for?

If the user enters “2”; Reply: You selected a table for 2. Do you already have a dish in mind?

If the user selects the dish; Reply: You added “name of the dish” to your cart. When do you want the dinner to happen?

Once the user enters the date and other form fields; Reply: Your cart is all set up. Do you want to finish it now?

If the user is distracted before finishing the cart and is moving to a new tab; Reply: It seems that you’re abandoning us. Your cart is not finished. Do you want to place your order now?

To also help users not be distracted, opt for a minimalistic design approach. Trim-off elements that are not relevant for the task they’re performing. In the example of placing an order, don’t put elements that are not aligned to that end. You should also create a hierarchy of navigation and visual elements such as CTA’s and images that aren’t distractive.

4. People hate thinking a lot

Psychologist Barry Schwartz found out that if users want to buy one item, but are presented too many choices, the chances of them finishing the purchase reduces as more items are introduced. This is called the “paradox of choice” and is characterized by increasing self-doubts which lead users to think that they’re going to take the wrong product if they chose one.

You might think that this can be solved by offering the user full details or information that allows them to compare one product to another, but that only backfires.

Giving more information will only make the user feel more confused for one of two reasons: (1) they might not read all the text (buttons, images, or tables) because people hate reading and will not make a decision because they think they didn’t read enough about something, even if the information is in front of them; or (2) the more they read, the more elements for comparison they gather with turns the decision process more complex. People hate complex things. They just want to buy a bottle of water and move one. They don’t care about how much potassium, calcium, or the techniques this and that company uses to fill their bottled water.

On an e-commerce website, if a user wanted to buy a fragrance3, and is shown many options from the moment the funnel starts until the end (cart), the chances of them quitting the purchase are huge (churn-rate).

Too many options and information to process makes them think “if I buy this item, I’ll not have that one, and that one has this essence that this one hasn’t. Yet the third option is more affordable but of a brand I don’t know… etc., etc., etc.”.

Avoid making the user think about these things on the cart by hiding any type of information that might generate these thoughts. Even at the product’s category page or search results, don’t display all options you have available on your store. Google, for example, doesn’t display all search results on a single page. If that happened, you’d be paralyzed (as well as your computer) and leave the search engine page without clicking on a single link.

Steve Krug wrote a book about it and created a very famous web design concept: “Don’t make me think”. Don’t make your user think. It’s your job as a designer to think for them and offer the solution in simple ways.

5. People trust you if other people trust you

Visitants will buy your product or download your app if it is endorsed by other people.

Called social proof, this principle states that people are willing to do things that other people describe as positive experiences.

One way of increasing your conversion rate is by adding testimonials on your website that makes leads trust you, as we did at Smile Mozambique’s website.

Image: Smile Mozambique testimonials
Image 8: Smile Mozambique testimonials

This example by bite not only shows the reviews and testimonials from the buyers, but also the media channels that mentioned the product.

Image: Bite testimonials and reviews
Image 9: Bite testimonials and reviews
Image: Bite media endorsement
Image 10: Bite media endorsement

The best way of adding testimonials to your website, app, or social media platform is by filming them. Video-based testimonials aren’t prone to alterations – you can read the body language, the lips movements, the voice tone, and other elements that guarantee that it is a valid testimonial. If a video is not available, share comments and reviews people leave about your product or service.

People trust you more if they notice that a relative or a friend also trusts you. By examining the data you have of your user, and their social-media you can identify acquaintances, friends, and family members who have bought or showed interest in your product. Display this information to increase your sales – (“Oh! John bought it. Hmmm… It might be good. Let me buy it too.”) – but be aware of GDPR and other laws regarding the usage and sharing of user’s information.

6. People don’t like losing things

Loss aversion is a factor that drives people to make quick and impulsive decisions when they are prompted with discounts and special offers.

If people spot an opportunity to win something or save money, even a cent, they are likely to revisit your website or subscribe to your mailing list.

We can take advantage of this bias by adding time counters on products we list on our stores, promoting price reductions, and writing persuasive copy that makes them think your offer is a one-time deal.

Image: Bluehost promotions
Image 11: Bluehost promotions

If a user is about to abandon a cart, for example, we can prompt a message asking “Do you want to lose all benefits our product will offer you?”. By replacing the “benefits” word with real benefits examples, you can increase your conversion rates at the last minute.

7. People love addictive things

We’ve previously written an article explaining how to use gamification to increase your sales. You can read more about this principle in that article. But the general rule is that people love addictive things. Anything that makes them release dopamine is welcoming.

On digital experiences dopamine is released by completing tasks that lead them to new levels, new groups, and enhance social approval (likes, followings, shares, etc.).

This makes users, unconsciously, come back to your website or app to activate the chemical again and again.

Read the article on gamification to see examples.

Final notes

Understanding the behavior of your user is important to make great sales and build a product they like. And there’s a lot psychology can teach designers on how to reach this end.

Don’t ignore the cognitive bias and principles mentioned above on your next web project and let us know what you think about them.

Footnotes

  1. We don’t bring in this article the biases the way they are named on the book.
  2. The list will vary depending on the point of view of each author.
  3. This is just an example. Fragrance buyers tend to be loyal to their brands.

Share this article in your favourite social network

Similar articles