Lead Designer

Sam Leonard-Rendell

<p>Back in 2019, we created something that resonated with designers everywhere: a series of posters bringing Jakob Nielsen's usability heuristics to life. These principles, <a href="https://www.nngroup.com/articles/ten-usability-heuristics/">originally outlined in his 1994 article for The Nielsen Norman Group</a>, struck a chord with so many people that we've given them a fresh look and a new lease of life.</p><p>Here's the thing about usability heuristics, they're not rigid rules you have to follow to the letter. Think of them more as guiding principles that form the bedrock of solid usability practices. We've leaned on these time and again <a href="https://sidigital.co/services/design/digital-design">when designing interfaces</a> or digging into usability test results. They give us a clear framework to work within and align our thinking.</p>

Totally free, no strings attached, we promise.

Download our 10 Usability Heuristics Posters

<p>Here at the Si digital studio, we wanted our walls to reflect the work we do, so Jakob Nielsen's original article got us thinking, why not turn these "10 Usability Heuristics" into something visual and inspiring?</p><p>Fast forward to today, and these posters are printed, framed, and hanging in our studio. They've become such a <a href="https://sidigital.co/services/design/digital-design">valuable part of our daily work</a> that we wanted to share them in their new form with the wider design community.</p><p>This Lab Note showcases a couple of our 10 posters, and we're making them available as free downloads in PDF, PNG, and JPG formats. We hope they inspire your work as much as they've inspired ours. Feel free to share them with your team.</p>

Bringing heuristics to life in our studio

<p>It’s estimated that around 1 in 12 men (8%) and 1 in 200 women have some form of colour blindness. In the UK, this means that there are approximately 2.7 million people affected, a considerable amount of the population, but they are often forgotten when it comes to designing websites and user interfaces.</p><p>Here at Si digital we consider user experience and accessibility throughout every project. We use a variety of tools and techniques to help us understand visual impairments and use this knowledge to make our websites more usable and less frustrating for people who are colour blind.</p>

Who is affected?

<p>There are many types of colour blindness with different degrees of severity. It’s a common myth that people with colour blindness only see in black and white. Although this can be true, monochromacy – also known as total colour blindness – is extremely rare, with an estimated 1 in 33,000 people affected. This severe visual impairment only allows an individual to see in greyscale.</p><p>An important factor to remember is that for most people with colour blindness, distinguishing between different colours is not too difficult; it’s telling the difference between shades and brightness levels of similar colours which causes issues.</p><p>The more common condition is red-green colour blindness, which is split into two groups. A person with protanomaly has reduced sensitivity to red light. Red, orange, and yellow hues tend to shift towards green and appear less saturated. A person with deuteranomaly has reduced sensitivity to green light and will have difficulty distinguishing between blue, yellow, violet, reds, blues, and greens.</p>

What is colour blindness?

<p>For a long time, the difficulties that arise from colour blindness have been ignored, not only in website design, but also television, movies, and especially video games. There are many cases of users not being able to play a game or being unable to progress because of essential UI elements being indistinguishable to somebody who suffers from colour blindness.</p><p>Take this example from The Witcher 3...</p>

Colour in the wild

<p>See how the red markers on the floor become near invisible when switching to red-green colour blindness.</p><p>The game features an ability to use heightened senses to follow scents, track footprints, and find clues. However, the game developers chose a deep red colour as a marker, so there have been many users complaining that they couldn’t see these markers very well (or at all). A simple colour change or the option to change colours would have made this game more accessible.</p><p>Colour blindness is a matter which needs to be taken seriously due to the high percentage of the population with vision impairments. If your website or application is particularly unoptimised, you could be losing a large amount of customers. For example, if a user can’t differentiate between a series of icons because of clashing colours and lack of contrast, that user could get frustrated and find an alternate service. If that is the experience of every potential customer who suffered from colour blindness, you’re losing over 8% of potential sales – for a business with £10,000,000 in revenue, that company could potentially lose a huge £800,000 in sales.</p>

