μεταcole

Dear UI/UX designer,

I’m tired of seeing these mistakes over and over again coming out from UI/UX designers I’ve worked with.

Some are exceptionally talented, producing beautiful web or app designs consistently, but almost all of them commit at least a few of these sins.

If you ever work with me, I will make sure you have this list burned indelibly into your mind before we start.

Technical note:
Most of my list items are based on the WCAG AA accessibility standards, which is the standard that most organisations (claim they) conform to. If you don’t know what things like WCAG, AA, and Accessibility refer to, go find out. These are basic stuff you should know.

Here are the 7 accessibility sins:

1. Text contrast too low

Yes, lower contrast text make the design more aesthetically pleasing, sophisticated, or even improve visual hierarchy. But what’s the point of pretty text when I have to strain my eyes to read it?

Go use a contrast checker. You’re gonna hate it, but a lot more people are going to hate you if you don’t.

This is the kind of contrast you love:

These are the exact colours used by a well-known organisation on their website. It was designed by a top international design firm. Shameful.

The contrast ratio for the above example is 2.99:1, which is less than the 4.5:1 minimum needed to pass the AA standard.

At 4.54:1, this next example just passes the AA standard (4.5:1), and it’s way more comfortable to read, even for someone with normal eyesight:

(For larger headline text, the contrast can be slightly lower at 3:1.)

2. Text size too small

If your text size is below 10 points, it’s too small. Like this:

You should be able to read that if you’re a real designer. You should also be able to tell if a design is off by one pixel. But if you’re designing something for the rest of humanity that does not have razor sharp eyesight like yours, stop using minuscule text.

3. USING ALL CAPS

Using all caps is seductive, because it makes the texture of the text look so much more even and appealing.

Until you actually try to read the stuff – all caps is a pain to read quickly, simply because people are not used to it:

The exception is when you only have a couple of words, like in a short heading. Then it’s not so sinful.

According to WCAG, we should use upper and lower case according to the spelling rules of the text language.

4. Using centre-aligned text

Centre-aligned text is so balanced, it’s so hard not to use it, especially if your design has other centred elements.

But as usual, centre-aligned text is harder to read especially when it spans multiple lines. This is because the reader has to spend effort locating the start of each line when reading.

The WCAG simply says this without much explanation:

I’m way more reasonable – 1 or 2 lines of centre-aligned text is still OK; 3 is really pushing it. Beyond that, don’t. Use left-aligned text instead, unless you’re designing for Arabic or Hebrew or some other right-to-left language.

5. Using justified text

Some of you might then ask, “how about justified text”?

I question your aesthetic sense if you use it on a digital interface – good designers know to avoid this because its texture is uneven. In other words, it’s ugly.

Besides its lack of aesthetic value, it also affects accessibility.

WCAG has this to say about justified text:

People with certain cognitive disabilities have problems reading text that is both left and right justified. The uneven spacing between words in fully justified text can cause “rivers of white” space to run down the page making reading difficult and in some cases impossible. Text justification can also cause words to be spaced closely together, so that it is difficult for them to locate word boundaries.

I hate to repeat myself, but just use left-aligned text already.

6. Text line width too wide

The good news is this mistake is becoming less problem – more designers realise that long line lengths is harder to read, especially when the text spans multiple lines.

The lines in this paragraph of text is too long (line width around 100 characters):

This one (line width up to 80 characters) is just within the WCAG AAA guideline:

Just remember to keep your line widths within 80 characters or less.

(“HAH!” the sharper ones of you might point out, “the line length of this very post is way more than 80 characters! You hypocrite!”
You got me there. In my feeble defence, I didn’t design or code this template. Let’s forget this issue and move right along to the 7th sin…)

7. Using colour alone to convey information

Last but definitely not least, don’t use colour alone to convey information, for the sake of colourblind users. Yes, use colour, but add some other redundant way to convey information.

See this form:

Looks fine to you since you’re not colourblind (I haven’t met any colourblind UI/UX designers yet). But if we remove the colour information…

Not very useful now, is it?

Here’s an alternate way to do the same form that works better:

Same form with colour removed:

That wasn’t so hard, was it?

This issue is also common with diagrams and charts. See this chart with and without colour:

Even your normal users will have a problem if they print your chart in black/white.

The same chart that doesn’t just rely on colour:

Just a little extra thought and effort and your problem is solved.

Moving on…

It’s time you realise that UI/UX design isn’t just about aesthetics, but about many other issues like accessibility. These 7 accessibility sins are by no means exhaustive; they’re just the most common I’ve encountered from designers who don’t know better.

If you’re a UI/UX designer, you now know better.