{"id":7253,"date":"2022-08-12T11:44:45","date_gmt":"2022-08-12T11:44:45","guid":{"rendered":"https:\/\/www.uxdesigninstitute.com\/blog\/?p=7253"},"modified":"2023-11-13T22:33:59","modified_gmt":"2023-11-13T22:33:59","slug":"good-ux-vs-bad-ux","status":"publish","type":"post","link":"https:\/\/www.uxdesigninstitute.com\/blog\/good-ux-vs-bad-ux\/","title":{"rendered":"Good UX vs. Bad UX"},"content":{"rendered":"<p>The goal of good UX design is to create intuitive and easy to navigate experiences that users will enjoy interacting with. However, that\u2019s often easier said than done and bad UX design can often seep into end products.<\/p>\n<p>Between business imperatives, long lists of features and time and money constraints, it can be hard for even some of the world\u2019s biggest companies to create the perfect user experience. Still, there are plenty of examples of innovative and thoughtful UX design that ensure users\u2019 interactions with a product are seamless and smooth.<\/p>\n<p>The good news is that we can learn from both good UX and bad UX. While good UX gives us something to aspire to, bad UX shows us what we should avoid. Here, we\u2019ll provide examples of each as well as two examples of redesigns that took a product\u2019s UX from bad to good.<\/p>\n<p>These are the examples we\u2019ll explore:<\/p>\n<ul>\n<li><a href=\"#Bad-UX:-Netflix\u2019s-autoplay-previews-feature\">Bad UX: Netflix\u2019s autoplay previews feature<\/a><\/li>\n<li><a href=\"#Good-UX:-Google-Search-landing-page\">Good UX: Google Search landing page<\/a><\/li>\n<li><a href=\"#Bad-UX:-Disney-Park\u2019s-COVID-messaging\">Bad UX: Disney Park\u2019s COVID messaging<\/a><\/li>\n<li><a href=\"#Good-UX:-Apple-compare-feature\">Good UX: Apple compare feature<\/a><\/li>\n<li><a href=\"#From-Bad-to-Good:-Rev.com-redesign\">From Bad to Good: Rev.com redesign<\/a><\/li>\n<li><a href=\"#From-Bad-to-Good:-Prime-Video-redesign\">From Bad to Good: Prime Video redesign<\/a><\/li>\n<\/ul>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-diploma-in-ux-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ux-design?utm_source=blog&utm_medium=blog_panel_pdux&utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN UX]<\/p>\n                    <span>Take our Professional Diploma in UX Design course<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h2 id=\"Bad-UX:-Netflix\u2019s-autoplay-previews-feature\">Bad UX: Netflix\u2019s autoplay previews feature<\/h2>\n<p><a href=\"https:\/\/www.netflix.com\/ie\/\" target=\"_blank\" rel=\"noopener\">Netflix<\/a> is one of the most popular streaming services around and part of the reason for that is the relative success of its UX. Of course, that doesn\u2019t mean it got everything right.<\/p>\n<p>One example is Netflix\u2019s autoplay previews feature. When users navigate to Netflix\u2019s homepage, the preview for a movie or TV show featured at the top of the screen starts playing automatically. When users hover over thumbnails for other movies and TV shows that appear further down the page, trailers for those titles autoplay as well. This makes it impossible to access information about a given title without triggering a loud video preview.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7254\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/08\/Netflix-autoplay-1.png\" alt=\"Bad UX: Netflix autoplay \" width=\"1416\" height=\"785\" title=\"\"><\/p>\n<p>The business goal of the feature is to get users to engage with Netflix\u2019s content by grabbing their attention. However the feature is also disruptive and annoying, forcing users to watch parts of trailers for titles they have no interest in just because they accidentally hovered over them for too long. While Netflix might argue the feature helps users discover content they wouldn\u2019t otherwise, because it\u2019s pushed on users, it doesn\u2019t lend itself to a positive user experience.<\/p>\n<p>Many Netflix users detest the autoplay previews feature, so Netflix finally created a setting that enables users to turn it off. Unfortunately, many users don\u2019t know that, and even if they do, they have to figure out where in their account settings they can disable it. Click <a href=\"https:\/\/help.netflix.com\/en\/node\/2102\" target=\"_blank\" rel=\"noopener\">this link<\/a> to learn how to disable the Netflix autoplay feature on all devices.<\/p>\n<h2 id=\"Good-UX:-Google-Search-landing-page\">Good UX: Google Search landing page<\/h2>\n<p>A classic example of good UX is the landing page for Google\u2019s search engine. No matter what you think of <a href=\"https:\/\/www.google.com\/\" target=\"_blank\" rel=\"noopener\">Google<\/a> as a company, its Search landing page is a triumph of minimalist UX.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7255\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/08\/Google_Homepage.svg.png\" alt=\"Good UX: Google Search landing page\" width=\"2560\" height=\"1440\" title=\"\"><\/p>\n<p>Its main focus is a large text entry box in the middle of the page surrounded by white space. While Search was Google\u2019s original product, the interface has barely changed in 25 years, outside of additional product and information links at the top and bottom of the page. This is because Google got it right the first time. The landing page does exactly what users need it to: perform a web search.<\/p>\n<p>Other search engines include additional information like news and personalised widgets on their landing pages. However, this just pulls users\u2019 attention away from the reason they navigated to a search engine to begin with. Google doesn\u2019t make that mistake. Google Search\u2019s landing page lets users focus on searching without distractions. It\u2019s a fantastic example of a user experience where less is really more.<\/p>\n<h2 id=\"Bad-UX:-Disney-Park\u2019s-COVID-messaging\">Bad UX: Disney Park\u2019s COVID messaging<\/h2>\n<p><a href=\"https:\/\/www.disney.co.uk\/\" target=\"_blank\" rel=\"noopener\">Disney<\/a> is an entertainment powerhouse and <a href=\"https:\/\/www.disneyworld.co.uk\/destinations\/\" target=\"_blank\" rel=\"noopener\">its theme parks<\/a> are among the world\u2019s most popular attractions. However, the COVID-19 pandemic forced Disney to rethink when and how to welcome guests to its parks while weathering lockdowns, masking requirements and social distancing. While that certainly impacted the experience at the parks, it also impacted the various parks\u2019 official websites as well.<\/p>\n<p>Although not every park has handled its website\u2019s COVID messaging the same way, Disneyland in California, Disney World in Florida, Hong Kong Disneyland and Shanghai Disney Resort all employed a similar strategy. They all added an open tab at the top of the page with text information that updates users on the latest health, safety and reservation information for the park.<\/p>\n<p>This tab creates a sobering reminder of the pandemic, while drawing attention away from the enticing images of people enjoying the parks that would typically dominate the parks&#8217; homepages. As a result, the tab changes the entire mood of the user experience and ruins the flow of the interaction, more or less interrupting the fun and anticipation of planning a holiday at a Disney Park.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7256\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-12-at-09.56.31.png\" alt=\"Bad UX: Disney Park\u2019s COVID messaging\" width=\"2636\" height=\"1488\" title=\"\"><\/p>\n<p>It\u2019s quite possible this was its intention. After all, when the pandemic first began, Disney needed to quickly and efficiently communicate the status of its different theme parks to potential guests. However, almost three years later, this information has yet to be integrated into the sites. Also by presenting it as an uninteresting block of text ensures that most users won\u2019t bother to read it.<\/p>\n<p>If that weren\u2019t enough, when users navigate to the links that appear in these tabs for additional details, they\u2019re greeted by a long page full of even more text and very few images.\u00a0 Once again, making it unlikely users will read the information. Users tend to skim text online, so if a large amount of text information is essential, remember that <a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/improve-ux-design\/\">less is more<\/a>. To achieve a cleaner look, do it through the use of visual hierarchy, chunking it up in visually appealing clusters or using numbers and bullet points.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7257\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-12-at-10.03.54.png\" alt=\"Bad UX: Disney Park\u2019s COVID messaging\" width=\"2630\" height=\"1208\" title=\"\"><\/p>\n<p>While Disney has done some of this, it hasn\u2019t successfully prioritised the information that park visitors need the most. For example, highlighting the parks\u2019 new reservation system or emphasising that some attractions may be more limited in capacity. As a result, accessing Disney Park\u2019s websites has become a slog instead of a magical experience.<\/p>\n<h2 id=\"Good-UX:-Apple-compare-feature\">Good UX: Apple compare feature<\/h2>\n<p><a href=\"https:\/\/www.apple.com\/\" target=\"_blank\" rel=\"noopener\">Apple<\/a> is known for creating devices that are not only beautiful to look at but easy to use and that extends to the company\u2019s website. And one of the website&#8217;s most useful elements is the compare feature.<\/p>\n<p>Whether a users is on a computer or a mobile device, the experience is the same. After a user navigates to a product grouping, such as iPhones or iPads, the secondary navigation at the top of the page includes a \u201cCompare\u201d option that. When selected, &#8220;Compare&#8221; brings users to a page that presents a side-by-side comparison of the two (on a mobile device) or three (on a computer) most recent product models.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7258\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-12-at-10.22.54.png\" alt=\"Good UX: Apple compare feature\" width=\"2358\" height=\"1384\" title=\"\"><\/p>\n<p>This method anticipates that most users will\u00a0 compare the company\u2019s latest offerings. This a reasonable assumption and its UX\u00a0 accommodate as many users as it can as seamlessly as possible. However, it\u2019s also extremely easy to compare other models by selecting one of the dropdowns at the top of each of the product columns and choosing a different option.<\/p>\n<p>The information is organised in an easy-to-scan hierarchy. The base price and \u201cBuy\u201d button are at the top of each column, followed by a \u201cQuick Look\u201d at the most essential product specs and more technical information further down the page. As users scroll, the name of each product stays anchored to the top of each column, ensuring users won\u2019t forget which specs belong to which product.<\/p>\n<p>The product comparison page is an excellent example of a user experience that genuinely helps users. For expensive, technical products, comparison shopping can be especially valuable and Apple enables users to do so quickly and efficiently. Not only does this create a user experience that\u2019s enjoyable to use but it also helps reassure customers that when they select the \u201cBuy\u201d button, they\u2019ve made the right choice for them.<\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_ux-design-fundamentalsp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ux-design-fundamentals?utm_source=blog&amp;utm_medium=blog_panel_text&amp;utm_campaign=blog_promo\" style=\"\">\n                    <p>[UX DESIGN FUNDAMENTALS COURSE]<\/p>\n                    <span>Get the Best Start in UX Design<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h2 id=\"From-Bad-to-Good:-Rev.com-redesign\">From Bad to Good: Rev.com redesign<\/h2>\n<p><a href=\"https:\/\/www.rev.com\/\" target=\"_blank\" rel=\"noopener\">Rev<\/a> is a transcription and captions service that recently redesigned its website for the second time in just a few years. Each new redesign has been a step forward for its UX design, especially when the homepage clearly conveys what Rev does and why users should trust Rev to do it.<\/p>\n<p>Just a few years ago, the home page featured a large carousel at the top that included three cards of images and text that informed users of the company\u2019s values. What it didn\u2019t do, however, was inform users of what services those values pertained to. The user either had to scroll further down the page to find out or click a link in one of the cards that led to more information. This UX design likely resulted in confusion or frustration for many users.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7259\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-12-at-10.36.19.png\" alt=\"From Bad to Good: Rev.com redesign\" width=\"1918\" height=\"1414\" title=\"\"><\/p>\n<p>Luckily, the first redesign of Rev.com eliminated the carousel for a simple set of three side-by-side boxes at the top of the page.\u00a0 Each box identifies the company\u2019s services, price range and a link to learn more. This was a much cleaner UX design; plus, the information it communicated was more valuable to users, making it more likely that they\u2019d decide to find out more about Rev\u2019s services.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7260\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-12-at-10.38.34.png\" alt=\"Rev.com\" width=\"2716\" height=\"1368\" title=\"\"><\/p>\n<p>The most recent redesign, which was implemented in the summer of 2022, builds on the first. It maintains the side-by-side boxes for each of the company\u2019s services, while featuring a less colourful and more modern aesthetic. The design includes a brief but impactful tagline at the top of the page that integrates well with the information in each box.<\/p>\n<p>Meanwhile, each box now includes a brief line about the accuracy of the transcription or captioning service, followed by an \u201cOrder Now\u201d button. These are subtle changes, but they make the UX design of Rev.com even more seamless, while communicating the value of the service to users more effectively.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7261\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-12-at-10.41.00.png\" alt=\"Good UX: rev.com 2022\" width=\"2788\" height=\"1410\" title=\"\"><\/p>\n<h2 id=\"From-Bad-to-Good:-Prime-Video-redesign\">From Bad to Good: Prime Video redesign<\/h2>\n<p><a href=\"https:\/\/www.primevideo.com\/\" target=\"_blank\" rel=\"noopener\">Amazon\u2019s Prime Video<\/a> service has weathered criticism for a long time. It was a challenge to find movies and TV shows on the streamer, much less understand what was free to Prime members and what cost an additional fee. Now, the company is finally rolling out a completely new user interface that makes navigating through Prime Video&#8217;s offerings far more intuitive.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7263\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-12-at-10.46.51.png\" alt=\"From bad to good UX: Amazon Prime Video\" width=\"2760\" height=\"1410\" title=\"\"><\/p>\n<p>The redesign includes a set of small vertical icons to navigate to major sections of the service on the left side. It also includes a large carousel at the top of the page highlighting the service\u2019s newest offerings and a series of smaller carousels of thumbnails identifying movies and shows that users might be interested in.<\/p>\n<p>These thumbnails comes with titles specific to Prime towards the top and titles that users must pay to watch available further down. Much of Prime\u2019s redesigned interface is reminiscent of other popular streaming services like Netflix.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7264\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-12-at-10.49.38.png\" alt=\"Good UX: Amazon Prime Video\" width=\"2706\" height=\"1418\" title=\"\"><\/p>\n<p>Consequently, for many users, the most exciting change is also one of the simplest. Each piece of content is now colour coded to let you know if users must stream, pay, rent or buy it. A blue circle indicates that it&#8217;s included with a Prime subscription and a yellow shopping bag indicates that users must pay to rent or buy it.<\/p>\n<p>This colour scheme is even carried into the labelling system, with the label for any carousel of Prime-exclusive content including the word Prime written in blue and the label for any carousel of paid content written in yellow.<\/p>\n<p>The use of these simple icons ensures that Prime users will no longer have to navigate all the way to an individual title to find out if it\u2019s included with Prime or not. This will help users make more informed choices as they browse the service\u2019s vast library of movies and TV shows. It\u2019s an elegant solution for overcoming a UX issue that\u2019s negatively impacted users for years.<\/p>\n<p>&nbsp;<\/p>\n<h3>Learn more about UX<\/h3>\n<p>Now you know the difference between good UX and bad UX, there\u2019s so much more to discover about the broad and varied field of UX, so don\u2019t stop here. Discover more UX terms in our complete <a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/glossary-ux-terms\/\">UX glossary<\/a>, explore the fun side of UX <a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/fun-side-of-ux\/\">in this post<\/a> or learn about the <a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/what-skills-do-you-need-to-be-a-ux-designer\/\">skills needed<\/a> to become a UX designer.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this comparative guide, we look at examples of good UX and bad UX. We also take a long at companies that took the time to improve the UX of their products over a period of time.  <\/p>\n","protected":false},"author":35,"featured_media":7267,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[278],"tags":[],"class_list":["post-7253","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design"],"_links":{"self":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7253","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/comments?post=7253"}],"version-history":[{"count":4,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7253\/revisions"}],"predecessor-version":[{"id":9358,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7253\/revisions\/9358"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media\/7267"}],"wp:attachment":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media?parent=7253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/categories?post=7253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/tags?post=7253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}