top of page

The Psychology Of Web Design - The Factors That Convey Information & Elicit Responses

Connect Hebrides Web Design - The Psychology Of Web Design

The web design process is a complex and often underestimated part of any web development project. Good web design is achieved through carefully-crafted page layouts, well-structured unique content, and an informed choice of colours and typefaces.

 

This logical process is often called the psychology of web design which incorporates a body of knowledge in understanding how different web design elements affect the mood, attitude and experience of a visitor while browsing a website.

 

Psychology in web design focuses on human behavior. An effective website is one that builds trust with its users and influences them to take a preferred course of action to generate profitable conversions.

 

A website is more than just a portal to a product or a service, its intent should be to engage the interest of the user in what the business has to offer, and it should tell a story about a brand. Like other marketing material, a website, with its colours and design principles, should align with the goals and values of the business it represents.

 

Website psychology subject matter is substantial and, in some cases, can appear to be quite technical, involving particular effects and techniques such as The Von Restorff Effect, The Zeigarnik Effect, and The Paradox of Choice. These are mainly used in pricing psychology.

 

There are also the Gestalt principles in web design that describe the way in which information is visually grouped and how this can be used in the design of website user interfaces (UI). According to Gestalt psychologists, people perceive different stimuli not as discreet elements but as an organised whole that carries a definite form. The form of an object lies in its whole, which is different from the sum of its parts.

 

There are six Gestalt web design principles : -

  • Similarity: The human eye tends to build a relationship between similar elements within a design. Similarity can be achieved using basic elements such as shapes, colours, and size.

Connect Hebrides Web Design - Gestalt Similarity
  • Continuation: The human eye follows the paths, lines, and curves of a design, and prefers to see a continuous flow of visual elements rather than separated objects.

Connect Hebrides Web Design - Gestalt Continuation
  • Closure: The human eye prefers to see complete shapes. If the visual elements are not complete, the user can perceive a complete shape by filling in missing visual information.

Connect Hebrides Web Design - Gestalt Closure
  • Proximity: Simple shapes arranged together can create a more complex image.

Connect Hebrides Web Design - Gestalt Proximity
  • Figure/Ground: The human eye isolates shapes from backgrounds.

Connect Hebrides Web Design - Gestalt Figure/Ground
  • Symmetry and Order: The design should be balanced and complete; otherwise, the user will spend time and effort trying to perceive an overall picture.

Connect Hebrides Web Design - Gestalt Symmetry & Order

​Gestalt principles are therefore pivotal in creating cohesion and structure in website design. They allow users to make positive connected associations as they browse a website.

The most common factors in general web design psychology, therefore, are structure and layout, colours, typography, with more specific techniques affecting pricing.

1. Structure & Content

Research has shown that first impressions of a website are 94% design related. It takes only 50 milliseconds (0.05 seconds) for a website's visitor to form an impression of a site, including its layout, colour, balance, legibility, and overall visual appeal.

 

Visual components such as structure, colours, spacing, symmetry, the amount of text and fonts used, the text legibility, and the use of images (particularly, the main image on the home page) all play a part in whether users have a favourable, or unfavourable, response to a given website. Many users will stop engaging with a website if the content or layout is unattractive. Visual first impressions can therefore make the difference between losing prospects forever, or turning them into long-standing repeat customers.

Web design can be very effective when coupled with the power and principles of psychology. Although there are countless psychological concepts that can be can used in web design, the following are some of the most common psychological factors that affect how visitors perceive a website :-

 

  • The Attractiveness Bias Theory - Psychologists surmise that humans have a cognitive bias to attractive attributes, and, as such, visitors will typically prefer a website with an attractive design. Their first impression of a website, whether it is good or bad, influences the likelihood of them visiting again.​

  • The Theory of Serial Positioning Effect - The location and position of certain information can affect how well it can be recalled and remembered. In terms of web design, placing key information in strategic locations can help visitors remember specific words and phrases. This approach to web design can make the website and its content more memorable.

  • The Depth of Processing Theory – This is a design theory in which it is believed that when information is analysed more deeply, the information is better understood and recalled than information that is analysed superficially. In web design this translates into communicating the core message of the offered product or service as early as possible on the page, and progressively adding more details further down the page. This is especially relevant in both home page, landing pageand sales funnel design.

