There’s a lot of focus on improving diversity and inclusivity in the workplace, in schools, and in our culture. But what about the web?

Have we failed to catch up?

If you look at a sampling of your favorite websites, it won’t take long to realize how non-inclusive many of them feel.

Designing for a wide spectrum of audiences, means creating an experience that makes everyone feel welcome, regardless of:

• Age

• Gender

• Race

• Geography

• Culture

• Education

• Religion

• Language

• Lifestyle

• Technology

• Impairment

If you take a closer look at the web as it stands now, you’ll find that a lot of work has been done to make websites more technically easier to access and use. But how about the user interface?

To create a website design that’s truly universally friendly, you have to create something that feels welcoming and natural to everyone, regardless of their perspective and circumstances.

Here are 5 UI design tips you can use to fix this issue:

1. Is your content easy to get through?

Scannability of content is very important for visitors of all types. Why? Sadly, it’s because people don’t read most of the words on a page.

According to research from the Nielsen Norman Group (NNG):

“On average, users will have time to read 28% of the words if they devote all of their time to reading. More realistically, users will read about 20% of the text on the average page.”

A lot of our reading habits boil down to efficiency. People read as much as they need to in order to get the basic gist of a topic, which results in a lot of scanning.

Although there are different patterns of scanning a page, many eye-tracking studies over the years demonstrate the same thing:

Many people just want the TL;DR of a page, which usually means:

• Reading the introduction.

• Scanning through the headers.

• Stopping at interesting photos and callouts.

What this information tells us, essentially, is that web pages should be designed with a good balance between written and visual elements. By using more images, illustrations, and designs to tell your story visually, more of your readers can get through and understand the content as a whole.

This is also useful for visitors who aren’t native speakers of the language of the site. Like they say, “A picture is worth a thousand words.”

This is the homepage for Conqr., a marketing agency in Mexico:

This site uses mostly white space, captivating visuals, and very short snippets of text to get its point across. It’s a memorable and succinct experience, which is exactly what visitors are looking for.

2. Do your typography and design account for other languages?

Another thing to focus on when it comes to the content of your site is typography.

For those of you that have created multilingual websites before, you know what a challenge this can be.

In the W3C’s guide to internationalization, it provides an example of how languages differ in terms of size — not just in terms of the length of words, but the actual size of the characters too:

The above table shows how the word “views” is translated in seven different languages. Notice how big a disparity there is between the European and non-European languages.

As you can imagine, this will have an impact on how copy flows into your website across its translated versions. And, not only that, the direction a language is written in can affect your design, too.

For example, this is the Rashi Foundation website in English, followed by its version in Hebrew:

Although the length of text is relatively the same, everything on the page has been reversed so that the Hebrew reads from right-to-left (R2L). This not only affects the copy, but also the:

• Placement of the header elements (logo, search bar, social links)

• Navigation order

• Image positioning (the subjects need to be on the left so the text can flow in from the right)

• Arrow direction

Even if your audience primarily speaks one language, it’s important to account for design adjustments in the translated versions of your site.

3. Do your images truly reflect your audience?

When visitors come to your website, they’re looking to make a connection with the brand. But what do you think happens when people in the photos don’t look anything like them?

I’m not just referring to websites with white-washed stock photos either, though that is certainly a problem. Overly staged images, photoshopped images, and cheesy stock photo selections can easily put off your visitors.

As inclusivity and diversity become a greater part of our world and improve the ways in which we interact with one another, web designers need to make it a greater part of their process, too.

Part of the problem here is that businesses often need to rely on stock photography to fill in the visual content of their site. There’s nothing wrong with using stock photos. However, it can feel like slim pickings if you’re trying to find diverse and inclusive imagery.

Let’s say you’re looking for photos of “shoppers” on Getty Images. There are over 325,000 matches.

However, when you use People filters, you may find that not only are there much fewer images than you had hoped, but the resulting matches don’t align with what you’re looking for.

For instance, if you search for “senior shoppers”, you'll find over 20,000 matches. Even when searching specifically for “senior shoppers”, many of the results don’t match the intention. Or it barely fulfils the query. For instance, an image might be of people shopping, but the seniors in the photo are too far in the background or blurred that it really isn’t an image depicting senior shoppers.

That doesn’t mean that you can’t use stock photos when designing a website. There’s a lot of great content out there. It just means taking extra time to find images that more accurately represent your audience.

