I'm trying to design a quiz game in which users have to answer 10 questions in each level. And when the quiz finished, user gets their Rating. The rule here is that up to 3 mistakes is allowed but more than 3 mistakes is the Failure.

So far, my design idea is to rate them with stars. Meaning if they have 1 mistake they get 2 full star and 1 empty, and like so every mistake discharges 1 star. Below I provided an example of what I've done so far:

  1. No mistakes: enter image description here
  2. 1 mistake: enter image description here
  3. 2 mistakes: enter image description here
  4. 3 mistakes: enter image description here

And what I'm trying to get help about is what to do for Failed quiz (quiz with more than 3 mistake). Any help would be appreciated.

Here is the concept so far. enter image description here

Thank you in advance!

  • 1
    "Not attempted" could be blank (no icon) and "Failed" could be the empty stars with a "crossed out" line or x.
    – Wolff
    Jun 9 '20 at 18:51
  • hmmm Nice idea. But when I tried it for "No Attempt", it was some kinda empty. You know when user first opens the app all the levels has not yet attempted, so what we see there, is just some flat squares. And on the other hand that cross out makes it so messy.
    – Taba
    Jun 10 '20 at 2:23
  • I understand. We don't know much about the context. Maybe this question also depends too much on opinion?
    – Wolff
    Jun 10 '20 at 19:32
  • I just updated the question. @Wolff
    – Taba
    Jun 10 '20 at 20:17

You could simply use hollow stars for not attempted, gold stars for passed, and red stars for failed.

enter image description here

In most apps I see, the hollow or colorless stars indicate "not attempted". Using that is fairly intuitive overall. If you don't want a secondary color (red), and failed is the same as not attempted, then simply leave the stars hollow/white when an attempt fails. But if failed is not the same as untried.. then you need a third color or breakout. You could use colorless stars if that's better.

There are really many combinations that would work.

enter image description here

Without knowing the entire design aesthetic of the app, it's hard to be definitive.

  • Thank you for your awesome answer. It's really great. But it seems that I couldn't clearly explain what I want. The thing is that 3 mistakes is allowed (as I mentioned in the question) and more than that is considered a fail. But when user is looking at 3 red stars, comes in his mind that it's a failed exam (in case that it's a passed exam with 3 wrong answers). and also about its color (red), I don't think we can use it because of the application theme which has only 2 colors (blue and orange) so far that the yellows are already extra.
    – Taba
    Jun 11 '20 at 7:56
  • I provided many other options in addition to using reds. Again, it's difficult to remain "on brand" without seeing the actual branding.
    – Scott
    Jun 11 '20 at 8:33
  • aha yea you're right. just one last try to close the question. How is it to use yellow for right answers, hollow for No Attempt, silver instead of red for wrong answers? what u think about it?
    – Taba
    Jun 11 '20 at 9:37
  • I think you merely need 3 variations. Whatever those variations are will be fine. If silver matches the branding better, then silver would work. You simply can't pull this off and it be intuitive with only 2 star variations.
    – Scott
    Jun 11 '20 at 15:13
  • aha I see. But the thing is how to make a change between 3 wrong answers and failed quiz?
    – Taba
    Jun 11 '20 at 19:47

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