Research has further shown that, on average, visitors spend approximately 6 seconds viewing a website's main navigation, its main image, and its written content; that is fewer than 20 seconds to impress and retain the site's visitors.

In summary, the basic elements of structure and content can make a significant difference to the performance of a website. The arrangement of information on a web page can have a substantial impact on whether or not the user takes action. They won’t act on what they don’t see, or what they can't see.

 

The content, therefore, should be clean, organised, easy-to-read, concise, and professional, and the structure and layout should involve contrast and balance with good spatial arrangement. Good website structure also facilitates easy navigation for both users and search engine crawlers which maximises the crucial SEO (search engine optimisation) ranking of a website in search engines.

 

Keeping the features of the page relevant and concise, without visual-overload, will help users to decide whether or not the website adequately addresses their needs.

 

2. Colours

 

The use of colour can affect a consumer’s emotional reaction to a website, it can elicit responses that drive results. Colour psychology in web design is a tool to help drive those responses by tapping into subconscious human emotions and generating optimal responses.

 

In colour psychology there are values, attitudes, and feelings associated with common colours, and even physiological reactions closely associated with certain colours.

Colours and emotions are closely linked. Research has shown that colour influences behaviour and decision-making, and reactions to colour are rooted in psychological effects, biological conditioning and cultural imprinting. Even gender, age, and geographical location can affect peoples' perceptions of colour and influence behaviour.

 

Designers can utilise colour to great effect in order to influence peoples' emotions as well as their actual behaviour. Colour has the single greatest effect on how people perceive designs, so it is essential to properly create colour palettes in a web design that will elicit a desirable response to an offered product or service.

 

It is therefore important to understand the psychological effects colours might have on an average consumer; the wrong use of colours can actually discourage engagement even though everything else about a website's design is optimised. If there is no perceived correlation between a brand/product/service and its colour, the message that is being portrayed may feel inconsistent, or even invoke negative connotations to a potential site visitor.

The Impact Of Colours On Emotions And Feelings

 

Colours can be powerful in evoking particular emotions and feelings. In Western culture the nine colours listed below can induce the following emotions and feelings :-

 

1. Black - Classical, Serious, Sophisticated.

  • Bold.

  • Classical.

  • Elegant.

  • Luxurious.

  • Mysterious.

  • Neutral.

  • Powerful.

  • Serious.

  • Simplicity.

  • Sophistication.

  • Stability.

Connect Hebrides Web Design - Psychology Colour Black Site

2. Blue - Reliable, Stable, Trustworthy.

  • Calm.

  • Confident.

  • Conservative.

  • Inviting.

  • Orderly.

  • Reliable.

  • Serene.

  • Spiritual.

  • Stable.

  • Trustworthy.

Connect Hebrides Web Design - Psychology Colour Blue Site

3. Green - Natural, Prosperous, Stable.

  • Balance.

  • Calm.

  • Growth.

  • Inspiring.

  • Natural.

  • Optimistic.

  • Prosperous.

  • Refreshing.

  • Relaxing.

  • Safe.

  • Secure.

  • Stable.

Connect Hebrides Web Design - Psychology Colour Green Site

4. Orange - Energetic, Enthusiastic, Inviting.

  • Creative.

  • Energetic.

  • Enthusiastic.

  • Exciting.

  • Inviting.

  • Warm.

  • Successful.

  • Vibrant.

  • Vitality.

Connect Hebrides Web Design - Psychology Colour Orange Site

5. Pink - Romance, Sensitivity, Tenderness.

  • Caring.

  • Emotional.

  • Feminine.

  • Innocent.

  • Romantic.

  • Sensitive.

  • Tender.

  • Youthful.

Connect Hebrides Web Design - Psychology Colour Pink Site

6. Purple - Creativity, Royalty, Wealth.

  • Creativity.

  • Elegance.

  • Luxury.

  • Mystery.

  • Power.

  • Royalty.

  • Wealth.

  • Wisdom.

