1

Alright, so in this case, the user takes a quiz and is asked a series of questions. Sometimes the questions can be a "drag into the correct order" kind of question. The issue I'm running into is how can I best show to the user whether they got the order correct or not, and if they didn't, how do I show the correct order compared to what they chose?

Screenshot below shows an example. The blue elements are in the correct order and the red ones are not.

enter image description here

The way it works now, the red makes it pretty obvious that it was incorrect but this doesn't help the user know why it's incorrect and what the order should've been.

Also - tips on colors to use would be appreciated as well. The blue and red are just what I chose to build this out. Not necessarily the colors that will stick.

  • 1
    Is it possible to show the correct list right next to the list the user generated? This allows for easy visual interpretation, and eliminates the need of having the user decypher multiple up and down arrows and/or numbers. – JS_Riddler Dec 7 '19 at 23:00
4

I think before studying the colors and positions, you should know all the possibilities of error.

In the example of the question no clarification is necessary, if there are only two wrong positions, one must be in the position of the other and vice versa.

The real problem if there are only five possible answers is:

  • three mistakes
  • four mistakes
  • five mistakes

From here it's where you must create a visual code to indicate the right position.

Three wrong answers

It's not the most complicated case, a simple visual code of how many steps the user must take to find the correct position is enough:

Three wrong answers

Four wrong answers

You can set a color code along with the signs that indicate the severity of the error. In this example white is a slight error, blue a medium error and black a high error:

Four wrong answers

Five wrong answers

Personally, I would make the user to repeat the test for two reasons:

  • Prevent the user from feeling frustrated and therefore abandon the test
  • Avoid filling out the answers with colors and location codes

Five wrong answers

  • 1
    Thank you for the detailed post with mockups! I like the idea of showing an arrow for how many places it is off. I think I will go with that for now. :) – Quiver Dec 5 '19 at 17:50
1

not quite right Why add so much visual complexity to the draggable bars themselves? On the top of the page above the bars, you can add a line of dynamic text that changes and provides feedback to the user. You could even have an animated check or cross mark.

got it right

0

I was going to offer the same but I realized it already says you to change the numbered elements 2 and 3 via applying different written numbers as text on them.

Like in normal case it will be 2. Two and 3. Three but now as you can take a closer look, it says 2. Three and 3. Two to make user change their places.

It should have their element order numbers presented with number at first, and then the order which they should be written as a text to point out.

Alternatively using green would be default choice for me to represent approved elements.

0

If you really want user to help order items, then show expected movement over wrong items with floating arrows. Green for correct and Red for incorrect items looks okay, unless you're taking care of color blind ppl. Additionally tick mark on correct items would help.

0

I think the layout which you have come up with to show incorrect answers is pretty good, so just below it you can give a button saying show correct answer on click of which It will show the correct sequence.

Here you can show it in two way

1) One can switch between correct system answer and another one is user's given answer 2) Show side by side or in vertical manner

And for the color or showing incorrect answers one more option which I can think of is showing traditional cross and correct icon beside the answer or just show cross for incorrect one and no icon for correct answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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