Just Creative

I’m Jacob Cass, the founder of JUST™ Creative. I’m a multi-disciplinary graphic designer, working with clients all around the world. My specialty is logo & brand identity design. JUST™ Get in touch.

Love


7 Psychology Principles Web Designers Must Know

Posted on

This article was contributed by John Stevens.

Do you know why buttons should be of a certain size and important links should be placed at the beginning of a list? Or why you should group similar elements together?

As a designer, you might do all these things intuitively or because they are established “best practices”.

But the truth is that what we take as convention in design actually has its roots in psychology.

Mike Wallagher did a wonderful job covering some of these theories earlier this year on Just Creative.

In this post, I want to dig a bit deeper and uncover even more psychological theories and how you can use them to influence your users.

Psychology Web Design

1. Create better CTAs with Fitt’s Law

When moving between two points, we are inclined to take the path of least resistance. This is an observed phenomena known as the “desire path”.

A desire path represents the shortest or most easily navigable path between two points. If you’ve ever seen a shorter foot-marked path branching off from a road, you’ve seen a desire path. People behave similarly on your website.

Instead of following the cursor path you designed for, they will choose the shortest possible path between their current mouse location and an object (such as a CTA).

If your CTA is too small or located far from a user’s cursor, your users might resist moving their cursors, thus impacting your CTR.

This, in essence, is the Fitt’s Law. The Fitt’s Law states that the time required to rapidly move to a target is a function of the ratio between the distance to the target and the width of the target.

In other words, a larger target that is closer to your current location is likely to get more attention (and clicks).

How to use ‘Fitt’s Law’ in your design

Consider the fact that most users who land on your site usually have a default cursor position. More often than not, this is around the browser address bar since that’s where users type-in your site URL.

Any CTA placed far away from the address bar will go against Fitt’s Law – the distance to reach it is too great and creates resistance.

Thus, make sure to place your CTAs close to the address bar above the fold.

CTA right and wrong

Fitt’s Law also states that larger buttons get more clicks.

However, understand that this is relationship isn’t linear. As SmashingMagazine points out – beyond a certain size, larger CTAs don’t really increase CTRs.

Fitt's Law

Thus, keep your CTAs large, but not so large that they don’t have any meaningful effects on CTRs.

For example, consider how HubSpot uses multiple CTAs (“Contact Us” and “Get Started”) above the fold.

2. Help users decide with Representative heuristics

Our brains make countless decisions every day (35,000 decisions, if one source is to be believed)

From what time to leave for work to how to spend our evening, our brains devote a massive amount of energy to decision-making.

In fact, our brains often struggle to match demand with energy available (a state psychologists called “decision fatigue”).

To match this excess demand, we make use of heuristics. Heuristics is a broad term for mental models we use to arrive at quick decisions.

These models have been learned either through education or experience.

For example, if something is scarce, we assume it is valuable because our experience has taught us that rare objects are highly prized (this is called “scarcity heuristics”). One of the most important heuristics for designers is representative heuristics.

Representative heuristics state that we determine the probability of something based on its parent events.

Say, if you saw someone with a guitar, a leather jacket and long hair, you’d assume that he was a rock musician, not a ballet dancer; all parent events (guitar, jacket, long hair) point to this probability.

Similarly, when you see blue text on a web page, you assume that it is a link.

Why? Because years of internet use has taught you that blue text = link.

How to use ‘Representative Heuristics’ in your design

Representative heuristics can go a long way towards creating a better user-experience.

Start by playing to your users expectations. If you want people to click a link, make it blue, not dark grey.

Similarly, users expect CTAs to be bright and prominent.

You can also use representative heuristics to make things stand out.

For instance, if you have a row of buttons, making a particular button bold or giving it a different color will help it stand out. Users assume that because it isn’t like its parent elements, it must be important.

Below, the blue button draws our attention because it is dissimilar to its parent elements (the green buttons).

CPA

