5 Examples of Bad Website Design and How to Do It Better

Dec 30, 2019 ·

6

min read

Jinny

Founder and CEO
Jinny is an entrepreneur who's lived, studied, and traveled around the world. Launched over 250 products; working closely with startups and Fortune 500 companies to meet their goals. International keynote speaker passionate about culture and community.

Founder and CEO

A quick look at what not to do! Review our examples of bad website design and to learn the differences between good and bad website designs. Brought to you by WANDR, ranked the top product strategy and UX design.

The design of a website directly affects the user experience. A poorly designed site is less likely to get visitors to complete an action, such as buying a product or joining a mailing list.

In fact, if the page loads slowly or is difficult to navigate, 95% of visitors will leave within seconds.

If you are not getting the results that you want from a webpage, such as increased conversions and decreased bounce rates, evaluate the design.

Here are a few mistakes we've caught on other websites. Try to avoid repeating any of these five examples of bad website design.

What Does Bad Website Design Look Like?

The average business owner may not understand the differences between good and bad web design, which is why a lot of websites end up with terrible and inefficient designs.

While design trends constantly change, there are basic components of a website that remain universal, including:

Easy to follow navigation
Clean layout
Compatibility
Industry-appropriate design

Users shouldn’t need to guess how to find a page within your website. Everything should be clearly organized, with simple menus and navigation features.

A clean layout is also recommended. If the page is crowded with information, graphics, and video, it takes longer to load and becomes harder to read.

Compatibility is less of a concern, as most sites now use responsive designs that conform to the size of the user’s screen. However, thorough testing is often needed to ensure that elements load properly on different devices.

The visual appearance of the website is a subjective detail, as everyone has their own tastes. Regardless, you need a design that is appropriate for the industry. For example, while flashy graphics may not work on a site for a funeral home, they may work on a site for a party rental store.

Keep this in mind as we review the worst website design mistakes.

1. Websites Without a Clear Message

One of the worst design mistakes that you can make is not providing a clear message related to the purpose of your website. Users should instantly know the name of the business and what they sell.

For example, when you first visit 3D Mailbox, it takes a few seconds to understand what you are looking at. It appears to be a webpage for some type of email software. It is hard to determine if the software is a game, screensaver, or email client.

The site CyberDsignClan is another example of a website without a clear message. You simply see a large graphic that reads, “skip intro.” After clicking on the page, the real homepage loads, which is just as confusing as 3D Mailbox.

Both sites lack a clear message. To learn more about the product, visitors need to scroll through the page or click on other links.

Everything that appears on the page before users need to scroll further is considered above the fold. We call this the "hero section." This is the area where the name of the business and some indication as to what they sell should be included. The top of the page should also offer some type of navigation.

Website visitors form opinions about the business within a split second. If users need to scroll through the page to find out what the company does, they will likely leave the page.

2. Too Many Elements Cluttering the Page

Besides a clear message, the site should have a clear layout. If the page is cluttered, it becomes hard to navigate, causing visitors to leave.

Arngren.net is a good example of bad design. This classified website contains listings thrown together with no structure. The listings are not divided into categories and they fit together like a jigsaw puzzle.

For another example, visit Lings Cars. The website is for used cars but has so many different elements, you may overlook the purpose of the site. The designer included at least half a dozen animated elements above the fold, making it incredibly hard to navigate the page.

It is possible to display a lot of content without cluttering the page. For a good web design example that features multiple products, look at Amazon or AliExpress. While both sites contain a never-ending scroll of products, they are organized in grids instead of being thrown together like a mosaic.

Other than cluttering the page with a hodgepodge of links, some sites are cluttered with pop-ups, floating ads, auto-loading videos, and other elements that distract visitors.

3. Pages with No Mobile Optimization

Most internet traffic in the US now comes from mobile devices, yet many websites are still built for desktop computers first. If the website is not optimized for mobile devices, most visitors will not get a good user experience.

Many sites now include responsive design, which allows the web page to adjust elements based on the screen width of the user’s device. The site may also hide elements, change fonts, or remove backgrounds when a smaller screen is detected.

These details allow the site to work on any device. While responsive designs are common, there are still many sites that are unreadable on mobile devices.

Almost all the examples already discussed do not have a responsive design. Deque University has an example of non-responsive web design.

If you are reading this in your web browser, try visiting the site and adjusting the width of the browser. As the browser window gets smaller, the page does not change its layout. The text becomes impossible to read without scrolling to the right.

If you want to see an example of responsive web design, visit almost any website owned by a major company, such as Nike or Microsoft.

4. Lack of Simple Navigation and Links

When users reach a site, they should have no problem browsing the menu and finding the information that they need. At the official website for the University of Advancing Technology, the top of the page is covered with a large animated display containing floating graphics.

The floating graphics are clickable links that are difficult to click and slow down the page load speed. Although this is extremely innovative, there are other creative ways to design a website without making it difficult to navigate. Instead of using those floating elements as links, the University of Advancing Technology should have focused on creating a menu that is easy to open and browse.

Lastly, there are many sites that include parallax scrolling and embedded video elements that do not overpower the page and limit its navigability.

5. Unreadable Text or Un-clickable Buttons

Due to the demands on the web browser, the menu on the previous site is almost unclickable. This is also a problem when sites are not optimized for mobile devices. When the elements do not adjust for the smaller screen, they may overlap or become too small to read.

Avoiding this problem is easy if you complete detailed testing before launching your website. Use emulators or software to emulate how your site appears on various mobile devices, including the latest smartphones and tablets.

How to Avoid Bad Design for Your Website

The examples discussed are relatively easy to avoid, now that you know what to look for. However, implementing the necessary changes may require technical expertise. At WANDR, you get the help of experienced UX consultants and designers that understand what it takes to create a better user experience.

If you want to ensure that your site does not contain any of the bad design examples discussed, consider working with professionals.