scroll to top
11 Web Design Mistakes To Avoid In 2022

The internet is no longer considered a novelty-far from it. In fact, it has practically become a necessity of life in 2022. If you are a business owner, for example, the internet is another method for communicating with your customers and target audience. 

It is for this reason that your website can no longer be an afterthought. Customers will visit your website with a set of expectations, and any deviation from this expectation can affect their opinion of you and your business.

 

Common Website Design Mistakes You Should Avoid Making in 2022

Internet technology is constantly evolving. We know that is hard to keep up with all the new trends and necessities required in order to have a user-friendly website. As such, we created a list of 11 items that we think should be at the forefront when it comes to managing your website in the new year.

1. Unresponsive Design

Responsive web design has essentially become a requirement for any website. Not only that, but internet users have developed an expectation for it.  

When a website is responsive, the website will retain its look and feel regardless of the size of the device on which it is viewed. The content of the website will seemingly scale up or down to provide the user with a positive experience. 

Why is this important? 

This is important because there are a plethora of devices one can use to browse the internet. While you do have access to data regarding the technology used by people who have previously visited your website, you can no longer assume that this will remain constant and that the current trend will continue. 

People now carry a web-enabled device with them everywhere they go. It is attached to them at the hip. In some situations, they may first land on your website while using a desktop computer only to return at a later time while using a tablet or mobile phone.

Not only that, each device comes in a wide variety of screen sizes. There is not a universal screen size for desktops, laptops, tablets, or mobile phones. In the case of mobile devices, you also have to prepare for the different orientations of the device, and whether it is being viewed in portrait or landscape mode. 

While many people utilize all of the devices for their internet usage, some may favor one device over another. When it comes to global market share, users tend to favor using their mobile phones. As of November 2021, 53.98% of internet traffic came from a mobile phone compared to 43.55% from a desktop computer.

A recent development has been the connection between social media applications and website content. We are seeing more and more social media posts with a call to action that link out to website content. A prominent example of this is the Instagram story link feature. If a person lands on your website from a separate application, they will expect a similar experience to what you gave them on the app. They assume that because you are keeping up with the latest social media trends, your website will also be modern and of the time. 


2. Overcomplicated Menu/Navigation

Jakob Nielsen, a principal of the Nielsen Norman Group is famous for noting that "Users spend most of their time on other sites." This has become known in the user experience world as Jakob's Law. Considered by many to be "the king of usability," Nielsen's research has helped make the internet more user-friendly and accessible going back to 1983.

As internet technologies have evolved, designers have found new ways to display information; however, this sometimes comes at the cost of usability. Users have grown accustomed to a certain website look and aesthetic. While new and innovative layouts have their place, you ultimately have to look at the goal and purpose of your website. Is having a unique menu or layout going to help you sell more products?  

Design Commonality

In November 2021, Orbit Media conducted a review of 500 marketing websites to see what each homepage had in common. Their study found that 93% of the websites surveyed featured the brand's logo in the top left of the navigation. Additionally, 90% of the websites featured navigation links somewhere in the header row. On the desktop breakpoint, these navigation links were all horizontally aligned and not hidden behind a hamburger icon. 

This data explains the importance of Jakob's Law. Instead of designing a navigation section that is unfamiliar to the user, opt to use familiar interface patterns. Keep your logo on the top left and the navigation links to the top right. This will provide the user with a familiar experience and they won't need to devote extra time trying to understand how to use your website, like the familiar adage alludes, the standard navigation bar is not broken. 

Examples of Navigation Bars. One with the navigation links and one with the hamburger
Examples of Navigation Bars. The top example features visible nav links, while the bottom utilizes the hamburger menu

3. Poor Typography

95% of website content is the written word. It is for this reason that typography decisions on your website are so important. Having flawless typography will make it easier for the user to read and consume your content. Poor typography, however, will incentivize them to leave. 

Typography is more than just choosing what font to use on your website. It is determining the font size, line height, letter spacing, and line length, among many others. Another consideration that often gets overlooked is the devices that your visitors are using. Not everyone has the latest mobile device. Will your content be as readable on devices with poor screen resolutions as it is on devices that are high resolution?