Sign up for all the latest news and updates from Si digital.

Get the latest news and updates

<p>Although colour blindness can cause huge problems for users, it’s actually quite simple to combat. If you’re aware of the issues, then you’re already halfway there.</p><h3>1. Use contrasting colours</h3><p>Even people who have monochromacy still have a sense of contrast – the scaled difference between light and dark. To ensure your website is readable for people with visual impairments, you must make sure your content contrasts well with your background. For example, black text on a white background will have a high level of contrast and readability. Whereas yellow text on a white background has a low level of contrast and will be barely readable, even for people with full vision!</p>

Designing with colour blindness in mind

<h3>2. Use different shades rather than multiple colours</h3><p>A monochromatic colour scheme — not to be confused with full colour blindness, monochromacy – makes use of multiple shades of one colour, rather than using various different colours. This will effectively minimise colour-related frustration, and is a great way to include contrast in your designs. A monochromatic colour scheme doesn’t have to be black and white; using multiple shades of blue, we can create a visually pleasing design with complete readability.</p>

<h3>3. Experience colour blindness yourself while designing</h3><h4>Colour blindness simulation in Adobe Photoshop</h4><p>There are many free tools available that can mimic the effects of colour blindness, allowing you to understand how a colour blind person would see to ensure that your user interfaces work just as you intended them to. Photoshop has its own — slightly hidden away — proof setup feature; simply go to View > Proof Setup, and then you can choose between protanopia and deuteranopia. When you’re done testing, simply switch back to monitor RGB.</p><h4>Colour blindness simulation in Figma</h4><p>Unfortunately, there is no native support for Figma colour testing; however, there are various plugins that allow you to do the exact same thing. We recommend <a href="https://www.figma.com/community/plugin/1115550442410459794/color-blind" target="_blank" rel="noopener noreferrer"><span style="text-decoration: underline">Color Blind</span></a>, a free plugin that shows you in real time what people with common colour vision impairments will see.</p><h4>Colour blindness simulation in Browser</h4><p>We use a Google Chrome add-on called <a href="https://chromewebstore.google.com/detail/colorblindly/floniaahmccleoclneebhhmnjgdfijgg?pli=1" target="_blank" rel="noopener noreferrer"><span style="text-decoration: underline">Colorblindly</span></a> that lets you simulate colour blindness on live websites or in a testing environment. This is a handy tool for colour and contrast testing as it offers multiple viewing modes, including full monochromacy.</p>

<h3>4. Choose colour combinations carefully</h3><p>Unfortunately, as designers, we don’t always get to choose the colours that we use in our designs; sometimes, we’re limited by brand guidelines. But where possible, it’s wise to choose and test your primary and secondary colours before you establish a brand. Below is a chart of colour combinations that you should avoid using.</p><p>If in doubt, avoid colour altogether and go for a simple black/white, high-contrast colour scheme!</p>

<h3>5. Use texture in place of colour</h3><p>When designing things like graphs and infographics, consider making use of texture or visual patterns to help differentiate between two colours. For example, take the pie chart below. A user with protanopia would find it hard to differentiate between the different slices due to the colours being too similar. However, if we simply add some texture or patterns, the graph is 100% more readable.</p>

<h3>6. Avoid using colour alone as an indicator</h3><p>When designing elements like forms and complicated interfaces, you shouldn’t use colour alone as an indicator. Take the forms below as an example. The one on the left only uses colour as an indicator that something went wrong. A person with normal vision will be able to see that the email field has turned red, indicating there has been some kind of error. However, to a person with deuteranomaly, the green of the success field is indistinguishable from the red of the error field. The best way to combat this issue is to use some kind of icon, symbol, or label to indicate that an error has occurred, as seen on the right.</p>

