How design is used to help Accessibility.

7 Things Every Designer Needs to Know about Accessibility
absolutektaz via Twenty20

At a Glance

By incorporating better accessibility features in a SaaS product, enterprises can ensure a superior user experience. Every SaaS product should be backed by a proper design strategy to understand the ways in which customer success can be ensured. It is important for every SaaS designer to have a thorough understanding of the concept of accessibility to deliver impressive designs for a superior user experience.

A strong understanding of the outcome customers want, and how they currently get it, is essential for you to succeed in product development.

Des Traynor, Co-founder, Intercom

Accessibility is important for every SaaS product, and a designer needs to know when the product can be called completely “design-ready.” If you are a SaaS developer/designer, you should know what accessibility means and how to make your product accessible by your target audience. For example, if there is a person with a disability, they should also be able to use and navigate your product. A basic understanding and interaction with your product should be established for all your target customers on the web.

Factors To Improve User Experience

To design your SaaS product with proper accessibility, your design team should know about the seven important factors about accessibility that improve user experience. In this article, we will talk about all these important factors and things designers need to know before jumping into the process of SaaS product design. So, let us begin.

Explore within constraints

A good designer is one who can explore and come up with new ideas within a given boundary. But putting constraints does not mean your product will not be as good as any other SaaS products you are competing with within the market. Since accessibility is crucial for your product as you want to expand your target audience, you should pay importance to those users with some form of physical disability. Some of your users might have a cognitive disability; some might have a physical impairment, deafness, color blindness, etc. So, your product designer should think about all the audience sections before considering a specific design. Remember that you are developing a product to find a perfect solution and remove your customers’ pain points. You are not building a product for your designing team. A designer should always pay attention to make their user’s life better through a smooth and easy experience.

Using color is not the only option

Many of your users can be color blind, have low vision, or completely blind. If your users are color blind, you should not just use color to convey a message. Research says that 1 in 200 women are color blind, and 1 in 12 men are prone to the same. This means a significant fraction of your total users will find your UI inconvenient if you focus only on color. Let me example this with a given example; the signup form for email subscription generally asks for name and email address. When a user will fill-up the form, generally, a red color border is shown if those essential questions are not filled. It will be hard for color blind or low vision person to understand the red border. In this case, the designer needs to think of an alternative that will convey the same message. So, along with the red border, if the designer adds an asterisk mark of every title, it will become clear to the users which information is compulsory to insert. This makes the user interaction much better.

The contrast between text and its background

For people with low vision or poor vision having color blindness, there should be a minimum contrast for the text to become properly visible and readable. According to Web Content Accessibility Guidelines (WCAG), the contrast ratio for the text to the background should be at least 4.5 to 1. It is readable for those with visual shortcomings. There are many online colors contrast checkers to help you pick up the ideal color palette to increase accessibility. Many good designers prefer higher contrast design, and maybe you should give it a try as well.

An extra step for keyboard users only:

Reset stylesheet is a blessing for the modern generation designers. The reset stylesheet helps a designer build a product that will provide a consistent user experience across all devices. But the reset stylesheet has one big disadvantage: it is not very user-friendly for those who surf the net with their keyboards only. You can remove the default focus and customize and reset the focus according to the convenience of your website. Most of the websites do not focus on creating their focus styles. But this is a mistake as focus indicators for those who solely use keyboards should be designed. So, for the next client, ask your designer to focus on resetting focus styles and make them better than the existing options.

Wisely choose your form designs:

In recent times, the questions or information asked in the form has become very minimalistic. It has been found that the users or the potential customers who are going to sign up on your page generally ignore it if too much information is asked from them at the first go. So, ask for minimalistic information, for example, name and email id on the first go. Apart from this, the size in which the users must insert the input should be clearly defined by the designers. For example, if you ask for a name and leave an undefined space below, it becomes difficult for people with low vision. But, if you create a box with a bright blue border, the space becomes visible in which the information must be typed.

In some websites, you will find that titles are put inside the text bar where a user is supposed to provide information. This helps the users to get a clearer idea of which information to be put exactly where. For example, you are filling up a form for customer care, and they are asking for your contact number to reach out to you. In this case, the title is mentioned inside the text box where the user must put information.

Avoid the identity crisis in some component:

This is the especially important part for labels or menus where suggestions come up searching for any field. For example, when you are searching for an airport, you are looking for an air ticket, in the suggestions of search-relevant options of airport names should come up and not anything completely irrelevant.

You users do not have to hover for everything:

Though hovering at the dropdown menu is a common feature for any website or UI. Make sure your users do not have to hover for every element as it reduces accessibility. For example, in an apparel shopping app, some of the main sub-categories like men, women, kids should be placed at the sidebar to be easily available, and on clicking any option, the sub-categories will have a dropdown option for narrowing down the choices.

These are the seven factors that increase accessibility for any UI design. If you are a SaaS designer, you can implement all these to improve your next SaaS product design and deliver an inherently superior user experience.

Read more stories