The Psychology of Web Design

Designers often don’t take the time they should to learn about how basic psychological principles can effect the experience their visitors have on the sites they build.

Psychological principles are either looked upon as unnecessary, or too complicated. But the truth is that they’re neither.

There aren’t that many concepts associated with basic design psychology, and most are relatively straight-forward and easy to learn.

They’re also mainly easy to implement, though some take a bit more care and planning than others.

Read on to learn more and please leave your feedback and comments at the end of this post.

 

The Purpose of Psychology-Based Design

Considering psychology in your design process can have a few positive effects on your end result. If you take the time to think about what your visitors want and how they want to get it, then you’re already on the right track to creating a site that will tap into the psychological drives of your target audience.

By considering visitor psychology, you’ll likely end up with happier visitors who are more likely to perform the actions you want them to, whether that’s getting in touch with you, buying your product, or referring their friends.

This is the main reason for taking psychology into account in your designs. You want to make it more likely your visitors will do what you want.

 

Building Trust

In order for your visitors to do what you want them to do, they have to trust you. Trust doesn’t come easily, especially in this age of scams, schemes, and unsavory characters almost everywhere we look online.

To someone who knows little of how the Internet really works, they’re suspicious of anyone who asks them for any personal information, no matter how necessary it is or how highly-recommended the website is.

As designers, we often overlook this as we’re so used to conducting business online. But for our clients, and for their clients, the Internet can still be a big, scary black hole their information goes into.

With this in mind, you can use design psychology to make your website look more trust-worthy to the average visitor. Creating a website that puts visitors at ease means they’re more likely to sign up for an account, buy a product, or otherwise do business with you. This can be done through a combination of design and the language used on the site.

 

Familiarity and Recognizable Patterns

When someone lands on a page within a website, there are certain things they expect to see right away, pretty much regardless of the kind of site they’re on.

If they don’t see these things, they often feel as if they’ve ended up in some strange wasteland that doesn’t make sense to them (and therefore, isn’t trustworthy). The two big things people expect are the purpose of the site (which could be anything from providing information on a certain topic to selling a product to looking pretty) and some form of navigation.

While tag lines can help with discerning the purpose, the design can complement and reinforce that message. Let’s say, for example, that you’re designing an environmental blog. If your design is all dark and brooding and has a city skyline at sunset in the header, it’s not going to give us even the slightest hint about what the site’s purpose is.

On the other hand, if it’s a clean, modern-looking site with lots of green and natural-looking accents, that’s going to reinforce the fact that this is an environmental blog.

Beyond the elements everyone expects to find on every website, there are additional things people may expect on certain kinds of sites or within certain industries. People expect blog posts on the front page of a blog. They expect products on the front page of an ecommerce site. They expect a search function on any site that’s more than a few pages deep. And in most cases, they expect some kind of “about” information and a contact page.

 

Branding Consistency

In addition to the general elements most visitors expect to see on a site, there are often things visitors may associate with your company in particular. While this might not be a concern for a new business, or a very small business, it is a concern for many others.

Think about the colors you use in your offline promotional materials. Those colors should be incorporated into your website in some way, even if it’s just in the header image or as accent colors.

The same goes for your logo. If you use a logo in your printed marketing materials, you need to include it on your website, too. These are very basic things, but it’s surprising how many businesses overlook maintaining consistency between their online and offline marketing efforts.

 

Psychological Triggers

Psychological and emotional triggers are a valuable tool in influencing visitors to take the actions you want them to take. Triggers include things like guilt and fear, but also a sense of belonging and appealing to people’s values.

Incorporating emotional triggers into your designs is most commonly done through the language on the site itself, with graphic elements serving as a support system for those triggers. Use image and graphics that reinforce the trigger being used.

 

Images to Reinforce Concepts

The images you use on your sites can either help or confuse visitors. A well-chosen image can put your visitor at ease, making your intent clear. A poorly-chosen one can leave them scratching their heads and feeling like they’re falling into that black hole again.

