{"id":26318,"date":"2021-09-16T11:00:00","date_gmt":"2021-09-16T16:00:00","guid":{"rendered":"https:\/\/getflywheel.com\/?p=26318"},"modified":"2023-03-28T14:56:28","modified_gmt":"2023-03-28T19:56:28","slug":"lessons-famous-design-flaws","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/lessons-famous-design-flaws\/","title":{"rendered":"4 Lessons Learned from Famous Design Flaws"},"content":{"rendered":"\n

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<\/a> dedicated to it. We\u2019re just trained to think through intuitive solutions that are also visually appealing, so when we see something with room to improve, it sticks out.<\/p>\n\n\n\n

From broken buttons to flawed forms to annoying navigation patterns, poor design is all around us. While it can sometimes be amusing, it can also be very serious.<\/p>\n\n\n\n

But no matter what, there\u2019s always something you can learn from design mistakes so that you don\u2019t repeat them in the future. So let\u2019s dive into some famous design flaws you can take a lesson from!<\/p>\n\n\n\n

Lesson 1: User Testing is the Key to Creating Exceptional Experiences<\/h2>\n\n\n\n

A classic design \u201cflaw\u201d is known as a Norman door<\/a>. If you\u2019ve never heard of this, ask yourself: have you ever tried to pull a push door or push a pull door? Congratulations, you\u2019ve encountered a Norman door!<\/p>\n\n\n\n

The problem with these pesky doors is that the design leads your intuition astray. Either you don\u2019t know how to open the door at all or however you assume the door should be opened should really be the opposite.<\/p>\n\n\n\n

Not only are Norman doors extremely confusing and embarrassing to encounter (I never get them right on the first try!), but they\u2019re so common that they\u2019ve 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\u2019ve encountered at some point. <\/p>\n\n\n\n

Takeaways:<\/h3>\n\n\n\n

The lesson to learn here is that user experience and user testing are super important! If the people you\u2019re designing for don\u2019t understand how to use or navigate your design, what\u2019s the point?<\/p>\n\n\n\n

Especially for web design, your web UI is extremely important. Just because it\u2019s beautifully designed doesn\u2019t mean anybody will know where to find the information they need on your site, so you need to design it in a way that helps them know what to do next.<\/p>\n\n\n\n

The solution to \u201cchecking your work\u201d is simpler than you might think: do some usability testing to get feedback from someone in your target audience. Don\u2019t 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!<\/p>\n\n\n\n

Lesson 2: Safeguard Against Human Error<\/h2>\n\n\n\n
\"woman<\/figure>\n\n\n\n

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<\/a> that were sent early in 2018 are one example of this. The alert was triggered by pushing the wrong button<\/a>, which led many designers to question if better design could\u2019ve prevented it.<\/p>\n\n\n\n

Unless you happen to work for the guys that push the button, there\u2019s 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 \u201cthis is a drill\u201d and the \u201cthis is for real\u201d buttons were a little more unique or not available in the same menu, whole situation could\u2019ve been prevented.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Takeaways:<\/h3>\n\n\n\n

When has it ever been a bad idea to run a verification pop-up for important changes? I\u2019m just saying that if your database \u201cDELETE\u201d button doesn\u2019t have an \u201cAre you sure?\u201d screen, then I don\u2019t know how you\u2019ve lived with the uncertainty in your work.<\/p>\n\n\n\n

Even in the basics of coding, you start to learn how to proactively minimize human error where you can. That\u2019s why even simple preventative measures like setting proper permissions, having backups, or setting data types are of the utmost importance!<\/p>\n\n\n\n

Guarding against 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 \u201cAre you sure you want to leave?\u201d 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.<\/p>\n\n\n\n

Lesson 3: Typography Should not be an Afterthought<\/h2>\n\n\n\n
\"man<\/figure>\n\n\n\n

Remember the 2017 Oscars with the wrong winner of \u201cBest Picture?\u201d<\/a> Talk about a simple mistake that could have been avoided with a little hierarchy! <\/p>\n\n\n\n

While there are several factors that went into the false announcement, one change that certainly could\u2019ve helped create a little clarity was a better use of typography <\/a>on the card itself. Even though there isn\u2019t 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\u2014if the typography isn\u2019t 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 attributed to the wrong movie.<\/p>\n\n\n\n

Takeaways:<\/h3>\n\n\n\n

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 you’d like to impart. How can you make it stand out among the rest of the information? If someone were to just skim over the page, would he or she understand exactly what they need to know or what to do?<\/p>\n\n\n\n

In a similar manner, no one wants to visit your website only 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!<\/p>\n\n\n\n

Lesson 4: While you Might Know the Latest Design Trends, Your Users Might Not<\/h2>\n\n\n\n
\"woman<\/figure>\n\n\n\n

Whenever a new design trend pops up, it\u2019s exciting to try it out for yourself. Take ghost buttons<\/a>, for example. (And no, I\u2019m 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. <\/p>\n\n\n\n

These little buttons have caused quite the buzz for their appealing design<\/a>, but they can be misleading if poorly executed. Sometimes they look like just another design element on the page instead of interactive elements for users to click on.<\/p>\n\n\n\n

Takeaways:<\/h3>\n\n\n\n

When it comes to design, staying on top of the latest and greatest trends makes you look like you\u2019re in the know. Just because the cool kids are doing it, however, doesn\u2019t necessarily mean it\u2019s right for a site’s design. And we all know it\u2019s better to have a basic design that converts instead of a cool design that doesn\u2019t perform.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Another tip is to have a clear call to action. If your button just has a statement like \u201cNICE,\u201d that might not be a clear enough indication that it\u2019s a clickable button\u2014it may look more like a heading or decorative element. Using copy with a verb like \u201cLearn more\u201d or \u201cApply now\u201d is clearer.<\/p>\n\n\n\n

Lesson Summary<\/h2>\n\n\n\n

While design flaws are easy to notice, we all know that designers always have the best intentions. It\u2019s important to stay informed and learn from each other. One of the easiest ways to learn from design is to help a designer out\u2014a second pair of eyes never hurt a thing! <\/p>\n\n\n\n

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\u2019s an easy step to take to make your work more excellent.<\/p>\n\n\n\n

What did you take away from these design flaws? Are there any lessons you\u2019ve learned the hard way? Share your experiences with us in the comments!<\/p>\n","protected":false},"excerpt":{"rendered":"

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\u2019re just trained to think through intuitive solutions that are also visually appealing, so when we see something with room to improve, it…<\/span><\/span><\/p>\n","protected":false},"author":1,"featured_media":26322,"template":"","resource-topic":[1396],"resource-role":[1397],"resource-type":[916],"class_list":["post-26318","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\n4 Lessons Learned from Famous Design Flaws<\/title>\n<meta name=\"description\" content=\"Design flaws happen every day\u2014but some are more famous than others. The important thing, however, is what lessons you learn from them!\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"4 Lessons Learned from Famous Design Flaws\" \/>\n<meta property=\"og:description\" content=\"Design flaws happen every day\u2014but some are more famous than others. The important thing, however, is what lessons you learn from them!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/lessons-famous-design-flaws\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-28T19:56:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/05\/hero-technology-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1304\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/lessons-famous-design-flaws\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/lessons-famous-design-flaws\/\",\"name\":\"4 Lessons Learned from Famous Design Flaws\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2021-09-16T16:00:00+00:00\",\"dateModified\":\"2023-03-28T19:56:28+00:00\",\"description\":\"Design flaws happen every day\u2014but some are more famous than others. The important thing, however, is what lessons you learn from them!\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/lessons-famous-design-flaws\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/lessons-famous-design-flaws\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/lessons-famous-design-flaws\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"4 Lessons Learned from Famous Design Flaws\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"4 Lessons Learned from Famous Design Flaws","description":"Design flaws happen every day\u2014but some are more famous than others. The important thing, however, is what lessons you learn from them!","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"4 Lessons Learned from Famous Design Flaws","og_description":"Design flaws happen every day\u2014but some are more famous than others. The important thing, however, is what lessons you learn from them!","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/lessons-famous-design-flaws\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2023-03-28T19:56:28+00:00","og_image":[{"width":"1304","height":"500","url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/05\/hero-technology-1.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/lessons-famous-design-flaws\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/lessons-famous-design-flaws\/","name":"4 Lessons Learned from Famous Design Flaws","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2021-09-16T16:00:00+00:00","dateModified":"2023-03-28T19:56:28+00:00","description":"Design flaws happen every day\u2014but some are more famous than others. The important thing, however, is what lessons you learn from them!","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/lessons-famous-design-flaws\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/lessons-famous-design-flaws\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/lessons-famous-design-flaws\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"4 Lessons Learned from Famous Design Flaws"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/05\/hero-technology-1-303x116.jpg","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Designer","topic":"<strong>Topics:<\/strong> Design","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/26318","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/26322"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=26318"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=26318"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=26318"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=26318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}