18

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:

multiple choice feedback

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?

5
  • 2
    Does this answer your question? How to show correct and incorrect answers to multiple answer test? Nov 3, 2022 at 6:26
  • Alternative looks much better (even better than most answers, sorry :)) - and I would experiment with strikethrough (a bit longer line than item and draw it over checkbox too).
    – Arvo
    Nov 3, 2022 at 14:32
  • 1
    I don't see what's confusing with your current solution, can you elaborate? I am confused by your alternative having only a single cross for two wrong answers though.
    – Bergi
    Nov 4, 2022 at 1:49
  • Does your quiz also have non-multiple-choice questions? If you also use crosses and checkmarks there, aim for consistency. Also if you are scoring the quiz, and a checkmark indicates an awarded point.
    – Bergi
    Nov 4, 2022 at 1:52
  • @Bergi some users reported that the green tick next an unchecked option (like "50 - 100") made them think they should have marked that option.
    – etuardu
    Nov 4, 2022 at 11:24

6 Answers 6

29

Yes—the less going on the better.

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

yet another alternative

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".

12

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

enter image description here enter image description here

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

3
  • 9
    Somehow labeling the columns "correct answers" and "your answers" would make interpreting the additional column of checkboxes quicker. Nov 3, 2022 at 19:15
  • If you make sure the boxes dont shift when the additional row is shown, itd be instantly clear.
    – Nathan
    Nov 3, 2022 at 20:29
  • @bloodyknuckles The OP is about the question answers, not the question. The OP doesn't talk about the questions or mark them in the examples. We have no idea how the questions are displayed, how they're labeled, how many of them there are, etc. The question is about the icons, not the questions or how the questions are labeled or displayed
    – moot
    Nov 4, 2022 at 19:13
5

Expanding on @moot's answer...

Add labeling over both checkbox columns for quicker interpretation:

correct answers

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.

1
  • "Eplanding" ... really? The question is about the icons, not the questions or how the questions are labeled or displayed. The OP doesn't talk about the questions or mark them in the examples. We have no idea how the questions are displayed, how they're labeled, how many of them there are, etc. If there's 20 questions displayed per page, it should label each question's answers 20 times?
    – moot
    Nov 4, 2022 at 19:16
1

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.

1

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:

enter image description here

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.

enter image description here

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.

-1

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

enter image description here

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

2
  • 1
    Why does one correct answer have an icon but the other doesn't?
    – Bergi
    Nov 4, 2022 at 1:54
  • 1
    The middle two options were mistakes made by the user. I'd expect to see some similar style or indicator that highlighted both of those as incorrect answers, but instead, one is bold in black text, and the other is of normal weight, in grey text. There is nothing that makes them stand out as two wrong answers. Nov 4, 2022 at 12:52

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.