April 14th, 2018
A Beautiful Design – The Psychology Behind UX
You may or may not be aware of this, but we’re inside your head right now. Just by you being on our website. Don’t go! You’ll just end up on another website where someone else will be in your head.
That’s because there’s a lot more behind the design of a website than you think, and you’re actually pretty psychologically influenced by it. Don’t think you are? Puh-lease. Design psychology to users is like Tom Cruise to Katie Holmes – it’s weird and putting ideas in your head, even if you don’t really like it that much.

 

via GIPHY

There are a few ways that we Freudian Internet wizards like to influence you innocent users. And today you get to learn about them. So here goes.

Design hypnosis method #1: Colors

Shinyyyy, I’m so shinyyyy.” You’re welcome, moms and dads of 2-8 year-olds.

For those of you who aren’t blessed with waking up with that little gem of a song in your head every morning, my point is that people like shiny stuff, which is a metaphor for nice-looking things.

That’s deep.

One of the first and likely most well known things about design is that colors have a real effect on those who see them, subconsciously of course. Here are some examples:

red facebook logo
Image credit Eduhacker

Do you like that logo? Does it look warm and inviting to you? No, it doesn’t. Why? because of the colors. Let’s look at those colors in a little more depth:

  • Red – Red is typically used to evoke feelings of strength, stimulation, masculinity, and excitement. However, it can also imply themes of defiance, aggression, strain, and “fight-or-flight” mentality. So unless you’re starting a social media platform for 13th century Samurai, red probably isn’t a color you should be using for social media. Which is exactly why Facebook didn’t use it.
  • Black – When I think of black, I usually get feelings of warmth and calm, but that’s probably not normal. Professional marketers say that it implies sophistication, security, glamor, and efficiency, as well as menace, oppression, and coldness.

It’s pretty easy to see why these two colors aren’t used for the largest online kumbaya in the world. Let’s examine the real Facebook logo:

facebook logo

Ahhhh. I feel warm and fuzzy inside now. I feel like I can…trust this brand. Why’s that, you ask?

Blue and white. That’s why. Let’s examine further:

  • Blue – Blue tends to stand for communication, trust, calm, intelligence, and efficiency. Sure, the negative impressions are unfriendliness, aloofness, and coldness, but I tend to think that actually describes Facebook just as well as its positive counter-impressions. Seriously though, the blue is nice and it makes me happy.
  • White – White usually is used to communicate emotional safety, substance, security, and sophistication. Combined with the nice mellow blue Facebook chose, it definitely sets a friendly feel to it.

There are hundreds of examples I could give you, but ain’t nobody got time for that, so here’s a link to learn more.

Design hypnosis method #2: Typography

Fonts can be pretty powerful in making an impression on a user, too. Take this font for example:

This is Comic Sans. It’s the worst font in the history of fonts. It screams 90s high school English class powerpoint like no other.

Now that we’ve gotten that out of the way, let’s talk font categories and their influences. We’re only going to talk about two font categories, because they’re the two most widely used categories in web content.

Serif fonts

Serif fonts are fonts like Times New Roman, Georgia, and Cambria. They typically denote formality, trustworthiness, and business-centricity. You usually can find them in things like law websites or news sites, such as the New York Times.

Sans-serif fonts

Sans-serif fonts are typically used in digital copy, or in informal websites. It’s viewed as more fun, modern, and lighthearted. You can see a sans-serif font in action right here on our website! And, might we add, we’re pretty fun and lighthearted people. Except for Doug.

There’s more to the story of typeface, though.

Other things come into play with fontchology. For one thing, there’s this thing called a “scan path”. A scan path is what you should do before going for a walk in the woods.

There’s another, more relevant definition of scan path. It’s the pattern that our eyes follow naturally when we read.

When we read, we break up our sentences into scans and pauses. Most folks can scan about 7-9 words before they have to pause to process what they’ve just seen.

Now this is a tough thing to think of as being important, but according to this MIT study, it’s very important. The way that we structure our sentences and have great effect on how well our readers digest the content, and how they actually emotionally respond to it.

Design hypnosis method #3: Spacing

The layout of copy leads us right into our third and final hypnosis method – spacing.

Spacing is a concept that is rooted deep in white space psychology, in informal term, and the “spacing effect”, a known psychological phenomenon.

The spacing effect is essentially a finding that information that’s broken up by space is more easily digested and retained than grouped-together information (i.e. flash cards).

White space psychology is basically the theory that people find properly used whitespace to be far more appealing than improperly used white space. Here are some examples:

This is bad use of white space:

bad white space

This is good use of white space:

good white space

I think the images speak for themselves. I don’t think there’s a sane soul in the world that would choose the first website to visit over the second one.

We hope you learned something.

The moral of this award winning story is: design is important. If you want to design, you should learn about all this mind-trickery. If not, just know that any good website, or any kind of design, for that matter, is influencing your emotions, whether you realize it or not.