• Twitter
  • Facebook
  • LinkedIn
Contactez-nous +33 972 197 927
Ankaa Pmo®
  • Nos forces
  • Services & solutions
    • Processus métier et organisation
    • ERP et applications
    • Infrastructure et telecom
    • Sécurité de l’information et du système d’information
  • Blog
  • Témoignages
  • Contact
  • Espace freelance
  • Rechercher
  • Menu Menu

Psychology in Web Design: How to Use it Right

Actualités, Actualités

We all know that psychology is a powerful tool. When used correctly, it can influence and persuade people to take action. In the world of web design, this is extremely important.

If you want to create an effective website that converts visitors into customers, you need to leverage web design psychology. Keep reading to find out more.

What Is Web Design Psychology?

Your website design shouldn’t just make your website pretty. It should impress your visitors, hold their attention, and lead them to action.

That’s where web design psychology comes in. Each color, typeface, and space has a psychological significance, helping people connect to your website. These elements trigger subconscious reactions, which you must leverage to get that desired action.

It takes seconds for people to decide whether your website has all the choices and information you need. Web design psychology helps you, the designer, understand these subconscious processes and how to harness them.

The Benefits of Using Psychology in Web Design

The primary benefit of leveraging psychology in web design is talking to people in their language. It’s also talking in your language and finding common ground. That’s how you can build trust.

You want to use familiar colors and patterns, elements that make you stand out but also connect to people. You need visitors to understand what your website is about and where they can get more info quickly. Then, you have to push the right triggers. Comic Sans, for example, is a superb trigger, and we’ll discuss it below. Color, space, and lines also create a specific impact on how people perceive your website.

More importantly, all these elements set the tone for visitors’ engagement with your website.

How to Use Psychology in Web Design

Now you understand why knowing the basics of human psychology is essential in web design. Let’s see how you can leverage it!

1. Arrangement

Gestalt psychology shows how these elements below influence your visitors:

  • Similarity — people perceive similar objects as the same or at least part of the same concept.
  • Proximity — things close to each other are perceived as part of the same group.
  • Continuity — you want your visitor’s gaze to move naturally from one element to another.
  • Closure — an object that’s not entirely closed is still perceived as a whole because people’s brains will always fill in the gaps.
  • Figure and ground — people simplify images into the main objects they’re looking at (the figure) and the other elements (background).

The Target Jobs website is an excellent example here because:

  • Similar objects are grouped: notice how the first three images show happy young people in diverse professional environments. This placement suggests that Target can help anyone find their dream job.
  • These pictures are placed near specific keywords: the young people laughing are placed right next to the CTA “Explore opportunities.” Thus, Target Jobs is associated with your happiness and your future chances.
  • The colors, font, and spaces enable a smooth transition: users are directed to keep scrolling down, going from one section of the webpage to the next. Also, notice how each section has its own theme, centered on Target Jobs’ benefits.
  • The contrasting colors (orange, white, purple, etc.) leverage the figure-and-ground technique: therefore, focusing on one section makes the others become part of the background. The benefit here is that your attention isn’t split into a million pieces; you can focus on one thing at a time and understand what Target Jobs is trying to tell you.

2. Shapes

Each shape has a different subconscious association:

  • Triangles and squares represent professionalism, strength, and power.
  • Circles, ovals, and ellipses symbolize relationships, love, and unity.
  • Horizontal lines give a sensation of calm and community.
  • Vertical lines represent strength and action.

Just look at the AT&T website. Everything showcases community and tranquility, from the round logo to the horizontal lines delimiting each section.

But this website is anything but dull. Notice how each CTA button (“learn more,” “enroll now”) is followed by a tiny arrow. This shape uses a square angle split into two acute angles by the arrow’s body. As such, although small, the arrow suggests action and strength. Besides, the sections are arranged in squares, again a symbol of decision and power.

3. Space

No matter what industry your business is part of, space is essential in web design. Don’t clutter your web pages even if your natural impulse is squeezing in as much information as possible.

Use plenty of white space and try to have a minimalistic approach. Identify the unique selling point on each page and help people focus on that.

Check out the DOGUE webpage. White spaces separate each essential element, so each section is presented clearly. The first thing you notice is the title and the image with the happy dogs. Then, your gaze moves to the slogan on the right-hand side. After that, you notice the sections below that huge “Dogue.” The next part of the website highlights the company’s services (e.g., groom, dine, play, etc.). Notice how each service is represented through a quick, easy-to-get keyword. Besides, the images depict these keywords perfectly. Even better, these images have whitish-grey backgrounds that blend with the white spaces between them. So although the website is more crowded than others, you won’t perceive it as messy or unclear.

SendInBlue, an email marketing service, uses a similar white space approach to their design, and it works great because website visitors can find what they want with much more ease, and it generally looks much cleaner.

4. Color

