0

I'm in the process of converting a paper-based test to an online one. One particular test is giving me significant pause for thought. It's a multiple answer, "check all that apply" question based on a statement. The user selects the options they think apply, they show as checked. When they're done with the quiz we show them how they did, what they got wrong. This is one question in both states:

enter image description here

If they got it correct, it's highlighted in green. Red for incorrect. The three red options above should have been checked.
That kinda-almost makes sense for me but the client has made a few head-scratchy comments and in my experience if you have to explain how an interface works out of band, it's probably not a very good interface.

I've seen other questions on UX about multiple-option tests, and yes, it's easy enough to bung an "{in,}correct" label next to the question when there's only one option to talk about. But adding (eg) 6 labels starts to make the whole thing a little cluttered.

The way they handle this on paper is by a separate answer sheet which shows a perfect test, filled in. If we could guarantee desktop usage, we might have the space for this, but on mobile these things already fill the screen. Trying to get the user to compare between two of them seems folly.

I'm looking for good options that make this clearer. There could be a dozen options for a statement so brevity is key, it needs to work in tight situations. Accessibility is also fairly important, and probably something I'm not addressing well enough already.

2
  • 1
    Indeed, the current design isn't very accessible for people with color blindness. Can you share what comments the client made? That can make it easier to give a more practical answer.
    – jazZRo
    Jan 31, 2022 at 10:59
  • They asked what red and green meant. Did (eg) green mean they mean they should have been ticked, or (as is the case) that they were correct to have not been ticked?
    – Oli
    Jan 31, 2022 at 11:13

3 Answers 3

4

Shortly after asking, I found this treatise on multiple answer feedback by Yulin Liu. Not everything is directly transferrable, but I've pulled in two key ideas:

  • Don't use checkmarks (ie the standard checkbox) around places where you might want to indicate correctness, and
  • Keep feedback separate and not reliant on colour.

enter image description here

Not entirely happy with my CSS here but it's progress.

0

How about the good old V and X marks? The red and green is indeed unfriendly in terms of accessibility, and trying to display a perfect test basically inherits the limitations of the physical world. It was a solution made out of necessity since you can't do dynamic and contextual changes on paper. Once that becomes possible, it's better to display the relevant information in-place, rather than send the user looking for it elsewhere, as you pointed out.

0

If the quiz allows for randomization of questions (i.e., the questions are not always in the same order, which is very common in multiple choice) and you want users to learn from their answers, I would suggest dividing the answers into two parts: Correct Answers and Incorrect Answers.

The approach described above should also take into account one thing: which of these options the user has chosen, right or wrong. You can distinguish them in different ways: by iconography, bold print, a small banner (good/bad), a small label (right/wrong), etc.

There is one more possibility: make a distinction between selected and not selected. Now you can use a title like "you selected..." and then list the selected options. This time you need to distinguish which of the selected options are true or false. Something like this:

  • right
  • right
  • wrong

and then a second title (if necessary) with "you missed.."

  • Missed answer

This way you get rid of any external clues (e.g. checkboxes or icons), a quick scan will immediately show the user what is wrong or right, and you are not dependent on the order of the questions.

2
  • That's a neat idea, and possibly something I can do, but one that bumps into and prolongs the same problem as I've been nudging into. Does "Correct Answers" mean the correct answers, or "your" correct answers.
    – Oli
    Jan 31, 2022 at 13:45
  • Well, when you're dispalying the results for a multiple choice quiz, the correct answers are the ones the system expects, so these would be the equivalent to those marked with a green tick. Now you mention it there's something I forgot so I'll edit my answer
    – Devin
    Jan 31, 2022 at 14:35

Your Answer

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

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