That said, if you’re trying to create a deeper connection with your audience, the ultimate goal should be to use original images — photos or illustrations. Kode with Klossy is a good example of this:

By using real photos of yourself, your team, or your target audience in action, you can build something that feels more authentic and relatable.

4. Will your color palette send the wrong signals to visitors?

There’s so much more to color selection than choosing a palette that your client likes. The main three factors to consider are accessibility, culture and mood:

Accessibility

Will visually impaired visitors be able to see all your colors? If not, will this compromise their ability to read and understand your content?

The matter of color contrast also applies here. In other words, is there a sharp enough difference between the color of the text and the color of the background it sits on? If not, users with impaired vision, color-blind visitors and even people in glaring sunlight will all struggle to see it.

Culture

Are there colors used that signify something other than what you intended?

Translation and localization agency Eriksen Translations put together a chart that helps marketers and designers understand how colors are perceived differently across cultures.

For instance, you might think that the bright greed CTA buttons you’ve designed feel energetic and youthful. However, heavy splashes of green color could be perceived by some as greediness.

If you’re trying to reach a global audience, be mindful of using primary colors that have very distinct cultural meanings.

Mood

Psychologist Robert Plutchik developed what’s known as Plutchik’s Wheel of Emotions.

This shows us a few things:

• Colors represent certain emotions

• Hues and tints that soften or deepen those emotions

• Color mixtures that change the overall meaning

But it’s not as simple as that. Further research on the matter of color and emotion resulted in The Manchester Color Wheel.

Essentially, this research demonstrated that mentally healthy individuals selected very different colors to represent their moods than those who were anxious or depressed.

The colors that mentally healthy respondents chose were varied, ranging from reds to pink, blue to yellow, and more.

Respondents coping with depression chose colors that were mostly in the gray spectrum, along with some blues and browns.

What this suggests is that people with improved moods lean towards lighter, brighter, and more diverse color palettes, like this one from Brown Owl Creative:

This kind of positive and colorful palette could indirectly influence visitors’ decision-making process, so long as it lines up well with content that is equally positive.

Bottom line: By understanding the ins and outs of accessibility, culture, and mood, you’ll be better equipped to create a color palette that accurately reflects your intentions.

5. Are the features of your site user-friendly?

Keep it simple. That’s a good principle to live by when designing a website. But it’s not just because a clean and minimal interface looks nicer.

The more complex and unpredictable features you add to a website, the more likely it is that visitors will find it difficult to get around. This, in turn, can lead to confusion, frustration, and complete abandonment of the experience.

Here are some ways this might happen:

• A navigation menu isn’t where it’s expected to be, nor is it represented by familiar symbols or icons.

• An intro navigation keeps visitors engaged, but there’s no guidance on how to move past it, or the swipe gesture isn’t easy to execute.

• A pop-up appears on top of the website, but the dismiss button isn’t displayed, nor does it sit in the top-right corner of the modal.

You want your website to stand out from a sea of boring lookalikes. But you don’t want to compromise the visitors’ experience all for the sake of taking a novel approach.

It’s predictability — from page to page, from site to site — that enables visitors to feel comfortable and safe with a new brand.

Take a look at The Tea Story website, for instance.

Each interactive feature and element falls in line with what users have come to expect.

For example:

• The navigation sits at the top, with clearly labeled page names.

• The live chat opens with a welcome message and easy-to-follow first steps.

• Hoverable images operate just as you’d expect, with extra text or links revealed.

• Each button is straight and to the point, telling the visitor what happens when they click.

• Incorrectly filled forms let visitors know what went wrong to help them try again.

In other words, you can shake things up in the interface; but not when it comes to the features that your visitors need to interact with to get from point A to point B.

Conclusion: Building websites for everyone

When you think about the kind of friction that might stop a visitor from looking around your site or buying something, you often think about the obvious culprits.

Slow loading pages;

Broken links;

Poorly written copy.

But friction doesn’t just come about because of low quality design or copy execution. Sometimes, it’s the subtle differences between people that makes it difficult for visitors to appreciate your website.

As inclusivity and diversity become a greater part of our world and improve the ways in which we interact with one another, web designers need to make it a greater part of their process, too. A more welcoming web is the only way to ensure that any website can be accessed and used by all as it was intended.