Think about the websites that you visit on a regular basis. Ask yourself why you prefer these over others. The reason is because of how they make you feel. That’s the Psychology factor in web design.
In this article, we’ll discuss 8 principles of Psychology and how they can be applied to web design:
- Research
- Hick’s Law
- The Serial Position Effect
- Fitts’ Law
- The Von Restorff Effect
- Schwartz’s Paradox of Choice
- Occam’s Razor
- The Zeigarnik Effect
To build an effective website, you need technical skills such as coding, graphic and interface design, authoring, and Search Engine Optimization (SEO).
But to build a successful website, you need to know who your site users are. This is why Psychology plays a key role in the success of your website.
What Is Web Design Psychology?
The broad definition of Psychology is that it is the study of the behaviors and mental processes of humans and non-humans. In the context of web design, we’re only interested in the human field of study of Psychology.
Web design psychology refers to the application of the principles of Psychology in web design for the purpose of creating web pages that effectively trigger the appropriate emotional responses, influence thought/decision-making processes, and compel the desired actions from the site users.
Investing in a website for your business is a smart idea. But keep in mind that as of this writing, there are close to 2 billion websites operating on the Internet. And while these websites cover a wide range of industries, we can assure you that the majority of your competitors have also invested in business websites.
The correct application of the principles of Psychology in the design of your website could give you a big advantage over the competition.
8 Principles Of Psychology That Can Be Applied To Web Design
Our article won’t make you a professional Psychologist. But you’ll be equipped with the knowledge of how to apply concepts, theories, and principles of Psychology in the design of your website.
Let’s start with the cornerstone of scientific disciplines.
1. Research
Research is the systematic investigation of data, feedback, and studies to uncover the facts and evidence necessary to arrive at well-supported conclusions.
There are 2 types of research: Quantitative and Qualitative.
- Quantitative – Analyzes data from measurable sources such as surveys, questionnaires, and polls; the “what” of research.
- Qualitative – Seeks to find out the reasonings and rationalizations behind the results of interviews, tests; the “why” of research.
In Psychology, once a problem is identified, research outlines the approach to remedy the condition.
In web design, once your Unique Value Proposition (UVP) is identified, research outlines the strategies to get your UVP front and center of the audience that would find the greatest value from it.
Without research, planning has no direction. Your website will be subject to mostly guesswork and reduce its probability of having success.
At Mountaintop Web Design, we work closely with our clients to learn more about their business, and customers, review the current process flows, and recognize the persistent pain points.
We study websites, social media, and business analytics, and run industry and competitor analysis to develop a better understanding of how the business is performing.
The purpose of our research is to help the client create an accurate profile of his target customer. We want to determine the demographic of the target market as well as discover the various online behaviors that lead to the desired results.
Once the research phase is completed, we’ll know which principles of Psychology to use and how to apply them in web design.
2. Hick’s Law
Psychologist William Edmund Hick and his partner, Ray Hyman, developed Hick’s Law which states that the more choices a person has to make, the longer it will take for him to arrive at a decision.
Imagine reading a menu with more than 300 choices. Now, compare that to looking at a menu board with only 5 food selections to choose from. Surely, you’ll be able to make your choice from the menu board compared to the long list published in the menu.
Why is Hick’s Law important in web design?
According to a study funded by Microsoft, the attention span of humans has declined by more than 25% from 12.5 seconds in the year 2000 to 8.25 seconds in 2015.
The declining attention span has translated to people spending fewer than 10 to 20 seconds per website visit. Therefore, your web pages only have seconds – not even a full minute – to capture the attention of site visitors.
How to apply Hick’s Law in web design:
- For the home page, use an image that the site user can quickly associate with your UVP.
- Create a UVP that’s short and concise. In a few words, the UVP must be able to define what your business is about and why it offers the best solutions for the site user.
- The menu bar, CTAs, and social media icons must be visible to make it easy for the user to navigate your website.
- Categorize the choices that the user has to make. If you’re selling shoes, categorize them into “running shoes”, “cross trainers”, “athleisure wear”, “trekking”, or “office wear”.
- Add a filter feature to help the user scale down his number of choices. For example, if the user clicks on “running shoes”, include parameters for price range, size, men’s or women’s shoes, type of foot (arch or flat), brand, and color.
- Simplify processes for payment, sign-ups, and customer service.
- Limit the number of steps it takes to complete a transaction.
- Add chat plugins in key pages such as the home page, products page, and the e-portal.
3. The Serial Position Effect
The Serial Position Effect was developed by Hermann Ebbinghaus. The principle sought to determine how humans process information based on its position in a series.
There are 2 key positions that were studied by Ebbinghaus: Primacy and Recency.
- Primacy – Information that is placed first in the series generates higher recall because very little processing is required to remember it.
- Recency – Information that is placed last in the series generates higher recall because they are the last one stored in short-term memory.
Regardless of the behavior of your site user, the Serial Position Effect makes it clear that it’s not recommended to place key information in the middle of a series.
How to apply the Serial Position Effect in web design:
- If you offer services using a monthly subscription model, lead off with the most expensive package.
For example, if you’re offering subscriptions to access your software from US$10, US$25, and US$75 per month, place the column that outlines the inclusions of the US$75 per month package on the left side of the page because people view pages from left to right.
It might seem counter-intuitive because people tend to prefer cost-saving arrangements. However, by laying out what the subscriber gets with the most expensive package, he’ll be able to identify which inclusions are important to him.
A site user who’s on a tight budget will be able to see the value of spending a bit more to get additional services instead of signing up for a subscription that might be cheaper but doesn’t have the features you need. - Locate the most important pages of your website at the start and end of the navigation menu.
You can disregard the home page as the first position because it’s where users land when they click on your URL. Thus, the second position can be considered as the first position.
If you’re operating an e-commerce website, you can place “Products” in the second position on the menu bar. A business consultancy company might use the “About Us” page in the second position.
Generally, it’s a good idea to put the “Contact Us” page on the last position of the menu bar because if the user is impressed with your business, the next step for him is to contact you.
Create a strategic landing page by indicating the benefits of your business at the start or the upper left-hand section of the page.
Place your Call-to-Action or CTA; the action that you want your user to ultimately take, at the last section or lower right-hand section of the page.
4. Fitts’ Law
Psychologist Paul Fitts wanted to test his theory that a person’s decision to act upon an object is influenced by the ease with which he could reach the object. In his tests, “ease” referred to the time it took to get to the object.
Using Mathematics, Fitts was able to prove that the size and proximity of the object to the person would be a factor that influenced his decision. The larger the object and the closer it is to the person, the greater the chances are for that person to act on the object.
How to apply Fitts’ Law in web design:
- Design larger buttons. To clarify, under Fitts’ Law, bigger is not necessarily better. The relationship between usability and size isn’t a linear one. There is a point whereby the degree of usability declines as the object grows larger.
You want to have buttons that are large enough to give them emphasis on the web page and better visibility for the site user. The buttons must stand out but not to the point of intimidating or distracting the user.
Having visible buttons will help create more interest for your CTAs, RSS feed, “Add to Cart”, and social media icons. - When designing a menu bar, the title of the web page must have a larger font size than its inclusions. The placement of the inclusions must be within the proximity of the web page title.
This type of arrangement will keep the cursor of the mouse within proximity of the web page title or category and make it easier for the user to navigate your website. - Situate your contact forms near the Prime Pixel. The Prime Pixel is the reference point from where the user’s cursor is measured and located. For purposes of simplicity, web designers have identified the center of the page as the Prime Pixel.
When a site user clicks on your contact forms button, the form should appear on the left side of the page with the right side of the form in line with the center of the page.
The contact form should be large enough for the fields to be visible and readable. Likewise, the “Submit” button must be located at the center of the contact form and bordered by a larger box.
5. The Von Restorff Effect
In 1933, Psychologist Hedwig Von Restorff tested her theory that when people are presented with a series of items, the item with a distinguishable trait or characteristic will be the one that will be most remembered.
How to apply the Von Restorff Effect or “The Isolation Effect” to web design:
- Use a type of color that will make your CTA buttons stand out on the page. We recommend choosing a color that contrasts the background of the page. For example, a bright orange CTA button on white space.
In this regard, apply the principles of Color Psychology and choose a color that is associated with your business or industry.
For example, the color Yellow is associated with sales. You might want a yellow-colored button with an orange border for your “Add to Cart” CTA. - If your UVP is located on top of an image, you can highlight it simply by lightly shading or blurring the image. What’s important is that the image can still be discerned by the user and associated with your UVP.
- Use graphics or colors to highlight the item you want users to focus on first.
Going back to our example on footwear, let’s say you have in stock a few units of specialty running shoes that you want to sell as a bundle.
Add a yellow-colored flash graphic around it with the words “Best Deal 2-for-1” in red-colored font inside the flash. This will surely shift the focus of the user away from the rest of the items on the page.
6. Schwartz’s Paradox of Choice
In 2004, American Psychologist Barry Schwartz authored a book titled “The Paradox of Choice”.
According to Schwartz, presenting the consumer with more choices than necessary will cause anxiety; eventually, stress, and hinder his decision-making process.
The Paradox of Choice argues that the availability of choices has become problematic because many of the options provided to the consumer are mundane and non-sensical.
Imagine visiting an ice cream shop to satisfy your craving for “Rocky Road” and coming across flavors such as “Goat Cheese and Beet”, “Pickle and Blue Cheese”, and “Smoked Black Tea and Egg Custard”.
How to apply the Paradox of Choice to web design:
- Limit the number of CTA buttons on the page. Yes, there’s no clear-cut rule on the number of clickable buttons or icons on the page. But too many can make your page look disorganized and add clutter.
Categorize the CTA buttons by purpose. On the home page, you can have a CTA button that directs users to an e-portal, your social media icons, and your RSS feed. - Set a ceiling on the number of items that will appear on the screen by adding a “Load More” button.
- We mentioned this earlier, but adding a Product Filter will limit the number of products on the page only to those that meet the selection criteria of the user.
- Having multiple payment options will be welcomed by shoppers. But categorize them accordingly to make it easier and faster for shoppers to make their choice.
For example, under the “Pay Online” button, include the types of payment platforms that are accepted. If you have a COD option, state the required minimum purchase.
7. Occam’s Razor
Occam’s Razor or “Ockham’s Razor” is attributed to 14th-century Theologian and Philosopher William of Ockham who advised that when confronted with multiple options, “the simplest one is the best”.
How to apply Occam’s Razor to web design:
- Focus on presenting a clean and simple design. Remove unnecessary content, organize the sections of the page, and use white space to distinguish one area from another.
- Write content in a manner that can easily be understood by the reader. Avoid using technical jargon. Keep the sentences and paragraphs short.
- Organize processes using infographics or bullet points.
- Reduce the number of steps it takes to complete a task.
- Design contact forms that are easy to fill out. Limit the number of available fields to only key information.
8. The Zeigarnik Effect
Lithuanian Psychologist Bluma Zeigarnik postulated in 1927 that people tend to remember unfinished tasks faster than completed tasks.
According to Zeigarnik, completing a task causes mental tension that improves cognition and recollection of the processes that are needed to complete the activity.
If the task remains unfinished, the person will continue to think about completing it on multiple occasions. Once the task is completed, mental tension is alleviated and the person will have a hard time remembering the processes.
How to apply the Zeigarnik Effect to web design:
- Show the Process Flow on the web page as a guide to the site user on how many steps he needs to take to complete the task.
- Include a feature that allows the user to temporarily discontinue the task and save his current position in the process flow.
- If the user decides to abandon a transaction, have a warning appear on the screen as a pop-up asking the user if he’s sure of foregoing the activity.
- Inform the user who decides to leave the pages of the consequences of his decision. For example, his account will be deleted for good or he could be missing out on a wonderful opportunity.
Conclusion
You’re the expert on your profession. You know your business more than anyone else. You have standards on aesthetics and functionality.
When it comes to website design, none of that matters. For your website to succeed, what matters is that it appeals to the needs, capabilities, and sensibilities of your target audience.
Psychology is a discipline that seeks to uncover the roots of a person’s emotional and mental issues in order to find the best solutions.
Applied to web design, the principles of Psychology can help you uncover the needs and concerns of your customers and guide you in designing a website that best delivers the solutions to them.
If you’re thinking about setting up a website that delivers results or if you’re disappointed with the performance of your current one, give us a call. We’ll give you a free 30-minute consultation and discuss how we can help your business get to the next level.
And if you enjoyed this article, feel free to share it with your community.