Consider The Readability Of Your Content

Readability needs to be a strong factor in design decisions because numerous studies have found that users tend to skim through the pages they visit, seeking out the content that appeals most to them. Now, this isn't an invitation to stop creating long-form content, it is simply a reminder that how the information is presented is also important. As you are reading this, you probably remember an article you saw that was enjoyable to read in its entirety compared to one that was just a huge "wall of text."


4. Not Optimizing The Call To Action

A Call to action (CTA) on a website is the part of your website that requires the visitor to perform a specific action. Common examples of these are buttons that allow the visitor to buy your product or schedule a consultation call with you. 

Much too often, the CTA gets overlooked. Businesses don't optimize them for conversions or they forget to add them to the page altogether. 

How many times have you seen the familiar "Buy Now" or "Learn More" while browsing the internet? 

Websites that use these common CTA labels are missing a great opportunity to highlight their value.  Take for example an email newsletter. Instead of having a label that says "Sign Up", try using a phrase like "Yes, I Want To Receive Marketing Tips In My Inbox."

Customers Buy For The Benefits

Part of having a compelling call to action is emphasizing how your product or service will benefit the customer. 

Remember, customers decide to buy your product or service for the benefits. 

When you lead with highlighting a specific feature or specification, reiterate how this feature will benefit them. You can even compare that to the alternative, and what they will miss if they do not purchase your product or service.


5. Missing Or Incomplete Contact Page

Customers want to know that they have an avenue to reach you. The internet is full of websites that masquerade as legitimate businesses. 

In 2017, 40 million US citizens reported that they were the victims of fraud. 

As cybercrime continues to rise, so has the importance of building trust with potential customers. This is why social proof and testimonials have become a prominent part of any homepage. 

The internet is filled with stories of people setting up eCommerce stores within a day and writing a social media post detailing how they did it.  The internet has allowed many to build an entire brand without having to have the products on hand or even purchase their inventory before getting in front of the customer.

A 2015 study by KoMarketing found that 44% of visitors will leave a business's website if there is no contact information or phone number. Customers want to be assured that if something were to go wrong, they have a way of contacting you or your business to fix the problem. 

This is why you need to have more than just a simple contact form with the familiar assurance that you will reach out to them within 48 hours.  

List all of the possible ways they could reach you. Some customers might prefer to call you while some might prefer to use email. Also, be sure to list your social media accounts. We've seen social media also be used as an avenue to reach a company's customer support team. 


6. Obtrusive Animations 

Animations and interactions on your website must be subtle and done tastefully. You don't want the animations to distract the visitor from the overall message of your website. 

While it is great to have subtle animations, like a button hover effect, the use of purely attention-seeking animations can be jarring to some users.  

The difference is the subtle animation, like the button hover animation provides the user with instant visual feedback while the latter is there purely for show.

Avoid All Forms Of Scrolljacking

A common example of a website animation that can be distracting is having content appear at certain scroll positions. If the user's scroll position is not at the precise position that the animation requires, the content tends to be either faint or blurred from being in motion. In the web design world, this is known as a form of scrolljacking. Users expect a website to behave in a certain way and when the website deviates from that expectation, it results in a less than enjoyable experience. 

Let your users scroll your website in the way and pace that best suits them. If the paragraph that describes the benefits of your product is faint or hard to read, how do you expect to sell anything? Customers don't ultimately decide to buy your product because of the parallax animation you had on your homepage. 


7. Not Optimizing Images And/Or Video 

The load time of your website is a critical measurement. Studies have shown that 53% of mobile users will leave a website if it does not load within 3 seconds. 

One of the easiest ways to improve your website's load time is to optimize the images you have on your website. Having images with a high file size can slow down the load time of your website. The goal of any web designer is to reduce the image file size as much as possible without affecting the quality of the image. 

This can be done by compressing the image, reducing the dimensions of the image, or a combination of both. 

While each designer might have a certain file size that they aim to achieve before uploading to their website, how the image fits on the website needs to also be taken into consideration. 

