The Psychology of Web Design

When you know more about how people look at a website, what catches their attention, what appeals to their senses, and what spurs them into action, we can create more effective website designs. Psychology is a complicated and thorough subject on its own, but even incorporating some basic principles and common sense into your next web design project can make a big difference.

Main Purposes of Using Psychology in Web Design

• Build trust. With so many suspicious and scam websites out there, building trust on the web is crucial – and it’s not always that easy. By considering and using the following tips to your advantage, you can help establish trust with your visitors, improving the chances they will stay longer and buy something.
• Build brand. It’s likely that if you have a strong brand, there are certain emotions, messages, and impressions you would like to communicate to visitors. Psychology of web design can help you better deliver on those, strengthening your brand.
• Build purpose. Using the proper psychological factors in your web design can communicate to people what your website is about, further supporting your content and images. Considering how short of a time people spend on a website now, delivering your purpose right off the bat is very important. It also builds on the trust part.
• Build influence. By using psychological factors to your advantage, you can better influence people to read certain text, click on certain buttons, feel certain emotions, and of course, encourage certain ‘calls to action’ – whether that be to make a sale, submit a form, make a call, download an e-book, or just read certain content.
• Build feeling. Through effective use of psychological factors, we can inspire emotion triggers in people, whether this is trust, fear, value, trend-setting, guilt, belonging, etc.

How to Use Psychology in Web Design

The Sitemap

With every web design project, we make sure the sitemap (layout and hierarchy of pages) makes sense. Every page should have a unique focus. This is good for the user and search engines.

Colour Pyschology

We all know that certain colours can evoke certain emotions. Consider what sort of emotions you might like to encourage in people.

• Black is conservative, and goes well with just about any color except the very dark. It can be serious and conventional, but also mysterious, sexy, and sophisticated.
• Blue is calming. It can be strong and steadfast or light and friendly. It is often used to communicate ‘corporate’. Too much can be depressing.
• Brown is a natural, down-to-earth neutral colour. Although sometimes dull, it also represents steadfastness, simplicity, friendliness, dependability, and health.
• Grey is a neutral, balanced colour. It is cool and conservative, not evoking much emotion at all, and expectantly can also be viewed as ‘moody’.
• Green is nature, conservation, growth, health and environment. However, it can also be jealousy and envy.
• Orange is vibrant and shares similar properties to that of red and yellow. It represents energy and warmth, balancing the intensity of red and the cheeriness of yellow.
• Pink is soft, sweet, whimsical, and often associated with girls.
• Purple is spiritual, noble, creative, and royal.
• Red is intense, and has been known to stir up a variety of emotions ranging from Cupid (love/sex) to the Devil (war/violence).
• White purity, cleanliness and innocence, and can be paired with pretty well any colour.
• Yellow is positive that can denote happiness and joy, but also cowardice.

Typography Psychology

• Serif fonts (Times New Roman, Georgia, Bodoni, Garamond, Baskerville) are reliable, athoritative, respectable, and traditional.
• Sans serif fonts (Helvetica, Verdana, Calibri, Arial, Century Gothic) are universal, clean, modern, objective and stable.
• Slab serif fonts (Rockwell, Courier, etc) are bold, strong, modern and funky.
• Script fonts (Lucida, Pacifico, Brush Script, etc) are feminine, elegant, intriguing, friendly and creative.
• Modern fonts (Eurostyle, Politica, Matchbook, etc) are fashionable, stylish, intelligent, and sharp.

Allow Breathing Room

Nowadays when we talk to a client about what they would like to see in a web design, one of the most common words we hear is ‘clean’. This means the effective use of white space to avoid clutter and confusion. It allows people to feel more at ease, it makes content more readable, and it encourages people to navigate further and do more on the site.

Too Many Options Leads to No Choices

In marketing, this is referred to as ‘calls-to-action’, meaning, “what is it you want people to do?”. For any particular page, focus on only one or two calls-to-action. This will increase the chances of someone actually taking action.

Users Read in a ‘Z’-Shaped Format

Website users tend to scan/read a web page in a ‘Z’-shaped fashion, moving from left to right across the top, then moving diagonally down to the left and back to the right again. This is important when considering where to play those ‘calls-to-action’ as mentioned above!

Longer Widths of Text are Read Faster, While Shorter Widths are More Inviting

It sounds like a Catch 22, but we in fact read wider width blocks of text faster (because no interuptions through line breaks), and yet are more enticed to read shorter width blocks of text (because it looks shorter). So the strategy may be to include a bit of both.

Headlines Get More Attention Than Images

According to a study called Eyetrack III, big bold headlines catch more peoples’ attention than even a nice image!

Images Captions Read The Most Within Content

Within the actual content area of a web page, it is the image captions that are read the most.

There is of course, much more that’s involved when incorporating psychology into an effective web design, but here is a good basic starting point. After we develop a full understanding of a client’s needs, business goals, and target audiences, we then incorporate psychological factors into our web design process to help our client deliver on those goals.

Thanks for reading. If you liked this post, please “like” below!

Sources:

• http://usabilitynews.org/perception-of-fonts-perceived-personality-traits-and-uses/
• http://onextrapixel.com/2011/12/13/the-psychology-of-fonts/
• http://visual.ly/psychology-fonts
• http://www.uvsc.edu/disted/decourses/dgm/2740/IN/steinja/lessons/05/docs/eyetrack_iii.pdf
• http://www.amazon.com/Cashvertising-Secrets-Ad-Agency-Psychology-Anything/dp/1601630328
• http://www.webdesignerdepot.com/2010/05/the-psychology-of-web-design/
• http://inspiredm.com/5-psychology-studies-for-smarter-web-design/