This photo of a hippo at Disney World has absolutely nothing to do with this post and only serves to confuse things.

Abstract images can sometimes work well, but be wary of using them if their meaning is vital. Sometimes an abstract image will have different meanings to different people, or the meaning will be missed altogether.

 

Color Psychology

The psychology of color is one of the more complex subjects in design psychology, and not something we’ll go in depth on here. But the colors you use can have a heavy impact on how your visitors perceive your site. Make sure the colors you’ve selected reinforce your message and the image you want to portray.

Below is a basic list of colors and their meanings. Of course, the combinations of colors you use along with their exact shade, hue, or tone will also have an impact on their meaning.

  • Red
    Fiery and passionate, can represent both love and anger.
  • Orange
    Shares attributes of both red and yellow. Associated with energy and warmth. It’s calmer than red and more cheerful.
  • Yellow
    A warm, happy color. It can represent either joy or cowardice.
  • Green
    Signifies nature, growth, and renewal. Along the same lines, green can sometimes represent inexperience. On the flip side, green is sometimes associated with envy or jealousy.
  • Blue
    Calming and cool, but too much can be depressing. Often associated with corporate images.
  • Purple/Violet
    Long associated with royalty and wealth. It’s also a spiritual color, and is thought to be creative.
  • Black
    A bit of a chameleon, it can be conservative or edgy, traditional or modern. It can be mysterious and sexy or conventional and safe, depending on how it’s used.
  • White
    Associated with purity and innocence. It goes well with any other color.
  • Gray
    Neutral and balanced. Gray is conservative and sophisticated, but can be seen as moody, too.
  • Brown
    A wholesome and down-to-earth color that denotes stability and reliability.

 

Reading Patterns

People tend to read in a “Z” pattern on a website, starting across the top from the left and ending in the bottom right corner of their screen.

As a designer, you should strive to place the most important content within this reading pattern area. This is why many sites include the logo in the upper left-hand corner of the header.

Incorporating non-essential information within this reading zone means your visitors may leave the site before they find what they’re looking for, as they may think it isn’t present on your site.

 

Focus of Each Page

Every page on your site should have a focus. There should be a purpose to every page, whether that purpose is to showcase a product, tell about your company, or serve up recent news.

Your design needs to put the emphasis on the focal element of every page. The focus of each page should also be immediately apparent, so that visitors know what they’re doing there. This can be accomplished through cues in the navigation or through a header, in addition to the page’s content.

One of the biggest marks of an amateur site is trying to put too much information on each page. Don’t be afraid of white space on your pages, and don’t be afraid of having a defined purpose for each and every page on your site.

 

Breathing Room

That brings us to the concept of white space and breathing room. If a visitor arrives on a cluttered page filled with every possible thing imaginable, they’re going to feel overwhelmed and claustrophobic.

It’s likely the page will feel haphazzard and chaotic. This leaves visitors feeling like they don’t know where to start, which means they might just skip your site entirely and move on to one where they have some breathing room.

Allow the negative space on your site to direct your visitors to the areas you want them to focus on. By combining empty space and properly styled and proportioned elements, you can encourage your visitors to look at a certain thing and take a desired action.

 

Steps for Incorporating Design Psychology

Now that you’re familiar with what design psychology is and what it means to web design, you may be wondering how, exactly, you should go about incorporating it into your own design process. Here are a few techniques you can use:

Figure Out Who Your Visitors Are
Knowing who your visitors are is a hugely important first step in designing a site that will appeal to them. If your visitors are tech-savvy Internet veterans they’re going to have a different set of priorities than someone who only goes online to look at photos of their grand-kids. Figure out who your target user is and then figure out which emotional triggers will work for them.

