15 Examples of Bad Website Design in 2021 [+ What They Got Wrong]

The internet has come a long way in terms of web design since the 90s. RememberApple in 1998? OrAmazon in 1999? Even looking back atYelp in 2005feels like stepping into a time machine.

While web design has improved immensely in the past decades, there are still good and bad websites online today. By “good” and “bad,” I don’t mean something subjective like pretty and ugly. A good website is user-centric. In other words, it makes it easy for people to navigate, find the answers they’re looking for, or complete an action (like making a purchase). A bad website is not user-centric. That might mean it’s cluttered, difficult to browse, has accessibility issues, or any number of things.

In this post, we’ll define what makes a website “bad” and look at some examples so you can avoid these mistakes in your own designs.

In other words, a bad website design makes it difficult for users to accomplish what they’re trying to accomplish, which might be learning about your product, signing up for a newsletter, making a purchase, or any number of other actions.

To get a better sense of what makes a website design “bad,” let’s take a look at some examples.

Bad Ecommerce Website Design

The main goal of anecommerce websiteis to generate sales. Websites that are difficult to navigate or overly complex will lead to people bouncing or abandoning their carts before they complete their purchase. These would be considered “bad” website designs. Let’s take at a look at some examples.

1.ZARA

What it got wrong:非常规的导航

Visiting ZARA’s website is sort of like flipping through a fancy editorial magazine, which is cool but makes it difficult to actually shop. Take a look at the homepage of its US site above, for example. The text is super small and the navigation menu is hidden behind ahamburger button, so it’s not immediately clear to users what to do next.

The user journey is difficult on ZARA’s mobile site as well. When clicking on the hamburger menu on mobile, an unconventional navigation menu is revealed. Notice, for example, there’s no “Clothing” option. Even the clearer options like “Shoes&Bags” are difficult to understand at a glance because the spaces have been removed. For users that do forge ahead, they’ll find no breadcrumbs or sort options to help them browse. As a result of this poor navigation, users might bounce to a more traditional ecommerce site instead of guessing where to click next.

2.Wayfair

What it got wrong: Lack of visual hierarchy

Landing on Wayfair’s homepage might also leave users feeling paralyzed with indecision. While it felt like Zara’s homepage didn’t offer enough choices, Wayfair’s offers too many. The main problem: lack of visual hierarchy.Visual hierarchyis a way of arranging and organizing website elements so that visitors naturally gravitate toward the most important elements first. The goal is to lead visitors to complete a desired action.

The problem on Wayfair’s homepage is that almost every element is the same size and color and has similar copy and icons. So users are being told to shop home improvement items, cookware, shelves and cabinets, workspace, stove and oven ranges,andchandeliers at the same time. Rather than decide where to click first, some users might just leave the site.

3.eBay

What it got wrong: Complex product pages

When buying from an online marketplace like eBay, you want to make an informed decision. In an attempt to provide as much information as possible on its product pages, eBay is in danger of causinginformation overload. In the screenshot above you see the item’s name, price, condition, quantity available, and number already sold as well as shipping, payment, and return information — and that’s just above the fold. There’s another toggled section with more description and information on shipping and payments when you scroll.

You’re also presented with several options at once. There’s CTAs encouraging you to buy the item now, add it to your cart, or save it to your watchlist. But then there’s smaller hyperlinked CTAs inviting you to sell an item if you have one, see feedback from buyers, check out the warranty, learn how to get a discount on the item, save this seller to your watchlist, visit the store, view similar items, and on and on. Presenting so much information and options to a user at once might cause them to get frustrated and bounce — or pick an option you don’t want like adding an item to their watchlist instead of buying it.

4.Lipton

What it got wrong: Low-res images

Incorporating images can make a website more informative, engaging, and memorable — but they have to behigh-resolution. Some of the images on Lipton’s website are fuzzy and take a long time to load, showing broken image links for multiple seconds before being replaced by the actual images. The visuals are also primarily stock images or pictures of the packaging of each tea —these visuals would be more powerful if they represented what makes Lipton tea and its drinkers unique.