The right colors can attract attention, maintain interest and even lead to action. Besides, color increases brand recognition by 80%.

Here’s the bare minimum you have to consider:

  • Your purpose — what do you want visitors to do when they land on your page? For example, if you want visitors to fill out a form, you might want to use a color that stands out and is easy to see. Although blue is the safest choice because it’s most liked, red elicits more action.
  • Your audience — cultures have different associations with color. For example, in the Western world, white represents purity. However, white is associated with death and mourning in Asia.
  • The mood you want to create — do you want your website to be professional? Relaxing and calming? Exciting and energetic?  How do you want your brand to be perceived?

The Moat front page is a fantastic example of color:

  • The purple and orange create a delicious contrast that points visitors in the right direction. Notice how each CTA is orange — an action-eliciting color.
  • Purple suggests calmness, bravery, and wisdom. It’s an excellent hue for your background because it’s so stabilizing.

Lending Bee Singapore uses color and white space to showcase user-generated content on its webpage:

Another excellent example of combining different colors to build trust is Identity Guard’s website, which provides identity theft protection services. As you can see on the website, they use a minimalistic white color combined with green, which is the official color at Trustpilot (one of the most popular review directories). This color selection helps to highlight the veracity of reviews along with the mention that these reviews are taken from Trustpilot.

5. Typefaces

A good web design is like a good outfit: it should be eye-catching but not too over the top.

The same is true of typefaces.

While a website should use various typefaces to add interest, it’s essential to use them in moderation. Too many different typefaces can be overwhelming and make your site look cluttered.

Instead, focus on using a few critical typefaces throughout your site, and use variations (like bold or italics) to add visual interest. For example, you might want to use a serif typeface for your headlines and a sans serif typeface for your body text.

Beyond simply looking good, fonts can also be used to guide users towards taking specific actions. For example, Sans-serif fonts like Arial or Helvetica are generally considered to be more readable online, making them a good choice for body text. On the other hand, scripts and decorative fonts are better suited for headlines or calls to action, as they help draw attention to essential elements on the page.

Marvel’s Captain Marvel page looks like something a 10-year-old would have designed in the 1990s. This web page is horrible from the glitters, gifs, crowded space, and the abominable Comic Sans typeface.

And that’s the point; avoiding plot-spoilers, Captain Marvel is linked to the 90s, and the retro look is part of that message. The moral of the webpage is that sometimes you have to be brave and break the rules if you want to convey a certain feeling to your audience. Marvel manages to do that with its simple design that acts as a time machine into the long-long-loooong past nineties.

Wrap Up

If you want to keep your website visitors’ attention, maintain interest and lead to action, it’s essential to use the design principles above. By leveraging space, typefaces, arrangement, shapes, and colors in your web design, you can create a website that is both visually appealing and effective at getting your message across.

However, these principles are just guidelines. You should stay brave and use your intuition. Remember that the point of web design is speaking to your audience using their language.

Source

The post Psychology in Web Design: How to Use it Right first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

20 avril 2022/par Service comm.
Mots-clés : a, Association, Be, benefits, brand recognition, Business, Color, comic, community, concept, connect, Content, contrast, Design, design principles, designer, Email, email marketing, engagement, first, focus, Fonts, get, green, Guide, happiness, happy, helvetica, http, HTTPS, identity theft, image, images, important, Influence, information, IT, job, language, leverage, logo, make, marketing, opportunities, Orange, patterns, people, post, power, Primary, principles, processes, protection, readable, Red, relationships, retro, review, reviews, rules, Services, site, speaking, Square, stand, theme, top, trust, trustpilot, typefaces, ux, web, web design, website, website design
Partager cet article
  • Partager sur Facebook
  • Partager sur Twitter
  • Share on WhatsApp
  • Partager sur LinkedIn
  • Partager par Mail
https://ankaa-pmo.com/wp-content/uploads/2022/04/psychology-in-web-design-how-to-use-it-right.jpg 1408 2560 Service comm. https://ankaa-pmo.com/wp-content/uploads/2017/04/Logo-Ankaa-engineering.png Service comm.2022-04-20 16:30:392022-04-20 16:30:39Psychology in Web Design: How to Use it Right
Vous aimerez peut-être aussi
Using Micro-Interactions to Drive UX
3 Essential Design Trends, May 2021
Mule 3 DataWeave(1.x) Script To Resolve Wildcard Dynamically
Oculus Go, le casque de VR autonome est dispo [MAJ]
Relational Data and Custom Codeless APIs App Blueprint
What Lies Beneath Hard Work: Code Churn
3 Key Metrics to Identify the Usability of Your Product
SAP.iO Foundry Paris lance son nouveau programme : Développement durable dans les industries de service

