Why understanding psychology will make your website better

Website Design | Website Planner | DIY Web Design | Web Design | Web Design Ideas | Web Design Inspiration

Psychology plays a large part in successful web design. You may not be aware of it, but you’re being manipulated by many psychological theories and principles every time you visit a website. Don’t be alarmed! The word manipulation can freak a lot of people out, but there are “non-shitty” ways to manipulate or "persuade" your visitors.

 

In this post we’re going to get into those ways that you can get your baby mad scientist on when it comes to your website’s design.

 

INFUSE YOUR WEB DESIGN WITH PSYCHOLOGY

consistency is king. 

Consistency comes two fold when dealing with your website: consistency in structure and consistency in branding. 

Structure: 

How many websites do you think people visit per day? 5? 10? 30? (hopefully not thirty but hey!). What we don't actively notice is that we consciously expect the same types of elements on each website that we land on.

For example, there should be a contact page on every website I visit. If there isn't, I immediately go into paranoia: why don't they want people to contact them? Are they scamming people out of their money? Do they have shitty customer service? Oh I don't have time for this girl. I'm out. 

And just like that, trust is broken and a sale is lost. What seems like a simple break in structure leads to your biz leaving bad tastes in people's mouths. 

 

Branding

I'm going to assume that you're not one of those people that think branding is just a logo and some colors. If you don't know that, we can skip the scolding for now. 

Consistency in your branding not only helps you build awareness, but also establishes trust. People begin to recognize your logo, your pins on pinterest, your writing style, etc. This immediate recognition builds trust, authority, and intrigue.

The best ways to use your branding consistently is to use your elements, colors, logo and the like online and offline. Weave your brand identity and elements through your graphics, banners, instagram photos, content upgrades, landing pages, and so on. 

Use the same few colors throughout all of these things so the experience of your brand flows and is immediate every time someone interacts with it. 

 

 

You have to think like a visitor.

When designing your website and writing your content, you need to think about your ideal client every step of the way.

Start off by thinking about what step in their in lives that they're in that causes them to desire services or products like yours.

Let this guide how your content flows from page to page, and how your language flows. 

Think of your ideal client as a friend. One single person that you're writing for. Use language that comes naturally to you, and give as much of your personality as you want (even if you don't think you have much of a personality, A) you do and B)people want to see it)

In addition to your content, your website needs to be as easy as possible to find exactly what it is that people are looking for. 

STOP MAKING YOUR VISITORS DO ALL THE WORK. Don't make them search for simple things like your contact info, your blog posts, your services, etc. Some will get confused and frustrated causing them to leave. No bueno.

 

a good balance of show and tell

Great web design takes advantage of images to aid in telling a story. With this being said, don't slap some random graphic or image on your website without taking into account what that image is saying. 

Every single image on your website can either aid to the style, tone, and content of your website, or confuse the hell out of everyone. 

This means carefully shooting and editing your images the same, or choosing stock photos that convey the right message.

using-images-to-reinforce-concepts.jpg

For example, can you imagine if this image to the right was on my homepage?

I mean I love lemonade as much as the next girl (espeically with some whiskey in it) but I'm a web designer. 

Not a food blogger, food photographer, or the like. 

If my branding or brand name had to do with a lemon? Sure. This could work if used the right way. 

But on my homepage? Negative.

People are thinking I'm probably a bitter ol fool. 

 

Choice Overload

Funny story, there’s a salad bar near my apartment that I frequent. They separate each step of building a salad from beginning to end, and you move through these steps until your salad is complete. They have like A MILLION toppings and add ons to choose from.

So I took my boyfriend there for his first time a few weeks ago, and he was overwhelmed with all of the choices. He was in choice overload.

Meanwhile, I zipped through ordering my salad and I'm about to pay and leave. But guess where my boo was?

Still at step one! All he has in his bowl is lettuce. 

The moral of this random story?

Psychologically, people don’t want all of the options that they say they do. If you give people to many options, many people freeze up and can’t/won’t choose.

Think of the top three or four main tasks that you want users to do when they visit your homepage. This is 100% dependent on your business goals so make sure you’re clear about that before choosing your tasks.

