Universal Design 101: Do you design for all your users?

Universal design benefits both users, businesses and people most. But what is it, and what concrete actions should you take as a designer, developer or project manager into account?

Did you know that there are laws about how your website should be? Web pages and digital platforms shall follow: universal design requirements in accordance with Norwegian laws and regulations. This can be dissuasive, and universal design can be seen as a comprehensive and complex field of getting into. However, consciousness is necessary at the digital age in which we live. Fear not, here's the introduction you need!

What is universal design?

Universal design is about creating products, services and content online with the idea that they should include everyone, regardless of their functionality. In this way, everyone can participate and have the same access to society, and in this case, digital content. This type of methodology in the digital space is also called inclusive design.

When we talk about digital universal design, we don't get away from WCAG. WCAG stands for Web Content Accessibility Guidelines and is recommendations and guidelines for making online content more accessible.

Norwegian regulations require network solutions to be designed according to different versions and levels of WCAG.

Why is universal design important?

There are countless reasons why, almost any angle of action. The most obvious, but also most important, except that it is legal, is that it is good for people in the digital sphere. All will be able to use and navigate equal products and services, if universal design is set as a priority. According to Bufdir, between 15% and 18% have functional impairmentSo let's say that this is the same thing as that. There are many users you potentially exclude and miss!

By facilitating universal design and user-friendly web-page, this can also result in more users getting longer on the page and choosing to come back. If we do not meet certain requirements, users always have the opportunity to go elsewhere in most cases.

This applies to the principle that users spend most time on non-your pages and products. This principle is called Jakob’s Law and is one of UX lawsSo let's say that this is the same thing as that. This means in practice that users want your page to act as the pages they already know.

Who's good for?

Universal design is good for everyone! As supervision of the universal design of ICT says: "Required for someone, but good for everyone". Imagine a public transport app where you can buy a ticket. If the buy button is too small, then one with Parkinson's who has problems with motor, as well as one who runs to the bus and trembles a little, will have trouble pressing the button and conducting the purchase of the ticket. Remember, not all people use your product or service in perfect, undisturbed environments. Then it is a matter of building a good and solid foundation in line with universal design.

Good for SEO

What is good for universal design can help improve SEO. You don't necessarily rank higher by passing accessibility checks, but much of what's good for universal design is also good for ranking higher. Search engines reward well-designed websites, and universal design is a criterion for quality. Factors such as good user-friendliness, the ability to use screen reader, side structure and functionality are universal design criteria and SEO criteria. This is a good card to keep in your sleeve when talking to either decision-makers or “sceptics”.

Many types of downtime

One important thing to remember is that there are many types of downgrading, and that universally designed solutions will be useful to everyone at one point in life.

Disability reductions may not be permanent. Let's take an example. In many cases it may be difficult to see what is on a screen because of the environment or circumstances - this may be strong sunlight, distance or self-respectiveness. It is then important that the design is optimal. The following are some examples of different types of downturns.

Permanent: Blindness, weakness, age-longness

Temporary: Lost the glasses, green and grey star

Situation specific: Bad light, extreme light, distractions, distance

The 7 Principles of Universal Design

The Center for Universal Design at North Carolina State University developed in 1997 seven principles to evaluate and create universally designed solutions. They are as relevant today as 25 years ago. However, they are not directly linked to the law and should only be used for guidance purposes.

What should I as a designer, developer or project manager provide in a web solution?

The following points are far from exhaustive, but this may be something of the greatest and most important to get implemented.

1. Keyboard Navigation Tool When using keyboard navigation, you use the tab key to navigate around. The keytau navigation organisation makes your web solution available to users who cannot or do not want to use mice to navigate around. Make it easier for the user to navigate using keyboards by setting a meaningful tab order. Also use this medicine “Skip navigation links”, or jump links, to let the user jump right to the main content of a page. Here's a good one. guide to keyboard navigation of the UU oversight.

2. Semantics and correct titles It is important to use neat semantic code, with correct title hierarchies. Make sure, among other things, that headings follow the correct order from H1 to H6 and that the title tag at the top of the tab represents the content of the page.

Three. Write all text When screenreaders tell you what happens on an image on a web page, they read from the all-text that is encoded. When this does not exist, the connection between the content of your website may lose context for the screen reader. Alt text should describe the subject of the image. Decorative images shall be marked with an empty all-tribute, to avoid noise for the end-user.

4. Contrasts, Contrasts, Contrasts This is the most common error to commit according to WebAim, but some of the easiest things to do in many cases. Please insert the values required for different types of text and content, or use a contrast checker that will do so for you.

5. Large enough “touch targets” Touch targets are surface area of click, and here are requirements for input fields and buttons, for example. These shall be at least 44x44px (WCAG 2.1). This is important to avoid the user pressing wrong, whether they have problems with fine motor, simply have big fingers or are on the move. Remember what I wrote about the two different people who are buying a bus ticket?

6. Correctly designed forms and input fields In forms, it is important, inter alia, that labels, or labels in good Norwegian, leave input fields. If instructions or labels are placed inside the input field, it may prevent the user from reviewing the correctness of the information. WCAG also requires mandatory fields to be marked.

Seven. Use shape, text, contrast, size and highlight to clarify what you are trying to convey Did you know that between 5% and 8% of men are color blind? and struggle to distinguish colors to varying degrees? With more instruments than just colors, you can make sure that more people find their goal faster. A concrete example is to decorate hyperlinks with both color and color. underline. One who has difficulty seeing colour cannot necessarily see the difference between dark blue link colour and black body text. Adding links with an underscore is a pattern that most Internet users know about.

Eight. Allow Enough Zoom Prepare your website to use at high zoom rates. Many navigate the web in ways you may never have thought about before, including by max zooming.

Nine. Font Size and Human-readable Fonts Now, WCAG does not require a certain font size, but it is general consensus and best practice 16px is a good starting point for paragraphs. Although these are not yet official WCAG requirements, some UI best practice principles should be the basis. Please use among others fonts that have good readability. So you are carefully wondering if you should use the font that has a high degree of complexity in the text of the bread. Also try to avoid too many font families on one solution, and drip “light” and “thin” variants if there is doubt about readability for all. Use discretion, but also perform tests!

Ten. A list of text spacing and short lines length Make sure your text content is as readable and accessible as possible using the appropriate line height. In order to meet WCAG requirements, there should be at least 1.5 line spacing of sections. In order to be accepted as available according to WCAG, line lengths should also be less than 80 characters per line for optimal legibility.

11. Universally-designed text Not only should we design text decoration universally, but make sure that content is written intelligible and in simple language.

12. Good interaction design Clear and correct feedback/re-notification by interaction, clarity about the buttons and links that lead where, and good navigation are important for user-friendliness in any network solution.

13. Clear error messages Write bug reports that clearly describe the bug that has occurred. If the user has entered his email in the wrong format, it is important that it not only says “error” or “error”. The user will then not have enough knowledge about the error to be able to correct it as quickly as possible. Here is a huge advantage that the message appears near where the error has occurred (think Law of Proximity) so that the user understands exactly where the error has occurred and can correct it more quickly.

14. Test, test, test! Testing a diverse range of people, with different degrees of functionality. Test also at different ages, with varying degrees of technological knowledge.

Design for All

With this in mind, it should be remembered that universal design is consistent with user-friendliness and quality. Not only is it important for people with the greatest need, but it makes the content you create more susceptible to the most people.