What is the best way to show results of a multiple-choice quiz where multiple options may be right?

Question

I'm designing a multiple-choice quiz interface where several options might be the right ones and the user has to check all of them in order to win.

Once the user submits the answer, I want to display the results, including whether each option was correctly checked or left unchecked.

Currently, I'm showing a marker next to each option to indicate the status, but it seems to be confusing. I prepared an alternative design where a single marker is shown and the wrong answers are underlined:

This alternative version seems to be better, but I'm concerned whether the under-linings are meaningful, especially for color-blind people.

What may be a better approach for this?

Answer 1

Yes—the less going on the better.

Also close proximity of the graphic to what it pertains reduces mental processing:

The question is answered correctly— green-check the question.

Some answers are wrong— red-x each wrong answer.

The red text coloring and underlining wrong answers are no longer needed, and become superfluous, if, rather than generalizing right and wrong answers (i.e., one green-check or one red-x, generally located), instead the feedback is presented near correctly answered questions, or each wrongly answered choice. Less going on, and still "accessible".

Answer 2

Show correct checkbox symbols right next to the checkboxes. Users don't have to read and interpret any symbols or coloring systems, they just see if their checkboxes match the answer checkboxes

Color isn't used so there's no accessibility issues with red/green blindness

Answer 3

Expanding on @moot's answer...

Add labeling over both checkbox columns for quicker interpretation:

If the question was answered correctly there's no need to show the "Correct answers" column. It may even cause a moment of confusion. A simple confirmation that the question was answered correctly and option to move on.

Answer 4

I agree that the current state is confusing. Your alternative is better, but to your point the information may not be meaningful to all users. A few other ideas you could consider implementing:

• Add a short informative text below the results to explain the result. Simple phrases like "You selected all the correct answers," "You missed some correct answers," "You selected some incorrect answers," "You selected some incorrect answers and missed some incorrect answers."
• Have separate markers for the score of the entire question vs the score of the components. The total score should be larger and in a prominent position, maybe next to the question text. Markers for the line items can still be used but smaller than the score of the whole question.
• Use more than two symbols. There are four possible states here for the question parts: correctly marked, incorrectly marked, correctly left blank, incorrectly left blank. Correctly marked and easily corresponds with a check mark, as you've done. An item correctly left blank probably does not need to be marked at all, I think that would make your "All correct" state in the original left confusing. But you have two separate incorrect states, incorrectly marked and incorrectly left blank. Try to brainstorm other symbols that might replace the red X for one of those states. Maybe an empty red circle for incorrectly left blank? Or a red crossed "no entry" circle for incorrectly marked?
• Further distinguish the marks the user made from those that the system made. Maybe use a white check on a black square?

At the end of the day, the basic principle is to convey the information by multiple means so that it is not reliant on a single channel, such as color. You can use as many methods as needed as long as you are not overloading the user. If you can use, color, symbols, and text together, that should be enough to convey the state to users. We often like to avoid using text, but I think it never hurts as a backup, and if it is not too obtrusive, then a user who needs to read the explanatory text once or twice can then just use the symbols to get the information they needquickly.

Answer 5

It's a good idea to have a "correct answers" column, in the case that mistakes were made.

This would be just like existing interfaces I've seen professional systems at Universities using for online assessments:

I would add to bloodyKnuckles' suggestion that whether the user was correct for each option or not should be clearly indicated, and that the answers should be duplicated for extra clarity.

In one of OP's mock ups even the unchecked boxes are marked for correctness, and that adds a lot of confusing visual noise. Only mark the items that the user took action to select, because actions rather than inactions are what we have already modelled in our minds as warranting feedback.

Additionally, put the tick-marks right next to the answer (instead of in an imaginary right-aligned column far away from them); take advantage of the gestalt design principle of proximity to make it easier to associate the feedback with the relevant item. This has an additional plus of making the feedback resemble familiar handwritten paper marking.

Answer 6

I think you should organize all the information well and then find a graphical solution.

---

There are four possibilities in the answers, four states:

1. Selected and right answer
2. Selected and wrong answer
3. Not selected and right answer
4. Not selected and wrong answer

From here, find what you want to show to the user and how.

As the text of each answer has several signs, I would try to simplify the use of icons as much as possible and highlight the right answers, both checked or unchecked. Color blind people do not distinguish some colors but they are able to distinguish tonal values, using bold/normal typographical variations and black/gray colors is a possible solution.

In the example below

1. Selected/Right: checkbox on the left, icon on the right, answer in bold
2. Selected/Wrong: checkbox and answer in normal font color gray
3. Not selected/Right: answer in bold
4. Not selected/Wrong: answer in normal font color gray

With this visual information, the user will immediately see which answers they correctly checked out of the possible right ones.