How to show correct and incorrect answers to multiple answer test?

Question

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:

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.

Answer 1

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.

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

Answer 2

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.

Answer 3

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.