Why usability and accessibility matters in Design🎨: 5 tips
Tags: design, beginners, webdev, a11y
Published: 2019-12-18 15:50:41

<h4>Hello, users!👋</h4>

Today I want to talk about **usability & accessibility** and why those concepts **do matter** in Design. It's not all about "*it looks good*".

I often find designers/developers that don't know a bit of it and don't care about it.

<img src="https://media.giphy.com/media/QjIz1AqkGTszK/giphy.gif"/>

I'm well aware not everyone is familiar with the terms of **usability** and **accessibility**, so I'll just briefly explain them. Please feel free to research any other explanation that goes deeper into these concepts.

<h2>What are those concepts about?</h2>

👉 What is **usability**? The concept of usability refers to the *usage/navigation/flow* of your product. It **ensures your product's performance can be learned and used easily by the user**, and that **noone will have trouble by understanding how your website/app works**. A non-tech example: making the rules of a game. *We'll see practical cases below*.

👉 What is **accesibility**? The idea that *everyone* can use your product, doesn't mind if we're talking about a **website** or an **application**. You've read that? *Everyone*. Everyone involves also blind, colorblind or deaf people, but not only disabled people, it also refers to the **optimization of your product**, if it **works correctly in a slow internet/computer**, if it **displays fine in mobile devices**... Again, a non-tech example: that game we've created the rules for before, can everyone play it or we're leaving someone out of it? *We'll see practical cases below*.

Now, let's go to the core of this article: why usability and accessibility matters in design.

If your question is "*should a designer know about usability and accessibility*"? 🤔

My non-thinking answer is **YES**. If you'd like a more elaborated response: **depends**, but in my opinion every designer should know at least how to identify accessible/non-accessible patterns and how good usability should be built.

Now let me share some **tips** with you:

<h2>① Respect visual education</h2>

Check the following image:

![Example 03](https://thepracticaldev.s3.amazonaws.com/i/1igvfa21ko2psn88nesv.png)

Our eyes are attracted to the heaviest object in the screen. Also, those objects are usually placed in the right side and with brilliant colors so you feel attracted to click them.

In the picture above, if you follow your general instinct, you'd be cancelling the action you wish to do.

It should be like this instead:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/xq3bvyvxei5bdy4bv3lu.png)

Let's see another example.

Do you see something weird in the following image?

![Example Image 01](https://thepracticaldev.s3.amazonaws.com/i/59jo5tlvqr4w39m17qcc.png)

It seems there isn't any **Logout button**?

![Example Image 02](https://thepracticaldev.s3.amazonaws.com/i/kphp14rdskox7gkdbfz4.png)

Oh-ho! **There** you are, inside of a side-menu! 

You could think there isn't any problem esthetically, but it's not respecting the general visual education that we, as users, have.

Do you want another example?

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/23edrv8migppllienzcy.png)

Let's see... Where are the **filters**...? OH! That's probably the icon in the right corner of the table (why not including a general search-bar as is the most usual component in a table?).

But, there's more...

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ibit3179htetu4dk0vtq.png)

OH, NO! Why aren't filters applying...? Ah, I see, **I clicked the wrong button**.

All of these examples have a main thing in common: **they don't respect users visual education**.

<h4>What is that visual education you're talking about?</h4>

Vibrant colors, important options and add/accept/see/check actions, are normally placed at the *right side* of the screen. As you saw in the first example, if you don't respect that in your design, you'll probably make someone mad by cancelling what they want to do, or worse, **loosing their progress**.

We're always searching for the **same navigation flow in every website we visit**. Top menu usually keeps *categories, login, logout, the logo*... 

As you saw in the second example, if you *hide* the logout button by placing it in an unknown place for the user such as a side-menu that it's not **always visible**, you'll be forcing the user to take an extra-step (*opening the side-menu*) to **logout** the page.

And there's nothing worse than **taking extra-steps in a website**.

You want another example? How do you feel when you click the logo of a website and it doesn't lead to the **Home** page of the website?

<h2>② Maintain a clear navigation (if possible)</h2>

Lots of mistakes are done when trying to figure out the screens of our product and how they relate to each other.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/8ri04jt7eligrplbyaxo.png)

Don't create individual navigations as shown in the picture above. Our goal is that the user never (*or almost never*) uses the "back" button of the browser for many reasons, such as **losing their data**.

Have you ever had to '*go back*' or clicked it *accidentally* and **lost what you were writing/doing**? Create "*go back*" buttons inside your design so developers can create some kind of function that makes a "safe copy" of what the user was doing.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/fuqf2ddx411jnwaj9yu4.png)

Every screen talks to each other. **Navigation should be accessible from every screen of your product**.

You won't be able to create communication between your designs? No problem:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/l4kj50fjbj5cjakcwdi4.png)

**Breadcrumbs** are and will always be there for you, but **don't forget to tell the user where he/she is**!

<h2>③ Show limited information per page</h2>

There's a lot of people thinking that they need to show the maximum of information that fits in the screen. **Wrong**.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/s7ac4cwz7gwsl2au7uok.png)

<img src="https://media.giphy.com/media/5iT1IsP7DjzMs/giphy.gif"/>

You see this? This is **hell**. We're humans, not **machines**. We can't just retain **that much** information, plus it feels like a visual **chaos** and not organized at all.

Make sure your users will find exactly what they're searching for in less than 3 seconds or you'll loose them.

<h2>④ Respect spacing</h2>

If you love your product, **give it some space**.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/hmg9macqt7k25wxe1k96.png)

This is also related with showing limited information per screen. If you don't give any or not too much space to the elements inside your screens, you won't be able to define visual sections or divisions, the user probably **won't be able to understand what he/she is seeing**.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/6aowlueh9tfyecp7314c.png)

As shown above, choose carefully **what** you're showing and **where** do you put it. Learn to prioritize.

Believe it or not, **creating a design is like preparing a story for the user**. You must define the steps, make the user understand how the path is, where he/she's allowed to go and where it is forbidden, you're telling the story of your product, don't mess around with it.

<h2>⑤ Decide a visual language, use it everywhere</h2>

Normally we'll have some fixed components before building our product. That could be, **a palette**, **icons**, **fonts**... Have you ever found a project that changed styles from a screen to another? 👇

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/oqt2fvly6wh4lyftyj63.png)

Well that's uncomfortable, for sure.

Once you decide the components that will be part of your product, **use them in the same way, always**, in every screen. Don't start changing suddenly the typography for the title from one design to another, or the spacing between components, where the text will be aligned... That will look *weird* and will break the visual language of your product.

<h2>In conclusion</h2>

So, why does accessibility and usability in Design matter? Because **hell it does**. 

You're creating a product that will be consumed by someone else. That someone else could have disabilities, a slow computer, limited time to understand or find what they're searching... It is an exercise about **empathy**.

If after reading this you still think design is about shapes and colors please *read it again*.

You don't need to be an **usability/accessibility jedi-ninja-rockstar**, but having the basic knowledge won't hurt you.

These were my **tips** on how you can use usability and accessibility in your designs, I hope it comes handy!

See you around, happy coding💻!