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 Studio, 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 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.
What do You Think Makes a Bad Website Design?
Let us know in the comments below.
Talk to us on LinkedIn, Instagram, Facebook, or Twitter.
Posts We Think You Will Enjoy
The Best Dashboard Examples of 2021
UX Methods & Trends to Follow in 2021
5 UX Strategy Tips No One is Talking About
UX Audits & the Secret to Stronger, Faster Sales
3 Cool Looking Websites that Make a “Boring” Business More Appealing
In this day and age, poor design is bad business.
Your online presence is your business card and first impression. Users are accustomed to great user experiences. Retention and conversion are immediately affected by the presentation, organization, and thoughtful execution of digital communication.
In person, it's abrupt to cut to the chase, but in design, it's glorious. Not only will great design boost ethos and communicate brand authority, but ultimately catalyze long term business growth.
Great read, cheers!
Fred, I love your thoughts! Thanks for sharing.
Especially love: "Your online presence is your business card and first impression."
This could not be more true and I'm so glad companies are starting to realize this!
Bad, indeed, is easier to produce than good quality. So, as written in your article, in order to produce GOOD UX/UI or website design, it requires TIME + MONEY.
The best choice is to seek a great & experienced company. There are so many "digital agencies" pretending to do UX or UI design, but the result is not always reaching expectations.
I couldn't agree more, Stephane.
When it requires the two things MANY of us feel we don't have enough of–time and money–unfortunately, many companies fall into the trap of not seeing the importance of a highly specialized team to create what they are looking for.
Great Read, thank you
Bad Website Examples
Penny Juice – bad design examples.
Blinkee website – bad design example.
Arngren website.
Great Dreams bad designed website.
Pacific Northwest X-Ray Inc.
Suzanne Collins' books website.
Bavarian Brathouse ugly web design example.
Bella De Soto's ugly website design example.
Thank you for these wonderful tips. And can you please list out the best web designing tips for 2021? That would be quite useful. Again thanks for the wonderful content.
Hello, This blog is very helpful!
Thanks for posting.
Best information! Thank you for sharing with us
I just couldn't leave your website before telling you that I truly enjoyed the top quality info you present to your visitors? Will be back again frequently to check up on new posts.