The principles of universal user interface design

Mobile in hand

According to the World Health Organization, approximately 285 million people have vision problems, between 110 million and 190 million have mobility problems, and 360 million people around the world have hearing loss. They have different needs and requirements, which means that the design must be affordable for them too.

We are not the only ones who think so. Internet inventor Tim Berners-Lee himself says:

“The World Wide Web is strong with its versatility. Accessibility to all, regardless of their limited capabilities, is an extremely important aspect”.

In this article, you will learn about five ways to make your web pages and mobile applications accessible to users with disabilities, which include both blind people and car drivers.

Use color and contrast

Among the 285 million people with visual impairments, many have low sensitivity to certain colors and contrast. Design for users who can’t distinguish colours or who wear corrective glasses is just as important as design for those without such restrictions – this is the true spirit of universal design.

Hud

First of all, try to make details on the page of your site or application screen visible. Each element is equally important, but some of them are less visible, and some – more. Any default button is better visible than the gray, low-distinguishable hint, so pay more attention to the hint so that the user does not miss it.

Highlight URLs so that their purpose is obvious. Links that are bold or underlined are better perceived by users who are fluent in reading, who can’t see well or who can’t distinguish colors.

The selection of contrasting colours also helps. Try to place light elements on dark backgrounds and experiment with blank spaces. The Contrast Checker tool can help you do this. It picks up font and background color combinations to make it easier to read text from monitors and mobile devices. These combinations are approved by the Web Content Accessibility Guide (WCAG). They are judged on six criteria that take into account pin size, contrast level and color perception.

Take the Sketch Designer Application Interface as an example. It has dark and light themes. With a dark theme, light elements are placed on the surface, which is best for people who can’t distinguish colors; a light theme has a cleaner look, which allows users to better distinguish between text types and other UI elements.

In the SublimeText developer tool, the standard background is dark because it’s easier to see code elements painted in different colors.

The Mandu article reader, developed by Live Typing, has a feature to change the background color. Different active elements are better contrasted in this case.

Not only color can contrast. Contrast large and small elements, filled and empty space and even fonts Serif and Sans Serif. Playing with them when creating a site UI page, you can make it more accessible.

Design is the ability to create a miracle with limited means. Read a detailed description of “accessibility” from Jesse Hausler.

Make UI design accessible with a visual hierarchy

Contrast and colour naturally create a visual hierarchy. Remember your favorite sites – for sure, none of them are not crowded content somewhere in one corner, and methodically organized on a hierarchical principle.

Working with the visual hierarchy assumes that the UI elements in the design of the web page or application screen are sensibly placed and linked to each other so as to accurately convey to the user its purpose.

Do not overfill your application screens and website pages with content, it scares the user. Be aware that people with vision impairments may want to enlarge the screen, so make the content scalable and remember the powerful tool of responsive typography.

The goal of responsive typography is to give you the right emotion when reading and make your text readable. Achieving the former is helped by selecting a family of fonts, which will seamlessly fit into the site or application, and the second – the font size, line height and width of the text.

Icons

Since we are dealing with people with disabilities, it is important for us to focus on readability. Do not flirt with fonts or try to stand out from the crowd if you are not a typographer. Take something standard and time-tested so that you can read the text. The rest is secondary.

The visual hierarchy highlights the buttons that call for action. They should be bright and clear, and important information should ideally be placed at eye level.

The sooner you start working with the color and location of content in the UI of your website or mobile application, the better you will understand what your application will look like and then you won’t have to remake it.

Use the interactive UI elements to communicate the value of

When working with any user, you need feedback. This is consistent with the principles of collaborative or participatory design, which takes into account the interests of both the creators of the product and its users. Especially important is feedback from users who do not interact with applications in the usual way.

What is clear to a person accustomed to digital technology is far from obvious to elderly people whose mental models of how things work are quite different. UX expert Jeff Johnson and Kate Finn talk about creating UX for people over 50 in their book Designing User Interfaces for an Aging Population: Towards Universal Design. Read the translation of chapter one.

To tell users how to use certain UX elements, tips are good. Sometimes our design is not so obvious, so hints are a great way to increase accessibility. When you look at a mug, most people will see a pen and understand how to hold a mug, but how to use a social network is not so easy to understand.

Interactive elements are one way to provide the feedback and hints you need to make your design more accessible. All elements must have a clear and previously thought out meaning. If the user needs to use any gesture, it is necessary to inform it.

How to Use Voiceover on iPhone and iPad

A good example is VoiceOver in iPhone settings (Settings – Basic – Universal Access – VoiceOver). If it’s turned on, a voice prompt comes along when you touch each interface item in any window, whether it’s the Settings screen, Instagram, or Safari Browser. For example, if you click on the clock, the prompt says “Clock”, says the time, and continues with “Double Touch to open”.