17 web design mistakes to avoid for a user-friendly website

Usability is key when it comes to website design. Many of the most common mistakes I’ve come across are actually quite simple to correct. Here’s a list of mistakes to avoid when designing and editing your website.

Table of contents

Purpose and trust

Mistake 1: Not communicating the purpose of your website on the home page

During usability testing, we start by asking users two simple questions: What do you think this website is about? What do you think you can do here? Quite often, users have no idea. Unless you’re a city, a university or one of the most famous companies in the world, it’s best to include this information in your hero image or near the top of your home page. As Steve Krug emphasizes in his book Don’t Make Me Think, this “welcome blurb” should not be a lengthy and boring mission statement. Keep it concise and clear. Here are some examples:

We provide research-based UX guidance, by studying users around the world. – NN/g

Here, we listen, support and guide people between the ages of 12 and 25 who exchange sexual services for any form of compensation. Our services are intended for young people, but also for families and professionals who seek support in their work with teens and young adults. – Piamp

The people platform—Where interests become friendships
Whatever your interest, from hiking and reading to networking and skill sharing, there are thousands of people who share it on Meetup. Events are happening every day—sign up to join the fun. – Meetup

Mistake 2: Inconsistent design

Websites created by professionals are usually consistent when they are delivered, but things can get out of control when multiple people start editing, altering font size, colours, and more. Consistent design elements help users understand your site’s structure and build trust. Make sure your font type, colour scheme, and other visual elements are consistent across all pages.

While it may seem tempting to centre your logo or even place it on the right-hand side to add a unique touch to your website, it’s not the best idea. If the majority of your visitors are speakers of left-to-right languages, you should really keep your logo on the left-hand side. Why?

  • Research shows that navigating back to the homepage becomes significantly more challenging—about 6 times more—when the logo is positioned in the centre of the page instead of the top left corner1.
  • According to research, users are significantly more likely (89% to be precise) to remember logos when they are displayed in the traditional top–left position, as opposed to being placed on the right2.

So, if you want users to easily find their way back home and remember your brand, place your logo in the top left corner.

Mistake 4: Hiding your navigation in a hamburger menu on desktop

It may give your website a cleaner or simpler look, but hiding a website’s main navigation in a hamburger menu can make it considerably harder to find. In a study conducted by NN/g, people on desktops used hidden menus in only 27% of cases. Not only that, it also leads to longer task times and makes the tasks seem more difficult3.

If you’re hiding your navigation because it contains too many items, consider reorganizing and testing it with users.

Mistake 5: Not providing alternatives to the hamburger menu on mobile

According to the same NN/g study, approximately 40% of mobile users never use the hamburger menu. So, if you must have one, it’s important to offer direct links to the main tasks that users visit the site for, enabling quick navigation to those essential actions4.

If you don’t have breadcrumbs or if your breadcrumbs don’t include a Home link, it’s important to have a Home link in your navigation even if your site logo links to the homepage. Why? Having a Home link on every page makes it easier for new visitors and lost users to find their way5.

Mistake 7: Not testing your navigation

Navigation is the backbone of your website. An unintuitive navigation system can confuse users and make it difficult to find what they’re looking for. The solution is to keep your navigation simple and create a clear hierarchy. Use self-explanatory labels and organize pages into categories so that users can easily understand how to move around your site. Test your navigation with users or with friends and family members. Ask them exactly what they expect to find under “Services” or “Resources,” for instance. Often, they are unsure because such labels lack clarity. You can also conduct tree testing and card sorting.

Content: findability, readability, legibility, accessibility

Mistake 8: Not answering your visitors’ questions

Don’t withhold content and make visitors contact you for more information, as it can be off-putting. Instead, create pages that offer valuable content, such as answers to user queries, and helpful product descriptions and images. Ensure that important information—contact details or prices—is easy to find.