Interview Your Users
If you’re not sure what your users or visitors want, try interviewing some of them. Find current or former customers and see if they’d be willing to answer a few questions about your site. Then create meaningful questions based on your own site’s specific goals. Most importantly, act on the advice they give you. Too often, companies do interviews or surveys but never make changes based on what they’re told.

Create a Sitemap for Your Site
You need to create a map of every page of your site so that you can ensure each page only has one focus. Make a list of everything that needs to be on your site, first, and then map out which page each item should go on (ideally, it should be one page per item unless things are very, very closely related).

Assemble Your Branding Elements
Make a list or create a file of the common elements used to represent your brand. Most likely, this would include a logo, a color scheme, and possibly a particular typeface. Then figure out where to incorporate these into your site design.

Do A/B Testing
Even if you do it on a limited basis, it’s important to figure out which site elements work best. If you’re unsure of what your visitors would be more comfortable with on a certain page, test it with two versions to see which one gets better results.

Design psychology is something every designer should strive to learn more about and to incorporate into their workflow. It can be the single biggest factor in how effective your designs are, and how happy your clients are as a result. It doesn’t take much time and isn’t particularly difficult, so there’s really no excuse not to take at least some of these principles and put them in practice.

 

More Resources


Written exclusively for WDD by Cameron Chapman

