While content may be considered the soul of your website, web design is akin to its personality. An overarching design that comes across as too busy could overwhelm visitors, causing them to leave. Striking the perfect balance, however, could lead to visitors spending more time on your site, inching closer toward conversion.
This article aims to provide insight on how to create a website that won’t stress out visitors, touching on different elements from color psychology and interaction design, to minimizing noise and becoming more human.
The psychology of web design
“Good design is obvious. Great design is transparent.” That’s a popular quote from designer and teacher Joe Sparano. And it’s spot on. Almost everyone can notice a beautifully designed website. But as Neil Patel points out, elegant websites don’t usually function well and have high bounce rates.
More crucial than the fluff of elegance, on the other hand, is effectiveness – in terms of a website, it’s one that builds trust with users, and is able to influence them to take the owners’ preferred course of action. This is achieved through a combination of layout, typeface, colors, calls to action (CTAs) – each playing its role in engaging users and ushering profitable conversions.
Tips for a stress-free website
Below are a few concepts you can try to integrate into your web design (if you haven’t yet) to ensure that your users get the optimal experience from your website.
Leverage color psychology
If you’ve been dabbling in web design, you’ve probably already heard of the basic color psychology as it pertains to brands. As a quick refresher, red is suggestive of emotions like excitement, power, and love – which is why it features prominently in Netflix’s logo, a brand associated with a breadth of content.
Blue, meanwhile, suggests corporate reliability and competence, used by brands like Facebook, VISA, and Intel. Green, for its part, suggests good taste and health, which is why it’s the perfect choice for Spotify and Whole Foods, respectively.
Draw from nature
Nature has a demonstrably calming effect on people. That’s why stress relief resources always suggest people spend time in nature to decompress. The digital space is almost the exact opposite of calm with its steady stream of notifications and stimuli grappling for our attention. This is why it’s important to draw from natural colors whenever you can.
Depending on your industry, it may not always make sense to just plainly insert blues and greens into your web design. But there’s an abundance of natural colors to choose from.
It’s important to note, though, that context matters. Bear Grylls’ website design’s GUI can use a combination of nature imagery and danger-evoking colors like black and red because danger is a key component of his brand.
So take the time to really understand what your brand wants to come across as and what possible natural colors you can integrate into your design.
Consistency & patterns
Simply put, consistency enables users to feel familiar with your website, if not your brand, cultivating trust. This trust also translates into reliability, meaning that users can expect a certain level of experience every single time.
Start by asking yourself questions such as:
- How do customers work with your brand?
- What questions might users have?
- What are the easiest ways to complete a task on your website?
Answering these can help highlight which areas of your website need heightened focus in terms of having a consistent design.
Of course, this also applies to your choice of colors, typography, button shapes, and other visual elements, which should remain consistent site-wide. As a general rule, choose no more than two or three fonts to establish a rhythm and dictate hierarchy in your content.
The Z pattern
The pattern shown above is typically how users scan a web page, meaning that the most important information or CTAs should be placed in the top left, middle, and bottom right. It’s important to note, though, that this pattern works best on pages that aren’t centered on text. For more text-heavy pages, use the F pattern.
When there are fewer key elements that need to be seen such as landing pages, the Z pattern makes it easier for users to scan the page.
Keep mental models in mind
Considered one of the most important concepts in human-computer interaction, a mental model is what the user believes about the system at hand. The Nielsen Norman Group points out two key distinctions in this definition:
A mental model is based on beliefs, as opposed to facts – making it basically a model of what users know (or think they know) about, in this case, your website. So as it pertains to web design, it’s vital to be able to communicate the system’s basic nature well enough that users can form a reasonably accurate mental model, from which they will judge their user experience.
The second distinction is that users have their own mental model. There’s a distinct possibility that different users could construct different mental models of the same interface. As such, it’s important to be able to bridge the gap between designers’ technically-informed mental models and users’ models, which has a tendency to be erratic.
Citing the simplest of examples, this is why virtually all websites place their navigation bars at the top of a page, or elements like Home or Profile on the top left or right side as this conforms to the most common mental models.
Utilize white space
Just from its vibe, websites with good use of white space imbues a look that’s comforting and at ease. But more than having the aesthetic of being casual and confident, websites that intelligently utilize white space allow content to be read more easily and makes it easier to direct people toward the action you want them to take.
This is also called “negative space” because it doesn’t always have to be white.
There’s a reason why these kinds of minimalist designs have become increasingly popular. In the noise and haste of the digital world, minimalism reduces noise. When people come across a page that doesn’t try to bombard them with stimuli, they feel more at ease. This ultimately nurtures your relationship with your visitors, bringing them closer to your brand.
Try human-centered design
IDEO defines human-centered design as “a creative approach to problem-solving – a process that starts with the people you’re designing for and ends with new solutions that are tailor-made to suit their needs.”
So a solution-first design example would be “Let’s create a grocery shopping app.” A human-centered design example per UX Planet would be, “We hypothesize that low-income families struggle to find healthy, affordable food available in their local grocery store. How can we help them?”
When you start with solutions, there’s a tendency to miss out on crucial insights into what features to include in a product, what visual look and feel are most apt, and how to create a brand voice that resonates.
Taking the human-centered approach in web design allows you to uncover the needs, goals, and questions of your target audience, which in turn enables you to create a content masterplan. This defines crucial elements such as your messaging strategy and website architecture.
Veronica Camara‘s summation: this process aligns content with real user needs so you can achieve your business goals.
Learn more: User testing better products and user testing new products
Minimize clicks
The sagely two-click rule states that any and all website content should be found in two clicks or less. With users getting more and more impatient with every technological innovation, ease of use is mandatory if you want to have a healthy relationship with your users.
Of course, giving everything a user wants in 2-3 clicks isn’t always possible. In such cases, use the hover effect, where secondary (or even tertiary) navigation elements are displayed when a user hovers over a navigation element. You can also include breadcrumb navigation.
The breadcrumbs in the above example is in the upper left where it says Electronics / TV & Video / All TVs. This lets users know how they got to where they are and how to go back the next time around.
Ensure fast loading speed
They say that if you really want to get to know someone, see how they react with slow internet. Nobody likes slow internet, and very few people will put up with slow loading web pages. A study found that 53% of mobile site visits are abandoned if pages take longer than three seconds to load. And if a page load time takes five seconds, the bounce probability increases by 90%.
Additionally, Google factors loading speed into their rankings. You want your website to be found, and your visitors to stick around, so you need to make sure that your loading speeds are up to snuff.
Final words
As you may have surmised, we have only covered very simple concepts that anyone can apply to their website. Providing a good user experience to your visitors need not be rocket science.
If you’re not sure where you can improve, why not try 5 free usability tests with all the features you need to hone in on your areas of opportunity?
Jolina Landicho is a freelance writer and marketing strategist working with various brands online. She is devoted to helping businesses bridge relationship gaps by providing in-depth, actionable advice on online marketing, business development, and growth hacking.
