In 2022, it's time to avoid these 10 website mistakes + a free template

In 2022, it's time to avoid these 10 website mistakes + a free template

Today, we will see how these 10 things can affect how your audience perceives you (from me). Bring home the bacon.

Okay, now that you are here, I just want to warn you that I might take these mistakes a bit personally. As a web designer, of course, but also as a human, they tend to annoy me!

01/ Pop-Ups

Boring, annoying, frustrating. This is how I can describe pop-ups. Even the cookie bar is pretty annoying.

So, what’s a pop-up?

There are 4 kinds of pop-ups - modal, non-modal, lightboxes, or not…

Basically, modal popups are very intrusive, you cannot do anything on the interface when they show up, except interacting with it. Think of ads when you navigate on a doubtful website 😏 or on a press website 🙄.

Don’t use modal! Except, if you want your user to leave your website in a fit of anger.

Actually, yes, you can use them but only for critical tasks that users have to do, such as passwords, gated content, user consent (cookies do not apply here). Use them sparingly.

Lightboxes are when the background is darker/lighter/blurred and clearly detached from the rest of your website content.

A modal lightbox pop-up.

So, modal can also be a lightbox. A lightbox is useful to guide the user and focus their interests on one specific message. For example, when a user clicks on a photo of an item, they expect to see a bigger and clearer image.

But a lightbox can also be non-modal, meaning, you can still navigate and click on buttons in the background.

In the bottom right corner, here is a non modal pop-up without lightbox.
In the bottom right corner, here is a non modal pop-up without lightbox.

Pop-ups can still be useful! You just need to follow some important rules:

  • Interrupting the user journey during crucial moments is not a good idea.
  • Let’s take displaying a pop-up right after a user logs on to your website as an example. How could the user be interested without even knowing what the page is about? They pay no attention. Personally, I quit the banner and never return on it.
  • Use the right type of pop-ups depending on the purpose, the importance of the information. (Spoiler: advertising is not a top priority).
In the bottom right corner, here is a non modal pop-up without lightbox.
On the top, you can see an example of a hello bar.

Instead, be creative rather than boring. Use less intrusive methods such as hello bar or tooltips and leave some space for your customer.

02/ No CTA

What’s called CTA, or call-to-action, is generally a button or a link that encourages the user to take action. Even if any website thinks they use CTA’s, many are satisfied with “send”, “submit” and the worst is “click here”. Don’t use neutral words.

Personalized it. Making it catchy and emotional will increase your conversion rate by 200% (Hubspot). Guide your users and tell them what’s the next step. You can make some A/B research with a small handful of people to verify what works better.

03/ Being not accessible

Users with impairments use apps (such as VoiceOver) and read the content of your site aloud and precisely describe an image for example.

How to make your website accessible? Add alt text to your images, something like “A girl that underlines how SEO is important before asking what it is again.”

Besides, it gives you some bonus points on Google and could easily improve your SEO.

04/ Bad contrast

Accessibility again, you will be surprised by the number of people that do not see the world as you are. Some people cannot distinguish certain colours.

Ensuring good contrast will increase the chance that your website will be understood by your audience.

Avoid red on purple (HHAAA!!! MY EYES!!!)

05/ Ambiguous icons

Unless it's a very common icon (like a heart, a menu or a shopping cart) and the style is very generic, or your website is a leader and is known to almost everyone (hello Facebook), you must use labels when using icons. It might take up extra space on your design, but it's worth it.

The status quo bias induces the fear of making a mistake and the risk incurred in doing an action whose benefit is not clearly perceived.

Icons with labels
Icons with labels

Consider replacing icons with simple and effective labels.

You can also use tooltips for uncommon icons.

06/ Hierarchy

Presenting too much information at the same time, or not enough is a big issue that I see too often.

That’s why before jumping onto your preferred web-design platform, it’s a good idea to sketch it out. The more time you spend on it, the better the overall look and structure of your page/website will be.

Think of masonry, if the workers build the house without a plan, it will probably be a disaster. Likewise in the kitchen, even if you know the recipe, it is better to have the recipe written out. This way, you can at least make sure that everything is in order.

For example, avoid sidebars that are not directly related to the page content. It interferes with the focus of your user.

Think about fulfilling your user objective, be concise and guide them through your page. That’s the importance of why you have a website in general, to effectively and precisely convey a message.

07/ Hide your pricing page

It's tempting to hide the price until your customer shows real interest in your product/service, but it’s not a good idea.

Why? Because you force your customers to go forward, just to allow them to see the pricing – which likely causes them to become frustrated. As a result, you will lose prospects that are too lazy/annoyed to go forward without clear terms.

Having a pricing page that is only reachable from the footer or via another page, or hiding other key elements like the menu, reservations, addresses, terms, support, etc. can be very frustrating. Your client expects to see the pricing first, it’s your role to show them why it’s worth it.

Hiding key content could result in mistrust and that's the last thing you want.

Be transparent.

08/ Key element in the wrong place

When it comes to web design, you want to be memorable and original, but the fact is some elements are now so templated that you have to respect some rules about navigation elements.

Users expect to see your logo in the upper left corner of your website and that they can be redirected to your homepage upon clicking it. 89% of users are most likely to remember the name of the website of these companies when the logo is placed in the top left corner.

However, if your website is uncommon, such as an experimental format, it naturally invites the user to be creative. You then have the opportunity to be original, because you are bringing a key value to your user, you are entertaining them.

Visit their website here: https://cat.humbleteam.com/

09/ No relative font-size

I could have said "unresponsive website," but I specifically chose "No relative font-size". Because, accessibility, always accessibility.

There are more and more new screen sizes and new types of devices.

Relative font size units such as "em" and "rem" and even "%" probably mean nothing to you. But these units allow the text to adapt to the preferences of the user. After 40 years, 12px for your text may be acceptable on desktop but is too small on a mobile device.

What I mean is that if you use a fixed value for your text like pixel, it may not be visible and your content may be illegible for a large portion of users.

Of course, this requires a responsive, fluid, and adaptive design; and the ability of your website to be easy to navigate and adapted to whatever device users consult it on.

10/ No appropriate favicon

For the last one, I need to mention this, because it truly matters.

Yes, I am the kind of person who opens 50-70 tabs in the same window (don’t judge me. It’s insane, I know)!

Actually, the favicon is critical at this point, haha. See for yourself…

A browser with 63 tabs open in the same window
A browser soon to burn-out

So don't neglect the favicon it's absolutely necessary. Don’t.

And because it matters, add a good quality Webclip too.

Basically, it’s an app icon image that you can pin directly on your mobile screen. It is the icon your website uses when a fan of your brand (like me) decides to save your website on their mobile screen as a shortcut app.

Pick a clean, brightly colored icon that could look great and easily recognizable in a user’s jungle of apps on their screen.

Come on Lufa! 🥲

Webclip of websites pinned on the user's mobile screen. The pixelated tomato is the Lufa Farm website and the one with the ads look is from McDonald's. Yep, it happens to everyone.

{{blog-component}}

So…

There are a bunch of mistakes we can make when it comes to websites. Some mistakes are more critical than others, it’s okay to make some but it’s better to fix them and to avoid repeating them.

That’s why UX designers are priceless, they are experts in the user experience, they search for errors, anticipate trends and bring new ideas on how to better communicate your brand’s values.

So, do you agree or disagree? Let us know down here

2 Free templates, just for you.

In this file, you will find two PSDs, two jpeg images and a license. Enjoy!

FR
By using this website, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.