Well, first it’s important to review if it is indeed <\/span>well designed for as many users as possible.<\/b> Can your grandma figure out how it works? Is it easy to use when you only have one hand available? Is it compatible with support products for the blind, deaf, etc? <\/span><\/p>\n [tweet_box design=”default” float=”none”]Plain and simple, accessible design is good mobile UI design.[\/tweet_box]<\/span><\/p>\n <\/p>\n I<\/span>n this post, we will examine some concrete examples of good and bad UI design that address the needs of people with certain physical disabilities.<\/span><\/p>\n Firstly, it is important to discuss just how do people with disabilities use mobile applications and overcome their challenges in using them that the rest of the population doesn\u2019t face. Many times they rely on special support products, therefore it\u2019s important to keep them in mind when designing an app to make sure that it works well alongside them. Below we\u2019ll cover some of those products. <\/span><\/p>\n Tip: The accessibility API in iOS and Android provides a set of libraries for developers to create applications that leverage these phone support products. <\/span><\/i><\/p>\n We will now break down six examples of good and bad accessible mobile UI design, categorizing them by the 4 principles of mobile accessibility (outlined by the W3C): perceptibility, operability, understandability, and robustness.<\/span><\/p>\n This principle relates to the visibility of the elements in an application. It takes into account how information should be displayed regarding the size of the screen when the zoom action is performed or when the font size or contrast changes. Besides having images that represent an option or functionality, it is a must to have a compatible text alternative within the accessibility layer.<\/span><\/p>\n Take this example showing poor perceptibility on the left and better perceptibility on the right when the TalkBack tool is being used.<\/span><\/p>\n If your user is utilizing one of the tools for the visually impaired, he or she will be read aloud the elements on the screen. On the left, the description, \u201cButton 1,\u201d is much more confusing than the description of the button on the right. <\/span><\/p>\n Always ensure that a vision impaired user receives the exact same information that is available visually by adding clear, descriptive text for every visual element. <\/span><\/i><\/p>\n Another important aspect of an app\u2019s perceptibility is the use of <\/span>color<\/span> contrast<\/span>.<\/span><\/span><\/span><\/p>\n In the first image, it’s difficult to see the text options since the text is gray on a gray background.<\/span> In the second picture, the text consists of white letters on either a blue or green background, which is far easier to see.<\/span><\/p>\n We must take caution with the colors that we use for our texts, buttons, and backgrounds for our application. By doing this we are keeping in mind and benefiting people with partial vision so that they can easily distinguish the buttons in applications and perceive contrasts differentiating between foreground and background colors.<\/span><\/p>\n To validate whether or not your app has good color contrast and if it’s highly perceptible, you can use these tools:<\/span><\/p>\n This principle relates to how easy it is for a user to carry out actions, gestures, and movements on the screen. It\u2019s important to make it obvious at all times where the user is located within the app and make it easy for them to know what they are supposed to do next at all times. <\/span><\/p>\n Take a look at these examples of operability:<\/span><\/p>\n In the first image, you can see that the title screen is ORDER, a title that doesn\u2019t indicate to a user who may have stepped away for thirty minutes or so what it was they were in the middle of ordering. It\u2019s also not very helpful to have fields in the form that do not provide cues as to what needs to be filled out in each.<\/p>\n In the second picture, we see that the screen contains a more specific title: what exactly they are ordering and how far in the process they are of ordering it. In addition, text fields are displayed letting you know that you must enter your phone number and its description, like \u201chome\u201d or \u201cmobile\u201d number. With these improvements, the user is always aware of what stage of the process they are in, what they ordering, and also what exactly is the information that is being asked of him or her. <\/span><\/p>\n Titles for each screen and descriptions in the text fields benefit people with cognitive disabilities; users who may have difficulty understanding and assimilating information or face difficulties with interpreting the meaning of a selection or text field.<\/span><\/p>\n When speaking of an app\u2019s \u201cunderstandability\u201d we are referring to how it adapts to changes in screen orientation. For example, does it maintain a consistent design and give us the proper cues as to how it works? Understandability, of course, also relates to the language used in notifications, instructions, buttons, etc. Everything should be clear and simple, not to mention free of grammatical errors.<\/span> In the first image, we can see that the four menu item is called FAQs. We should be careful with abbreviations and be ensure that users can access the expanded form of abbreviations.<\/span><\/p>\n By fulfilling these accessibility criteria for understandability, we can benefit users who have difficulty decoding words, <\/span>rely on screen magnifiers, have limited memory or have difficulty using context to aid understanding.<\/span><\/p>\n This principle is not actually directly related to the design, but as a designer, tester or developer, we can still check the behavior of the application with the use of support products.<\/span><\/p>\n Content must be robust enough to be interpreted reliably by support products. A highly accessible mobile application must be <\/span>compatible<\/b> with support products, working just as well as when you do not have an activated support product. <\/span><\/p>\n A user gives the \u201cNext\u201d button 3 taps<\/span><\/i><\/p>\n When a user has enabled VoiceOver, TalkBack, or Narrator, in order to select an option, he or she must tap once to hear what it is and then double tap in order to select it. <\/span><\/p>\n In the first image, we see the user doing just that. The user taps on the \u201cNext\u201d option and the support app indicates that it\u2019s the \u201cNext\u201d option and that it\u2019s a button. He or she then double taps it, but the app becomes unresponsive and doesn\u2019t display the next screen. This can often happen when an app is not compatible with the support product, certain buttons and functions don\u2019t adhere to the alternate way of using them.<\/p>\n On the other hand, after tapping three times, the next corresponding page appears, meaning the application is compatible with the support product and performs the action as it would when the support product is not activated.<\/p>\n Now you know several examples of accessible mobile UI design and hopefully, you’ll only make apps in the future that take users with physical disabilities into account. At the least, I hope you take five minutes to test your app by using these support products or accessibility testing tools in order to put yourself in the shoes of someone else.<\/span><\/p>\n For more resources, I recommend visiting <\/span>https:\/\/www.w3.org\/WAI\/mobile\/<\/span><\/a> and reading this: <\/span>My Approach to Mobile Accessibility Testing<\/span><\/a> By Helen Burge for Ministry of Testing.<\/span><\/p>\n Do you have any other do’s and don’ts of accessible mobile UI design to add to this list?<\/p>\n How to Easily Do Accessibility Testing in Continuous Integration<\/span><\/a><\/span>How Do People with Disabilities Interact with Mobile Apps?<\/span><\/strong><\/span><\/h2>\n
<\/span>For the Visually Impaired:<\/span><\/strong><\/span><\/h3>\n
\n
<\/span>For the Hearing Impaired:<\/span><\/strong><\/span><\/h3>\n
\n
<\/span>For Those with Impaired Motor Skills:<\/span><\/strong><\/span><\/h3>\n
\n
<\/span>Examples 1&2: Perceptibility<\/span><\/strong><\/span><\/h2>\n
![\"accessible](\"http:\/\/abstracta.us\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-14-at-2.38.32-PM-min-1.png\")
<\/a><\/p>\n<\/a><\/p>\n
\n<\/span><\/p>\n<\/a><\/p>\n\n
<\/span>Example 3: Operability<\/span><\/strong><\/span><\/h2>\n
<\/a><\/p>\n<\/span>Example 4: Understandability<\/span><\/strong><\/span><\/h2>\n
\n<\/a><\/p>\n<\/a><\/p>\n<\/span>Example 5: Robustness<\/span><\/strong><\/span><\/h2>\n
<\/a><\/p>\n<\/span>Accessibility is Key for Good Mobile UI Design <\/span><\/strong><\/span><\/h2>\n
\n<\/span>Recommended for You<\/span><\/span><\/h2>\n
\nNew Software Testing Courses for People with Disabilities<\/a><\/p>\n