Connect Hebrides Web Design - Psychology Colour Purple Site

7. Red - Determination, Energy, Power.

  • Courage.

  • Determination.

  • Durability.

  • Energy.

  • Excitement.

  • Immediacy.

  • Passion.

  • Power.

  • Vibrancy.

Connect Hebrides Web Design - Psychology Colour Red Site

8. White - Clean, Healthy, Peaceful.

  • Clean.

  • Healthy.

  • Innocent.

  • Luxurious.

  • Peaceful.

  • Serenity.

  • Simplicity.

  • Security.

  • Virtuous.

Connect Hebrides Web Design - Psychology Colour White Site

9. Yellow - Energetic, Fresh, Optimistic.

  • Cheerful.

  • Energetic.

  • Fresh.

  • Friendly.

  • Joyous.

  • Optimistic.

Connect Hebrides Web Design - Psychology Colour Yellow Site

As the above demonstrates, and as research confirms, choosing a colour that reflects the correct 'personality' can have a substantial impact on how a business or brand is perceived by the public, it plays a significant role in consumer behaviour.

Colour is one of the first things a target audience sees, and, as such, when designing a brand the following questions should be asked of the business :-

  • What are the values of the brand, and what colours should be associated with it?

  • What is the brand's 'personality', is there a colour that represents this well?

  • What colours do competitors use?

Studies show that people decide whether or not they like a brand or product in 90 seconds or less, and that 90% of that decision is based solely on colour, and 85% of people say that colour alone is more than half the reason they choose one product over another. Research also shows that a signature colour can increase brand recognition by 80%.

 

It is abundantly clear that colour can have a profound impact, not only in bringing a brand, product/service, or design to life, but also in a way to evoke certain feelings, and potentially to even be used as a behavioural tool. However, it can't be relied upon to do all of the messaging work in design; colour has to work together with other facets such as typography, font choices, imagery, iconography and copywriting.

3. Typography

 

Typography is the art of arranging letters and text in a way that makes the copy legible, clear, and visually appealing. It involves font style, appearance, and structure, which aims to elicit certain emotions and convey specific messages to the reader.

 

Good typography, which includes harmonious font pairing, will establish a strong visual hierarchy, provide a graphic balance to a website, and set the tone of a brand or product/service.

 

Typography should guide and inform users, optimise readability and accessibility, and ensure an excellent user experience (UX). It is not just an add-on to a visual design, it is part of the overall story.

 

Font psychology taps into the connection between the appearance of words and how the brain processes them, and how it retains and makes sensory associations with them. The weight, texture, and shape of a font combine to determine how the text is perceived and it plays a large part in telling the story behind its message.

Font psychology is powerful, the fonts that are chosen for a design can dramatically change how that design is viewed by an audience and the types of emotions it inspires. Different fonts impact thoughts, feelings, and behaviours, which influence emotions and, ultimately, decision making.

 

In understanding the different associations and emotional responses that font typography elicits, it allows designers, who are looking for a very specific reaction from an audience, to tailor the choice of correct fonts to control how the design is perceived and received by that audience.

Font Types And Their Meaning

 

There are six different font styles, each equipped with different psychological associations, emotional responses, and communication characteristics, as listed below :-

 

1. Serifs - Trustworthy Fonts

 

Some of the psychological associations, and emotional responses, to expect from using a Serif Font in designs include : -

 

  • Authoritative.

  • Classical.

  • Formal.

  • Intellectual.

  • Reliable.

  • Respectable.

  • Stable.

  • Traditional.

  • Trustworthy.

 

Serif Fonts are an excellent fit for more traditional brands and industries, including :-

 

  • Consultants.

  • Fashion brands.

  • Financial companies.

  • Insurance companies.

  • Law firms.

Connect Hebrides Web Design - Serif Fonts Examples

Examples of Brands that use Serif Fonts.

2. Slab Serifs - Powerful Fonts

 

Some of the psychological associations, and emotional responses, to expect from using a Slab Serif Font in designs

include : -

 

  • Athletic.

  • Confident.

  • Dependable.

  • Enduring.

  • Friendly.

  • Masculine.

  • Powerful.

  • Rugged.

  • Solid.

  • Strong.

 

