{"id":5263,"date":"2021-05-22T19:00:00","date_gmt":"2021-05-22T19:00:00","guid":{"rendered":"http:\/\/desres20.netornot.at\/?p=5263"},"modified":"2021-05-15T15:15:37","modified_gmt":"2021-05-15T15:15:37","slug":"importance-of-usability","status":"publish","type":"post","link":"http:\/\/desres20.netornot.at\/?p=5263","title":{"rendered":"Importance of Usability"},"content":{"rendered":"\n<h2>Utility + Usability = Usefulness<\/h2>\n\n\n\n<p>Utility is another important attribute and is about if the system provides the features the users actually need. If you are integrating a really usable feature with nearly none of your users&#8217; needs, it\u2019s going to be useless after all. Usability and utility together determine if a system is useful or not.<\/p>\n\n\n\n<p>For analyzing and optimizing the utility of a system you can use the same methods and data you can use for improving usability.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Usefulness, Utility, Usability:  3 Goals of UX Design (Jakob Nielsen)\" width=\"780\" height=\"439\" src=\"https:\/\/www.youtube.com\/embed\/VwgZtqTQzg8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2>The importance of Usability<\/h2>\n\n\n\n<p>Usability is actually not just important, it is a necessity. Especially the success of digital products strongly depends on the usability of the system. Websites and apps are a really good example of products that rely on good usability. Because if the usability of your product is not great, they will move on and use another system. That\u2019s also the reason why bad usability is directly connected to losing users or customers.<\/p>\n\n\n\n<p>If users<br>\u2026 are not able to accomplish their goals efficiently, they leave.<br>\u2026 cannot find what you are offering them, they leave.<br>\u2026 get lost, they leave.<br>\u2026 get stuck, they leave.<br>\u2026 cannot easily recover from an error, they leave.<br>\u2026 have difficulties using the system, they leave.<\/p>\n\n\n\n<p>But usability is not only important for the number of users interacting with your product. It also directly affects how they feel about your product and is, therefore, an essential part of the user experience. Because of that, usability should also be an important part of your budget.<\/p>\n\n\n\n<p>According to Jakob Nielsen, you should spend about 10% of a design project budget on usability. On average, this budget for usability will more than double the quality metrics of your website. Although the outcome might not be as great, it is also really important to emphasize usability in the design process of software or even physical products. Good usability will always improve the user experience and also increase the ROI significantly. According to Nielsen, businesses that spend only 10% of their budget on usability improvements will see, on average, a 135% increase in their desired metrics.<\/p>\n\n\n\n<p>So spending money on usability is not only better for the users, but it also brings a lot of benefits for the company. Another reason for spending money on usability is that bad usability will cost you even more money. Dissatisfied users will not come back, tell their friends about it, stop using your product or even ask for a refund. Spending money on usability will not only make your customers happy and make them recurring customers, but it will also help you to grow your business.<\/p>\n\n\n\n<p>According to Forbes, Jeff Bezos invested about 100 times more money in usability design than he invested in marketing during the first years of Amazon. In his eyes that is also the reason that led to such overwhelming access.<\/p>\n\n\n\n<p>Another great example from the Interaction Design Foundation is<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><em>\u201dWhen McAfee started integrating usability testing to learn more about its customers and their needs, the company saved 90% in support expenses costs.\u201d<\/em><\/p><\/blockquote>\n\n\n\n<p>The Interaction Design Foundation also created a great list on how to design for good usability. This list is mainly about usability on websites, but most of the steps listed below are also important for other digital products and software.<\/p>\n\n\n\n<ul><li>Work with a clear understanding of users\u2019 goals and show it in your design.<\/li><li>Mimic the real world regarding concepts, icons, and language.<\/li><li>Present instantly understandable, jargon-free messages and actions users can take \u2013 one chief action per screen.<\/li><li>Limit options to give a strong information scent on an uncluttered display \u2013 show essential information for completing tasks.<\/li><li>Keep content consistent.<\/li><li>Follow established norms regarding function and layout (e.g., logo positioning, tappable buttons).<\/li><li>Use proper font size, color, contrast, whitespace, etc. to:<ul><li>combine aesthetic appeal with scanning readability,<\/li><li>present a clear, logical information hierarchy,<\/li><li>design for accessibility<\/li><\/ul><\/li><li>Use chunking and emphasize key information at the beginning and end of interactive sequences.<\/li><li>Offer informative feedback about the system status.<\/li><li>Include helpful navigation systems and search functionality.<\/li><li>Allow for customizable controls, including shortcuts.<\/li><li>Avoid disruptions \u2013 e.g., forced logins\/pop-ups.<\/li><li>Make forms easy to complete.<\/li><li>Include warnings and autocorrect features to minimize errors.<\/li><li>Make errors easy to diagnose.<\/li><li>Offer easy-to-understand help documentation.<\/li><li>Show clear contact options.<\/li><li>Provide a back button to undo actions.<\/li><li>Include ALT tags to show more information about images.<\/li><li>Consider server abilities regarding page-loading time and downtime.<\/li><li>Beware of in-app browsers and restrictions (e.g., scrolling) in mobile design.<\/li><li>Make links active.<\/li><li>Describe links accurately<\/li><li>Use user personas.<\/li><li>Do thorough usability testing<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h2>Accessibility, Usability and Inclusion<\/h2>\n\n\n\n<p>Accessibility, usability, and inclusive design are closely related topics and help with creating systems that work for everyone. All of their goals, approaches, and guidelines overlap significantly. That\u2019s also the main reason why you should focus on them together. There are only a few cases where you should only focus on one of them.<\/p>\n\n\n\n<p>Although the emphasis on these topics has been steadily growing in the last few years, it\u2019s unfortunately still far away from becoming the new normal. That\u2019s especially true for accessibility and inclusion. For a lot of designers and developers, accessibility is just a set of boxes they have to check before releasing the product. But actually it is a really big part of the usability of a product.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Accessibility &amp; Inclusion For All\" width=\"780\" height=\"439\" src=\"https:\/\/www.youtube.com\/embed\/EAxnE2XzL0k?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3>Accessibility<\/h3>\n\n\n\n<p>The term accessibility is officially defined as<br><em>\u201cthe quality of being easy to approach, reach, enter, speak with, use, or understand\u201d,<\/em><br><em>\u201cthe quality of being usable, reachable, obtainable, etc.:\u201d and&nbsp;<\/em><br><em>\u201cthe quality of being suitable or adapted for use by people with disabilities:\u201d<\/em><\/p>\n\n\n\n<p>Accessibility in the context of design is related to the discriminatory aspects of the user experience for people with disabilities. Good accessibility means that they can contribute equally without any additional barriers. Despite the fact that accessibility is mainly focusing on people with disabilities, most of these requirements are also improving the usability for everyone else. For example, if a website is optimized for low vision, you can also see the content better if the sun is shining directly on your screen or when you&#8217;re sitting in a completely dark room.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"750\" height=\"284\" src=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/05\/julianschwazer_accessibility.jpeg\" alt=\"\" class=\"wp-image-5266\" srcset=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/05\/julianschwazer_accessibility.jpeg 750w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/05\/julianschwazer_accessibility-300x114.jpeg 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><figcaption>source: https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/building-an-accessible-product-our-journey-so-far\/<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Accessibility focuses on the following disabilities:<\/p>\n\n\n\n<p><strong>Visual<\/strong><\/p>\n\n\n\n<ul><li>Low Vision<\/li><li>Blindness<\/li><li>Color Blindness<ul><li>Red-Green Color Blindness<\/li><li>Blue-Yellow Color Blindness<\/li><li>Complete Color Blindness<\/li><\/ul><\/li><\/ul>\n\n\n\n<p><strong>Hearing\/Auditory<\/strong><\/p>\n\n\n\n<ul><li>Hard Hearing<\/li><li>Deafness<\/li><\/ul>\n\n\n\n<p><strong>Speech<\/strong><\/p>\n\n\n\n<ul><li>Speech Disorders<\/li><\/ul>\n\n\n\n<p><strong>Motor<\/strong><\/p>\n\n\n\n<ul><li>Slow Response Times<\/li><li>Limited Motor Controls (inability to use a mouse, touch, &#8230;)<\/li><\/ul>\n\n\n\n<p><strong>Cognitive<\/strong><\/p>\n\n\n\n<ul><li>Learning Disabilities<\/li><li>Distractibility<\/li><li>Inability to focus on a large amount of information<\/li><\/ul>\n\n\n\n<p>The Web Content Accessibility Guidelines (WCAG) 2.1 from 2018 are already addressing these disabilities and are focusing on four key principles:<\/p>\n\n\n\n<ul><li>Perceivable<\/li><li>Operable<\/li><li>Understandable<\/li><li>Robust<\/li><\/ul>\n\n\n\n<p><br>They even offer web tools for websites to check if your own website is compliant with their guidelines. These guidelines are also defined as an international standard in the ISO 40500 norm.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3>Inclusive Design<\/h3>\n\n\n\n<p>Inclusive design was already defined as<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><em>\u201cThe design of mainstream products and\/or services that are accessible to, and usable by, as many people as reasonably possible &#8230; without the need for special adaptation or specialised design.\u201d<\/em><\/p><\/blockquote>\n\n\n\n<p>by the British Standard Institute back in 2005.<\/p>\n\n\n\n<p>Inclusive design is not about designing a product that addresses the needs of the entire population, it is more about creating an appropriate design for the diversity of the population. According to the Inclusive Design Toolkit of the University of Cambridge, it is about:<\/p>\n\n\n\n<p><em>\u201cDeveloping a family of products and derivatives to provide the best possible coverage of the population.<\/em>&#8220;,<br>&#8220;<em>Ensuring that each individual product has clear and distinct target users.<\/em>&#8221; and<br>&#8220;<em>Reducing the level of ability required to use each product, in order to improve the user experience for a broad range of customers, in a variety of situations.\u201d<\/em><\/p>\n\n\n\n<p>To sum that up it is about taking a product to as many users as possible. In some regions, it is also called universal design or design for all. Another big advantage of inclusive design is that it also works great for people with temporary disabilities (injuries) or situational limitations (while carrying a baby or grocery bag).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"468\" src=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/05\/julianschwazer_inclusive-1024x468.png\" alt=\"\" class=\"wp-image-5267\" srcset=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/05\/julianschwazer_inclusive-1024x468.png 1024w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/05\/julianschwazer_inclusive-300x137.png 300w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/05\/julianschwazer_inclusive-768x351.png 768w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/05\/julianschwazer_inclusive.png 1400w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>source: https:\/\/alexanderskogberg.com\/2018\/02\/new-guidelines-wcag-2-1-explained\/<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Inclusive design is addressing a wide range of issues:<\/p>\n\n\n\n<ul><li>accessibility for people with disabilities;<\/li><li>access to and quality of hardware, software, and Internet connectivity;<\/li><li>computer literacy and skills;<\/li><li>economic situation;<\/li><li>education;<\/li><li>geographic location;<\/li><li>culture;<\/li><li>age, including older and younger people;<\/li><li>and language.<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h3>Resources<\/h3>\n\n\n\n<h4>Books<\/h4>\n\n\n\n<p>Inclusive Design for a Digital World, Designing with Accessibility in Mind<br>Regine M. Gilbert<br>2019<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h4>Articles<\/h4>\n\n\n\n<p>The Elements of Successful UX Design, Best Practises for Meaningful Products<br>UXPin<br>2015<\/p>\n\n\n\n<p>The Basics of User Experience Design<br>Interaction Design Foundation<br>2020<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h4>Web<\/h4>\n\n\n\n<p><a href=\"https:\/\/www.nngroup.com\/articles\/usability-101-introduction-to-usability\/\">https:\/\/www.nngroup.com\/articles\/usability-101-introduction-to-usability\/<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/www.interaction-design.org\/literature\/article\/an-introduction-to-usability\">https:\/\/www.interaction-design.org\/literature\/article\/an-introduction-to-usability<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/medium.com\/adalab\/the-importance-of-usability-10e9871a16d8\">https:\/\/medium.com\/adalab\/the-importance-of-usability-10e9871a16d8<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/medium.com\/@bluehair.co\/the-real-importance-of-usability-and-user-experience-c7bfd4cef11\">https:\/\/medium.com\/@bluehair.co\/the-real-importance-of-usability-and-user-experience-c7bfd4cef11<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/www.interaction-design.org\/literature\/topics\/usability\">https:\/\/www.interaction-design.org\/literature\/topics\/usability<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/uxdesign.cc\/usability-testing-in-design-and-why-is-it-important-cfddfbbdaac9\">https:\/\/uxdesign.cc\/usability-testing-in-design-and-why-is-it-important-cfddfbbdaac9<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/www.interaction-design.org\/literature\/article\/improve-customer-experience-with-ux-investments-that-increase-roi\">https:\/\/www.interaction-design.org\/literature\/article\/improve-customer-experience-with-ux-investments-that-increase-roi<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/www.forbes.com\/sites\/forbesagencycouncil\/2019\/02\/28\/a-useful-experience-why-usability-is-essential-to-ux-design\/\">https:\/\/www.forbes.com\/sites\/forbesagencycouncil\/2019\/02\/28\/a-useful-experience-why-usability-is-essential-to-ux-design\/<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/www.toptal.com\/designers\/ui\/inclusive-design-infographic\">https:\/\/www.toptal.com\/designers\/ui\/inclusive-design-infographic<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/www.dictionary.com\/browse\/accessibility\">https:\/\/www.dictionary.com\/browse\/accessibility<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/www.w3.org\/WAI\/fundamentals\/accessibility-usability-inclusion\/\">https:\/\/www.w3.org\/WAI\/fundamentals\/accessibility-usability-inclusion\/<\/a><\/p>\n\n\n\n<p><a href=\"http:\/\/www.inclusivedesigntoolkit.com\/whatis\/whatis.html\">http:\/\/www.inclusivedesigntoolkit.com\/whatis\/whatis.html<\/a><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-say-yeah wp-block-embed-say-yeah\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"fpoAQfeJ4X\"><a href=\"https:\/\/sayyeah.com\/digital-insights\/universal-design-accessibility-inclusive-design\/\">What are the differences between universal design, accessibility, and inclusive design?<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;What are the differences between universal design, accessibility, and inclusive design?&#8221; &#8212; Say Yeah!\" src=\"https:\/\/sayyeah.com\/digital-insights\/universal-design-accessibility-inclusive-design\/embed\/#?secret=fpoAQfeJ4X\" data-secret=\"fpoAQfeJ4X\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Utility + Usability = Usefulness Utility is another important attribute and is about if the system provides the features the users actually need. If you are integrating a really usable feature with nearly none of your users&#8217; needs, it\u2019s going to be useless after all. Usability and utility together determine if a system is useful<\/p>\n<footer class=\"entry-footer index-entry\">\n<div class=\"post-social pull-left\"><a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=http%3A%2F%2Fdesres20.netornot.at%2F%3Fp%3D5263\" target=\"_blank\" class=\"social-icons\"><i class=\"fa fa-facebook\" aria-hidden=\"true\"><\/i><\/a><a href=\"https:\/\/twitter.com\/home?status=http%3A%2F%2Fdesres20.netornot.at%2F%3Fp%3D5263\" target=\"_blank\" class=\"social-icons\"><i class=\"fa fa-twitter\" aria-hidden=\"true\"><\/i><\/a><a href=\"https:\/\/pinterest.com\/pin\/create\/button\/?url=http%3A%2F%2Fdesres20.netornot.at%2F%3Fp%3D5263&#038;media=http%3A%2F%2Fdesres20.netornot.at%2Fwp-content%2Fuploads%2F2021%2F05%2Fjulianschwazer_usability.jpeg\" target=\"_blank\" class=\"social-icons\"><i class=\"fa fa-pinterest-p\" aria-hidden=\"true\"><\/i><\/a><a href=\"https:\/\/www.linkedin.com\/shareArticle?mini=true&#038;url=http%3A%2F%2Fdesres20.netornot.at%2F%3Fp%3D5263&#038;title=Importance+of+Usability\" target=\"_blank\" class=\"social-icons\"><i class=\"fa fa-linkedin\" aria-hidden=\"true\"><\/i><\/a><\/div>\n<p class=\"link-more\"><a href=\"http:\/\/desres20.netornot.at\/?p=5263\" class=\"more-link\">Continue reading <span class=\"meta-nav\">\u2192<\/span><\/a><\/p>\n<\/footer>\n","protected":false},"author":57,"featured_media":5241,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=\/wp\/v2\/posts\/5263"}],"collection":[{"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=\/wp\/v2\/users\/57"}],"replies":[{"embeddable":true,"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5263"}],"version-history":[{"count":2,"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=\/wp\/v2\/posts\/5263\/revisions"}],"predecessor-version":[{"id":5372,"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=\/wp\/v2\/posts\/5263\/revisions\/5372"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=\/wp\/v2\/media\/5241"}],"wp:attachment":[{"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5263"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}