20

In this case it's a mock betting site, but my question applies to any multiple choice QA site.

This is the best that I came up with so far:

screenshot

It is horribly confusing.

The colored rectangle is "what did you bet". Green means "you were right". Red means "you were wrong". Orange means "game hasn't happened yet". The soccerball indicates the "correct" answer.

So on one hand, I really like the colors - I want to look at a glance on the page, and see "how much green, how much red, how much orange". But I just can't find a good way to also put the correct answer one the page.

Note, this is not an interactive page, it is only the results.

Ideas?...

Improve this question
2
  • 15
    Don't just rely on colour alone to denote whether something is correct or incorrect - up to 12% of men suffer from some form of colourblindness and will not be able to tell these apart. Using an icon (a tick or cross, for example) or text and different styling would be preferable.
    – Liam Hammett
    Commented Jun 11, 2018 at 12:18
  • If you move the time to the top of the rows like in Owen's answer, you can use the last column to show the winner's name and keep the rest the same (but remove the soccer ball). I think this would be the most clarity
    – Chiri Vulpes
    Commented Jun 11, 2018 at 18:07

4 Answers 4

Reset to default
21

The first thing that springs to mind is 'Who wants to be a millionaire?' and how they show something similar. The green is the chosen answer and the orange is the correct one:

enter image description here

You could do something like that.

The orange to show the game is yet to be played in the example you have provided is making things confusing. I would remove this. Instead make it obvious what games have/haven't happened yet in a different way, the games that have happened change the grey around it in the background to a light grey or green etc to show its finished. Then the rest below will be more obvious that its still to come. Look at indicating that the user selected wrong or right too.

Separate them by date in a more obvious way by using the date as the separator. This makes it more obvious that the games have/haven't been played too. This is something I was working on for the 2018 world cup a while ago for my companies (betting/gambling) promotions to our users and this is how we did it which proved successful in testing.

See this visual (apologies for the crudeness):

enter image description here

The light grey at the top indicates that the games have been played, I have also added an indicator on the far right to show if the user picked correctly (green circle) or incorrectly (red cross) as well as highlighting the right answer in orange. You dont have to stick to these colours and format etc but this is to show how a few tweaks can really help.

Improve this answer
8
  • Thanks! I will definitely try this. I also like the date/time on top/bottom instead of right and was already considering that change. I am surprised by the colors - green screams "correct" for me, so it's weird that green is "your answer" and orange is "the correct answer". Maybe green is bad because it says "you are correct", and I could chose a neutral color, like blue?
    – Oded S
    Commented Jun 11, 2018 at 10:44
  • No worries, it just adds that extra clarity for the users. You dont have to stick to these specific colours, this was more to just get the point across and replicating what you have used in your visual. Maybe a neutral select colour as you say and then green with the correct selection. If they select the correct answer, keep the selected colour and outline it with green.
    – SURO
    Commented Jun 11, 2018 at 10:48
  • 47
    Isn't it the other way round in Who Wants to be a Millionaire? When the player chooses an answer it goes orange. Orange is the chosen answer. The right answer then goes green. We all hope the orange one becomes green (player got the right answer), but it may be that some other answer goes green as here (player was wrong)
    – Au101
    Commented Jun 11, 2018 at 15:02
  • 13
    An ibex is a type of goat, so @Au101 is correct
    – Pyritie
    Commented Jun 11, 2018 at 16:55
  • 8
    Color-only interfaces can be problematic if you may have users who have varying degrees of colorblindness. Shading or some other text-based indicator may also be necessary.
    – Chase Sandmann
    Commented Jun 11, 2018 at 22:35
16

This is a pet peeve of mine. Consider the Roku interface, especially for Amazon video, where your current selection has a slim yellow border which is hard to see at a glance, and it's slow and unreliable enough that you can get stuck "between frames" wondering if the system is just hesitating or if your button press didn't register. Please, always make selections clear!

I recommend that you highlight the selection with bolding and a border change. Using color alone is usually a bad idea, as it may be open to interpretation and it obviously doesn't work well for people who are colorblind, so start with a grayscale image. You can then add a check mark or a star for correct entries and an X for incorrect, and mark the losers of games that have been played with a strike-through.

Now that you've made all three axes (selection, victory, and correctness) clear, you can reinforce this with color, and no one will depend on it:

enter image description here

I'm not happy with how ties are shown here (neither side crossed out). If the actual UX problem you're trying to solve has three or more common possibilities, I would probably recommend a set of arrows: one pointing from the top to show what you picked, and one from the bottom to show what happened. Success is when the arrows align:

enter image description here

This takes up a lot more vertical space, though.

Improve this answer
3
  • Actually, my second example is unclear because, in row #2, the user chose "Japan loses" and was correct, because Korea won. However, if the user was choosing "which team will win," then this model would work. Or perhaps I've misunderstood the OP completely - maybe a truth table would help?
    – Jon of All Trades
    Commented Jun 11, 2018 at 14:09
  • How about an underline for the correct answer?
    – Pyritie
    Commented Jun 11, 2018 at 16:58
  • @Pyritie: that would probably be fine. Putting a check mark in the far left of each row would work too, and would let see at a glance how many hits and misses you had; I see that's what Owen recommended (albeit on the right side). It emphasizes the user's success, whereas putting markings on the individual boxes emphasizes which team won each match.
    – Jon of All Trades
    Commented Jun 11, 2018 at 20:17
5

You could simply put a border around the boxes the users selected. Eg. a thick blue border. And then on the page where the users selects answers, be sure to also add these borders, when a selection is made, that way there is no confusion about what the border is for.

Then maybe removed the orange color all together, that can initially be a bit confusing if there are no description of the colors anywhere.

enter image description here

Improve this answer
1
  • I like this idea and it's what I originally tried to do, but couldn't find a way that wasn't ugly... I'll try it again though
    – Oded S
    Commented Jun 11, 2018 at 10:46
-3

If color is the most important feature, then played games should be flat to show that they are no longer active. The colors could be adjusted for the color blind but green, yellow, and red are pretty much a universal standard.

idea

The other thing to do is dim everything that is not true and only have the outcome bold looking, but I would still have the played games flat and game to be played raised.

idea 2

Improve this answer

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.