Users are much more annoyed with bad usability and bad website layouts than with outdated design. When you don’t know how to navigate a bad UX website and waste a lot of time on usual tasks, you become irritated and leave. In this case, not only the look of the resource is important, but also the logic of its structure. The latter is actually the focus of this overview of badly designed websites. Here we collected web resources which have no or very poor structure and some unresponsive website examples.
What to look at if they don’t seem really ugly or uncomfortable?
We want to stress right away that this overview of awful websites isn’t about tastes. We won’t define winners or talk about our personal preferences.
Here you will only find objective facts about why some websites are appealing and user-friendly while others repel visitors. Nothing but real good and bad website examples.
What are the main problems with poorly made websites
Before discussing examples of websites with bad accessibility, usability, and design, let’s talk about the reasons behind shitty websites. All worst-looking websites have something in common, like bad UI website design, unmatching colors, and other bad webs mistakes listed here.
- Poorly constructed websites don’t follow the 4-second rule. Bad sites take four or more seconds to load, which harms the user experience and spoils the overall impressions.
- Terrible websites have too many contrasting colors. Bad color combinations can hurt users’ eyes and result in non-user-friendly websites. Websites with bad color schemes turn off customers instead of encouraging them to continue navigation.
- Crappy websites don’t get updates. Even if you had the best web resource at the end of the 2010s, it doesn’t mean it looks good now. Design rules continuously change, and you need to follow them.
- Too large or small fonts distract users. Bad typography websites have too many different fonts or are difficult to read. Hence, they also belong to websites that need improvement.
- Overly sophisticated websites are complicated websites. A bad homepage means users see lots of animation but don’t know what to do next. You should keep the balance between design standards and innovation to avoid the title of the worst website design ever.
- Excessive elements on one page look cluttered. A messy website has too many batters, ads, buttons, pictures, and other design elements. These are confusing websites that slow down navigation and cause high bounce rates.
Now that you know the main characteristics of horrible websites, it’s time to view some bad websites to redesign. Below are examples of unorganized websites, bad contrast websites, cluttered website examples, and other common design mistakes.
These are not the ugliest websites, but they definitely need profound changes. Here are twenty bad websites to go on.
Designers deliberately created the Big Ugly Website to show all the horrors of obsolete design and lame websites. This is an eloquent example for those who believe that the rest of web resources aren’t ugly and inconvenient enough to be included in this overview. You will never find the navigation here whereas large and useful animations, unappealing fonts, underlined text, and banners are everywhere. To cut a long story short, this website is just a mess.
This is one of the most visited websites in the world. Yet it doesn’t have any pictures, logos, or banners. It consists solely of links users can follow to check the necessary location-based information and complete various actions. The design and usability of the resource haven’t changed much since 1995 but this doesn’t affect its current popularity among users. The link-based structure is the only thing that may irritate users, but actually, it is the key secret of the lasting success of Craigslist.
This example of ineffective websites scares you with its fonts, poorly selected color scheme, and abundance of animated images. Everything moves, and you can’t help but become annoyed. At the same time, there is absolutely no segmentation of products on the main page. Such blocks as New Arrivals, Top Sales, and Promo Offers are also missing. Moreover, a slider doesn’t have functional buttons and is only used as a decoration. The buttons on product cards melt into the background and don’t motivate users to take action.
The World’s Worst Website – that’s the name of a pet project of designers who decided to point out the main design mistakes to website owners and creators around the world. Obviously, everything is exaggerated here, and you won’t come across similar websites. This page collects all possible and impossible mistakes in one place which is really helpful. The combination of conflicting colors, incompatible fonts, unformatted and unstructured content, underlined links – this isn’t the full list of things that make this website the worst in the world. Not to mention a navigation menu in the middle of the page and primitive animations of different size blinking all over the page!
After landing on such a website, it’s hard to understand whether its design was chosen intentionally or this is nothing but a fiasco. We will hope that the website owners just wanted to recreate the atmosphere of the 00’s. The colors, textures, animations, and fonts are overly dissonant. Users are overwhelmed with numerous banners, videos, and links both in the sidebar and on the very page. There is absolutely no logic behind the location of common elements. For example, the icons of social media are in the middle of the main page, there are lots of empty space between the content and footer, whereas the header is overloaded with graphic and textual information.
It is possible to say that this resource is quite original if to look only at a pixelated animation. Nevertheless, when you land on such a website, you are totally at a loss. Nothing tells about the purpose of the resource or its usefulness for visitors. The content is limited to the menu, full-screen animation, and News section. It would be nice at least to know what the news is about because no one is going to read them just for fun. In addition, there are no buttons and content blocks, including even contacts. No information about the purpose or location, no explanations…CIA would probably have a similar website.
The iconic brand of luxury champagne also has flaws and a wrong website design. To be more precise, not the product itself (which is adored for centuries) but the website that promotes the vintage beverages Dom Pérignon. This web resource has a stylish and elegant design, yet the main page only tells us about the face and creative director of the company, Lenny Kravitz. To check the information about vintage wines, users have to indicate their age and location. A key mistake is a form that provides access to a part of website content. The general information about the champagne is available without the age confirmation, Yet it is very unlikely that after learning about the brand, users will return to the main page to fill the mandatory form that gives access to products. This immensely complicates the user path.
Yale University School of Art
Expectation – a creative and convenient website of the Yale University School of Art. Reality – a weird resource in the style of 00’s. The content has absolutely no structure, and in addition, the footer, header, and sidebar are poorly designed. There are also lots of blinking animations, underlined links, strange pictures, and low-quality photos. The site did not use post production services for the photos. Maybe, true artists will find this resource quite original in terms of an artistic approach, but its usability is extremely far from perfect.
One of the leading US manufacturers of juice organized the navigation and took care of usability, but absolutely forgot about colors. The color scheme is very unpleasant to look at. Sharp incompatible colors irritate more than the Comic Sans typeface, underlined links, and overloaded sidebar.
This news website that just needs to be user-friendly, in reality, looks like a scary reminder from the past. Its header, footer, and sidebar totally disobey the rules of usability. The unreadable text, which is key for the promotion of any website, repels users. Underlined links, low-quality photos, sidebar menu…this isn’t the extensive list of reasons why this design is disastrous.
At first sight, this is quite a comfortable site with a menu on the main page and contacts in the footer. Yet it has a weird and irritating element – a flash video. It takes the most of the page and has no message. The video does nothing but slows the loading. As a result, it’s almost impossible to browse this website from mobile.
Let’s check what we have here. Flying butterflies, blue text on a blue background, typefaces that totally don’t match, and an antique bust. It hard to see how these elements are related to a spa center but designers, of course, know better. You may do your best to like the look of this website, but its usability will decisively kill your effort. For example, the website of Google doesn’t have such a design. Nevertheless, it remains a paragon of minimalism and ease-of-use.
This website can tell you about the best restaurants in San Diego. Yet the page definitely deserves a more appealing and convenient design. The first thing that attracts your attention is a poorly thought-out structure. Except for two types of menu, a slider, and a map, there is practically nothing useful on the main page. The map has been moved to a sidebar, which is pretty unusual, and the fonts don’t match the design. In addition, a header absolutely violates the rules of usability. It’s just filled with some text, and that’s that.
This page looks really outdated and inconvenient. Users feel this from the first moment they see it and most probably will opt for another water delivery service. The main page is overloaded with information and doesn’t have a clear structure. In addition, the quality of images and photos is really bad which will quickly repel any potential customer. Most importantly, Order buttons that could generate more sales are missing, so visitors have to make some extra effort to place an order.
What do you expect to see on a website that sells cupcakes? Usually, such websites are full of nice images, bright colors, and vivid design elements that lure users into buying some extra sweets. However, the owners of this website have decided to neglect the opportunity to attract new customers through their web resource. The main page of Toronto Cupcake is too plain and simple. it doesn’t contain any useful information about the company. The text in a footer is too small to read and in addition to that, there is a huge blank space at the bottom of the page. Users will definitely be irritated with the navigation of the website and the low quality of images. If Toronto Cupcake wants to make their website really effective, they must definitely improve its design and usability.
This website was already redesigned. Yet actually, this didn’t improve its look and usability. It has no information about the services or company and nothing about the advantages and characteristics of products. Only its creators can probably understand what is the point of splitting a menu with a stock photo, highlighting popular tags, and creating an additional catalog without a proper footer and header.
Take a look at the website of the Polish household fuel manufacturer. The design and usability are literally hellish. So a little devil grilling a sausage is very to the point here. A navigation menu at the top and another one under a strange picture, three links of different colors, and even an animated logo don’t really save this website.
This design isn’t the worst case, but we included it in this list because of its bad usability. When the main page loads longer than 40 seconds, this indicates obvious technical problems that inevitably affect the user experience. Lots of animations, numerous high-resolution photos, and an outdated programming approach are the key reasons for various problems this website has. Despite all this graphic splendor, the main page doesn’t include the necessary information. A well-thought-out navigation menu is probably its only advantage.
This website really amazes with its look. When it comes to web design, cinematographic elements are a costly (and hence, rare) affair. Unfortunately, the abundance of high-quality graphics slows down the loading, and users have to wait to see the content of the page. Bad download speed is a reason why users often refuse from further browsing. So it turns out that the use of expressive cinematographic elements doesn’t really help.
Websites with perfect design and usability don’t exist. Pages of corporate giants and small companies are equally prone to have their flaws. The thing is that everyone has a different understanding of comfort. There are websites with an outdated design but clear usability which are popular and loved all over the world. There are also those that use costly graphics and still irritate users.
Here is the key rule: ease-of-use first, aesthetics second. We use many obsolete websites every day without even noticing this because they are very convenient.
What makes a bad website?
Here is the key rule: ease-of-use first, aesthetics second. Websites could even have perfect design but still be unconvenient for users. The thing is that everyone has a different understanding of comfort. There are websites with an outdated design but clear usability which are popular and loved all over the world. There are also those that use costly graphics and still irritate users.
What is website usability?
We like comfort in every detail. Even when it comes to online browsing. Yet in terms of websites, this comfort usually has another name – usability. Talking about “usability”, we mean the extent to which a certain interface is comfortable and clear for users.
Why is website usability important?
Users are much more annoyed with bad usability than with outdated design. When you don’t know how to navigate a website and waste a lot of time on usual tasks, you become irritated and leave. In this case, not only the look of the resource is important, but also the logic of its structure.