Universal Design

Did you know that the proportion of people with good eyesight, hearing and mobility, who can read and write without problems, who can multitask efficiently and who are functional at all times, is about 50% of the population?

The rest of us wear glasses or are color blind, have broken wrists or ear infections, live in noisy environments or have a lousy internet connection, are on the go or are busy, are dyslexic or have an attention deficit disorder, etc.

This means that about half of our users may find it difficult to use our products or navigate through our websites, or that they are even completely unable to interact with them. If we do not include this in the calculation, we may miss the opportunity to increase user satisfaction and expand our target group. Pretty worrying?

What if I tell you that we can improve interactions and the overall user experience just by implementing some simple principles in the design phase? After all, designing with most challenges in mind can provide value for everyone, we call this Inclusive Design or Universal Design.

What is Universal Design/Inclusive Design?

Universal Design and inclusive design assess a large number of people’s needs and abilities, it is not just aimed at people with disabilities. It recognizes that our needs change with time and circumstance, so it presupposes mistakes, challenges, and different ways of interacting. It aims to solve problems before they arise, raise quality and change standards for good product design.

The result is an inclusive user interface that is empathetic, conscious and accessible. It can be used comfortably by different groups of people with different characteristics such as age, gender, education, financial status and abilities, who live or work in different environments and have different levels of access to technology.

Accessibility is the holy grail for inclusive design so in this article we will use POUR as a reference to create simple, effortless and fast interactions between a user and an interface.

POUR stands for:

Perceivable: Can digital content be interpreted or processed easily and in different ways?

Operable: Can the digital product work and be controlled easily and without confusion?

Understandable: Can a user understand how the interface works and the information presented?

Robust: Is the digital product compatible with various assistive technologies / software and devices?

Each of these different principles has a success rating of either A, AA or AAA. An A rating is the minimum requirement to have an accessible website, and AAA is the gold standard for accessibility.

How can Designer help?

As designers, of course, we can not control all of the above to the same degree. But – we must acknowledge that many of the accessibility problems people encounter are caused by decisions based on ignorance of the subject that was taken in the design phase. There are many opportunities for us designers if we want to make a difference. Here are four types of experiences we can influence (improve or help with) just by making smarter design decisions.

Visual experience: This includes shapes, colors, contrasts, text styles – all the graphical elements of the product interface

Hearing experience: This refers to sounds produced when they interact with the product, their volume and clarity.

Cognitive experience:This describes the time a user spends interpreting the interface and how much attention and mental force is needed to use it.

Motor experience: This includes all actions and movements necessary to perform a task or interact with the product.

Let’s go through each of these experiences and see which small design decisions have a big impact.

Improve visual experience

Color and Contrast

Contrast is the difference in brightness or color that makes an object stand out from the surroundings and can have a dramatic effect on readability. High contrast makes visual elements stand out from the background and become more visible and readable.

Action

Use high contrast to improve visual clarity and readability so users can scroll smoothly. For copying, a contrast ratio of at least 4: 5: 1 is required to achieve an acceptable AA rating and a contrast ratio of 7: 1 to achieve a golden AAA rating. The Webaim tool helps us test entire color systems for contrast availability.

Pro tip: A pure # 000000 in black and white can create a harsh contrast for the eyes and even affect people with dyslexia. This is why we tend to avoid it and go for a dark gray instead.

Brightness

Brightness describes the level of light coming from a source or the amount of light reflected from a surface. Bright colors reflect more light and can interfere with our ability to read and process information.

Action

Avoid using bright colors on backgrounds or large surfaces. Do not use bright colors on text or near as it distracts.

If the customer / brand requests a specific brightness color, try suggesting a saturated or darker alternative.

If you absolutely must use a light color, minimize its use to highlight actions and pair it with darker hues for balance and high contrast.

Pro tip: Any color with more than 50% yellow in it naturally reflects more light. This means that yellow, orange, green and cool hues are high risk colors and should be used with caution.

Color blindness

Color blindness is the inability to distinguish specific colors – usually red and green, sometimes blue light – and it is more common than you might think. It affects about 1 in 12 men (8%) and 1 in 200 (0.5%) women, according to Colourblindawareness.org. This means that approximately 8 out of 100 people experience our designs differently than expected

Action