Bad Movie Website Design

The purpose of a movie website is to inform visitors and possibly persuade them to purchase tickets or film rights. Websites that seem unprofessional, outdated, or hard to navigate might cause visitors to leave before getting the information they were looking for or making a purchase. These would be considered “bad” designs. Let’s take a look at some examples.

5.The Room - Official Movie Site

What it got wrong: Lack of credibility

CouldThe Room’s website be ironically bad? Maybe? Whatever the intent, it has several UX issues, many of which boil down to a lack of credibility.

The website is one very long homepage, and there’s no navigation menu to make it easier to browse or jump to a specific section you’re interested in.The items below the featured image look like navigation items, but if you click on any of them, they actually open up a new tab. Some are broken, and open up a blank tab. So your only choice is to exit the site, or scroll down the page. You’ll see a bunch of images, GIFs, and hard-to-read text as you scroll. The media and info is only somewhat related to the film and ultimately distract from the main goal of the site, which is to get consumers to buy rights to use the film. They also hurt the site’s credibility, making it less likely that users will provide their payment information.

6.IMDb

What it got wrong: Cluttered layout

IMDB has redesigned many of its web pages, like its homepage, for a much sleekeruser experience. But some of its pages still have the outdated design shown above, which has some UX pain points. With little whitespace and color, relatively small font, and lots of ads and other content, the layout is cluttered and doesn’t make it easy for visitors to accomplish their goal: finding out more about Scoot McNairy in this case.

There’s no easy way to navigate the page either. Say you wanted to learn about McNairy’s personal details, for example. You’d have no choice but to keep scrolling —past his photos, featured work, credits, and related videos —until you got to that section.

7.Fandango

What it got wrong: No clear CTAs

像Zara、Wayfair和讨论的其他网站above, Fandango lacks a clear path for users. The problem: there’s no clear CTAs. In fact, at first glance, it looks like the homepage has no CTAs. That’s because the few that exist above the fold do not stand. The two “Get Tickets” CTA buttons are placed in what appear to be ads, which areignored by users. Another CTA —to enter your location or a movie title — is hidden in the search bar of the navigation menu. The “See all Movies” CTA below the search bar has even less visibility because of its size and lack of color contrast.

Finally, the slider contains some implied CTAs to view the 2021 Summer Movie Preview, or a breakdown of a scene inCandyman, and so on. However, since they’re not worded as actions or placed in conventional button designs, they are also easily overlooked by the user.

Bad News Website Design

The primary goal of a news website is to get people to consume as much of your content as possible. The trick is to promote a variety of your content, without overwhelming or confusing the user. Let’s take a look at some examples that miss the mark.

8.Yahoo!

What it got wrong: Whitespace

Yahoo! has thousands of articles under dozens of categories to offer. But in an attempt to showcase this variety of content, its homepage can be overwhelming, especially to first-time visitors.

One problem iswhitespace. While there’s almost too much negative space above the fold (at least on desktop), there’s too little as you begin scrolling. This, combined with the small font size, affects the readability of the homepage. As a result, instead of browsing the different content on the site, users might decide to exit out and go to a different news site.

Bad Education Website Design

An educational website — like the university or school it represents — is designed to educate visitors and provide them with the resources they need. Therefore, a website that uses animations, colors, or other design elements in an unconventional way risks distracting attention from the content. This ultimately prevents it from accomplishing its goal of informing visitors. Let’s look at some examples that fall short of this goal.

9.Yale School of Art

What it got wrong: Inconsistency

作为一个艺术学校,耶鲁大学是有道理的of Art would want its website to make a bold impression. That means it could break some web design conventions — but it does so at the expense of user experience. While an animated background can add more personality and depth than a solid background, the speed and glitch effect of Yale’s distracts from the rest of its content. The inconsistent use of colors, fade effects, borders, and font styles (there’s uppercase, lowercase, italicized, bold, underlined, and normal font) is also distracting and confusing.

10.NYU

What it got wrong: Color

