It takes about five seconds for users to form an opinion about a website and decide whether they'll stay or leave.
Now, what does this prove? Website design is more important than you think. Websites are subject to snap judgements that instantly influence an audience’s response. Here’s one more: 57% of internet users agree they won’t recommend a business if it has a poorly designed website.
Web design mistakes to avoid
Believe it or not, there are a lot of mistakes that website owners make unconsciously. To help remedy these issues, we’re going to talk about some of the most common web design mistakes that even the smartest people are making. We’ll also walk you through solutions on how to avoid these website design mistakes.
Too much going on (content overload)
As a web designer in the digital content world, you’ve probably come across one or more of the following buzzwords:
All of these words mean the same thing: content overload, or the amount of information produced is overwhelming to people. Courtesy of the digital era, there’s so much content on the web that people are tired of reading. Instead of reading the long paragraphs and complex sentences, readers today prefer skimmable content. They want to find answers to their query in the shortest time possible.
As a web designer, your job should be to avoid this web design mistake, and instead try to share required information in fewer words. Whether you want to tell them what your website is about or share information on product offerings, it can be done in a way that’s short and sweet.
Users naturally gravitate toward great web design with well-written content that is presented in a manner that is easy to digest. In other words, always keep end-readers in mind when creating content.
Here are some tips on how you can reduce information overload:
Write with self-explanatory language. Cut to the chase. Avoid using unfamiliar words or symbols, and instead use familiar, self-explanatory words. The content you’ve used on your web pages should be easy and clear to understand without needing any explanation.
Personalize any necessary communication. This can be done by understanding your target audience’s search intent, directing visitors to the categories depending upon their individual choices, and analyzing user behavior.
Eliminate any nonessential steps. It’s good practice to share basic information about your products and services. But if you’ve added unnecessary steps to the process, you’re wasting users’ time. Whether that be in your sign-up process, or product usage guide, get to the point and eliminate any non-essential steps.
Create skimmable content. When you’re searching the web, do you read everything, or do you just skim to find the relevant portion and move on? People tend to scan or skim. While designing your webpages, use bullet points and small paragraphs that are easily scannable.
Keep a solid text-to-image ratio. Another crucial thing to keep in mind is using a balanced mix of text and images and other visual elements. In other words, diversify your content. Again, don’t cause content shock; be mindful of maintaining a good mix that enhances visual appeal of the website without causing content to overwhelm.
Hide extra options. Collapsible menus are a great way of cutting the clutter. Some people like the base-level information while others prefer details. This way, they can choose for themselves. Using drop-down menus to hide extra content until it’s needed is ideal for any type of user.
Too little going on (missing content)
Did you know thin content (too little content) was one of the first SEO issues that Google targeted through its 2011 Panda update? The update kickstarted a giant war against low-quality content and rocked the entire industry.
In the words of Google, “thin content” refers to content that has little to no value. Since 2011, SEO experts started taking Google’s warning seriously and understood that they need to produce quality content to get in Google’s good books.
However, there are still a good section of website owners who are unaware of this web design faux pas. The first stage in fixing thin content issues in adding value-enhancing or high-quality content.
To remedy these issues, don’t leave too much to the imagination. Yes, we just told you to use self-explanatory terms and avoid adding unnecessary information. But there’s a thin line between necessary and unnecessary information inclusion.
No one knows your target audience better than you. Ideally, you should be aware of what’s necessary information and what’s not. Be mindful of that and try to cover only the most pertinent things on your site. Don’t leave too much to the imagination. Use self-explanatory words that are neither too descriptive nor too short. Be informative; your customers want to know that your business will do for them. It’s all about maintaining a balance.
Additionally, only include purposeful content with unique data. What we learned from the 2011 Panda update was Google takes quality seriously. So if you really want to get noticed, you have to produce quality content and avoid this web design mistake.
For quality, you should rely less on jargon and more on content that serves a purpose and has unique information. The use of facts, new study findings, survey results, and expert opinions not only build authority, but also gain your users’ trust.
The key is to create purposeful content that solves a problem and adds to valuable content creation. Always make sure to back your claims with supporting information and add links to resources to enable further reading on the topic.
Always stay updated with real-time data changes for new action points and content ideas.
Stay on top of industry changes, Google algorithm updates, and revisit old website to make required changes
Focus on creating tiered content strategies so you can align all your pieces in order. A blog post is awesome, but supporting it with relevant subtopics is much better.
Follow social media trends and learn what your audience wants; content should be primarily created to help them solve their needs.
Focus on personalized communication that serves multiple business purposes: longer visit duration, higher customer satisfaction, boosted site visits, and an improved brand reputation.
Misuse of whitespace
Black space is not always empty space. Novice web designers tend to think otherwise and tend to cram content together, which leads to an overwhelming view for readers.
As the name implies, whitespace is the empty space between the design elements. On a micro-level, it’s the space between two paragraphs, two lines, or an image and its caption. On the macro-level, it's a large block of empty space around two design elements.
A good use of whitespace leads to a more professional and cleaner interface. It’s pleasing on the eyes, allowing the design elements to breathe and helping visitors to absorb content without feeling overwhelmed.
You might think white space is the waste of valuable screen space. But that's a misconception. Intelligent use of white space gives your design elements and content room to breathe.
Here are five more reasons why whitespace is important:
It improves text legibility for individuals and screen readers
It organizes web page content in an appealing manner
It helps create emphasis and focus
It gives an impression of luxury
It promotes enhanced readability
Here are a few other tips on how you can use whitespace efficiently:
Use proper spacing. Whitespace will enhance the overall visual appeal of your web page if only you maintain consistency throughout. Imagine leaving one block of whitespace in the first section, three blocks in the next, and none in the third. This practice will harm your site from an aesthetic standpoint. Whether you’re adding micro or major whitespaces, make sure they remain consistent.
Whitespace doesn't have to be white. Your whitespace can be of any colour or gradient. It can have few cool illustrations or pictures as well. It means making sure that page elements are strategically placed to avoid confusing visitors. When working with the whitespace on your webpages, you’ll have to make some difficult decisions on what’s important enough to display. You could even use a patterned or textured background or a background image. Your goal should be to get readers scrolling further down the page and pushing them to look at other site elements.
One of the best examples is Apple's web page and see how they’ve judiciously used white space. Furthermore, the designer has maintained consistency across all the pages to enhance overall visual appeal.
Misplaced, missing, or bad CTAs
Misplaces CTAs are one of the most common pitfalls of web designing. Studies suggest that 70% of business websites have misplaced or bad CTAs on their landing pages. If you want to boost sales, CTAs are a perfect place to start. An ideal CTA button should be something that is easily spotted, compels the users to take an action, and comes across as an actionable phrase.
Now, how do you do that? Here are a few suggestions on avoiding this common pitfalls of CTA placement:
Make the CTA clearly visible. If your users don’t see your CTA button, what are the odds of them clicking it and becoming a customer? Put your CTAs at a distinct, clearly visible place on the top, above the fold. However, placing your CTA button above the fold won’t work if the main information about your product/service is below the fold.
Have the button stand out. The whole point of CTAs are to invite users to take an action, and there’s no point expecting a response if your CTA is not compelling enough . Whether it’s the CTA button color or the text, consider the psychological aspects of these things. Take your time to figure out which color would be more inviting, and what text would compel them to take an action.
Use contrasting backgrounds. Another key thing to keep in mind while creating CTA’s is contrasting background color. One of the reasons your CTA is not easily spotted could be the imposing backgrounds. Page elements such as text, graphics, and background should have contrast for a crisp view of the CTA button.
Appeal to users' emotions. Use emotional appeal to encourage users to click the button. One way of doing this is reminding them of the problem, stating how your product can solve it, and then placing your CTA.This helps establish authority or likability and induces higher conversions. To put it simply, the words you use in CTA should have the potential to trigger responses from the users.
Bad images: low-resolution, clunky, and bounce-worthy content
Bad resolution images are perhaps the most common mistake site owners tend to make. Images and illustrations are necessary and beautiful when it comes to a website’s visual appeal. But they have the potential to cause problems if you’re not following a few key rules.
Use high-resolution photos. Many websites use low-resolution images, and images that aren’t clear fail to serve purpose. They also create a less-than-dynamic slack of visuals and reduce the overall look of a webpage. If an image is bad quality, don’t use it. There are stock photo resources to use when in a pinch.
Don’t forget about thumbnail images. Website designers often forget that the thumbnails, favicons, and image previews need to be updated. Make sure to preview thumbnail images and replace them with ones that have a higher resolution.
Use alt-text and metadata. Search engines can’t read the images the way our eyes see them. So if you want to make your images searchable and boost SEO rankings, you must focus on including alt tags, metadata, and descriptive words in the subtext of your image content.
Mind proper image scale. Nothing looks weirder than an image that is improperly scaled. Non-proportional scaling or stretching of images comes when you’ve done a theme change or made any backend changes. Be mindful of these changes, and make sure to scale every image with a ratio of 1:1. Anything else is likely to damage the photo quality.
Take site speed into consideration. Low website speed is a very common problem website owners come across, and size-heavy images are usually the reason. To be specific, large, unoptimized images that cause visitors to bounce are the culprit. A smart practice is using image optimization plugins or tools that help optimize images that are decelerating site speed.
Poor or hidden navigation bars and menus
How your website’s navigation bars are designed has a huge impact on success or failure.
Poor or hidden navigation bars are becoming a common mistake. Many sites follow non-standard style for the sake of being unique. But that doesn’t help the user because unfamiliar formats have the potential to create confusion, and cause visitors to bounce.
Another common practice is hidden menus or drop-down menus. To be honest, they’re both equally annoying. They not only make crawling difficult but also waste the user's time.
Here’s what you can do instead:
Put fewer items in your navigation bar. You’ve probably come across websites that have too many items in their navigation. The website owners seem to be boasting of the content quantity they've. But is that the right approach? Nope. Use fewer menu items so your visitors will come across the most important elements. Fewer menu options ensure the target audience doesn’t scan past the crucial pages.
Get the order right. Make sure that you maintain an appropriate hierarchy in your menu. Put your most important items at the beginning and the least important pages at the end.
Keep it simple. Don’t use navigation to highlight your vocabulary strength. Instead, use as generic words as possible. Make sure the words used in CTAs are short.
The more words you try to jam in a single menu button, the greater the chance you’re going to confuse someone. To assist, you can use an SEO tool that serves many purposes but when it comes to navigation, they’ve limited the choices by using generic words.
Annoying ads that cover site content
This is perhaps one of the web design mistakes you’re doing consciously. It’s okay if you want to earn from your website. But that doesn’t mean you should suffocate your visitors with annoying pop ups and ads. These ads are a big turn off because they mess up with user experience, making your brand look inconsiderate and cheap.
If you’re using ads on your website, here are a few friendly tips to consider:
Obtrusive ads that take up more space than the content are the surest ways to send people away from your website since they can’t see what they came for in the first place. These type of ads also hurt your SEO, and some ad networks may ban you if you don’t stop this practice.
Your audience came on your site to find a solution – not to be bombarded with advertisements. The first thing they see when arriving on your page should be the solution to their problem, not the ad.
If you have no option but to use pop-up ads, use a time-triggered pop-up that appears on the side of the page. For example, if the user has been on the page for 10 seconds, the pop-up should appear for 0.30 seconds or fewer and disappear on its own. Furthermore, make sure to have a distinct close button on pop-up ads. Some sites have microscopic buttons that make closing out of ads nearly impossible.
All these mistakes have the potential to reduce conversion and redirect your prospective customers to your competitors. You can avoid this with a few tweaks here and there.
The most common web design mistakes that have been pointed out in this post can be easily avoided if you understand user behavior on your page and pay a little more attention to design. Keep working with the customer in mind, and A/B test to find out what works best!
Vinod is Senior Digital Marketing Manager at piHappiness. piHappiness is a top customer feedback software designed to collect customer feedback on Web, iPad and Android tablets. Vinod is keen on such topics as Marketing, Customer Experience, SaaS Challenges, and Personal Growth.