Slab Serif Fonts are an excellent fit for practical, hands-on brands and industries that also have historical, dependable roots, including :-

 

  • Car manufacturers.

  • Electronics companies.

Connect Hebrides Web Design - Slab Serif Fonts Examples

Examples of Brands that use Slab Serif Fonts.

3. Sans Serifs - Sophisticated Fonts

 

Some of the psychological associations, and emotional responses, to expect from using a Sans Serif Font in designs include : -

 

  • Clean.

  • Clear.

  • Cutting-edge.

  • Efficient.

  • Friendly.

  • Informal.

  • Minimal.

  • Modern.

  • Open.

  • Progressive.

  • Sophisticated.

  • Stable.

  • Straightforward.

  • Tech-focused.

  • Trustworthy.

 

Sans Serif Fonts are an excellent fit for any brand and industry that wants their designs to be viewed as innovative, bold, and sophisticated, including :-

 

  • Car manufacturers.

  • Fashion brands.

  • Retailers.

  • Start-ups.

  • Tech companies.

Connect Hebrides Web Design - Sans Serif Fonts Examples

Examples of Brands that use Sans Serif Fonts.

​​4. Modern Sans Serifs - Contemporary Fonts

 

Some of the psychological associations, and emotional responses, to expect from using a Modern Sans Serif Font in designs include : -

 

  • Elegant.

  • Futuristic.

  • Sophisticated.

  • Stylish.

 

Modern Sans Serif Fonts are an excellent fit for any brand or industry that wants their designs to be viewed as innovative and design-focused, including :-

 

  • Entertainment brands.

  • Fashion brands.

  • Financial companies.

  • Retailers.

  • Sports brands.

  • Tech companies.

  • Travel companies.

Connect Hebrides Web Design - Modern Sans Serif Examples

Examples of Brands that use Modern Sans Serif Fonts.

5. Scripts & Handwritten - Versatile Fonts

 

Some of the psychological associations, and emotional responses, to expect from using a Script/Handwritten Font in designs include : -

 

  • Amusing.

  • Artistic.

  • Creative.

  • Elegant.

  • Formal.

  • Happy.

  • Human.

  • Impulsive.

  • Informal.

  • Personal.

  • Romantic.

  • Sophisticated.

  • Tailored.

  • Traditional.

  • Unconventional.

  • Youthful.

 

Script/Handwritten Fonts can be an excellent choice for a number of brands and industries that are seeking an elegant, whimsical, and/or personal touch with their designs, including :-

 

  • Children's-focused brands. 

  • Entertainment brands.

  • Fashion brands.

  • Food and Beverage brands.

  • Personal brands.

  • Restaurants.

  • Travel companies.

Connect Hebrides Web Design - Script & Handwritten Fonts Examples

Examples of Brands that use Script & Handwritten Fonts.

6. Display - Independent Fonts

 

Some of the psychological associations, and emotional responses, to expect from using a Display Font in designs

include : -

 

  • Adaptable.

  • Decorative.

  • Novel.

  • Trail-blazing.

  • Unique.

 

Display Fonts can be an excellent choice for large-format mediums like billboards. They can also be used with logotypes, headlines, or headings on websites, magazines, or book covers. Their use is very prevalent within the advertising industry. These fonts can transcend styles and can be a serif font, slab serif, sans serif, or script font.

Connect Hebrides Web Design - Display Fonts Examples

Examples of Brands that use Display Fonts.

​Because typography is a key element of most designs, the choice of font is one of the most important decisions a designer can make: it can make or break both the design and the user experience.

 

It is therefore vital that the designer understands the psychology of certain fonts over others. Choosing one that reflects and communicates the 'personality' and attributes of the brand or business is essential in eliciting the desired behavioural response of the viewer.

4. Pricing

 

Psychological pricing, a subset of pricing strategies, comprises tactics commonly used to impact customer behaviour.

 

Research has shown that certain ways of formatting prices can spark a subconscious response from a customer and encourage a purchase. Psychological pricing is part of this wider pricing strategy. It is a strategy in itself with numerous tactics that are designed to appeal to a customer’s emotional, rather than rational, response to prices.

 

