11

I am working on a Quiz Application for Multiple Choice question. Instead of normal Multiple Choice Questions with the two answers yes and no. I am working on one that allows a user to abstain to a question and to give no answer. It should always be possible to select 'no Answer' even after selecting Yes or No.

I was thinking of a Toggle with 3 states:

  • a green tick for Yes/Right
  • a red cross for No/Wrong
  • a text 'nA' for no Answer

enter image description here

Is it a good idea to mix text with icons?


Update

Context

The application is a web based application. The control panel will be available only on computers and will be used by teachers to create a quiz for their students. This test is just for the teacher to see where students may have problem with understanding, and for students to see what they already know and what not. It will be possible to ask Single-Choice questions (radio buttons) and Multiple-Choice Questions. As mentioned the Multiple-Choice questions have three states Yes/Right, No/Wrong and 'no Answer'. The reason for 'no Answer' is that a correct answer leads to +1 points, a wrong to -1 points and 'no Answer' will get 0 points. The students, who answer the questions, will be able to do so on any device like Smartphones, Tablets or even their Laptops.

The thing with just using text like yes, no, and n/A as Nikita Prokopov mentions, is that the teacher has to ask the questions, so that they can logically be answered with Yes and No, so that the students won't get too confused with the question and answer possibilities. For instance:

Which countries border on Switzerland? Yes, Germany borders on Switzerland

When I would just use Yes and No then the teacher, who creates the questions, has to check that they can be answered with Yes or No, which in my opinion should not be the case. The same question could be asked without using the yes/no pattern. For instance:

These countries border on Switzerland. then the answer should be True, Germany borders on Switzerland

So that's why I came up with the icon, text mixture.

12
  • 3
    It's a novel design, but I think this is a tough sell over having 3 radio buttons, even if you mad the current-position more obvious. What design constraints made you come up with this approach?
    – Jung Lee
    Apr 21, 2012 at 13:25
  • The problem with radio buttons is that you always need a title row to explain which radio button means what. So instead of having a title row, I was thinking of integrating it in the input method itself. Also if the application will be used on mobile devices a "sliding toggle" could be more intuitive.
    – noyb
    Apr 21, 2012 at 13:36
  • Text with icons isn't confusing...have you used MS Office or any Adobe products lately :)?
    – Ben Brocka
    Apr 21, 2012 at 14:07
  • As food for thought, there are a lot of checkboxes that have three states: checked, unchecked, and an indeterminate state, where the box is filled in with a little square instead of a check mark. When I see that indeterminate state, I usually interpret it to mean a "mixed state" rather than an unknown state, but it is evidence that there are lots of things out there that use three states.
    – rbwhitaker
    Apr 21, 2012 at 16:22
  • Hi noyb. Perhaps you could provide a bit more detail about the context of use, as it seems this will (not surprisingly) influence the answers to your question. For example, what devices/screen sizes are you trying to design for? How will the quiz be used? And are you saying that some questions will have yes/no answers and some questions will have true/false answers, or is it possible to re-write the questions so they all follow the same pattern? Apr 22, 2012 at 2:27

6 Answers 6

10

Answering your question, yes, it’s absolutely ok.

But, with such a short labels, you could use text instead of pictures:

[n/a] Yes  No

 n/a [Yes] No

 n/a  Yes [No]

Text is easier to understand than icons, and different understanding are less likely for text. For me, green tick and red cross mean if question was answered correct or not, not the answer itself.

Guessing that [n/a] is a default state, I placed it at the front, so it will be easier to find when revising your answers, looking for “what else should I answer”.

Also remember, that the bigger the button is, the easier it is to click on it, so do not try to save space before it’s really a problem.

3
  • Thank you for your Answer. I totally agree with you that text is easier to understand than icons. The only problem with that text is the way the question is asked. Yes or No matches a question like: "Which countries border on Switzerland". The answer would be "Yes, Germany borders on Switzerland". But if you ask: "These countries border on Switzerland", then the answer should be "True, Germany borders on Switzerland". You see that the answer possibility depends on the question asked.
    – noyb
    Apr 21, 2012 at 17:50
  • 2
    Is it possible that you reformulate the questions? It’s not because then my solution will fit :) but because I think for users it’s easier to answer if there’s a common structure, repeating pattern in the form the question is asked. Apr 22, 2012 at 18:00
  • Unfortunately not. It will be a platform where teachers create Quizzes. Therefore it's up to them how they ask the questions. The only thing would be to give them an example how they could ask the question and hope that they will do it like that ;)
    – noyb
    Apr 23, 2012 at 11:03
11

I am not too happy with the use of radio buttons as suggested by others here to answer yes/no/I don't know. It makes it hard to review your answers. For instance, try to find the answers where you said "I don't know" or "N/A" quickly.

How about using exclusive buttons? That is like you do already, but I think your design could be clearer. If you give the buttons more space, their meaning will be easier to grasp. I would interpret "nA" as "Not Available" or something like that at first sight, wich is confusing.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I would not put the "I don't know" between the Yes and No answers, as you did. Both of these options represent a specific answer, while "I don't know" does not. I think it is important not to represent that as halfway between the range of "Yes" and "No" as you seem suggest with the slider-like layout. Perhaps you should even introduce a bit of spacing between the Yes/No on the one hand, and the "I don't know" on the other.

2
  • Thank you André for your response. I really like your idea with three buttons. Just saw that JQuery mobile offers Radiobuttons which will be represented like your suggestion (jquerymobile.com/demos/1.1.0/docs/forms/radiobuttons/index.html - at the bottom). I think I have to test this in the next user test and post the results here.
    – noyb
    Apr 27, 2012 at 11:06
  • Did you do your next user test round yet, and tested the idea? Any results on that?
    – André
    Jul 25, 2012 at 7:29
5

I would use the radio buttons on a web based application. Users have high recognition of how these buttons work, and doesn't need to learn a custom button. Use radio buttons to select one of two or more items in a list like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  1. Use a header on each question.
  2. Use a separator line to next question, to make it easier for the user to know where this question ends.
  3. Use sub headers on the different countries (in this example) to distinguish one country from the other.
  4. Use white space between the last radio button on each country and the nex country to further distinguish countries.

Convention is key here.

1
  • 2
    +1 I think the solution proposed in the question is terribly confusing because the selection is not clear enough. There's a bunch of vertical bars everywhere and they don't really help to distinguish which option is selected.
    – user8697
    Apr 25, 2012 at 17:55
1

Have as few choices as possible.

Less words to process = faster response times.

Don't forget to use the <label> tag, so i can click the word associated with the checkbox/radio button, instead of only the actual check/radio. 

1
  • 1
    +1 for the <label> tag. One of my biggest pet peeves with web forms. Apr 26, 2012 at 18:40
0

Anydo uses the line-through approach to marking tasks as done... So, I think you could try something this to mark "no" answers and perhaps a rounded rectangle to mark "yes" answers. No answers don't receive any different mark... I think it can be more natural to user.

0

I would recomend to use select with such options:

  • n/a (default)
  • yes
  • no

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.