Designing inclusively

Whilst the web is still young, it’s been around long enough for us to know about its power and its constraints. We know what these constraints are now because we’ve bent them so much over the years.

Before CSS we used tables and spacer gifs for layout. Before border-radius we used background images for rounded corners.

We use pre-existing mediums as a guide for how a new medium should work. We take our preconceptions and apply them as we see fit.

Whilst we’re better now at embracing the web, we still make plenty of assumptions about it. And those assumptions get shattered down the line.

We used to think all viewports were 640 pixels wide. We used to think all computers had a keyboard and mouse.

Now, we think small screens mean swipe-able, and big screens equate to mouse users. These are also assumptions. These assumptions are wrong.

We need to embrace the fact that we don’t know what users are doing. We don’t know their capability and we don’t know their preferences. We don’t know much. And that’s okay.

We need to design inclusive experiences that embrace these constraints. This is neither boring nor easy. Designing a great and inclusive experience on the open web is a delicate challenge that we need to step up to.

We can’t be creative without constraint anyway. Only with constraint can we design something truly brilliant.

In order to be creative we need to know what these constraints are. So I’ve jotted them down so we can remember them easily. Here they are:

1. Understanding

Everybody’s different. How people think and see the world is unique to the individual.

We’re influenced by our environment, upbringing and the people we spend most time with. And we speak different languages.

2. Disability

My left eye sucks (it won’t move left) and so I have to turn my head to use it properly.

That’s just me — an estimated 48.9 million people suffer from disabilities. Disabilities that affect mobility, hearing and eyesight.

Furthermore, many disabilities are temporary. Even a mother holding a baby in one arm, is one arm down.

If we can create something great for people with one arm, then we’ll be creating something even better for people with two.

3. Preference

Even someone who is fully-abled (should such a person exist), still has preferences. And those preferences can change under different circumstances.

My two year old boy, for example, can’t understand why nothing happens when he touches the screen of my Macbook. If it had a touch screen, that’s how he would use it. I prefer using keyboard myself but sometimes the mouse is better.

Even people use screen readers in different ways. Users may navigate by heading. Or they may navigate by landmark. They may use braille displays and keyboards.

And whilst I rarely print pages, not everyone is like me. Ensuring pages are easy to read when printed is something we must also consider.

4. Internet speed and connectivity

We (people who work in the industry) tend to have fast connections. But many people out there are not like us.

We must consider performance and connectivity from the beginning. Make the slow fast, and the fast faster.

5. Screen size

People use all sorts of devices, from watches to huge TVs, and everything in between. We need to consider how things work across the board.

Responsive design isn’t about 3 different sized containers according to device. It’s about fixing content where it breaks (if at all).

6. Browser capability

The devices and browsers people use have varying capabilities. This impacts what they can do and the features we offer them.

We should deliver a core experience, and enhance only when the feature is available. Everything but content is an enhancement.

7. Internet data cost

Again whilst you and I may have expensive data contracts, many people do not. And even if it’s cheap, data can run out. Either way, we must think about this when we want to design inclusive experiences.

This is not just about making lightweight experiences (though that’s essential). Breaking up content across pages allows people to load content as they see fit.

8. Environment

Experiences are affected by low lighting and screen glare. Or being outside in the cold wearing touch-screen friendly winter gloves. Or choosing to interact verbally. Or turning down brightness to save battery.

Either way, we need to test our designs in the real world.

9. Standards and conventions

Android and IOS have standards and guides for designing apps. These guides act as constraints. This ensures we solve the same problems in the same way.

The same applies to web design.

When websites use the same patterns and conventions, interfaces become familiar. Familiar is better.

You can break conventions but you need a good reason for doing so.

10. Interoperability

People don’t just consume content directly through websites. They use Safari’s reading mode or a feed reader. And they rely on how Google displays a search result.

Therefore, we need to design experiences that are interoperable because this is how people use our services.

11. Configuration

People customise their phone and their browser to their liking. They may add plugins, or adjust the font size.

Building experiences that honour people’s configuration and ability to choose is a vital aspect of designing inclusive experiences.

Summary

Each of these constraints elevate the needs of users to the number one spot. They influence everything from our choice of words and interaction design, to the code we use behind the scenes.

Simply put, exclusive experiences ignore people. And there’s a lot be said for design that ignores people. People ignore it.

Let’s not ignore people. Let’s design with these constraints at the fore. And in turn design better experiences for everyone.

I’m actually writing a book about designing simple and inclusive forms. If you want to receive free excerpts and updates about it then sign up to my free newsletter.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.