Psychology and Design: 9 Freudian Web Design Tips

Deutsch: Phrenologie

Deutsch: Phrenologie (Photo credit: Wikipedia)

Each time a visitor arrives on your website for the first time, they make a judgement. Whether a subconscious one or not (it’s actually both), your audience still forms an opinion on the overall look and “feel” they get from your site. Given how fickle we surfers of cyberspace can be, your landing pages must be thoughtfully tweaked to make a great first impression.

If you’re a small business owner, it’s important that you understand some basic psychology (no PhD required). I’m not talking about becoming a shrink (I see…and how does that make you feel?), I’m simply talking about the psychology of web design. It’s imperative that you know how certain design elements can affect your audience and their decisions.
According to

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.

Your audience needs to be happy with your website, feeling a sense of trust, expertise, ease-of-use and even security.  In short, you must craft a user experience that communicates one message to your audience: “You’ve come to the right place.” A single wrong move and elevated bounce rates will surely follow.

The psychology of web design is fairly straightforward and easy to implement. You just need to know what you’re looking for. A recent (and great) article by  lists the basic psychological principles that can affect your audience and their decision making:

  • Building Trust
  • Familiarity and Recognizable Patterns
  • Branding Consistency
  • Psychological Triggers
  • Images to Reinforce Concepts
  • Color Psychology
  • Reading Patterns
  • Focus of Each Page
  • Breathing Room

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.

How do you establish trust quickly? It’s simple. Add visible and pronounced trust icons (associated badges, seals, icons, etc) on your homepage. Trust icons help address many of your consumers concerns.

If you have an e-commerce site, your consumers most likely want to make sure their transactions are secure. Adding your SSL providers seal will illustrate to your consumers that transactions on your site are legitimate and safe.You also want to establish trust through authority. This means adding trust icons from established associations or memberships that you belong to (BBB, Super Lawyers, National Academy of Sport Medicine, etc).

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.

Let’s say you have a e-commerce site for beach and surf ware. Your consumers are most likely going to have sub-conscience design expectations upon arrival of your site. They will most likely expect it to be bright and sunny – featuring “beachy” colors (greens, blues, tans, etc). If they arrive on your site and find it dark with a concrete background, they’re going to be confused. You want to keep colors and design simple and straightforward, just like your navigation. Your navigation should be easy to find and follow, no super ninja tricks required. It’s just going to confuse and lose your audience.

Branding Consistency

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.

This means your logo, letterhead, clothing,vehicles – what ever it is that you use to promote your business outside of your website. Your brand needs to be consistent and strong, both online and off. This is how your audience will recognize, familiarize and learn to trust and prefer you over your competition.

Psychological Triggers and Social Proof

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.

Testimonials are a large part of making your audience feel like they’ve come to the right place. If you have positive testimonials and reviews on your site (think of the power of Yelp), then you’re only reenforcing positive emotions. Make sure to feature the testimonials on your homepage and/or in your header if possible.

You can also set off emotional triggers in your content. State your consumers problem, aggravate the issue and then conclude with why your product is their knight and shinning armor. Be honest, direct and always end your content with a call to action.

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 is hard to mess up. Just simply choose images that support your content. Make sure that you are not confusing your audience with your image choice but making a strong and memorable impression.

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 the feelings most commonly associated with each one:

  • 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.
Based on the list above it makes sense to say that picking your color scheme carefully is important. You want to support your  message with the overall feeling of you site, not just your content and products.

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.

This means that you want to feature your most important information along this “Z” pattern on your site. Your main navigation is the top of the “Z” and again, should be direct and straightforward. The eye then scans back across the middle of your page, this is where you want to have eye catching content supported by strong images. Eye catching meaning: hierarchy in your font choice, bullet points and numbed lists.  The back across the bottom where you should have a call to action and/or contact form.

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.

Make each page have a purpose and make that purpose clear.

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.

Think Apple. They choice of white space is incredibly clean. This helps lead the eye down the page and makes the consumer feel like they can focus. Don’t cram your pages with too much information and choices. When a consumer is given too many choices, they often choose nothing at all.

Related Video: Color Psychology in Web Design

Related Articles