For example, on Buzzfeed’s homepage, the red “trending” button draws attention because it is different from the nearby elements.

Buzzfeed

3. Get more clicks with Serial Positioning Effect

People remember items in a predictable fashion.

Information provided at the beginning (primacy) and end of any content format (blog post, infographic, or video) draws more attention and is retained in memory.

This is the serial position effect.

As this graph from Wikipedia shows, recall rates for items in a list are high at the beginning and at the end of the list.

Psychologists attribute this to “primacy effect” and the “recency effect”.

Primary Effect

You remember first items in a list because your brain assumes that they are “primary” data and hence, more important. Similarly, you remember the last items in a list because they are the most recent information to enter your brain.

How to use ‘Serial Positioning’ in design

The Serial Position Effect has tons of applications in the way you organize data on your site.

If there is a link or any content you want your users to remember, try placing it at the end or beginning of a list.

For example, on the SmashingMagazine navigation menu, the most important links – Books and Jobs – are placed at the beginning and end of the menu respectively.

Smashing Magazine

Since SmashingMagazine doesn’t do a lot of tickets or sell a lot of its own products, the “Tickets and Shop” links are placed in the middle of the menu.

Similarly, consider how Amazon describes Alexa’s features on the product page:

Amazon Highlights

Amazon highlights Alexa’s ability to a) play music, b) control lights, and c) improve with every update.

This isn’t accidental. According to WebsiteSetup, most people use Alexa to control music and smart lights – features Amazon highlights.

Amazon Highlights

The survey also concluded that most people use Alexa because it keeps improving – another feature Amazon highlights.

You can use the Serial Position Effect to organize important data across your site. Things you want people to remember should be placed either at the beginning or end of a list, a navigation menu, or a page.

4. Make more visually appealing sites by following the Rule of Thirds

Whenever you take a photo, creating a painting, or designing your page, you need to pay attention to layout and structure.

If you don’t, you risk clutter and confusion.

The most common design structure is known as the grid system. However, they limit creativity and often lead to rigid pages.

Instead, follow the principle known as rule of thirds.

The rule of thirds has its origin in the golden ratio which has been historically associated with beauty – as any designer would know.

In photography, the rule of thirds makes images seem more dynamic and visually arresting.

Essentially, it involves splitting your page into three sections (both vertically and horizontally).

The intersection between the horizontal and vertical is known as the focal area or focal point. It’s where you should place key elements for maximum impact on any design as WebsiteSetup shows.

Focal Point

How to use ‘Rule of Thirds’ in design

First, try to design in Three’s.

That is, if you have 12 grids, divide them into three columns of 4 grids each.

Also try to keep your most important elements at or near the focal areas.

For example, check out Sia’s homepage:

Rule of Thirds

Notice how the product image and motto fall directly within the focal area.

Here’s another example from the NNGroup:

NN Group

The CTAs and key text all lines up near the focal points.

Remember not to line up items directly on the focal area constantly. Doing so will give a robotic feel to your page and lead to familiarity.

Integrate some asymmetry and create imperfections to draw and maintain attention.

5. Gestalt effect/Gestalt psychology

Our perceptions can often fool us.

For example, if the car adjacent to yours moves while you remain stationary, your brain might perceive you to be the one in motion.

Laws which drive our perceptions have been explored in gestalt psychology.

As a designer, you’re probably familiar with gestalt psychology, either in theory or in practice. Much of our understanding of perception comes from it.

Below, I’ve discussed two laws that are particularly pertinent for designers:

A. Law of Pragnanz

The Law of Pragnanz states that when humans see a group of objects, they see it in its entirety first and then as individual objects.

Similarly, when visitors land on your page they will see it as one big object.

And if that entirety seems jumbled up, your visitors can get overwhelmed and leave, even if the individual elements are easy to understand.

This law is one reason why designers push for whitespace in their designs.

Apple’s use of whitespace is a particularly good model to follow. When you land on the Apple homepage, you can immediately figure out how every section fits into each other.

Whitespace