Once you’ve chosen, make these tasks buttons or links in their own section. I prefer to do this right below the fold AKA it’s the first thing that you see when you scroll down the page.

You’ve got to lead people down the path that you want them too. This allows you to curate their movements through your website and content so they can have the best experience they can. I write more about choices (or as I like to call them, doorways) on your homepage in this post: Three reasons why people visit your homepage and leave.


take an eye break

You ever try to read a book that a shit load of works in small font all scrunched together? Uh no. No this girl. 

So your readers some eye love but carefully choosing fonts, font sizes, line heights, and scannability. 

The Royal Family

People take for granted the subtle psychology that can go into font pairings! Each font, no matter how boring you think it may look, does have it’s own personality and can evoke emotion in the reader.

Serif fonts are the OG’s of the typography world.

These are the fonts that have little feet on them. The most popular Serif font is probably Times New Roman (and if you’ve written papers for school, you know what that looks like for sure!)

They convey a message of professionalism and tradition.

Sans Serif fonts are the new kids. They’re modern, hip, and got rid of the feet that their predecessors have (Pictured to the right).

Take take it further, types of fonts can convey multiple messages.

For example, handwritten script fonts that are more flowy and spaced out (pictured to the right) can be seen as being soft, modern and feminine, while script fonts that have big swooshes and curves can be seen as more traditional.

When you find some fonts that you love, how you use them can make or break your readability among other things.

When choosing fonts, try to only choose 2.

The best practice when using more than one font is to use one of those fonts as your headings, and the other ones for your body text and links.

Now, you can pair your fonts in multiple ways, and don’t be afraid of using just one font for your entire website. This is a very simplistic option, that keeps everything clean and takes one more thing off your plate.

When setting the line height of your text, I usually add 10 to whatever my font size is and use that number. So if my font size is 18px, my line height is 28px.

 

SCanability

Visitors scan websites quickly and quite efficiently, and your website’s design should be aware of that. Words that are larger than others, are in different cases or are in different colors are going to grab attention from the beginning.

You have to make sure that you content, especially your blog pots, are scan friendly.

Take this post for example: I used one H1 at the top, H2 for my sub topics, and H3 for my sub-sub topics (or whatever they're called).

This allows for people to scan the article quickly to grab information they're looking for right away.

Sure this can mean that they don't spend much time on your blog posts since scanning/skimming takes way less time than actually reading, but you can combat this buy making your headings a little vague. 

I didn't say make your content vague, but make your headings interesting. Give them a taste of what the section is about without outright saying it. This creates intrigue and curiosity. But don't go overboard, or downright mislead. Not cool. I usually make my H2 headings this way, and leave my H1 and H3 headings straightforward.


the F pattern

When people are scanning your website, their eyes are scanning your website in an F pattern. The website bad asses at Nielson Norman Group did an eye tracking study like this: (I conducted eye tracking studies in college, so I nerded out all over this article)

  • 232 users had their eye movements tracked while visiting thousands of web pages. The researchers found that each reader consistently demonstrated a reading pattern that was shaped like an uppercase F. 
  • First, readers scanned horizontally across the top bar or upper content area. This is the top of the F. 
  • Second, users moved down the page until they then scanned horizontally to form the bottom bar of the F. 
  • Last, the users scanned down the left side of the text until they hit the bottom. 

 

What the hell does this mean for me? 

  1. Most users will not read your content word for word. It's the way of the world. Don't take it personal. 
  2. Start your headings, bullet points, and paragraphs with the most important words first. AKA start your paragraph off with the meat then flesh it out. Starting off this way puts your main points on the left side of the page, making it right in the line of sight for scanners.
  3. Make your first two paragraphs count. These will be scanned the heaviest. Especially the first one. 

The name of the game when it comes to designing a website that not only converts, but encourages people to return is making it easy as hell to find the exact information they need. Your font choices are going to be the foundation that you can convey hierarchy and importance through and your sitemap is your guide book to make sure your website flows through the actions you want your visitors to take.

 

Website Design | Website Planner | DIY Web Design | Web Design | Web Design Ideas | Web Design Inspiration