144

7 Psychology-Based Techniques To Design Fascinating Websites

, ,

    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:

Tags

Log in
Register