Profile picture of Suzanne Scacca

7 min read

Web design for all: Catering to a wide spectrum of audiences

Good user experience is about more than just ease of use. It should reflect - and celebrate - the diversity of its users.

Slider showing range from male to female to represent diversity in UI design

Illustrations by {name}

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

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:

Eye-tracking study on website

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:

Screenshot of Conqr. marketing agency's website

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:

Chart showing W3C's guide to internationalization

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:

Multilingual website by Rashi Foundation in English and 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.

Stock image example of woman doing online grocery shopping

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:

Screenshot of Kode with Klossy website showing diverse users