Catégories

  • Actualités (5 768)
  • Amoa et pilotage de projets (60)
  • Ankaa Pmo® Inside (32)
  • Bases de données (5)
  • BPM – Business Process Management (12)
  • Business (419)
  • Commercial et marketing (3)
  • Concours (3)
  • Décisionnel (2)
  • Développement applicatif (189)
  • Développement IoT (236)
  • Développement nearshore (1)
  • ERP & Applications (224)
  • Finances (1)
  • Gestion de production (2)
  • Humour (1)
  • Infrastructure & Telecom (277)
  • Innovation (254)
  • Messagerie et collaboratif (2)
  • Méthodes et organisation des process IT (1 848)
  • Non classé (71)
  • Plan de continuité d’activité (2)
  • Processus métier et organisation (39)
  • Recrutement (2)
  • Réseaux LAN, WAN, MAN (274)
  • Ressources Humaines (290)
  • SAP (249)
  • Sécurité de l'information et du SI (1 909)
  • Sécurité de l’information (1 897)
  • Sécurité de l’information (1)
  • Sécurité du système d’information (1 885)
  • Sécurité du système d’information (1)
  • Séminaire, Salons, Publicité (8)
  • SEO (12)
  • Supply-Chain (14)
  • Système (5)
  • Témoignages (13)
  • Urbanisation du SI (9)
  • Virtualisation & stockage (18)

Notre différence

Notre différence : Redonner du sens à la performance

– En centrant les compétences des managers d’activité internes Ankaa PMO®, chargés de votre suivi dès les premiers contacts commerciaux, sur l’organisation, le pilotage et le suivi Qualité de vos projets.
– En restant objectifs dans le conseil car détachés de tout partenariat constructeur et/ou éditeur.
– En sollicitant de façon flexible et dynamique notre équipe d’experts métiers, fonctionnels ou techniques constituée exclusivement de consultants externes accrédités, gage de vous fournir le meilleur niveau d’expertise sur les projets.
– En apportant une organisation éprouvée sur des projets stratégiques de PME-PMI ou les attentes des grands comptes

Notre organisation est ainsi totalement établie sur l’écoute de vos besoins et l’élaboration de réponse les plus adaptées à vos challenges pour vous permettre d’apporter une réelle valeur ajoutée à vos processus et projets d’entreprise.

Nous contacter

ALPES
HAUTS DE FRANCE
RHONE
SUISSE

SIEGE

: +33 972 197 927
: +33 374 094 994
: +33 428 290 515
: +41 22 519 61 99

: +33 972 197 927


Ankaa logo Blanc
  • Services
  • Contact
  • Témoignages
  • A propos
  • Missions
  • Blog

 

  • English
© 2021 | Ankaa PMO
  • Mentions légales
What Is Test Monitoring and Test Control? AA22-110A: Russian State-Sponsored and Criminal Cyber Threats to Critical I...
Faire défiler vers le haut

En continuant à naviguer sur le site, vous acceptez que nous utilisions quelques cookies.

OKPlus d'info

Paramètres des cookies et politique de confidentialité



Comment nous utilisons les cookies

Nous utilisons les cookies pour nous faire savoir quand vous visitez nos sites Web, comment vous interagissez avec nous, pour enrichir votre expérience utilisateur et pour personnaliser votre relation avec notre site Web.

Cliquez sur les différents titres de catégories pour en savoir plus. Vous pouvez également modifier certaines de vos préférences. Notez que le blocage de certains types de cookies peut avoir un impact sur votre expérience sur nos sites Web et les services que nous sommes en mesure d'offrir.

Cookies essentiels sur ce site

These cookies are strictly necessary to provide you with services available through our website and to use some of its features.

Because these cookies are strictly necessary to deliver the website, you cannot refuse them without impacting how our site functions. You can block or delete them by changing your browser settings and force blocking all cookies on this website.

Cookies Google Analytics

Ces cookies recueillent des renseignements qui sont utilisés sous forme agrégée pour nous aider à comprendre comment notre site Web est utilisé ou l'efficacité de nos campagnes de marketing, ou pour nous aider à personnaliser notre site Web et notre application pour vous afin d'améliorer votre expérience.

Si vous ne voulez pas que nous suivions votre visite sur notre site, vous pouvez désactiver le suivi dans votre navigateur ici :

Autres services

Nous utilisons également différents services externes comme Google Webfonts, Google Maps et les fournisseurs externes de vidéo. Comme ces fournisseurs peuvent collecter des données personnelles comme votre adresse IP, nous vous permettons de les bloquer ici. Veuillez noter que cela pourrait réduire considérablement la fonctionnalité et l'apparence de notre site. Les changements prendront effet une fois que vous aurez rechargé la page.

.

Paramètres de Google Webfont Settings :

Google Map :

Vimeo et Youtube :

Politique de confidentialité

Vous pouvez lire nos cookies et nos paramètres de confidentialité en détail sur la page suivante

Mentions légales.

Accept settingsHide notification only