Many layout artists are fond of carousels and large hero images. However, research suggests that users often perceive the content in a carousel as unimportant. What’s worse, if the carousel is animated, they tend to mistake it for an ad and scroll away6. If you can, avoid using carousels, and place the links to your main tasks directly into a static hero image rather than below it. If you must use a carousel, check out these recommendations from NNGroup.

Mistake 10: Not making your text scannable

Most users don’t read the text on your website, they scan it. As usability expert Steve Krug wrote in his book Don’t Make Me Think, imagine your website as a billboard on the highway, where people zoom by in a flash. If you want to get people to stay and engage with your content, make sure that it’s easy for them to skim through quickly. Break up paragraphs into small sections, reduce line length, and use headings and subheadings. Keep in mind that using bold font excessively can make it difficult to scan.

Mistake 11: Putting valuable content solely in graphics

While visuals can be engaging, remember that not all users can access or fully grasp information presented in this format. By providing a balance of text and visuals, you can ensure that your content is accessible to a wider audience and effectively conveys your message. So, consider incorporating descriptive text alongside your graphics to enhance the overall user experience.

Mistake 12: Not testing for contrast and legibility

High contrast is important for everyone, but more so for users who are visually impaired. Not providing enough contrast between text and background makes it difficult to read the content on your website. Additionally, small font sizes and complex fonts can also reduce legibility and should be avoided. Keep your font to at least 17 px, and test your colour contrasts with tools like the WCAG Color Contrast Checker.

Unfortunately, many people will struggle to read the small text on this City website or at the very least find it frustrating:

Mistake 13: Using complicated language

Using complex and confusing words can make it hard for visitors to understand your message. It’s important to communicate clearly and simply. Avoid using jargon and unnecessary words when expressing your ideas.

Mistake 14: Using too many animations

Moving elements may grab attention, but too much movement on a page is distracting. Aim to include only animations that are necessary for users to understand the interface and make sure they don’t detract from the content. Also, be mindful of how long each animation lasts, and consider adding controls to slow down or pause it if needed. Personally, I rarely use animations.

Mistake 15: Clutter

A cluttered design can overwhelm users and make it challenging to focus on essential content. Keep your layout clean, simple, and organized. Use white space to separate design elements and make your site look less cluttered. Avoid overcrowding the home page with excessive content. To enhance user experience, steer clear of ads and pop-ups.

Mistake 16: Not testing your website on mobile

You’re probably editing your website on a laptop or desktop computer. Don’t forget to check how it looks on mobile too! Up to 55% of your website traffic probably comes from mobile devices. Ensure that all content is responsive and fits the device screen. Test your website on different devices and browsers to make sure it looks uniform across different systems.

Mistake 17: Not giving enough importance to website speed and performance

A slow-loading website can frustrate visitors and drive them away from your site. It can also negatively impact search engine rankings and result in lost opportunities for conversions and sales. Therefore, it is crucial to ensure that your website is optimized for speed by implementing techniques such as image compression, caching, and minimizing server requests. Choose your web host, your theme, and plugins carefully.

Conclusion

In conclusion, it’s important to avoid these common website design mistakes to ensure a better user experience. Keep refining your design skills and stay open to feedback. After all, there’s always room for improvement.

References

  1. Whitenton, Kathryn. Centered Logos Hurt Website Navigation. NN/g. ↩︎
  2. Whitenton, Kathryn. Website Logo Placement for Maximum Brand Recall. NN/g. ↩︎
  3. Pernice, Kara. Budiu, Raluca. Hamburger Menus and Hidden Navigation Hurt UX Metrics. NN/g. ↩︎
  4. Schade, Amy. Supporting Mobile Navigation in Spite of a Hamburger Menu. NN/g. ↩︎
  5. Loranger, Hoa. Homepage Links Remain a Necessity. NN/g. ↩︎
  6. Pernice, Kara. Designing Effective Carousels for Websites and Mobile Apps. NN/g. ↩︎

Did you find this article interesting? Subscribe to our newsletter

Leave a comment