Many websites utilize a full-width background image in the hero section of their website. In this case, the quality of the image is critical because the hero section is where you make the first impression, and you want to make sure your brand is seen in the greatest light possible. 

Where you might have some leeway, is in the sections that appear below the fold, the parts of your website that the user has to scroll down to view. An example would be a series of headshots of your team members presented in a card layout. These will likely not need to take up the entire width of the screen; therefore, you can reduce the dimensions of the image which in turn will reduce the file size. 

 

8. No Favicon or Webclip

We have all visited websites that haven't updated their favicon or Webclip. It is often overlooked when someone first launches a website. The favicon is the 16x16 icon that appears on the tab indicator and the bookmark menu. This can be the brand's logo or a simplified version of it. 

While the favicon might seem to be a small detail, it plays a big role in identifying your website. Imagine internet users that have multiple tabs open, or a long list of bookmarks. The favicon helps them find your website faster and easier when it is listed with a group of other links. 

Similar to favicon, Webclips or touch icons appear as the bookmark icon for the Safari browser and as icons when people add your website to the home screen of their mobile device. These icons have a size of 256x256 and can often be found in the settings of your website provider. In Webflow, this is found in the project settings under the general tab.


9. Not Utilizing Open Graph Technology

When you share links on social media, the card that appears often with an image and short description is made possible by technology known as Open Graph.

What is amazing about Open Graph technology is that you can use it for specific pages, meaning the image, title, and description will be updated to match the content that is being shared. This becomes necessary when you share, for example, a blog post as you want the title and description to match the specific blog post, and not just list the title and description of your website as a whole. 

Close-up view of a Twitter Card utilizing Open Graph Technology
Close-up view of a Twitter Card utilizing Open Graph Technology


10. Not Designing For Accessibility

There is no denying that every aspect of our lives has become virtual over the past few years. While having the ability to shop, attend business meetings, and yes, even date is certainly convenient, there is now a greater emphasis placed on accessibility

Just like operating a brick-and-mortar store, managing a website also has requirements when it comes to being accessible for all visitors. The first half of 2021 alone saw 1,661 lawsuits filed, all relating to accessibility. 

All 1,661 cases involved violations of the Americans with Disabilities Act (ADA) and California’s Unruh Civil Rights Act.

Users with visual impairments, for example, rely on screen readers to understand and interact with a website. If your website is not properly designed and developed, this becomes a nightmare for them. 

Users that rely on screen readers commonly encounter issues when websites fail to adhere to proper heading structure, the forms are not labeled properly, and the images are missing alt text. 

A lot of the work will be done for you, simply by following the correct HTML language. 

And as an added benefit, following proper HTML will also help aid with your SEO goals, as greater emphasis is placed on keywords that are located inside headings. 

Blind person working on computer with screen reader and braille
Computer user utilizing a screen reader


11. Not Using A SSL Certificate

Anyone who has used the internet for any period of time is familiar with the first four letters of any website, HTTP, or Hypertext Transfer Protocol. 

HTTP serves as the foundation of the web. The browser sends a request to the web, which in return sends an HTTP response back to the browser. 

In recent years, however, we have started to see more websites use an encrypted form of HTTP, Hypertext Transfer Protocol Secure (HTTPS). 

HTTPS helps keep sensitive data secure by adding a secure sockets layer (SSL) certificate. The importance of this is two-fold. It improves SEO rankings, and it gives customers an added sense of security when entering their credit card information on your website. 

As of December 2021, 77.4% of websites utilized the more secure HTTPS.  

Aside from adding more security for your customers, having the SSL certificate makes for a more enjoyable user experience. Browsers are now showing a warning page when a user attempts to visit a website that is not secured. 

As you can see, there are many opportunities to ensure your website meets the needs of your customers in 2022. If you are feeling overwhelmed about the thought of updating your website, there is no need to be.

For web design services that effectively do all of these, you can turn to Channel Society. We are a web design and development agency committed to giving you custom websites that ensure your brand is well-represented across all of the different devices.

Schedule a free consultation so we can start designing your website right away.