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

• Color Meanings
  About.com has an extensive guide to color meanings and symbolism.
• 10 Common and Effective Emotional Triggers
  A barebones overview of common triggers.
• Design Psychology
  A post from Andy Rutledge that gives a fantastic overview of the psychology of design.
• The Psychology of Web Design
  A basic overview of why design psychology is important.
• Psychology of Design
  An in-depth article from Website Magazine.

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?

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.