As designers, we can point out brilliant design in a second and poor design in a half-second. In fact, bad design is so noticeable that there are whole subreddits dedicated to it. We’re just trained to think through intuitive solutions that are also visually appealing, so when we see something with room to improve, it sticks out.
From broken buttons to flawed forms to annoying navigation patterns, poor design is all around us. While it can sometimes be hilarious, it can also be very serious.
But no matter what, there’s always something you can learn from design mistakes so that you don’t repeat them in the future. So let’s dive into some famous design flaws you can take a lesson from!
Lesson 1: User testing is the key to creating exceptional experiences
A classic design “flaw” is known as a Norman door. If you’ve never heard of this, ask yourself: have you ever tried to pull a push door or push a pull door? Congratulations, you’ve encountered a Norman door!
The problem with these pesky doors is that the design leads your intuition astray. Either you don’t know how to open the door at all or however you assume the door should be opened should really be the opposite.
Not only are Norman doors extremely confusing and embarrassing to encounter (I never get them right on the first try!), but they’re so common that they’ve become a widely-known phenomenon. You would think that would result in a better solution and design, yet this continues to be a problem almost everyone would say they’ve encountered at some point.
The lesson to learn here is that user experience and user testing are super important! If the people you’re designing for don’t understand how to use or navigate your design, what’s the point?
Especially for web design, your web UI is extremely important. Just because it’s beautifully designed doesn’t mean anybody will know where to find the information they need on the site. You need to design it in a way that helps them know what to do next.
The solution to “checking your work” is simpler than you might think: do some usability testing and get some feedback from someone in your target audience. Don’t prompt them with too much information; just watch and see how they navigate your site to get a better sense of how they expect to use it. Let them ask questions, and ask questions for yourself!
Lesson 2: Safeguard against human error
No matter how well something is designed, at the end of the day, people make mistakes. We select the wrong things, click the wrong keys, and press the wrong buttons. The question then becomes: Can design help us overcome human error? The Hawaii missile alerts that were sent early in 2018 are one example of this. The alert was triggered by pushing the wrong button, which led many designers to question if better design could’ve prevented it.
Unless you happen to work for the guys that push the button, there’s really no certainty around how that exact process works. People started asking some important questions, however, and brainstorming ways that design can help create safeguards against human error. For example, maybe if the “this is a drill” and the “this is for real” buttons were a little more unique or not available in the same menu, whole situation could’ve been prevented.
This event was a big shock to the world in how designing to prevent human error is of the utmost importance. Even on little things like online purchases, a small human error can cause big problems for payments and your business. Like they say, a good defense is the best offense.
When has it ever been a bad idea to run a verification pop-up for important changes? I’m just saying that if your database “DELETE” button doesn’t have an “Are you sure?” screen, then I don’t know how you’ve lived with the uncertainty in your work.
Even in the basics of coding, you start to learn how to proactively minimize human error where you can. That’s why even the simplest preventative measures like setting proper permissions, having backups, or setting data types are of the utmost importance!
Guarding human error is also super important to your site users. Consider this: maybe you have a long form that your users fill out for your services. Are there incomplete errors that pop up after they hit submit? Is there an “Are you sure you want to leave?” warning if they accidentally close in the middle of making a purchase? These are simple things to do to help your clients have the best experience and save yourself potential headaches in the future.
Lesson 3: Typography should not be an afterthought
Remember the 2017 Oscars with the wrong winner of “Best Picture?” Talk about a simple mistake that could have been avoided with a little hierarchy!
While there are several factors that went into the false announcement, one change that certainly could’ve helped create a little clarity was a better use of typography on the card itself. Even though there isn’t much information, it needs to be displayed in a way that quickly makes sense for users. It goes back to the struggle of human error – if the typography isn’t strong enough to clearly create a sense of hierarchy, users are left to guess the order of information. And if they guess wrong, mistakes happen, and awards are given to the wrong movie.
Organizing the information you need and using basic design principles is always a great start to any project. Get your point across, and think about the main takeaway or call to action. How can you make it stand out among the other clouds of information? If someone were to just skim over the page, would he or she know exactly what they need to know or what to do?
In a similar manner, no one wants to stumble onto your website just to search and search for the information they need. Sometimes the easiest solution to this confusion is simple and clean design. That way you avoid redundancy or hidden information and everyone can find what they need!
Lesson 4: While you might know the latest design trends, your users might not
Whenever a new design trend pops up, it’s exciting to try it out for yourself. Take ghost buttons, for example. (And no, I’m not talking about a button shaped like a ghost.) A ghost button is usually lightly outlined with a similarly-colored (if not a transparent) background and sits on a page seamlessly without drawing too much attention.
These little buttons have caused quite the buzz for their appealing design, but they can be misleading if poorly executed. Sometimes they look more like just another design element on the page and less like an interactive element for users to click on.
When it comes to design, staying on top of the latest and greatest trends makes you look like you’re in the know.Just because the cool kids are doing it, however, doesn’t necessarily mean it’s right for you and your site design! And we all know it’s better to have a basic design that converts instead of a cool design that doesn’t perform.
A big part of this is making sure your buttons stand out. If you have a rectangle hairline on a button that sits on a page full of other rectangular shapes, then chances are it might not stand out as much as you may think.
Another tip is to have a clear call to action. If your button just has a statement like “NICE,” that might not be a clear indicator that it’s a clickable button and may look more like a heading. Using copy with a verb like “Learn more” or “Apply now” is more clear.
While design flaws are easy to notice, we all know that designers always have the best intentions. It’s important to stay informed and learn from each other. One of the easiest ways to learn from design is to help a designer out – a second pair of eyes never hurt a thing! When looking critically at your own design work, try to think through it from the mind of a user. Ask yourself, is this intuitive? Is this simple yet informative? Is there anyone I could ask to look at this work? Looking critically at your own design may be tough at times, but it’s an easy step to take to make your work – and you as a designer – more excellent.
What did you take away from these design flaws? Are there any lessons you’ve learned the hard way? Share your experiences with us in the comments!
Free download: “Design matters” desktop background
One of our core values at Flywheel is “We believe design matters.” In that spirit, we’ve made a free desktop background sharing that message! Download it when you subscribe to Layout.