<p>The most important lesson to learn here is that unless you’re absolutely certain that somebody with colour blindness can differentiate between the colours you have chosen, then you should never use colour alone to indicate something important. Where possible, use icons, text, shapes, textures, or other visual cues as well as colour when communicating information to users.</p><p>There are many ways to test for accessibility; however, these tools aren’t always fully accurate – ultimately, the best way to see if your design is suitable is to perform real UX audits. It’s likely that you know somebody who is colour blind; why not get them to review your design?</p><p>What we see as designers and developers isn’t always what your users see; they could be colour blind, using a screen reader, or looking at your website on a 3″ smartphone from 2007. Creating websites that are accessible to everyone is essential and should be part of any good design process.</p><p>If you would like to speak to us about your new project and how we ensure we always deliver the ultimate, accessible user experience, please <a href="https://sidigital.co/contact"><span style="text-decoration: underline">get in touch</span></a>.</p>

Conclusion

Have a read of some of our other articles

How to design for colour blindness: best practices for accessibility

<p>There’s a lot to organise and the pressure’s on to get things right. With all this to contend with, it’s important to accurately identify the key insights. This improves efficiency and provides value to your clients with clear feedback.</p><p>We have tried many different ways of recording feedback with participants. Each method became convoluted, making it harder to analyse data at the end of a test. So, we began looking for ways to improve our process.</p>

User tests can be full-on

<p>We have recently been looking at <a href="https://www.youtube.com/watch?v=8AKWYH1EzJI" target="_blank" rel="noopener noreferrer">Design Sprints and how user testing is compressed into one day</a>. This technique is simple in its approach and has been successful for us. It removes the bloat and keeps the work focussed. Today, we want to share and break down this way of working.</p>

Stay simple and don’t over complicate

<p>Before starting a user test, you will need:</p><ul class="list-bullet"><li value=1>Whiteboard / whiteboard wall</li><li value=2>Whiteboard markers</li><li value=3>Sharpies</li><li value=4>A pad of blue Post-its</li><li value=5>A pad of pink Post-its</li></ul><p>Now that you have your equipment, you can begin to record your user feedback. We usually test with 5 participants as this tends to be the sweet spot of not too many or too few. <a href="https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/" target="_blank" rel="noopener noreferrer">What Nielsen Norman Group wrote about testing with 5 users still holds true</a>. You can find up to 85% of usability issues with 5 participants. ‘Add more and more users, you learn less and less’.</p><p>Before the first person arrives, you will need to divide up your whiteboard. Using a whiteboard marker, split the board into 5 columns. Add the names of your participants across the top. Down the left-hand side, add rows and label each according to the task or page you are looking to test.</p>

Preparing for user testing feedback

<p>As you do your user tests, it is important to make quick notes as you go. We tend to analyse our user tests in pairs to prevent any misinterpretation of comments. This is where we use our post-its to record different types of feedback. However, make quick, rough notes before transferring them to post-its at the end. We use blue post-its for positive comments and pink post-its for negative. A negative comment could mean a participant struggles or has to think about what to do next. Or they might communicate their problem out loud. Write these down as they are super important.</p><p>Once you have your feedback, stick the post-its into the relevant row for that participant. As you do this, discuss and compare the feedback received and see where there is overlap. </p>

Recording user testing feedback

<p>Repeat this process for each of your user testing participants. Making notes as you go, then writing down the feedback on the relevant post-its at the end of each test. Once you have all five up on the board, you’re ready to begin looking for patterns. They should really jump out at you!</p><p>If you take a step back from the board, it should become quite clear where the problem areas are. Look closer and you should be able to group specific insights. This will help you to build a picture of where the most common issues are.</p>

Repeat for each user test

<p>This is a simple and quick technique to record user testing feedback that a group of you can do together. It helps improve collaboration and the process of gathering insights.</p>

The 10 Usability Heuristics – updated for 2026

Download our 10 Usability Heuristics Posters

Bringing heuristics to life in our studio

Download our 10 Usability Heuristics Posters

More reads