Because they are inexpensive and easy to implement, many businesses across numerous industries use at least one psychological pricing tactic when creating or adjusting their pricing. 

 

There are several persuasive pricing techniques that you can used in web design to boost the sales conversion rate of a business, especially if used in an e-commerce website.  

 

1. The Rule Of Nine

 

Also known as 'charm pricing', this refers to the use of prices ending in the number nine because of 'left-digit bias', a phenomenon in which consumers’ perceptions and evaluations are disproportionately influenced by the left-most digit of the product price.

 

Since people read from left to right, they are more likely to register the first number and make an immediate conclusion as to whether the price is reasonable. So, to increase purchases of products and services, companies convert zero-ending numbers to nines.

2. Price Anchoring

Price anchoring is a strategy that plays on a buyer's inherent tendency to rely heavily on a piece of initial information to guide subsequent decisions. Anchoring establishes a base price as an anchor against which to compare a lower or higher-priced item.

 

In the context of pricing, many businesses will set a visible initial price for a product but make a point of showing that it is now being sold at a discount.

3. Price Differentiation

When consumers face two or more similar products that they perceive to be similarly priced, they are more likely not to purchase either product due to 'choice overload'; that is, the decision-making process becomes so complex that the decision is eventually deferred or dropped.

 

Consumers punish similarity, they are risk-averse and fear spending money on the wrong, less favourable, option. By introducing a small price increase, thus creating a price differential, then choice overload on the consumer is reduced or eliminated.

4. Bundling

Price bundling (product bundling or product-bundle pricing) is a strategy that combines two or more products to sell them at a lower price than if the same products were sold individually. The bundle pricing technique is popular in retail and e-commerce as it offers more value for the one price.

5. Decoy Pricing

The decoy pricing tactic is based on the 'decoy effect', by which individuals tend to have a specific change in preference between two options when also presented with a third option that is inferior in every way except one. The presence of the 'inferior' third option makes the first two seem more attractive.

 

The third option is inferior, making it asymetrically dominated by the other two options. This decoy is designed to make one of the other two options appear to be the better choice.

 

The goal is not to sell the decoy item, but to use decoy pricing to steer customers to buy the more profitable product.

6. Reframing The Value

In raising prices it is important to reframe the product in a way that gives a legitimate reason behind the price increase. It is about the bundle offering and how that is communicated, by either changing its features, or size, or some other aspect, in such a way that demonstrates the benefits to the customer, without specific reference to the increased price.

7. Changing Price Font Size 

When a consumer sees a price they instantly evaluate that price based on a range of subconscious triggers which determines whether the price is perceived to be high or low. This is the consumer's reference price which is the price that they would expect to pay for that item.

 

The aim of pricing psychology is to subconsciously influence the consumer into believing that the offered price is lower than their reference price, without actually lowering the item price. This can be achieved by displaying an item price with a small font.

 

The brain has a universal concept of size with an unconscious overlap of visual and numerical size. If the price is visually large it will be perceived as numerically large. This perception can be changed by displaying an item price in a smaller font size.

Research has found that consumers perceive sale prices to be a better value when the price is written in a small font rather than a large, bold typeface.

Summary - Pricing

It is estimated that 95% of purchasing decisions are based in the subconscious mind.

 

By using psychological pricing methods to tap into those subconscious behaviours, patterns, and biases, it is possble to streamline and enhance the purchasing experience of customers.

 

Almost every psychological pricing method is centred around the process of creating the impression of a 'good deal', and by leveraging these methods, a business can sell at price points that put customers at ease. These methods are also an effective way for companies to attract and retain that custom in a highly competitive marketplace.

Takeaway

 

Websites must establish trust and present themselves as credible in order to convert visitors into customers. In applying proven psychological techniques in web design the objective is to create a site that enables users to achieve their goals through design decisions that appeal to them. If this is fulfilled then a business should be able to increase conversions, expand revenue channels, and hold down churn rates, and gain a competitive advantage in their marketplace.

bottom of page