Once you decide to put together a list of bad design examples, the temptation is just to throw in all the stuff that’s been annoying you for years. Designers feel real pain when they see bad web design. But the designers are also a bit nerds, so we couldn’t avoid a detailed explanation of why each particular example is not good.

As a professional UI/UX design agency, we prefer avoiding calling design “bad” or “ugly” by just looking at it. We need to know the context.

Stereotypes about bad design

When you are asked to think of an example of bad design, the first thing that comes to your mind might be something like this:

This is what our designer Dasha brought up as an example. In our context of a SaaS design agency, this design can be considered bad. But what do we really know about the objective, the audience, the context of this website? Not much. 

To be honest, we can’t read a single word in Chinese. What if the picture is a cult image? What if it is a postmodern irony? What if this website is about the history of bad web design? In such cases, the design would be rather efficient, meaningful, and serve the objective better than any of our designs would have served.

What’s more, “ugly” designs can become trendy and compete with those clean UIs, polished and perfectly usable. To learn more about the brutalist design and how it became fashionable, read our article UI/UX Trends: Balancing on the Dizzying Path Between Unique and Usable.

By the way, a website dedicated to bad web design really exists! Here is what it looks like:

The story of bad design could have been finished with this picture, but wait… We look at negative examples not just to laugh, but to learn something. That’s why we want to focus on the examples that are not that obviously-bad, but have some common flaws. That way we can learn from others’ mistakes and avoid making our own.

We often bring up the FANG products as examples to look up to, but nobody is perfect. In this case, we bring the Facebook dashboard as a negative example. Since most of us are so used to seeing it every day, looking at it with a fresh view is hard. Here is what a professional UI/UX designer (and amateur Facebook user) Kseniya sees in it:

“Facebook is very complicated and overloaded, both visually and navigationally. There are too many features and functions, some of them are even hard to understand. When there is so much unclear stuff, people don’t use most of these features, and even if they would like to, it is hard to find the thing that you would really need.”

This is the case when you have to fit in too many things at the same time and it results in the situation when different parts of the product are “living their own lives”.

These are some of the issues that are frustrating to the users:

• scrolling through the feed goes smooth only when you have at least 16Gb of computer memory
• photos and videos lose a lot in quality when uploaded
• the system of audio messages is very uncomfortable
• the search system is… well, unbearable
• the system of “unsending” messages is badly developed
• chat windows pop-up and clutter the screen, distracting and annoying (especially when you don’t want to answer them).

Have you noticed that we haven’t said anything about the visuals? UX designers often evaluate design based on user experience rather than anything else. There are so many cases when the user interface is beautiful, but the usability is not great: to find out how it happens, read our article Good UI, Bad UX or Not All That Glitters is Gold.

Designs that make us get lost

Sometimes we open the page and our eyes start wandering around the page: not because everything is so beautiful, but because we can’t find what we came here for: the “contact” button, gallery, or pricing page.

While page data might say that users spend more time on the website (which is good) user testing will reveal the truth: they spend this time trying to orientate and it doesn’t make them happier.

And here is an example of another common mistake that affects usability: a website where you have to scim over 10 options that look very similar to find the one you’re looking for.

Clear website structure and visual hierarchy are the main design principles that help users navigate with comfort.

Designs that make us squint

Texts on the websites have to be easy to read. Why don’t designers always follow this commandment? Why do we see (or rather don’t see) those small fonts in light grey so often?

There are two main reasons for that: first, designers need sharp eyesight for their work, so even if they need glasses, they would make sure they are at 100% precision, while many non-designers can live totally fine with their eyesight being at 70%. 

The difference is clear when they have to read that light grey text. Light color is good for establishing hierarchy and focus attention on the main, but it is overused a lot. Can you read the second line in the picture below?

Second reason is that professional designers’ screens are typically much bigger than the average. During the working process, designers see the interface bigger than users will see it. Designers might simply not realize that the text is hard to read. That is why user interviews are so important.

In some cases, unreadable text is a part of the design concept, but more commonly, it is just a design flaw. A website or app that serves a clear objective, needs to have a decent font size and high type/background contrast to be readable.

Design that doesn’t mind the spacing

To perceive the information well, humans need some free space around the important points. Designers often say that the white space is just as important as the rest of the page. It gives the eye some rest and allows to distribute the focus.

Using the right spacing between the objects is not as easy as it sounds. Many websites fail at this.

Not only do you have to make enough space, but also take care of not leaving too much space between the elements: for example, if the textbox is placed too far from the explanatory text, our brain doesn’t connect them into one group and thus the user gets confused.

In the example below, the spacing is not adjusted and the hierarchy is weak: almost all groups of text have the same size. Moreover, the CTA button is in the upper right corner, which is not the best place.

This reaction is based on the Gestalt principles, the habit of our brain to perceive the objects that are placed close as belonging to the same group. This is one of the basic psychology principles that is used in UX design.

Design that tries to fool us

Have you ever gone through a long process of online shopping to find out that there is something else added to the price that wasn’t clear before the checkout? This is a highly annoying trick that some website owners use to attract people with “lower” cost when it is not really that low.

Naturally, disappointed users won’t come back and from the point of most businesses, this is a losing strategy. However, the e-commerce shops that are targeting one-time buyers don’t care much about it.

And here is another example, more subtle: a checkout page that’s hiding the delivery part implying that people would skip to paying without checking different (potentially pricey) delivery options.

This one is more about user experience than visuals. But we noticed that the websites using it also tend to have less attractive designs: a coincidence?

To sum up

We can say that using the word “bad” regarding design is not really correct, but the reality stays the same: we judge websites and apps anyway for their design. Our brain needs less than a second to bring up a judgement, and way more time to rationalize on the topics of “bad” and “good”.

In the end, the important thing is  to be able to learn from both bad and good examples (and not to get upset when the design is not perfect).

So, now that you know how to make a bad website… Learn how to make a good website or app!

‍