B. Law of Similarity

The other underlying principle in gestalt psychology is the law of similarity.

It’s based on the premise that people like group similar items together.

Just think about how you organize your refrigerator. You probably have one section for fruits and vegetables, another for drinks, and yet another for condiments.

Apply the same principle to your pages.

Group items that you want associated with each other closely.

Check out Zappo’s registration page:

Zappos Registation PageNotice how the two email fields are much closer to each other?

They were grouped together to reinforce a user’s orientation and improve their experience. You can immediately look at the page and understand that the two email fields belong to the same category.

6. Get people to focus on CTAs with Gaze Following

Remember all those news stories of people seeing Christ’s face in wall marks, leaves and even toast?

Turns out that human brains are hardwired to see faces in everyday objects.

That’s not all – we are also hardwired to follow the gaze of any face we look at. As per one theory, we developed this ability as a way to build social connections.

This phenomena is known as gaze following or joint attention.

For example, if a person is gazing to the left in an image, we are likely to look in the same direction.

Gaze Following

How to use ‘Gaze Following’ in design

You can use gaze following to draw attention to a specific area of your page.

For example, consider this landing page:

Gaze Following

Because the dominant face in the image – the woman’s – looks to the right, our eyes are instinctively drawn in the same direction.

This brings attention to the form – the element we want our users to focus on.

Another eye tracking study found that when the face on a landing page (in this case, a baby’s) stares at the text, people pay more attention to it.

Gaze Following 2

If you are using any images of people in your design, make sure to orient them in a way that maximizes attention to your CTAs. It’s a small change, but it can lead to big improvements in CTRs.

7. Make choosing easier by reducing options (Hick’s Law)

You can never have too many choices, right?

But if your aim is to get your users to make a decision, too many choices can actually hurt.

This is especially apparent when it comes time to make a decision. The greater the number of choices available, the longer we take to decide.

This is known as Hick’s law.

Hick’s law states that there is an optimal number of options. Beyond this, offering more choices overwhelms the user and causes them to delay or even abandon the decision-making.

Hicks Law

This is another example of “decision fatigue”. Your users already have hundreds of decisions everyday; when you force them to decide between 12-different payment methods or 6-different pricing plans, you overwhelm their decision-making faculties.

How to use ‘Hick’s Law’ in your design

If I had to condense Hick’s Law to two words, it would be this: “limit choices”.

Think about the number of things that run through a visitor’s mind on your page.

Should they invest their time in reading your ‘about us’ page, watch a video that explains your product, or read a blog post?

While they ponder, this leads to inaction towards any choice available.

This is particularly true on important “money” pages such as your checkout page. Try to remove as many options from this page as possible.

For example, Amazon’s checkout page removes virtually every outgoing link except the privacy policy and ToC pages.

Amazon Checkout Page

By limiting your choices, Amazon forces you to focus on the task at hand – checking out.

This is also why you shouldn’t force your users to make more than one decision on a page. Your pricing page should have just the pricing. Your contact page should have just the contact form, and so on.

For instance, even though Buzzfeed produces hundreds of content pieces everyday, the navigation menu hides most choices under the “More” drop-down sub-menu.

Buzzfeed

If Buzzfeed were to include all choices under the “More” tab in the main nav menu, it would overwhelm readers.

Over to You

As a designer, you already know that effective design is a lot more than simply making things look good. You also need to persuade users and influence their choices.

Knowing the why behind common design practices will help you make better design decisions.

You can start by implementing some of these psychological theories.







3 JUST™ Creative Comments

  • NO TRACKBACKS


Submit A Creative Comment

Your email address will not be published. Required fields are marked *
Please use your real name and do not use keywords. All comments are moderated by myself and I reserve the right to edit or not publish your comment. Thank you!

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



© Copyright JUST™ Creative 2007-2013. Designed by Jacob Cass. Powered by Wordpress using the Skeleton Framework. Fonts served by Typekit. Site hosted by (mt).