5

I am making design recommendations for a piece of software that wants to accommodate entirely illiterate users. A suggestion that has been made is to assist these users by employing "color coding" on key parts of our UI, so they can learn colors rather than learning the position or shapes of icons or words. We would need four colors to do this, and it would be in addition to other cues like labels.

Something like this:

UI mockup

Because our users are primarily male, it seems especially important to use colors that will not cause difficulties for color blind users.

Palettes developed for color blind users seem concerned only that each color can be seen as different. This is useful in charts and infographics, because a key or legend can always indicate the meaning of each colour. Such as this palette by Martin Krzywinski, uses only colours that don't appear identical to color blind users.

Martin Krzywinski's "conservative" 7-color palette

However, since our users will be given instructions like "select the green one", I wonder if this could cause confusion because, even though a CB user can tell the "purple" and "green" palette colors are different, they seem to differ primarily by lightness and could easily be described by either name.

To clarify this point, I made the image below. The larger circles are colors taken directly from Krzywinski's palette, and the small circles are examples of non-palette colors I have made that could be described with the same name.

CB safe palette with ambiguity

From a CB perspective (bottom row), the questions "is this purple?" and "could this be blue-green?" seem impossible to answer with certainty.

Are there any ways to work around this ambiguity problem? Or is this color coding approach unhelpful for color blind users?

6
  • 5
    It would be advisable for accessibility and usability reasons not to use colour as the only visual cue (i.e. include symbols and text where possible/appropriate) and that will make the design more inclusive and suitable for a wider range of audiences.
    – Michael Lai
    Apr 11, 2018 at 6:43
  • @MichaelLai Thanks for that comment, I've updated the question a bit. The idea is that it wouldn't be the only cue, it would complement the existing button labels in the software.
    – aaaidan
    Apr 11, 2018 at 6:58
  • As Michael says above: Colour shouldn't be your only cue. I would go a little further and suggest that your interface should work without colour - If you can manage to make your interface work well with only greys, then you've solved all the issues for colourblind users. At the same time you're likely to solve the problems for users with other vision problems as you'll have to ensure there are sufficient levels of contrast between the greys you use to make the easily distinguishable. Apr 11, 2018 at 7:27
  • @AndrewMartin I've added a mockup to the question to clarify. Since you're suggesting that color can't be relied upon (and since words can't be read), that leaves only iconography, no?
    – aaaidan
    Apr 11, 2018 at 7:35
  • 1
    @aaaidan The mockup you have at the top of the question (selected vs unselected) appears to show that "Bam Wibble" is selected but the rest are not. If this is the case then this would work equally well without the coloured chip so you have succeeded in making an interface where colour does not pose a problem for colourblind users. The contrast between the selected and unselected states is obvious even to users with low vision. If the colours indicate some other difference between the two block on the left then you have a problem and need to resort to a learnable iconography. Apr 11, 2018 at 7:43

2 Answers 2

3

enter image description here

Since

  • Your users are entirely illiterate
  • Your users are potentially colour blind
  • You only have to display four distinct options
  • You are able to issue verbal instructions to your users about how to use the system. (I am assuming this, from your statements.)

My suggestion is to use a combination of four abstract shapes with distinct colours, as shown.

This way, you can tell users to "click on the yellow circle", or "click on the green triangle" as appropriate.

2
  • It seems that you are suggesting to sidestep the cb ambiguity problem with shapes. Is there a reason you don't suggest less abstract iconography?
    – aaaidan
    Apr 12, 2018 at 8:54
  • 2
    Since you don't specify what the purpose of the buttons / menu options are, I can't recommend any specific icons :) Apr 12, 2018 at 10:03
2

From my past experience doing technical writing and instructional design, the key to writing unambiguous instructions is to structure it around the process first and then provide the details. So you would actually break it down into a hierarchy like Goal > Task > Step so that you are only providing specific details at a smaller part of the instructions where it is more likely to change (i.e. even if the step changes the task might not change, and even if the task changes the goal is probably still the same).

In this case, you instruction of pressing the button is a step in a task that needs to be completed in order to accomplish a goal. One way is to simply provide the instruction followed by the detail, which would be written as: "press the button (image or description)" instead of "press the button".

I would assume that even illiterate people will have more than one way of learning/recognizing information using visual cues, so the use of color alone is going to work well for a portion of the people. However, if you combine a color with a shape (and/or icon) it would probably be more helpful to a large portion of users.

So while I don't think there is an issue with using a CB safe colour palette so that they can distinguish between different buttons (maybe you have to pick colours with more contrast/difference), it does mean that you might need to write your instructions differently to be easier to interpret and understand (i.e. less ambiguous). To save you some headaches it may be preferable to introduce at least another visual cue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.