Awareness and color testing. Hopefully there are tools online that can help us choose color combinations and check them against different color blindness conditions. One of my personal favorites is coolors.co. (Click on the eye icon at the top right to see a color palette through the lens under different conditions). Another way to check for color blindness is a tool called Color Oracle. Color Oracle uses a full screen color filter with the ability to choose between different conditions from Deuteranopia, which is the most common color blindness condition, to Achromatopsia which is very rare.

Pro tip: Don’t just rely on colors; Color should not be the only way to communicate important messages. Here’s what you can do:

• Use underlining for links and italics or bold to highlight text
• Use icons along with text to communicate success or failure
• Apply texture or patterns to charts
• Use a clear visual style for buttons or significant alerts with different font styling for focus or active states

Typography

Font selection Communication is the most important goal of every digital product and can be achieved through typography and proper application. Content should be readable, which means being easily recognized and interpreted, scanned and processed without any problems.

Action

Simplicity and clarity are essential for fast scanning and interpretation, avoiding detailed or complex fonts because it only provides visual noise. Choose the right font family that has clearly defined and uniquely shaped shapes so that people with limited vision or dyslexia can read it. This user group may be confused by some characters or their combinations. Font with large x-height will improve readability by creating more space for small characters. Finally, too narrow or condensed fonts with dense kerning should be avoided, as their characters may look confused and more difficult to distinguish.

Pro tip: Choose the right font by checking the most problematic characters and character combinations. Make sure that similar letters like ‘a’ ‘e’ & ‘c’, ‘b’ & ‘d’, ‘i’ and ‘l’ or ‘y’ ‘g’ & ‘q’ look very different and that ‘rn’, ‘oj’ and ‘ln’ combinations are clearly separated.

Font size

Did you know that most people wear glasses or contact lenses? That’s actually more than 6 out of 10! About 62% of people have access to the internet from their mobile phone. What could possibly go wrong when people with limited vision use technology on a small screen while on the go …?

Action

Use larger font sizes. As a general rule, 16px plus is considered the most inclusive, but be aware that fonts can be in different scales, and their sizes can vary enormously. Never go below 14px. In fact, most modern websites use 18px body fonts and 14px or 16px only for captions or tooltips.

Pro tip: Avoid using thin and light fonts, as they can be difficult to read for smaller font sizes or in bright light.

Section format

Helping people scan the content without any problems should be our main goal, since only 20% of people read the content and 55% of them go through it quickly. Our job is to support people as much as possible by using comfortable paragraph formats.

Actions

Research indicates that the average line length to support readability is approximately 70 characters, including spaces. Titles, subtitles and bullet points will help scan and align the left paragraph will make the text easier to read (for the western world). Long walls with text have significantly fewer chances of keeping people engaged. Successful paragraphs are no more than five or six sentences long without exciting 200 characters.

Whitespace will help people with cognitive and attention disorders, keep reading focus. By the way, it just makes reading more comfortable and fluent. According to WCAG, the best practice is to set the line height (spaces between the lines) to 1.5 relatives to the size of the type. The distance between paragraphs must also be at least 1.5 times greater than the line spacing, so that they are clearly defined.

Pro tip: The line spacing should not exceed 2.0, as it can have the opposite effect and distract readers.

Bonus: There is a tool worth checking out called Golden Ratio Typography (GRT), which uses the golden ratio to determine precise typographic proportions such as font sizes, line heights and associated distances for more visually balanced results.

Copy of Layout

As designers, we often fall into the trap of designing our layouts to make them look compelling or unique, and put ease of use aside. This is why we see trends such as parts of the text overlapping an image or text over a multicolored or structured background. We can still enjoy some of these trends as long as we know how and when to use them.

Action

When using text over a colored or textured background, we need to make sure that the color contrast between them is high enough while being consistent over the overlapping area – meaning that it is not lighter along with darker areas below the copy or too much detail disturbs . Larger font sizes and heavier font weights will also increase the contrast.

Pro tip: As always “know your user”. Funky layout is not for everyone.

Improve the hearing experience

You may be thinking, how in the world can visual design affect the hearing experience? Imagine having a conversation with a friend in a club. I bet you can hear half of what she says, but you can keep the conversation going just by looking at her moving lips, her body language and facial expressions. The visuals support and / or amplify the ambiguous sounds so that you find the meaning of them.

In a user interface, sounds can mean a number of things to different people. They can also be easily lost in a noisy background, so it is good to support them with visual cues.

Actions

Our goal should be to provide feedback with both audible and visual cues, supportive error messages, alerts and significant interactions with relevant and nearby graphic elements such as tooltips and messages. We must also make sure that the visual signals stay active long enough for people to see and read, while not hiding any significant content.