NYU’s homepage is made up of three major components — a navbar, a body section that has a unique grid layout, and a footer — and all of them are purple. Although they are slightly different shades of purple, there’s not much contrast or whitespace so it’s difficult to separate one section from another. This is confusing and makes navigating the site more difficult.

Also, since the grid layout has some images but is mostly made up of blocks with a solid background color and some text, it looks like the web page isn’t fully loaded. Some more images would help prevent this misconception and provide valuable context to readers.

11.University of Louisiana

What it got wrong: Complex drop-down navigation

The University of Louisiana has a lot of online resources to offer so it makes sense to have adrop-down navigation menu. But the design doesn’t provide a clean and readable list of items. The font is small, there’s not much spacing between items, and the menu color is very similar to the header background. When a user hovers over an option, the whole column changes to a slightly darker red instead of the individual option. As a result, the user will likely feel overwhelmed by the options presented instead of guided.

Bad Community Website Design

A community website is where people turn to get their news, find popular content and products, and just hangout. Ideally, this type of website should make it easy for readers to both browse casually and find exactly what they’re looking for, on any device. Let’s take a look at some community websites that fail to meet these requirements.

12.Craigslist

What it got wrong: Non-responsive design

Craigslist is notorious for its bad website design (although there are alsoproponents who defend the design). While it’s not pretty, it does allow users to browse, sell, search for something specific, and connect with each other. The major problem is that the site isn’tresponsive. So if you open up Craiglist on your desktop or laptop and try to resize the window, it will hide a bunch of the content. Its mobile site works well, but nowadays users expect to be able to access a website on nearly any device and screen size.

13.Hacker News

What it got wrong: Readability issues

Hacker News is the go-to source for tech coverage and breaking news related to cybersecurity. Although it’s a widely-read publication, it has some readability issues.

For example, each item in the list provides an action to upvote, sort by website, view the submitter’s profile, sort by the time it was posted, comment, or go to the story. But the small and muted color of the font and lack of whitespace, icons, and hover effects makes it hard to tell that these are available and separate actions. Some changes in typography, color, placement, and whitespace would vastly improve the readability and scannability of this site.

坏的艺术网站设计n

Ideally, art organizations have websites where patrons and supporters can find information about the latest events, purchase tickets, and make donations. The best arts websites provide all the information visitors might need about performances, staff, volunteering, and more — while keeping the layout sleek and simple so it’s intuitive for all users. Let’s take a look at a few websites that could improve their design.

14.New Century Chamber Orchestra

What it got wrong: Inconsistent branding

The New Century Chamber Orchestra has an awesome logo made up of three colors: pink, blue, and yellow. These colors are used throughout the site — but in different shades. For example, the headings, email opt-in form, and footer on the homepage are all different shades of blue (none of which match the blue in the logo). Across the site there are CTA buttons that are neon pink, yellow, and blue. Some of these choices seem inconsistent and unintentional, which can hurt the user experience and dilute the brand’s identity.

15.ODC/Dance

What it got wrong: Accessibility issues

ODC/Dance has some accessibility issues which might limit its ability to reach as wide an audience as possible. For example, a video autoplays on the homepage. While this is interactive and engaging, it should have controls that allow the user to pause or stop playback, according toWCAG guidelines.

The site also has somecolor accessibility issues. In the screenshot above, for example, some of the heading and CTA text isn’t visible against the image background. Since the navbar and banner at the bottom of the screen are somewhat transparent, the white text is also difficult to read. This might prevent some users from clicking on the CTAs or navigation links, or even staying on the site.

The Showcase of “Bad” Websites

The websites above are used as examples of “bad” website design because they fail to be user-centric in some way. Some have accessibility issues due to a lack of color contrast. Some overwhelm users with choices because of a cluttered layout or lack of visual hierarchy. Others user colors, whitespace, and images in an inconsistent or unintentional way. You can learn from these mistakes and avoid them in your own website designs in order to provide the best experience to your visitors.

Editor's note: This post was originally published in December 2018 and has been updated for comprehensiveness.