A good functional design is an accessible one. There are many reasons to go for an inclusive approach in designing and we believe that no one should be excluded from the benefits that bring the digital world. More than one billion people experience some form of disability, so remember that having accessibility in mind when designing matters.
There are best practices for accessible designs that you should follow. However, it’s best to test and analyze each design depending on which group of users you have in mind. Our last webinar presenter, Piotr Źrołka, Accessibility Expert and CEO of Kinaole decided to share some tools and resources that he finds useful when working on accessible designs. Here they are:
To check whether your site meets the standards of an inclusive design, it’s best to use a web accessibility evaluation tool.
ANDI is a great free bookmarklet solution that will show accessibility issues on your site and instruct you on how to improve your accessibility design. It will also check 508 compliance right away.
You can count on this accessibility inspector to suggest solutions and offer some insights, just like an accessibility expert would do in the standard website development process.
Headings and website organization structure are especially important for the visually impaired. If your site lacks a proper use of headings and skips some headline levels, e.g., from H1 going to H4, then the screen reader will present the content to the user with the wrong page hierarchy. Taking care of the proper page organization is easy and can boost your website accessibility.
The site checker tool that can help you with this is headingsMap. It shows, browses, and audits the headings structure as it generates a document map or index of any web document structured with headings and shows the HTML 5 outline.
Landmark Navigation is another useful tool that helps in navigating screen readers through pages more effectively. It regions the page allowing users to skip to the content that they want instead of going through the whole page.
It will navigate via WAI-ARIA landmarks using the keyboard or a pop-up menu.
Web Content Accessibility Guidelines 2.1 is an invaluable resource on web content for people with disabilities. You will find all accessibility standards there such as text spacing, contrast levels, orientation, and many others.
It provides guidelines for all types of disabilities including visual, auditory, physical, speech, cognitive, language, learning, and neurological ones, and will help you enhance accessible user experience right away.
It’s best to not only use accessibility tools for designers and developers but also test and analyze the site from a disabled person’s perspective.
NVDA is a great free auto-screen reader that allows you to switch perspectives and test on your own whether your website meets the needs of blind or visually impaired users.
Remember that aside from the tools to help you in your site analysis, it’s best to constantly keep up with accessibility resources. So, here are some extra links and books that may come in handy:
Making your designs inclusive is a process that ranges from choosing an accessible color palette, organizing the user interface well, using assistive technology, and finally testing the design. It’s best to have a solution that at the same time will assist you with both designing and instructing what works best for some disabilities – without the need to install external tools.
At UXPin, we’ve got built-in accessibility features such as a contrast checker that analyzes the background color as well as the contrast ratios and a color blindness simulator that shows how some users may experience the end result of your design. If you want to check how it works, go ahead and sign up for a two-week free trial and see if your designs are accessible!
Case Study: Redesigning IGL Connect mobile app for better accessibility
The project serves as the Design Project for the 4th semester in which I redesigned the IGL mobile application to make it accessible and easy to use thereby providing a better user experience.
Indraprastha Gas Limited is one of India’s leading natural gas distribution companies and one of its offerings is PNG (Piped Natural Gas) which provides gas connections directly to the home via a piped network eradicating the need of cylinders. The application is catered to many sets of users ranging from people living in normal households to Industrial and Commercial establishments, thus catering for everyone which is also the rating of the application on google play store.
During the Covid 19 pandemic, about 10 months back when the lockdown was imposed, a message was sent to my father's phone by IGL saying that he had to download the IGL app and pay the bills using their self-billing feature. The experience was horrible for my father and the more he used the application more confusion slipped into his mind. While helping my father to pay the bill, I observed that the problem was not the inability of my father to understand the app but the app itself was a bit complicated which common users find it difficult to operate. Seeing this frustrating and confusing experience, I decided to take this as an opportunity and dive deep to understand the problem and provide a solution for the same.
Meter Reading and Bill Payment (pre-COVID times)
Before COVID-19, an employee designated by IGL used to visit our house and click the picture of the gas meter and re-record the reading for confirmation. The bill was then generated based on the inputs taken by that employee and on receipt of the bill the payment was made through an online or physical medium.
Affect of Coronavirus on the current system
Though the current system seemed to be perfect, however, Coronavirus brought out the weakness that was existing in the system. As during the lockdown, no official from IGL came for taking the meter reading physically, as there was panic being felt by the customers that there were chances of spread of coronavirus which could be transmitted due to physical interaction. Therefore, it was essential for IGL to find out an alternative mechanism for the same.
My role was toempathize with the users, identify the problems and finally propose a more accessible and inclusive application.
I took a different approach in this project and followed a design approach which took me from the state of ambiguity where I had a lot of questions to bring about a more transparent system where everything was clear and testing each idea which would result in a step forward towards a better solution without leaving space for revisiting and changing the design for subsequent rounds of testing.
To understand and gather both qualitative and quantitative data I resorted to the reviews and ratings of the IGL app on Google Playstore.
Analysis and observation of hundreds of reviews were undertaken and the most common ones were mapped based on the ratings. Surprisingly, even the users who gave 5 Star rating were pointing out issues they were having while using the application. Some of the most common problems that were mentioned by the people regardless of the rating they gave were:
Self Billing – Even though self-billing is being promoted heavily, it does not work properly. The app, most of the times, does not detect the image of the meter which poses a problem in paying the bill.
Log In- Despite having BP number (unique number given by IGL with which your account is identified) the app does not recognise the BP number and most of the application’s salient features like Self billing can only be accessed by logging through BP number.
Lack of Feedback- Any task that is completed on App, there is a lack of feedback which makes it frustrating and most of the reviews talk about these issues. For example, how they have paid the bill but it shows they haven’t, how they are trying to log in but there is no OTP received and many more problems like these.
Mapping and analysing reviews gave me a sense of how prominent the problem actually is. From the analysis, I learned that ratings are not a true indicator of how good an application is. It does not highlight the real problems that the users are facing.
The method of concurrent probing was used to study and investigate how extreme users went about using the IGL app while performing a particular task. A diverse set of extreme users were recruited for the study to understand the user's problem more deeply and empathize with them.
Understanding the type of Users
While observing and using the application it was noticed that there are two types of users of the application:
Domestic Users- People having gas connections in their homes
Industrial and Commercial Users- Restaurants, Hotels and other business establishments that are having the gas connections.
While both sets of users have BP number the method of paying the bills differs vastly between them. The Industrial and Commercial users have different payment plans, namely, prepaid and postpaid, which differs from the domestic users who have to pay their bill every two months. Based on interviews and secondary research, I got know that major focus is given to domestic users as they make up the larger user base.
Task: Open the IGL Connect App and pay the gas bill using the Self-billing feature and save the bill on your phone. Fill the SUS questionnaire according to your experience.
The System Usability Scale (SUS) offers a very quick and simple questionnaire design to assess the usability of a particular device or product. The SUS consists of ten usability statements that are rated on a Likert scale from strongly agree to strongly disagree with the statement. Answers are coded and a total usability score is derived for the product or device under analysis. The range of the score is between 0–100.
User’s Identity is masked for privacy and confidentiality.
User 1– A government employee who is 48 years of age and is a new user of the IGL connect app. This is the first time he is using the application.
User 2– An Undergraduate student who generally pays the bill through IGL website and is the new user of the application.
User 3– A retired army officer who has been using the app from past 1 year. He is a pro user of the app and knows ins and out of the application.
Improper Design- A lot of users got distracted initially due to the moving images on the home screen. Users were not able to visually differentiate between the buttons and the banner ads by IGL. The labelling of quick pay and self-billing button createdconfusionin the minds of the users.
BP Number- A lot of errors occurred while logging in to access the self-billing feature. Most of the times app did not recognise the BP number even though users have gas connections for years. Calling customer care and conveying the problem of BP number solved the issue.
Sudden Exits- Upon exiting the login section of self-billing screen it would lead to exiting the app instead of going one step behind.
Lack Of Feedback- Upon payment, there was a lack of feedback on whether the payment is done or not. There was also the inability to download the bill after the payment.
Bodystorming is a way of subjecting a researcher’s own body to physically experience a situation to ideate. A combination of role-playing and simulation, bodystorming takes place in a physical environment, instilling a feeling of empathy for the users.
Task : Blind yourself and use your phone with the built in accessibilty feature talk back to navigate and use the IGL Connect app
Accessibilty Feaure Used: Google Talkback
Before using the IGL Connect App other application like Whatsapp were used to truly empathise. The Screen reader (talkback) worked fine but it was hard to navigate and the problem increased multiple folds when I tried the self-billing feature and it became difficult to click the correct picture and I had to rely on external support for clicking the picture of the gas meter.
Analysing the Interface
The application was divided into screens and then common observations and design problems were noted and highlighted.
The flow of the Existing Application
To understand the interaction and flows of the application, a user flow diagram of the existing application was made and analysed and all the broken flows were marked.
Poor Navigations- The navigation drawer is not used efficiently, apart from the home screen. The navigation drawer is not present in any of the screen making the navigation harder and the purpose of navigation drawer redundant.
Unnecessary Multiple Logins- For each and every screen you have to log in again and again. For example, you're paying your bills through my account screen and the next time you open the app you try self-billing option in the Domestic PNG screen you have to re-login which is a hassle as this frustrates the users.
Prolonged Loading Time– From Splash screen to the home screen, it takes approximately 7 seconds to reach the home screen which is a lot of time. According to a Google study, 53% of the visitors leave a site if it takes more than 3 seconds to load.
Lack of Proper Hierarchy- The most common features of the application used by the people are not on the top of the list in particular screens. This problem is consistent across various screens as it takes more time for the user to find the relevant button to complete a task.
Heuristic Evaluation was carried out on the IGL Connect App. The following image displays the violations of Jakob Nielsen’s 10 Principles on Heuristics done on different parts of the application.
Lack Of Contrast– It fails to follow WCAG 2.1- 1.4.3 (AA)– Contrast ratio between text and background should be at least 4.5:1. This is because the background has an image instead of a plain background.
2. Placement of the meter- The placement of the gas meter can be different in different households. While in most of the homes the meters are within the eye level in some houses meters are placed in very odd places making it difficult to reach them physically let alone take pictures.
To sum up the research and move ahead with the solution I generated some Insights.
1. Poor Interface
The app has poor navigation and the promoted features are not given any importance. They are hidden within the various screen while unimportant stuff is on the home screen. The Navigation drawer is inconsistent and is only available on home screen making the navigation between different sections of the application difficult and time-consuming.
There are similarly labelled buttons which makes the users confused and slows them down in accomplishing their tasks.
The proper contrast ratio of 4.5:1 between the text and the background is not achieved according to WCAG 2.1 Guidelines which can make
2. Unresponsive features
Change in text settings alters the text of the whole interface of the mobile phone while all other apps like WhatsApp are responsive on the other hand IGL Connect fails to be responsive.
When using google talkback there is no feedback when a picture of the meter is being taken. There is a high chance that the picture can be wrong and a visually impaired person might not be able to click the picture correctly.
3. Unnecessary Information
There is unnecessary information on the app which increases the cognitive load on users mind and makes them slower in accomplishing their tasks as most of the users are new to the app and are still getting used to it.
I sketched various wireframes with different layouts and interaction methods.
Wizard Of Oz Prototyping
Wizard of Oz prototyping (WOZ prototyping) is a design methodology used to test products at very early stages and get feedback from users and improve the shortcomings. A WOZ prototype is basically a roleplay where one person pretends to be the system and the user interacts with the system.
I tested out all the low fidelity prototypes with users to observe which one felt intuitive and natural and which was confusing for the users. This allowed me to compare all the prototypes and finally select one of them to further design a new solution.
Final Solution Concept
As observed earlier there are two types in case of pipeline natural gas connection. The user can easily select the type of connection he is using and doesn’t have to log in again to pay the bill.
2. Home Screen
As the app will be used every month, therefore, there will be push notifications to remind the users to pay the bill.
The Home screen has a card on top to remind the users of the task they have to accomplish. The card takes the user straight to the meter reading option so that the user can easily pay the bill.
Most used options of PNG and CNG are present on the home screen so that the user can easily access it.
On top right corner there is an emergency alert button which will call the emergency helpline number in case of any emergency.
3. Bill Payment
There are two methods of paying the bill and the difference between both of them lies in the way of registering the meter reading. In every payment, the user can choose the method of registering the meter reading.
User Flow 1- When the user self registers the meter reading
User Flow 2- When the IGL officers come to the house to register the meter reading.
Flow 1- When the user self registers the meter reading
While clicking the picture to take the meter reading the voice assistant will give the audio feedback that the meter reading is successfully captured.
Audio feedback repeats the number when the phone is being used in accessibility mode and google talkback is on. For users using the mobile in accessibility mode, the phone automatically confirms the meter reading for the user.
After the payment, the bill automatically downloads into the phone.
Flow 2- When the meter reading is taken by IGL officer
4. Chatbot Maitri
The increased FAQ buttons make it easier to click the desired question without any mistakes.
I used Able (plugin in Figma) to constantly check the accessibility of the colour contrast between the text and the background and I was able to achieve a high contrast ratio.
6. Use of Illustration
I used illustrations set of Storyset by Freepik instead of images to make the app more approachable and friendly.
After making the final concept I tested it out with a set of 5 users to understand and see to what extent the problem was solved.
Task: Use the prototype of the new IGL Connect App and pay the gas bill using the Self-billing feature and save the bill on your phone. Fill the SUS questionnaire according to your experience.
User 1- The SUS Score is given by user 1 was 75.
User 2- The SUS score given by user 2 was 78.
User 3- The SUS score given by user 3 was 70.
User 4- The SUS score given by user 4 was 72.
User 5- The SUS score given by user 5 was 70.
The average SUS score of 5 users came out to be 73 which has an adjective rating of Good. This increase in the SUS score shows that the new design of the app is good enough but still has some issues which can be improved upon.
To find the remaining issues of the application I did a heuristic evaluation on the redesigned app to spot the problem that was remaining.
Re-iteration to improve the experience
After finding out what could be improved, I addressed the problem with the severity rating 3.
The progress step interface design pattern was used so that user was aware that which step he had completed and which steps were left to complete the payment.
This project taught me that when we as designers cater to the extreme set of users and solve the problem for them a majority of population benefits by it and the overall experience of the app gets better.
It also taught me that we should consider accessibility while designing interfaces and the importance of usability testing to validate and see to what extent we have solved the problem.
It’s not a constraint, digital accessibility is the aesthetic we need, it’s a design element that makes a digital experience beautiful.Image Credit : Raconteur
As the integration between online and physical grows, digital products are set to transform how everyone from boomers to Gen Z turns into digital natives, connect, shop, work, and play. This has resulted in physical points of sale diminish in many regions. Digital and experiential business strategies are now imperative for brands. People have accepted digital mediums as a way of life and have moved years forward in digital adoption for business. Amazon doubled its profit during a
Developing an app or website isn’t just about creating what you know. It also means considering accessibility and how those who are different from yourself will use the site. Ideally, your design should allow anyone, regardless of abilities to use your app and easily get information from it. Unfortunately, many designers never stop to think about this side of design.
What do you need to know about accessibility? First, it means that your program should be useful to someone who cannot hear or someone who cannot see, etc. Consider all the angles and then create something that will
We’re happy to let you know that we’re hosting a free webinar “11 ways to start your inclusive, accessible design toolkit” with guest speaker Piotr Źrołka, Accessibility Expert, UX Strategist, and CEO of Kinaole.
As designers, most of us understand the ethical importance of making our products accessible and inclusive for all the people who use them. Yet, we don’t always understand the best way to go about doing this, or how to convey a business case to make it a priority.
But Annie Jean-Baptiste sets out a clear method in her new book Building for Everyone. Annie’s the head of product inclusion at Google, where she makes sure the company’s teams are building products for everyone. She stopped by the latest episode of the Design Better Podcast to dive into the “ABC’s of
UXPin: Welcome to 2020 Design Trends for UXPin. We’re here to talk a little bit about design trends for 2020. First of all, please tell us a bit about yourself.
Grace Brewer: Hello, my name is Grace Brewer. I lead a small design team at a medium-sized healthcare IT company that’s based out of Kansas City. Our team just started about four years ago. It’s been really exciting to see the company become more design mature. We utilize UXPin and we’re very big fans. We’ve spoken on behalf of it before because we find the tool to be
By Caterina Falleni, Product Design Lead for Accessibility, and Mike Shebanek, Head of Accessibility
In celebration of the 30th anniversary of the Americans with Disabilities Act (ADA) and National Disability Independence Day, we’re sharing our lessons learned incorporating accessibility into all projects, especially those with fast timelines.
Product release cycles continue to get shorter — days and weeks-long instead of months — making the task of integrating accessibility early in the process look even more challenging. But it’s a myth that making a product accessible is too difficult, too time-consuming, and requires specialized resources. Our experience at Facebook over the last two years building products for