{"id":14702,"date":"2016-08-05T14:16:53","date_gmt":"2016-08-05T21:16:53","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=14702"},"modified":"2020-06-15T01:07:16","modified_gmt":"2020-06-15T08:07:16","slug":"ugly-works-designing-usability","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/ugly-works-designing-usability\/","title":{"rendered":"It\u2019s Ugly But It Works: On Designing for Usability | UXPin"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Even today in 2016, you&#8217;ll find plenty of popular yet ugly websites \u2014 they\u2019ve hardly changed since the 90&#8217;s:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-14710\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image07.png\" alt=\"image07\" width=\"720\" height=\"403\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image07.png 1200w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image07-536x300.png 536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image07-768x430.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image07-1024x573.png 1024w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Wikipedia, Reddit, Hacker News, Craigslist<\/span><\/p>\n<p><span style=\"font-weight: 400;\">All of the above sites are massively popular despite their ugliness because of one key factor \u2014 they do exactly what people need. For example: <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Reddit has 234 million unique users, 8.19 billion monthly pageviews, 25 million daily votes (stats <\/span><a href=\"https:\/\/medium.com\/r\/?url=http%3A%2F%2Fexpandedramblings.com%2Findex.php%2Freddit-stats%2F\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">as of 2016<\/span><\/a><span style=\"font-weight: 400;\">) \u2014 and still loads really fast!<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Hacker News simply shows the latest start up news, \u201c<\/span><a href=\"https:\/\/medium.com\/r\/?url=http%3A%2F%2Fthenextweb.com%2Fdd%2F2016%2F02%2F17%2Fwhy-are-some-of-the-ugliest-sites-on-the-web-also-the-most-popular%2F%23gref\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">emphasizing content above all else<\/span><\/a><span style=\"font-weight: 400;\">\u201d, as that\u2019s what their users have always valued most.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Wikipedia organizes information really well, making it easy and consistent for users to find what they need.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">When an app \u2018just works\u2019, it matters less what it looks like, but how it helps solve a problem. A great example of this that I recently encountered was in a less well-known app called \u2018<\/span><a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.ellery.mytabata&amp;hl=en\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">My Tabata<\/span><\/a><span style=\"font-weight: 400;\">\u2019.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s explore the app as a case study for how usability can be more important than visual design. <\/span><\/p>\n<h2><span style=\"font-weight: 400;\">My Tabata: Useful UX with An Ugly UI<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14706\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image03-3.gif\" alt=\"image03\" width=\"352\" height=\"585\"><\/p>\n<p><span style=\"font-weight: 400;\">Without knowing what the app does (assuming no prior knowledge of Tabata), it seems pretty bad because of the visual design. However, it impresses when used within the context for which it was designed because it solves one problem really well. This is reflected in the <\/span><a href=\"https:\/\/medium.com\/r\/?url=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dcom.ellery.mytabata%26hl%3Den_GB\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">4.4\/5 average review<\/span><\/a><span style=\"font-weight: 400;\"> from 4200+ users:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-14709\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image06.png\" alt=\"image06\" width=\"635\" height=\"404\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image06.png 800w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image06-472x300.png 472w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image06-768x489.png 768w\" sizes=\"auto, (max-width: 635px) 100vw, 635px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">My Tabata overview<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">So, What problem Is It Solving?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Tabata involves doing simple exercises at high intensity, in 20 second bursts, with just 10 seconds of rest between each interval:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-14711\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image08.png\" alt=\"image08\" width=\"721\" height=\"399\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image08.png 800w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image08-542x300.png 542w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image08-768x425.png 768w\" sizes=\"auto, (max-width: 721px) 100vw, 721px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Tabata training example from <a href=\"http:\/\/www.womenshealthmag.com\" target=\"_blank\" rel=\"noopener noreferrer\">Women&#8217;s Health Mag<\/a><\/span><\/p>\n<p><span style=\"font-weight: 400;\">It\u2019s not easy for users to time the intervals and rest periods using a watch or timer, which is the problem \u2018My Tabata\u2019 solves very intuitively, despite the ugly user interface. As a result, it actually enhances the exercising experience through a set of good usability principles, which are set out below.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">4 Usability Lessons from My Tabata<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">1. Use interactions that make sense in the context<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">When jumping into the air doing \u2018super squats\u2019, users will probably need to pause the Tabata session to get a drink. There\u2019s no \u2018stop\u2019 and \u2018start\u2019 button on the app, it\u2019s done in an even simpler way by tapping anywhere on the screen \u2014 tap to start, tap to stop:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-14703\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image00-6.png\" alt=\"image00\" width=\"704\" height=\"540\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image00-6.png 800w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image00-6-391x300.png 391w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image00-6-768x589.png 768w\" sizes=\"auto, (max-width: 704px) 100vw, 704px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Tap to pause<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This helps the user stay focused on the exercise, rather than fumbling about with their phone.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">2. Use just enough navigation<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">When starting the app, users are faced with the \u2018Tap to Start\u201d screen \u2014 and practically zero navigation. <\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14704\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image01-4.png\" alt=\"image01\" width=\"618\" height=\"352\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image01-4.png 618w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image01-4-527x300.png 527w\" sizes=\"auto, (max-width: 618px) 100vw, 618px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Tap the screen, and it\u2019s straight into the fitness session \u2014 the experience becomes Tabata \u2014 not the UI, and not the phone. The result of this minimal navigation is that the user can achieve their goal on very first contact with the app.<\/span><\/p>\n<blockquote><p><i><span style=\"font-weight: 400;\">\u201cYour job is to help the user achieve their goal. Navigating an interface is never the user\u2019s goal. If you\u2019d done your job right, the app would only do one thing, and would do it very well, and would do it all on one screen.\u201d ~ <\/span><\/i><a href=\"https:\/\/medium.com\/radical-ux\/nine-nasty-ux-truths-83b30ea94355#.chjtlxkc3\" target=\"_blank\" rel=\"noopener noreferrer\"><i><span style=\"font-weight: 400;\">Antoine Valot<\/span><\/i><\/a><\/p><\/blockquote>\n<p><span style=\"font-weight: 400;\">While users can tap the kebab menu in the top right of the screen to access the settings,the action doesn\u2019t interrupt the Tabata experience \u2014 the settings are changed before or after each session, and the app saves those preferences for the following session.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">3. Use audio only when necessary<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">When pushing through the last few seconds of an interval, a user\u2019s eyes can close in the strain of the exercise. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">My Tabata uses audio cues to count down the last three seconds of each interval, so users don\u2019t have to change focus away from the exercise to their phone.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">4. Enable users to track their progress<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">As the app goes through the different activities, it\u2019s easy for users to forget their place in the overall exercise. While not the best visual implementation, users can quickly assess progress with a useful status bar on the bottom of the minimal UI:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14707\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image04-3.png\" alt=\"image04\" width=\"475\" height=\"339\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image04-3.png 475w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image04-3-420x300.png 420w\" sizes=\"auto, (max-width: 475px) 100vw, 475px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Combined with the timer, this tactic further improves the experience of the exercise. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">You\u2019ll actually notice that many of the lessons from \u2018My Tabata\u2019 cross over with Jakob Nielson\u2019s <\/span><a href=\"http:\/\/www.designprinciplesftw.com\/collections\/10-usability-heuristics-for-user-interface-design\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">10 usability heuristics for UI design<\/span><\/a><span style=\"font-weight: 400;\">, which is a great set of broad guidelines to help ensure apps are usable, as well as looking great.<\/span><\/p>\n<p><em>Learn more: <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/ux-design-process-documentation-best-practices\/\" target=\"_blank\" rel=\"noopener noreferrer\">UX Design Process Best Practices<\/a><\/em><\/p>\n<h2><span style=\"font-weight: 400;\">Next Steps<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Don\u2019t fall into the trap of sacrificing context for visual finesse. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">In closing, always remember the UX hierarchy of needs: <\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14708\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image05-1.png\" alt=\"image05\" width=\"564\" height=\"559\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image05-1.png 564w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image05-1-303x300.png 303w\" sizes=\"auto, (max-width: 564px) 100vw, 564px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Photo credit: <\/span><a href=\"https:\/\/www.pinterest.com\/pin\/258957047300069656\/\"><span style=\"font-weight: 400;\">Growth Engineering<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Yes, delightful design can certainly make good products great, but that only matters if the product is actually useful, usable, and reliable in the first place. Otherwise, you\u2019re just building on a shaky foundation. <\/span><\/p>\n<p><i><span style=\"font-weight: 400;\">To see how successful companies design their products, check out the free e-book <\/span><\/i><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/real-life-ux-process\/\" target=\"_blank\" rel=\"noopener noreferrer\"><i><span style=\"font-weight: 400;\">Real-Life UX Processes<\/span><\/i><\/a><i><span style=\"font-weight: 400;\">. The guide peeks inside design processes at Slack, Autodesk, 3M, and Sumo Logic. <\/span><\/i><\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/real-life-ux-process\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-14705\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image02-4.png\" alt=\"image02\" width=\"720\" height=\"378\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image02-4.png 1200w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image02-4-571x300.png 571w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image02-4-768x403.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image02-4-1024x538.png 1024w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>IBM Designer Graeme Fulton explains the merits of usable yet ugly design. <\/p>\n","protected":false},"author":114,"featured_media":14710,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,21,6],"tags":[],"class_list":["post-14702","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-usability-2","category-ux-design"],"yoast_title":"","yoast_metadesc":"Sometimes the ugliest sites are the most effective. Find out why some of the biggest brands refuse to update their outdated UI.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>It\u2019s Ugly But It Works: On Designing for Usability | UXPin | UXPin<\/title>\n<meta name=\"description\" content=\"Sometimes the ugliest sites are the most effective. Find out why some of the biggest brands refuse to update their outdated UI.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/ugly-works-designing-usability\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"It\u2019s Ugly But It Works: On Designing for Usability | UXPin\" \/>\n<meta property=\"og:description\" content=\"Sometimes the ugliest sites are the most effective. Find out why some of the biggest brands refuse to update their outdated UI.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/ugly-works-designing-usability\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-05T21:16:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-15T08:07:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image07.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"672\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Graeme Fulton\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Graeme Fulton\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ugly-works-designing-usability\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ugly-works-designing-usability\\\/\"},\"author\":{\"name\":\"Graeme Fulton\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/f2262481fc9d905b9b8a6c46b9f5e391\"},\"headline\":\"It\u2019s Ugly But It Works: On Designing for Usability | UXPin\",\"datePublished\":\"2016-08-05T21:16:53+00:00\",\"dateModified\":\"2020-06-15T08:07:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ugly-works-designing-usability\\\/\"},\"wordCount\":823,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ugly-works-designing-usability\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/08\\\/image07.png\",\"articleSection\":[\"Blog\",\"Usability\",\"UX Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ugly-works-designing-usability\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ugly-works-designing-usability\\\/\",\"name\":\"It\u2019s Ugly But It Works: On Designing for Usability | UXPin | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ugly-works-designing-usability\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ugly-works-designing-usability\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/08\\\/image07.png\",\"datePublished\":\"2016-08-05T21:16:53+00:00\",\"dateModified\":\"2020-06-15T08:07:16+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/f2262481fc9d905b9b8a6c46b9f5e391\"},\"description\":\"Sometimes the ugliest sites are the most effective. Find out why some of the biggest brands refuse to update their outdated UI.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ugly-works-designing-usability\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ugly-works-designing-usability\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ugly-works-designing-usability\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/08\\\/image07.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/08\\\/image07.png\",\"width\":1200,\"height\":672,\"caption\":\"image07\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ugly-works-designing-usability\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"It\u2019s Ugly But It Works: On Designing for Usability | UXPin\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/f2262481fc9d905b9b8a6c46b9f5e391\",\"name\":\"Graeme Fulton\",\"description\":\"Graeme Fulton is a Designer at IBM and editor of prototypr.io\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/graeme-fulton\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"It\u2019s Ugly But It Works: On Designing for Usability | UXPin | UXPin","description":"Sometimes the ugliest sites are the most effective. Find out why some of the biggest brands refuse to update their outdated UI.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/ugly-works-designing-usability\/","og_locale":"en_US","og_type":"article","og_title":"It\u2019s Ugly But It Works: On Designing for Usability | UXPin","og_description":"Sometimes the ugliest sites are the most effective. Find out why some of the biggest brands refuse to update their outdated UI.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/ugly-works-designing-usability\/","og_site_name":"Studio by UXPin","article_published_time":"2016-08-05T21:16:53+00:00","article_modified_time":"2020-06-15T08:07:16+00:00","og_image":[{"width":1200,"height":672,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image07.png","type":"image\/png"}],"author":"Graeme Fulton","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Graeme Fulton","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ugly-works-designing-usability\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ugly-works-designing-usability\/"},"author":{"name":"Graeme Fulton","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/f2262481fc9d905b9b8a6c46b9f5e391"},"headline":"It\u2019s Ugly But It Works: On Designing for Usability | UXPin","datePublished":"2016-08-05T21:16:53+00:00","dateModified":"2020-06-15T08:07:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ugly-works-designing-usability\/"},"wordCount":823,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ugly-works-designing-usability\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image07.png","articleSection":["Blog","Usability","UX Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ugly-works-designing-usability\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/ugly-works-designing-usability\/","name":"It\u2019s Ugly But It Works: On Designing for Usability | UXPin | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ugly-works-designing-usability\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ugly-works-designing-usability\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image07.png","datePublished":"2016-08-05T21:16:53+00:00","dateModified":"2020-06-15T08:07:16+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/f2262481fc9d905b9b8a6c46b9f5e391"},"description":"Sometimes the ugliest sites are the most effective. Find out why some of the biggest brands refuse to update their outdated UI.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ugly-works-designing-usability\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/ugly-works-designing-usability\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ugly-works-designing-usability\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image07.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image07.png","width":1200,"height":672,"caption":"image07"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ugly-works-designing-usability\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"It\u2019s Ugly But It Works: On Designing for Usability | UXPin"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/f2262481fc9d905b9b8a6c46b9f5e391","name":"Graeme Fulton","description":"Graeme Fulton is a Designer at IBM and editor of prototypr.io","url":"https:\/\/www.uxpin.com\/studio\/author\/graeme-fulton\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/14702","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/114"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=14702"}],"version-history":[{"count":1,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/14702\/revisions"}],"predecessor-version":[{"id":21796,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/14702\/revisions\/21796"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/14710"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=14702"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=14702"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=14702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}