A good practice – which is not limited to supporting audio-enhancing technologies – is to add descriptive labels to the UI elements and captions to the images for easy navigation via screen readers. Using subtitles for videos is another way to enhance the listening experience, also useful for non-native speakers.

Finally, we should not overlook cases where sound is the problem, this is why we need a visual alternative. Some people may be sensitive to specific sounds or are in a situation where sounds can cause a disturbance. Then it is a good practice to give people the ability to mute the sounds without having to turn up the volume on their speakers, making this feature visible and effortless.

Pro tip: Avoid using unnecessary autoplay sounds and music, as they can disturb or even scare people.

Improve the cognitive experience

Perception

Visual clarity

Clarity is the first and most important attribute in a user interface. A successful user interface enables users to recognize and interpret what they see, understand the value of the product and the actions involved, predict what will happen when they use it, and interact successfully. There is no room for ambiguous content, mystery and delayed gratification. Our goal is to inspire trust and enable interaction.

Actions

Form follows function is a principle that states that an object should reflect its intended function or purpose. To achieve this in a user interface, we use advice, visual signals / properties related to the user interface that show possible ways a user can interact with it.

What the use of an object is depends on the users’ physical abilities, their goals, previous experiences and of course on what they consider possible. A button should look and function like a button, the same for a link, a menu code, a form, etc. By using clear characters / surrenders, users will help to recognize or interpret interfaces and interact with them without any problems.

Using familiar and established design solutions in a user interface will help users predict outcomes and act with confidence. Therefore, it is good practice to use design patterns, which are tested, optimized, reusable solutions to common problems. Components such as buttons, accordion menus, forms, carousels, etc. are designed to solve unique challenges, and they are recognizable everywhere.

Design patterns are built around previous experiences and opportunities and are linked to specific goals. Choosing the right design pattern for the problem in question should be our top priority to avoid confusing or stressful interactions. Establishing a consistent visual language is the key to a more comprehensive interface. Repetitive interactive user interface components with the same functionality and / or importance should always look and act in the same way. Then elements such as navigation, buttons, links, labels, errors, etc. must have consistent styling, colors and animations throughout the user journey.

It is worth noting that a consistent visual language not only helps interaction by connecting meaning and reducing visual noise, but it also enhances the product’s personality, increases brand recognition, emotional connection and trust.

Pro tips: Testing the effectiveness of our design decisions with real users is crucial since people’s perceptions can vary depending on age, access to technology, mental models, culture, etc.

Hierarchy

Visual hierarchy refers to the visual weight of graphic elements and their arrangement in a way that allows users to explore and discover content without any problems. By assigning different visual weight to the page elements, we can group content and influence the order in which people perceive information and navigate through the product.

Actions

Color is the biggest catcher. Colored elements will stand out, and thus sit higher in the hierarchy. Lighter colors will stand out more, so with that in mind, we should carefully arrange and distribute our colors to guide the eye to the right places.

The size of visual elements such as style, buttons, icons and images are almost as powerful as color when it comes to determining importance. Larger graphics capture users’ attention, which seems significant. For typography, a clearly pronounced size scaling can help establish content hierarchy and make scanning through content smooth and effortless.

Another way to help the visual hierarchy is through design consistency and exceptions. Consistently adjusted, similar in appearance and repetitive or adjacent elements will give the impression that they are related and equally important, while deviant elements as well as unusual shapes and interesting textures or styles, will appear as more significant. Too many design exceptions will compete for attention and add complexity, so it is a good practice to use them sparingly.

Pro tips: Studying the Gestalt principles and their application in UI design will help us understand visual perception and grouping to improve the visual hierarchy

Color application

Color application Color should not be the only way to convey a message or add meaning, but it is still useful and quite influential, so it should not be treated as a decorative element. Color makes sense, and even if there are no set rules, too many colors can lead to fatigue, and not regular use of colors can lead to confusion.

Actions

Avoid using too many colors. Three colors are usually enough to describe all the important visual elements on a page. Rule 60–30–10 can help us create the perfect harmony. Where 60% of the colored elements consist of the primary color that creates a unified product theme, with a 30% secondary color that enhances meaning and / or creates an attention-grabbing effect and a 10% accent color to complement and help the primary and secondary colors.

Any extra color can be used to bring a new significant meaning or message to the page, so we need to leave room to add more colors without having to introduce the rainbow.

