Categories / Inspiration

7 Psychology-Based Techniques To Design Fascinating Websites

Daniel Schwarz March 31, 2021 · 6 min read
Pinterest

Engage – a verb, meaning to occupy or attract someone’s attention. Engagement is the first step in converting a visitor into a customer, member or regular reader, but it extends far beyond over-the-top, rainbow-colour banners and humongous “click here” buttons. Engagement is about human psychology.

In order to design a website that successfully engages users, you need two things. Firstly, you need empathy. Essentially this is a deep understanding of the users’ needs, and when you have it, you’re able to enact prosocial behaviours – basically, the ability to understand the issues that others face by “walking in their shoes”. Only then can we begin to solve those issues.

You need self-awareness too. Browsing the internet is a second nature to us. We very rarely think about how we automate our interactions with websites, all we know is that we do, and those automated responses are a reflection of our past experiences as a user. We remember both awesome and terrible user experiences, and by becoming more mentally aware of what we like and dislike about web interfaces, we can create a better web ourselves.

1. Don’t Make the User Do the Work

If you walk into a restaurant you wouldn’t expect to source the ingredients, cook the meal and serve yourself – but you would have to feed yourself with a knife and fork. Websites are no different. A website user wants everything readily available, but accepts that some minor interactions may be required.

Yep, users are notoriously lazy. As designers and/or web developers, we have to reduce the amount of work needed to operate the website, for example making the most-popular option the default option (so that most users don’t even need to interact with it) and designing buttons to look like buttons (so the user doesn’t have to think twice about clicking it).

2. Summarize Everything

People tend to lose interest in things very quickly, and that’s why users like to quickly “scan” through smaller, bite-sized chunks before digesting the full content. If the user wants to explore in further detail, they then have the choice to interact a little more. Progressive disclosure is the technical term, and it’s designed to reduce clutter, confusion and cognitive workload.

If every element on a webpage was the same font, size and colour we wouldn’t be able to immediately tell the difference between headings, captions or blocks of text (for example). Website users require contrast to help their eyes scan the summarised content quickly, otherwise they lose interest and x-out.

3. Preempt the User’s Mistakes

People make mistakes and sadly that’s unavoidable. But when they do, for instance when incorrectly filling out an online form, it’s customary to let the user know (with an error message) so that they can correct the mistake. You’d assume that would be the optimal way to handle the user experience (and it is, don’t worry), but we can do one better by fixing the issue ourselves so that the user has no idea that they’ve done something wrong.

Our brains associate yellow colours with warnings and red colours with more urgent concerns, but here’s the thing: not only do error messages halt the users flow, but it causes frustration and makes the user less likely to engage again. Nobody likes to be told off, even if we are at fault. If the user unnecessarily includes the “@“ symbol in front of their Twitter handle, have the back-end code remove it instead of forcing the user to do so.

Remember, the best error message is no error message at all.

4. Engage, But Don’t Distract

I’m sure you’ve been told many times to eliminate unimportant areas of a webpage in order to reduce clutter, but that’s only step one, because what we’re left with is a webpage of vital content and we now have to decide how vital it actually is. We want all of these important components to stand out, don’t we?

First you need to decide how important each section is and assign the appropriate amount of space, font-size and colour to it, but don’t distract the user half-way through scanning with something flashy. Distractions will result in confusion, not engagement.

5. Make the User Feel In-Control

Dopamine is a chemical in the brain that makes us feel confident and motivated; it’s distributed as a reward for helping the body to indulge, not only in things like food and bedroom activities, but information too, and this is why internet addiction triggers as much concern as drugs and alcohol do. Addiction is natural human behaviour, but we often indulge more than we need to.

Have you ever clicked onto a news article and then ended up clicking on like ten other related articles? Having more options makes us feel in control. More options means more engagement, even if we only read two of those ten articles in the end.

6. Help the User Overcome UX Fears

Back to forms – they’re kind of annoying, right? Don’t you hate it when you discover a new website but you need to sign up to use it? Well, that’s because you have a psychological fear of forms. Formphobia! Alright, so formphobia isn’t a technical term, but we do develop mental fears of certain web interactions such as filling out forms and there are two ways to handle it.

You can either innovate a new method of signing up users, break the concept up into smaller steps and teach the user how to sign up in this fresh approach (if you’re looking for an example check out Typeform), or you take the user’s slightly dreadful mental model of signing up and help them overcome their fears by using friendly comparisons such as “Just answer the questions as if you were chatting with a friend and tap enter when you’re done to move to the next field.”

An error-free zone is a safe-to-engage zone.

7. Create a Visual Grouping System

Red and blue are seen as opposites, so the brain would assume that the two pieces of content in those boxes aren’t related to each other – this is how our mind builds a visual grouping system to help us navigate websites with our eyes. If two elements are close to each other it’s assumed that they’re related, so space is another way to indicate to the user how different elements relate.

Conclusion

Psychology can be a complete mystery, mostly because we automate so many of our actions without realising that we fail to understand how we really function. Hopefully, these 7 tips will help you become more self-aware. Can you think of any more?


Products Seen In This Post:

Lettering Worksheets
Getting started with hand lettering?
Free lettering worksheets

Download these worksheets and start practicing with simple instructions and tracing exercises.

Download now!
About the Author
Author
Daniel Schwarz

Designer & writer

View More Posts
Go to My Shop
Related Articles
3 Comments
  • I love the concept of summarizing information. I tend to write long descriptions for products. But I often make the mistake of providing too much information up front. What I have noticed that helps is when I add bullets at the top of a product description and summarize everything. Then get into more meaty details further down the page. Thanks for a great article! This totally fascinated me. 6 years ago
  • @Dustin Lee thanks for the lovely comments. Glad it fascinated you! 6 years ago
  • Thanks for this one - nicely summarized and presented. I stayed happy all the way through :) 6 years ago