{"id":3006,"date":"2021-05-04T01:27:16","date_gmt":"2021-05-04T01:27:16","guid":{"rendered":"https:\/\/csdev.site\/creole_new\/?p=3006"},"modified":"2024-11-26T07:59:52","modified_gmt":"2024-11-26T07:59:52","slug":"8-most-common-ui-fails-2021","status":"publish","type":"post","link":"https:\/\/csdev.site\/creole_new\/8-most-common-ui-fails-2021\/","title":{"rendered":"8 Most Common UI Fails &#8211; 2023"},"content":{"rendered":"\n<p>With the world getting online and more than <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/websitesetup.org\/news\/how-many-websites-are-there\/\" target=\"_blank\" rel=\"noreferrer noopener\">576,000 websites made every single day<\/a>, how functional and user-friendly your brand\u2019s website\/web solution is made or breaks, has a huge impact on your sales. Discoverability has become a big important step for the success of any brand; and strong, usable and user-appealing UI designs have started becoming the differentiating factor enabling brands to get discovered.&nbsp;<\/p>\n\n\n\n<p>UI design is the final screen layout for your software development idea that a developer would need to start the <strong>development of the application<\/strong>. The UI design could also benefit you in case you want to show a clickable prototype of your application to your target audience.<\/p>\n\n\n\n<p>One of the hilarious examples that always come to my mind while thinking about poor UI is the image below, which was taken at a New Jersey station:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2021\/05\/ui-fails-5.jpg\" alt=\"nj-train-station-poor-ux-design\" class=\"wp-image-3011\"\/><figcaption class=\"wp-element-caption\"> <em>Source: <a href=\"https:\/\/twitter.com\/mihaiocoman\/status\/676487911735431169\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Twitter<\/a><\/em> <\/figcaption><\/figure>\n\n\n\n<p>It seems that the UI for this machine was drafted without even thinking about the actual physical machine where it will be used. The numbers on the screen and the buttons completely throw the user off, making the usability of the machine an absolute pain.<\/p>\n\n\n\n<p>People at large, still use UI and UX interchangeably and that itself is a paragon of how misunderstood this whole branch of the project life cycle is, giving one too many chances for brands to screw up the UX mainly by using a poor UI. What differentiates a good UI from a bad one? We\u2019re here to elucidate that in brevity:<\/p>\n\n\n\n<p>UI design are the final screen layout that a developer would need to start the development of the application. The UI design could also benefit you in case you want to show a clickable prototype of your application to your target audience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Traits of a Good UI<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Intuitive<\/strong> &#8211; People from all walks of life should effectively be able to navigate through your web solution, without needing a guide. You know you\u2019ve already lost on the UI front when you have to email all your subscribers a new \u2018guide\u2019 on how to use your web solution after a major UI overhaul.<\/li>\n\n\n\n<li><strong>Gently Prodding<\/strong> &#8211; Your web solution exists for a purpose. Be it selling a physical product, getting people to subscribe to your services or willingly providing data, among a myriad of other business objectives that you have. Your UI needs to keep that as your North Star and be crafted in a way that gently guides your user into completing that sales journey.<\/li>\n\n\n\n<li><strong>Exhaustive User Testing <\/strong>&#8211; UI and UX professionals often tend to assume a lot of things. This could be a very swift way to have your product ready and shipped in unimaginably fast times, but more often than not, they fail completely. This is because the actual users of your web-based solutions are diverse, each having their own priorities and preconceptions on the working of it, which can result in them abandoning your application if it doesn\u2019t meet that. Hence, strong user research and testing such as A\/B testing is at the heart of good UI that gets adopted widely.\/li&gt;<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Traits of a Bad UI<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Difficult to Comprehend <\/strong>&#8211; Maybe you\u2019re trying to fit in a lot of things on a single page. Maybe you want to get on the trend bandwagon and want to try that hot new font and design style for your web solution that clearly doesn\u2019t go with it. A lot of such factors make your web solution incomprehensible, directly affecting the click rates and adoption of it and plummeting your sales.<\/li>\n\n\n\n<li><strong>Absence of a Target Audience <\/strong>&#8211; They say a building without a strong foundation won\u2019t stand. What if it doesn\u2019t have a foundation? It surely doesn\u2019t have a chance to stand on its own. Not doing proper research about the target audience and crafting your web solution around their needs is straight-up suicide for your web solution.<\/li>\n\n\n\n<li><strong>Inconsistent Design and Performance Issues<\/strong> &#8211; Your website is a journey, and you want people to feel they\u2019re walking on the same path when they visit each of your sub-pages\/screens. That\u2019s where consistency plays a big role in your UI. Coupled with that, maybe, to stand out of the crowd, you tend to use a lot of elements in your website making it sluggish and unusable, driving your users away.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Now that we have a bird&#8217;s eye view of some of the traits that differentiate the good UI from the bad, here are some of the most common UI fails that are seen in the wild:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">1. Too Much Text<\/h4>\n\n\n\n<p>You got an amazing business with a sprawling list of services across multiple domains, we get it. But does that mean you can overwhelm your visitors with huge blocks of text? According to a statistic shared by <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/www.wyliecomm.com\/2019\/06\/how-people-read-online\/#:~:text=Web%20visitors%20spent%20enough%20time,on%20the%20average%20web%20page.\" target=\"_blank\" rel=\"noreferrer noopener\">Nielsen<\/a>, during an average visit, web visitors spend time on a website enough to read only 28% of all the words on it. However, not all that time is spent on reading. This cuts down the percentage of words read to approximately 20%.&nbsp;<\/p>\n\n\n\n<p>What this statistic points to is the sad truth that only a very small percentage of outliers patiently read whatever you have to say on your web solution. This is the reason why websites are increasingly using images, videos, animations and micro-interactions to keep users engaged and increase click-through rates.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"608\" src=\"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-2.jpg\" alt=\"\" class=\"wp-image-15423\" srcset=\"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-2.jpg 800w, https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-2-300x228.jpg 300w, https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-2-768x584.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\"> <em>A website educating about welders, having a super text heavy interface<\/em> <\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">2. Text Heavy Auto Scrolling Carousels<\/h4>\n\n\n\n<p>Designers love carousels. And theoretically, why shouldn\u2019t they? Carousels allow fitting in a lot of information in a tight space on the website and have them cycle through as per a fixed time limit. However, this is the exact aspect that makes them less appealing, and more daunting and hence creating fewer interactions.<\/p>\n\n\n\n<p>According to a <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/www.nngroup.com\/articles\/auto-forwarding\/\" target=\"_blank\" rel=\"noreferrer noopener\">study done by Nielsen Norman Group<\/a>, \u2018Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility.\u2019 The test that they ran was showing Siemens&#8217; website and asked the question: \u201cDoes Siemens have any special deals on washing machines?\u201d The said information was on the first most prominent slide itself, but the users completely ignored that, unconsciously. This, along with other factors made them conclude that carousels are a bad idea, especially when incorporated into the hero section of a website.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"510\" src=\"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-1.jpg\" alt=\"\" class=\"wp-image-15424\" srcset=\"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-1.jpg 800w, https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-1-300x191.jpg 300w, https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-1-768x490.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\"> <em>Carousel section in Siemens\u2019 Website<\/em><\/figcaption><\/figure>\n\n\n\n<p>The factor that absolutely wrecks the usability of carousels is the fact that the user has no control over the timing of the carousels. Add some text to it and it\u2019s a nightmare for your users, trying to keep up their reading speed with the carousel change timing. If it\u2019s absolutely necessary to keep carousels in your website, the least you can do is keep it non-auto scrollable and give the slide change control to the user.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">3. Lack of Typographical Hierarchy<\/h4>\n\n\n\n<p>Text is no doubt one of the cornerstone types of content in your web solution. Considering that the websites from the 90s were only text, we\u2019ve come a long way from that and the expectations of users have morphed in these 30-odd years as well.&nbsp;<\/p>\n\n\n\n<p>If there is anything worse in a website than having too much content, it is this: Not having a proper typographical hierarchy. Text in your website should capture the attention of your users effectively, modifying factors such as the typeface, font, weight and placement of it to either grab the attention of your users the first thing or let it be the second thing they notice once they have their attention on your website.&nbsp;<\/p>\n\n\n\n<p>Shown below is a website with poor typography, not giving it proper textual hierarchy:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"446\" src=\"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-4.jpg\" alt=\"\" class=\"wp-image-15425\" srcset=\"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-4.jpg 800w, https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-4-300x167.jpg 300w, https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-4-768x428.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">4. Scroll Seizing<\/h4>\n\n\n\n<p>I\u2019m sure you\u2019ve come across websites wherein you\u2019re not able to scroll the way you are with normal websites. These websites, generally with the help of JavaScript, completely seize control of your scrolling actions as a means to stand apart from the crowd or have a \u2018smoother\u2019 scroll action. The classic use case of this style is by having something akin to vertical carousels, with each scroll taking you to a completely new section of the screen instead of scrolling through a set number of pixels on the screen.&nbsp;<\/p>\n\n\n\n<p>The problem with this implementation is that the user has no control over what they can see in the screen and the fundamental navigation ideologies that are deeply rooted in their minds through decades of technological evolution are gone for a toss. Considering a case wherein the user is unable to see a specific section of the screen either due to hardware issues or some accessory issues, the user will never be able to see the content in that part of the screen as a scroll would take them to a completely different screen, instead of the content moving up a few pixels.<\/p>\n\n\n\n<figure class=\"wp-block-video cs-blog-video\"><video height=\"1200\" style=\"aspect-ratio: 1600 \/ 1200;\" width=\"1600\" autoplay loop muted src=\"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/Curam_dribbble.mp4\"><\/video><\/figure>\n\n\n\n<p>This technique is \u2018controversial\u2019 because it\u2019s one of the techniques that big tech companies use at times as their flagship product\u2019s page, albeit with proper user research.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">5. Big Sticky Navigation Headers<\/h4>\n\n\n\n<p>On more and more websites, there are headers that don\u2019t move with the page and are fixed at their position at the top of the website. This, if implemented correctly, can be an anchor point for your website wherein the users can easily find key links to navigate across different key pages of your website, giving them a feel of training wheels for your website.<\/p>\n\n\n\n<p>However, more often than not, brands and companies treat the sticky header as blocks that should represent their brand. This makes the designer make the classic design mistake of keeping form over function in a desperate attempt to make the header reflect the brand. This generally results in a huge sticky navigation bar that covers a lot of precious screen real estate and since it is fixed, it feels more like a pest you can\u2019t get rid of, than a toolbox of quick and easily accessible tools.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"368\" src=\"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-9.jpg\" alt=\"\" class=\"wp-image-15427\" srcset=\"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-9.jpg 800w, https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-9-300x138.jpg 300w, https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-9-768x353.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\"> <em>Source: <a href=\"https:\/\/www.activecampaign.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">ActiveCampaign website<\/a><\/em><\/figcaption><\/figure>\n\n\n\n<p>Consider the ActiveCampaign website as shown in the image above. The sticky navigation bar takes up almost a fourth of the screen real estate, giving that much less space for the actual content present in the website.&nbsp;<\/p>\n\n\n\n<p>Another big mistake in the same lines is using the same navigation bar for both mobile and desktop sites. However, the frequency of coming across such websites is becoming increasingly rare. The classic solution for this is to simply use a hamburger icon to replace the menus of your navigation bar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"878\" src=\"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-8.jpg\" alt=\"\" class=\"wp-image-15428\" srcset=\"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-8.jpg 800w, https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-8-273x300.jpg 273w, https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-8-768x843.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\"> <em>ActiveCampaign using a hamburger <br>menu for mobile devices<\/em> <\/figcaption><\/figure>\n\n\n\n<p>One of the better ways a sticky navigation bar can be incorporated into your website is to either have its opacity a bit low so that the background bleeds through it or have a frosted glass look on it, similar to glassmorphism, which would allow a blurred version of the background to bleed through the navigation bar, giving the feeling that the navigation bar isn\u2019t as big as it is.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">6. Super Long Dropdowns<\/h4>\n\n\n\n<p>Onto the finer details of any website, dropdowns can be super convenient in neatly tucking away a couple of options of which only one will be selected. However, managing the content inside the drop-down menu can be a challenging task, especially when a lot of options are present inside the single drop-down menu. It can easily turn from a wonderfully organized closet to one wherein you push every item you own and never want to open it.&nbsp;<\/p>\n\n\n\n<p>A classic example of this is the Country drop-down, as shown in the screen below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"521\" src=\"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-7.jpg\" alt=\"\" class=\"wp-image-15429\" srcset=\"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-7.jpg 800w, https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-7-300x195.jpg 300w, https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-7-768x500.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>Some way to circumvent this is to either have the values in the drop-down arranged in sections based on the continent. Users can identify things by images much more quicker and easier than by text. So having the country flag icons next to the country text can be a huge plus as well. Alternatively, you could ask the continent in one drop-down and show only the relevant countries in the next drop-down. Sure, it will increase your form length by one more field, but your users will have a better time finding and filling it out rather than trying to find their country in a mile long drop-down list.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">7. Camouflaged CTA Buttons<\/h4>\n\n\n\n<p>From a business perspective, CTA buttons are the most important part of a website. It is what converts users\u2019 interest into hard sales, the main focus of your entire website. So it\u2019s only fitting that these buttons have the highest click-through rate and are strategically placed and designed to grab the attention of users and gently prod them to click it and get your sales going and business afloat.&nbsp;<\/p>\n\n\n\n<p>The most common mistake that designers tend to make with CTA buttons is poor contrast. CTA buttons having poor contrast directly affects their visibility of it, making them less grand and gaining fewer click-through rates.&nbsp;<\/p>\n\n\n\n<p>One such example is that of <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/www.twenty20.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Twenty20<\/a>, a stock photo-selling website\/app. Having CTA buttons matching the text colour can be a good idea in certain situations, but more often than not, it gets camouflaged with the text, not letting the CTA button stand out as it should.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"540\" src=\"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-6.jpg\" alt=\"\" class=\"wp-image-15430\" srcset=\"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-6.jpg 800w, https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-6-300x203.jpg 300w, https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-6-768x518.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\"> <em>Poor use of CTA buttons in the <a href=\"https:\/\/www.twenty20.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Twenty20 website<\/a><\/em> <\/figcaption><\/figure>\n\n\n\n<p>Another such example is the action buttons which were used by TeamWeek, recently rebranded to Toggl. Soft pastels and fluorescent colours are all the rage right now. The cool mint green colour looks great on the overall UI of TeamWeek, however, it makes the text on the \u2018Save &amp; Close&#8217; button hard to read. This could also be put in the pile of form-over-function mistakes that designers tend to make.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"507\" src=\"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-11.jpg\" alt=\"\" class=\"wp-image-15431\" srcset=\"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-11.jpg 800w, https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-11-300x190.jpg 300w, https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-11-768x487.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\"> <em>Source: <a href=\"https:\/\/twitter.com\/Nazermatt\/status\/951052784534564864\/photo\/1\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Twitter<\/a><\/em> <\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">8. Poor Confirmation Messages<\/h4>\n\n\n\n<p>What started as a trend to introduce subtle humour into websites; content writers and designers started to introduce \u2018witty\u2019 lines in their confirmation popup, which would put the user who is about to click on the button which would take them to a positive sales flow on a higher pedestal than the user who will be clicking on the link\/button that would take them to the negative sales flow. Consider the example mentioned below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"418\" src=\"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-3.jpg\" alt=\"\" class=\"wp-image-15432\" srcset=\"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-3.jpg 800w, https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-3-300x157.jpg 300w, https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-3-768x401.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>Intended to give a funny twist to your website\u2019s copywriting, demeaning humour can easily be perceived as rude by your users, doing the exact opposite thing of what you desire: driving them off of your website. It\u2019s almost impossible to nail such lines unless your brand identity relies heavily on that and your user base already resonates with that.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/book.creolestudios.com\/#\/creolestudios?utm_source=30+mins+pink&amp;utm_medium=blog+cta&amp;utm_campaign=Blog+CTA&amp;utm_id=Blog+CTA#\/customer\/creolestudios\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"250\" src=\"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/Try_our_free_30_mins_consultation-2.webp\" alt=\"\" class=\"wp-image-14876\" srcset=\"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/Try_our_free_30_mins_consultation-2.webp 800w, https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/Try_our_free_30_mins_consultation-2-300x94.webp 300w, https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/Try_our_free_30_mins_consultation-2-768x240.webp 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Bonus Section!<\/h2>\n\n\n\n<p>UI design should be an equal balance of aesthetics and business goals. That said, here\u2019s an example which looks like it is a UI\/UX failure but actually are driven by strong unconventional business decisions:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Netflix AutoPlay Feature<\/h4>\n\n\n\n<p>The autoPlay feature was always frowned upon in the tech industry. With Facebook and Instagram introducing it in their UI, they made sure that the videos were muted by default. Nobody likes sound blasting out their speakers when they\u2019re not actively attempting to do so!&nbsp;<\/p>\n\n\n\n<p>Netflix took a different approach when they autoplay the title when users hover over them. This seemingly bad UX aspect actually does have an uncanny reason behind it. Netflix\u2019s target audience generally uses their services after a long day and uses them as a source of winding down. In these times, Netflix wanted not to bug people down with difficult-to-make choices, i.e. trying to decide which title to watch, by offering a short video preview of the title. Netflix aims to utilize the \u2018lack of motivation\u2019 at the end of the day of their users to serve them with auto-playing content of the carefully curated list of titles which eventually would increase the chances of users actually watching the title.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"424\" src=\"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-10.jpg\" alt=\"\" class=\"wp-image-15433\" srcset=\"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-10.jpg 800w, https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-10-300x159.jpg 300w, https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/05\/ui-fails-10-768x407.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\"> <em>Source: <a href=\"http:\/\/www.netflix.com\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Netflix<\/a><\/em> <\/figcaption><\/figure>\n\n\n\n<p>As is clear from the examples, UI design is a very delicate aspect of the project life cycle and that makes it easier to screw it up. However, as seen with the Netflix example, not all seemingly bad UI\/UX decisions are bad. At the end of the day, design rules are meant to be broken, but what stays as the guiding North Star is usability, a reflection of your brand image and exhaustive user research. What works for the top brands may or may not work for you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>With the world getting online and more than 576,000 websites made every single day, how functional and user-friendly your brand\u2019s website\/web solution is made or breaks, has a huge impact on your sales. Discoverability has become a big important step for the success of any brand; and strong, usable and user-appealing UI designs have started [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"class_list":["post-3006","post","type-post","status-publish","format-standard","hentry","cs-tags-ui-ux"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>8 Most Common UI Fails - 2023 | Creole Studios<\/title>\n<meta name=\"description\" content=\"If you are planning to design an app or a website, make sure you&#039;re aware of these 8 Most Common UI Fails in 2023. Read this blog post from Creole Studios.\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"8 Most Common UI Fails - 2023 | Creole Studios\" \/>\n<meta property=\"og:description\" content=\"If you are planning to design an app or a website, make sure you&#039;re aware of these 8 Most Common UI Fails in 2023. Read this blog post from Creole Studios.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/csdev.site\/creole_new\/8-most-common-ui-fails-2021\/\" \/>\n<meta property=\"og:site_name\" content=\"Creole Studios\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-04T01:27:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-26T07:59:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2021\/05\/ui-fails-5.jpg\" \/>\n<meta name=\"author\" content=\"Bhargav Bhanderi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bhargav Bhanderi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"8 Most Common UI Fails - 2023 | Creole Studios","description":"If you are planning to design an app or a website, make sure you're aware of these 8 Most Common UI Fails in 2023. Read this blog post from Creole Studios.","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"8 Most Common UI Fails - 2023 | Creole Studios","og_description":"If you are planning to design an app or a website, make sure you're aware of these 8 Most Common UI Fails in 2023. Read this blog post from Creole Studios.","og_url":"https:\/\/csdev.site\/creole_new\/8-most-common-ui-fails-2021\/","og_site_name":"Creole Studios","article_published_time":"2021-05-04T01:27:16+00:00","article_modified_time":"2024-11-26T07:59:52+00:00","og_image":[{"url":"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2021\/05\/ui-fails-5.jpg","type":"","width":"","height":""}],"author":"Bhargav Bhanderi","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Bhargav Bhanderi","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/csdev.site\/creole_new\/8-most-common-ui-fails-2021\/#article","isPartOf":{"@id":"https:\/\/csdev.site\/creole_new\/8-most-common-ui-fails-2021\/"},"author":{"name":"Bhargav Bhanderi","@id":"https:\/\/csdev.site\/creole_new\/#\/schema\/person\/1f3ef435348524eba8ef4f5fcf48f6e9"},"headline":"8 Most Common UI Fails &#8211; 2023","datePublished":"2021-05-04T01:27:16+00:00","dateModified":"2024-11-26T07:59:52+00:00","mainEntityOfPage":{"@id":"https:\/\/csdev.site\/creole_new\/8-most-common-ui-fails-2021\/"},"wordCount":2721,"commentCount":0,"publisher":{"@id":"https:\/\/csdev.site\/creole_new\/#organization"},"image":{"@id":"https:\/\/csdev.site\/creole_new\/8-most-common-ui-fails-2021\/#primaryimage"},"thumbnailUrl":"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2021\/05\/ui-fails-5.jpg","articleSection":["Web"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/csdev.site\/creole_new\/8-most-common-ui-fails-2021\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/csdev.site\/creole_new\/8-most-common-ui-fails-2021\/","url":"https:\/\/csdev.site\/creole_new\/8-most-common-ui-fails-2021\/","name":"8 Most Common UI Fails - 2023 | Creole Studios","isPartOf":{"@id":"https:\/\/csdev.site\/creole_new\/#website"},"primaryImageOfPage":{"@id":"https:\/\/csdev.site\/creole_new\/8-most-common-ui-fails-2021\/#primaryimage"},"image":{"@id":"https:\/\/csdev.site\/creole_new\/8-most-common-ui-fails-2021\/#primaryimage"},"thumbnailUrl":"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2021\/05\/ui-fails-5.jpg","datePublished":"2021-05-04T01:27:16+00:00","dateModified":"2024-11-26T07:59:52+00:00","description":"If you are planning to design an app or a website, make sure you're aware of these 8 Most Common UI Fails in 2023. Read this blog post from Creole Studios.","breadcrumb":{"@id":"https:\/\/csdev.site\/creole_new\/8-most-common-ui-fails-2021\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/csdev.site\/creole_new\/8-most-common-ui-fails-2021\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/csdev.site\/creole_new\/8-most-common-ui-fails-2021\/#primaryimage","url":"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2021\/05\/ui-fails-5.jpg","contentUrl":"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2021\/05\/ui-fails-5.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/csdev.site\/creole_new\/8-most-common-ui-fails-2021\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/csdev.site\/creole_new\/"},{"@type":"ListItem","position":2,"name":"8 Most Common UI Fails &#8211; 2023"}]},{"@type":"WebSite","@id":"https:\/\/csdev.site\/creole_new\/#website","url":"https:\/\/csdev.site\/creole_new\/","name":"Creole Studios","description":"Creole Studios","publisher":{"@id":"https:\/\/csdev.site\/creole_new\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/csdev.site\/creole_new\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/csdev.site\/creole_new\/#organization","name":"Creole Studios","url":"https:\/\/csdev.site\/creole_new\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/csdev.site\/creole_new\/#\/schema\/logo\/image\/","url":"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/04\/creole_smalllogo.webp","contentUrl":"https:\/\/csdev.site\/creole_new\/wp-content\/uploads\/2024\/04\/creole_smalllogo.webp","width":290,"height":158,"caption":"Creole Studios"},"image":{"@id":"https:\/\/csdev.site\/creole_new\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/csdev.site\/creole_new\/#\/schema\/person\/1f3ef435348524eba8ef4f5fcf48f6e9","name":"Bhargav Bhanderi","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/csdev.site\/creole_new\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/05d139e243efa60d7b7a92959fb314a6ad3fa1093d05856c34b9e3614e0bee8c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/05d139e243efa60d7b7a92959fb314a6ad3fa1093d05856c34b9e3614e0bee8c?s=96&d=mm&r=g","caption":"Bhargav Bhanderi"},"description":"Bhargav Bhanderi is a Director at Creole Studios, where he leads strategic initiatives across software development, cloud, and AI-driven solutions. With a strong focus on execution and business outcomes, he works closely with global clients to deliver scalable, high-impact digital products and engineering solutions.","sameAs":["https:\/\/www.linkedin.com\/in\/bhargav-bhanderi\/"]}]}},"_links":{"self":[{"href":"https:\/\/csdev.site\/creole_new\/wp-json\/wp\/v2\/posts\/3006","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/csdev.site\/creole_new\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/csdev.site\/creole_new\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/csdev.site\/creole_new\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/csdev.site\/creole_new\/wp-json\/wp\/v2\/comments?post=3006"}],"version-history":[{"count":14,"href":"https:\/\/csdev.site\/creole_new\/wp-json\/wp\/v2\/posts\/3006\/revisions"}],"predecessor-version":[{"id":17559,"href":"https:\/\/csdev.site\/creole_new\/wp-json\/wp\/v2\/posts\/3006\/revisions\/17559"}],"wp:attachment":[{"href":"https:\/\/csdev.site\/creole_new\/wp-json\/wp\/v2\/media?parent=3006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}