In addition, we need to make sure we use the correct hue for the message. Aesthetics aside, colors create emotions and unconscious connections. The meaning of a particular shade can vary depending on the culture and environment we are in, and colors often have clear meanings associated with them – in the western world, a mistake is red, success is green, information is blue, and so on.

Pro tips: It is possible to assign our own meanings to colors as long as they do not overlap with the established norms, and we keep them consistent throughout our product.

Iconograhy

Semiotics is the study of symbols / icons and their meaning. It focuses on how these meanings are formed and interpreted by people, depending on the context in which they see them. In a user interface, icons are part of the visual language used to represent functions, functionality or content. Semiotics helps us to design iconography that is immediately recognized and understood.

Actions

Over the years, we have developed icons that have meanings that are accepted and understood by most people. There are also platform-specific icons that users are used to, and that can be easily interpreted. It is a good practice to stick to these established solutions, whenever possible, for a familiar and smooth experience.

Of course, there are cases where we need to design custom, product-specific icons for unique features. These icons must be as simple and minimal as possible to ensure clarity. They should also have a consistent visual style to communicate their function or to stand out from other non-functional elements.

Finally, we should not just rely on visual metaphors to convey meaning, as some associations may not be as clear. If an icon needs a caption to describe the meaning, it may not be suitable. When you are unsure, it can help to test with real users.

Pro tips: Icons are not only open to interpretation, but they can also have several meanings. For this reason, it is good practice to use tags along with functional iconography.

Memory

Many psychological experiments have shown that the processing capacity of healthy individuals is quite limited. Most of us can have an average of 7 items – plus or minus 2, depending on the individual, in our short-term memory. Our brains are not optimized for the abstract thinking and memorization of data that digital products require, so good design can make a difference.

Actions

Reducing the number of options and information available on the site, along with using clear titles, breadcrumbs and “back” options to access previous content, will help users remember or remind themselves where they are, what to do or what is required of them.

Pro tip: It is possible to increase our short-term memory and processor capacity with a process called “chunking”. This is where we group elements visually to form larger things that are easier to remember.

Decision Making

We should now know that we humans are pretty bad at making decisions. This is because we want to have full control while trying to be rational, interpret and compare all the different options. It’s actually a law about it, it’s called the Hick Law. It describes the time it takes for a person to make a decision as a result of all the possible options available: increasing the number will increase the decision time.

Action

It’s obvious, Keep It Simple, or “K.I.S.S.” is a design principle that states that most systems work best if they are kept simple instead of complicated. As mentioned above, our processing capacity is limited to an average of 7 elements at a time, and having too many options with equally perceived hierarchy can lead to paralysis of analysis.

Minimizing the options presented at once and reducing the number of distractions on the page, while maintaining a clearly defined hierarchical order with only a few important actions that stand out, will help make decisions.

Space/Whitespace

Whitespace refererer til det tomme rommet mellom og rundt designelementer, og det hjelper brukerne med å definere og samhandle med brukergrensesnittet tydelig. Whitespace er ikke nødvendigvis hvitt, det kan være hvilken som helst farge, tekstur, mønster eller til og med et bakgrunnsbilde.

Action

Å balansere nærhet og whitespace er nøkkelen. Forsikre deg om at det er nok plass mellom interaktive elementer for å minimere feil på grunn av glipp av klikk. Som nevnt ovenfor skal de interaktive målene være store nok (minst 42×42 px) og avstanden mellom dem vanligvis på minimum 8px.

Bonus: Improve performance

We have so far stated that Inclusive Design is about enabling as many people as possible to access the internet and achieve their goals or solve their problems despite their circumstances. We may be lucky enough to have access to advanced equipment or super-fast internet, but we can feel the challenges when our network is not as good. For most people, old devices and lousy internet are the norm, so it is very good to design for the best possible performance.

Bonus: Learn how to be empathetic

Following the above best practices in any digital product is a good start for high accessibility standards. But there is always room for improvement and knowing our users better can reveal new ways to raise accessibility standards. So – it is necessary to invest some time and money in learning more about our different types of users, as they can teach us so much about what makes an experience inclusive.

Getting to know our users will help us practice empathy. “Empathize” is not the first phase of “Design Thinking” by chance. In the empathy stage, our goal is to gain a deep understanding of the people we design for and their unique perspective, so that we are in a position to identify with them and represent them when making design decisions.

Se hva Difi sier om Universell Utforming.