Do you keep psychological principles in mind when doing your design work? Which ones are the most used ones in your own work and why?

  • http://www.kayemedia.net Kaye Media

    Very very good article, I enjoyed reading this!

  • http://rachel.learnless.info/ Rachel

    I totally love it. I go to try these for my works. Thanks For Sharing

  • http://stanleydiaz.me Stanley Diaz

    Great article. Psychology in Web Design can be tricky thing, but this was a nice overview of the subject.

    I would totally agree with you on the proper use of negative space. Not enough and everything on your site looks cluttered. Too much and the site looks empty or unfinished.

    • http://www.design977.com Pusparaj

      Yes agree.

  • http://ds.laroouse.com esranull

    very good article thanks a lot

  • http://zdesignstudios.com JP

    I guess I have something else to think about on my next website. Thanks guys awesome info.

  • http://www.starcontentwriters.com/about Amber Khan

    I really liked your blog entry – especially the part about colors and what they convey in terms of corporate branding. You totally get a sense of a company’s mood and energy by studying the colors they select for branding their website.

  • http://www.twitter.com/snarphblat Hillary

    Even though I took classes on website psychology in college, this was a really nice refresher. Thanks!

  • Brian

    Interesting article but you do not refer to three important findings of experimental aesthetics:

    (i) Although two individuals may differ greatly in their evaluation of the artistic merit of a set of works of art, the artistic rankings of a large sample of people will tend towards a standard ranking. In other words, the old adage that there is no arguing about (artistic) taste is incorrect: people do, on average, agree about the relative artistic merit of a work of art. (Hans Eysenck, PhD thesis, University College London.)

    (ii) People derive aesthetic satisfaction from an optimum combination of Order and Complexity – more specifically, aesthetic satisfaction varies directly with the product of Order and Complexity. (Eysenck, ibid.)

    (iii) People also derive pleasure from an optimum amount of novelty in a work of art; this novelty helps ward off habituation to the stimulus (Colin Martindale, “The Clockwork Muse.”)

    Yes, I know that we are talking about websites here – not, strictly speaking, works of art. But IMO every serious web designer should be familiar with the work of Eysenck and Martindale. Unfortunately, in my experience designers tend to be hostile to any attempts to measure the value of their work by means of experiment-based metrics. So much for “usability”!

  • http://www.jordanwalker.net Jordan Walker

    Being married to a behavior analysis helps!

  • http://vandriessche-interieur.be/ interieur

    The theory about color psychology is a subject to discussion. What’s your source for this?

    • http://www.creativeindividual.co.uk Laura

      Agreed that colours have different meanings depending on your culture and upbringing. But I think Cameron was referring to the standard Western meanings – which is also probably the main cultural background of the people who read this blog.

      However I do agree that mentioning briefly other cultures and their colour meanings would have been helpful too. For example – what are the main mourning colours in Asia?

      Also worth noting is the point of combinations of colours and how this can change a colour’s meaning. For example red, white and blue would be seen as being very patriotic for Americans and British citizens. However being from Northern Ireland and the upbringing I’ve had, I feel slightly off-put by the colour combination, along with the colour combinations of green, white and yellow/gold/orange.

      • http://bitstrategist.wordpress.com Ryan McCormack

        Glad to see someone else noting the importance of culture. I would probably take things a step further and say cultural perception of design doesn’t stop at color. For example, reading behavior is different depending on language and script. Localization beyond basic language translation presents some serious design challenges, and psychology adds yet another dimension.

      • http://www.creativeindividual.co.uk Laura

        Good point. A very basic example of different reading behaviours are languages that read from left to right, and those that read from right to left. And I’m sure there’s quite a bit more to it than that, as you have touched on.

        Also, with regards to imagery. I remember reading something a little while ago about recognising emotions and how different cultures do this. Generally speaking, Western people took more stock from the mouth while Eastern people relied on the eyes. This in itself shows how two different cultures could interpret two different emotions from one image if the message isn’t very clear.

        I think the differences in cultures are great. Because as much as we are all becoming part of a global community, we are all still so very different. And I for one find that very refreshing and inspiring.

  • http://www.classesandcareers.com/ Teacher Teacher

    This is good advice. So much of it seems basic and common sense, but each of us may be missing in an area or 2 that will help our visitors and clients feel more at home when they land on our pages. One way to target the right design, pattern, colors and so forth is to have your friends, family and willing colleagues fill out a survey about your website. If you ask the right questions, you could get some great feedback that will help you improve your site and hopefully improve your business as well.

  • http://sideradesign.com paul

    “…basic psychological principles can Affect the experience their visitors “

  • http://www.hoztdesigns.co.cc sbuster

    exelent post

  • http://www.BestWicklessCandles.com Robyn Scentsy

    Great article. Not many web designers want to discuss psychology. But, if you can understand the psychology of the sale, you are already on your way to success.

  • http://www.nissiinfotech.com Web Design

    Wow, i really loved this article.

  • http://www.leewaimedia.com/ idaho falls web design

    If you ask the right questions, you could get some great feedback that will help you improve your site and hopefully improve your business as well.

  • http://thebooksofmylife.blogspot.com/ Kah Woei

    Thanks for the advice. Enjoyable and helpful reading.

  • http://www.webdesignnet.co.uk Joomla Webdesigner

    :) did you see the Kamasutra book that is displayed among other books (there are even 2 of them) :)

    yeah, but +1 for the topic.

    hmm, didn’t know that people tend to read in a “Z” pattern (thanx for info)

    p.s. do not change the picture of books (makes us think…)

  • http://www.creativeindividual.co.uk Laura

    A great introduction to Psychology in Web Design Cameron, wonderfully written as always. I’m sure you could have went on and on with more information on this. It’ll be interesting to see the re-hashed versions of this post appear over the net in the next few days.

    I agree that being aware of the propose of your site and aware of your target audience is key to the success of any website. Some great points raised about creating trust, familiarity and pattern in the site. And also about adapting the way the site behaves, depending on the experience levels of your users.

    As with so many things in life, it is all so obvious once it is spelt out to you. Many thanks.

  • http://www.webirezumi.com Stefan

    Awsome article!
    Hopefully people will start to realise that great design requires lots of thought and is deeper than just creating somthing nice and interesting

  • http://www.freedesignertemplates.com Chinku

    Came to know about an crucial part of web part of web designing… really thanks for sharing…

  • http://www.balihoo.com Drew

    I see I’m not the first to comment on it, but did anybody else notice the twin copies of the Kama Sutra on the bookshelf? Psychology, indeed! :)

    An excellent article, and an enjoyable read. Thanks!

  • http://www.edvisors.com/ Edvisors

    I love the puppet!

  • justSeth

    Good article but, is this not user centric design or usability science? That is understanding the target (user centric), undergoing a research/discovery phase of the web development life-cycle.
    Nonetheless, the principals are rather consistant.

  • http://web.pixelcrayons.com Steve

    Wow! amazing article indeed. I really liked the color psychology and steps to implement psychology. It gives a complete insight into the web designing. Taking audience in mind is very important while designing a website. It is necessary to understand their reading patterns, focus areas and similarly we will make up each area. Anyways! Thanks for sharing.

  • http://www.devolved.co.uk devolved

    Good covering of the basics but people read in an “F” pattern, not “Z” … few peeks at heatmaps illustrates this

    http://www.useit.com/alertbox/reading_pattern.html

  • http://www.allaboutcabo.com Cara

    Great post! I majored in Psych and i love seeing it applied to web design.

  • http://www.evanjacobs.net/ Evan J

    Great read. I use the “Z” principle like every day… eye path is so important and many clients just don’t get it.

  • Emil

    Seems like a lot of people are suffering of brain hemorrhaging of the blah blah blah or don’t I sound smart. This stuff is so basic, and the color psyhic is really basic and way too abbreviated to be of any real value.

  • Mr. Pete

    Great article. This is why I always try to incorporate human skulls in all my designs.

  • http://altafk.com altaf

    nice work and lists!

  • http://p163.sg Angelee

    I think this is the third time I’ve read about Psychology behind web development. It’s two different fields but the works and application of Psychology extends in every field where human behavior exist. Brilliant web designers are projecting themselves as the users. Its a psychological mechanism to place their minds in the minds of their users so as to relay communication effectively.

  • http://www.tecpro.com.tr tecpro

    thanks for the info..It’s really great!

  • http://www.aavsa.com avsa

    yes you are totally agree. Web design always linked with psychology.thank for your nice article.

  • RoaldA

    Awsome!

  • http://mawebsitedesign.com ma website design

    I know that we are talking about websites here – not, strictly speaking, works of art. But IMO every serious web designer should be familiar with the work of Eysenck and Martindale. Unfortunately, in my experience designers tend to be hostile to any attempts to measure the value of their work by means of experiment-based metrics.

  • http://www.revangel.es/blog Revangel

    Great article!
    Thank you so much!
    I’d love to read more on this topic.
    Regards.

  • http://www.moneyin15minutes.co.uk John Burnside

    This is an excellent and detailed post. I am very interested on the psychology of internet browsing and i wrote my first article on it a few weeks ago specifically on the psychology of internet adverts. http://ezinearticles.com/?The-Psychology-of-Internet-Adverts&id=4350748 check it out.

  • http://www.quitthewick.com Kristy

    Thanks for the great information. I am also curious about how to use color combinations. Also, I read recently that cool colors are relaxing and warm colors drive people to action, so I figured that meant all my call to action buttons should be red. I definitely want to read more on this topic.

  • Dana-Maria

    Great article! I feel the psychology should be at the grounds of webdesign. As long we expect humans to be the visitors and users of those websites, how they think is probably the most important thing to consider when you are bulding the website.

  • http://www.scentmesilly.com Natalie

    Very interesting!! Although, I didn’t even think about psychology playing a role when I was designing my site, it makes perfect sense that it would play an important role in how others respond to your site. From your list of colors and their meanings, it seems purple was a good color choice. :)

  • http://www.salesplusplus.com Andy @ sales++ online sales development

    Interesting article, very good post.

    I’ve also discussed the use of color in an article here:

    http://www.salesplusplus.com/color-affect-buying-sales/

    Thanks

  • jake marvin alim

    I agree and thanks for this article, this can help a lot for beginners like me.