Adapting a design for colour blind users

edited May 2016 in creations
eeee... this is kinda boring, i guess, but here goes.

we have a little (skeuomorphic, i know heh!) app for multiple choice question exams, this one is for learner driver theory tests, specifically.

the following image shows an in-test screen which the user has answered (chosen two answers, in this case), and is viewing the marked screen before moving on to the next question.

the requirements for this screen were originally to show:

1. selected answers which are correct,
2. selected answers which are incorrect,
3. unselected answers which are correct, and
4. unselected answers which are incorrect.

our current method of achieving this is as follows -

image

but, as you can see from this simulated version under protonapia-type conditions, users would be unable to differentiate between correct and incorrect unselected answers - not ideal for an educational app.

image

Comments

  • now, i'd (like any right-minded person) would want to keep some consistency in the icon set in use, which is a line-style icon throughout. this was orignally chosen in order to, errr... comply? yes, i guess. to comply with the skeuomorphic model of push style buttons that would be backlit when pushed/selected whatever. much like the buttons and icons thereon of yore-time vehicles (before that fancy touch screen stuff!).

    below are some examples of how to overcome the problems faced by colourblind users, whilst trying to keep consistency in visual importance or weight for all users, colour-seeing, or not.

    image

    my preference is top left, whilst an 'expert' has stated that the design top-right is satisfactory.

    however, i kind of disagree slightly with this. reason being, as you can see in the simulated version under protonapia-type conditions, the unselected incorrect answers carry far less visual weight than the unselected correct answer. it's not a huge deal, i concede, but if we're doing this, might as well try for something better, right? :)

    image


    the only problem with the top-left example is that the unselected marks do not meet the minimum contrast ratio in the w3g guidelines (but it's a little unclear, as in this state they could 'technically' be unselectable UI elements, and so do not need to meet those requirements).
  • edited May 2016
    Posted by danz:

    this is awesome! my roommate is color blind and we talk about this sort of thing all the time. He'll switch his phone to black and white mode occasionally when an app is giving him beef, and as a system-level thing, that shit works really well for what it is, but also, it's awesome that you're considering this.
    ah, it's cool - we had a complaint for another app from this range (but it was non-skeuomorphic, and not driver training related), which is where the 'blocky, white-outlined icons' come from, and why my boss wants to go with them - even though i've pointed out that the outlined versions are still limited due to their use of colour which has a low contrast in this particular situation (not so much in the other app which had received criticism/helpful feedback :D).
  • also, i chose to show examples of simulated protonapia (2.5% of males), rather than the less-rare deuteranopia (5% of males) as it would cause more problems in these example.

    so far, by removing the colour outlines on the unselected buttons, i've managed to make it far more apparent which buttons are selected or unselected, yet retained the helpful 'correct/incorrect' element of it, which benefits all users.

    i personally feel that having the faded white marks on the unselected buttons (top left example) works well, even though they do not meet the minimum contrast levels (i can read them fine, but then i have full-colour vision).

    now, i guess that if we were absolutely required to follow the contrast guidelines, then i'd have to make the unselected marks (heck, and text for that matter) white. the problem with this is that it then lowers the contrast between the selected and unselected answers, gah...

    i have a meeting tomorrow to discuss this (because i'm being 'difficult' by wanting to take this opportunity to do things right, ugh). unless someone has some good ideas here, i'll let you know how it goes hehe :D


    *type type type, sorry :(*

    examples showing other icons in the app:
    imageimage
  • i've ended with this, for now, at least.

    image
  • edited May 2016
    Before lending your Motor Vehicle to anyone..Make sure that blueshead is not allowed to drive it.. (He might be a Wizard..But he can't drive worth shit)
  • As a wizard, you could fly it instead. Rule 37, Section 12, SubClause 3:34.
  • I don't find these post boring, great to see what people are working on… but too much for me to read now – I think there's a question in there!?

    I like the simplicity of it though.
Sign In or Register to comment.