My work involves designing the interface for quizzes taken by college students. When designing for quizzes, what would be the easiest arrangement to read for my users: horizontal, "square", or vertical? Personally I like vertical arrangement so I can skim the answers easily, but that's just me.

enter image description here

Sample question (accounting): enter image description here

  • Yes, vertically you are saving time of the user to read. Personally feel this is a better approach. – user38061 Nov 15 '13 at 6:12

Your assumption is correct, items ordered in a vertical list rather than a horizontal list or as a grid is a lot easier on the eyes to scan.

The reason is quite straight forward, horizontal lists need to span a larger area and therefore the user has to move their focus larger distances which is tiring on the eyes. Same thing with grids, here the user has to apply a Z-pattern to scan the list, moving from left to right and back to left with much larger movements than in a regular vertical list.

Edit: Vertical lists also make it easier to compare answers (for a single question) when there is parallelism in the possible answers (like example with ordered numbers) or addition/change of a word or clause.

| improve this answer | |
  • To add to what you said, also usually people scroll downwards as opposed to sideways which makes a vertical list much easier to read and use. It's like a user who scans a form online. Labels are usually put on top of the label because it is much easier to follow the flow of how the form is displayed (up and down instead of left to right). – Majo0od Nov 15 '13 at 20:08

Personally I think this is very much driven by the relationship each answer has to each other, the direction of screen navigation being used and the similarity of answers between questions. To explain that a bit better :

Relationship each answer has to each other

If you're dealing with range values for example 0..10, low-medium-high. $0..$10000 a slider type layout which is accepted as being horizontal is good for the layout of the answers. If each answer is very distinct, a vertical layout might be better. Given that you say you're dealing with multiple choice, I'm assuming that range is probably not the case and so this is not really appropriate.

Direction of screen navigation being used

  • top-down

    if each question is being displayed one under the other then displaying answers perpendicular to this eye flow will cause the user more strain to view the answers in a normal eye sweep.

  • left-to-right, right-to-left

    lets say you're animating each question, transitioning it in to the page from giving the impression of a direction of flow, or alternatively scrolling or using a carousel effect. In this case the answers would be acceptable if they followed the flow of the scroll/carousel/transition.

Similarity of answers between questions

If all the answers are the same, the user will just sweep over them without having to re-read them, so a break in flow (ie moving horizontal when question flow is vertical) would have less of an impact.

| improve this answer | |

Can't comment yet but I'll add this as an answer: Don't reinvent the wheel. Since you are specifically designing a quiz/test, and every major test you've ever taken has used the vertical arrangement (SAT, GRE, ACT, etc) don't confuse the user by changing things up. It worked long before tests were taken online, and still works today.

Edit: forgot to add that AndroidHustle's answer explains exactly why its always been the common way to do this.

| improve this answer | |
  • Right. I see some questionnaires with the "square" type though, more of for saving paper, but if online, then horizontal space is more valuable than vertical space. – Daryll Santos Nov 19 '13 at 7:06

For long questions the "vertical" arrangement, no doubt. In the example, I'd indent the radios to make the document more scannable and to emphasize the dependency.

OT: But for short "questions" (actually, labels) I'd use a fourth arrangement, with the label like in the examples, and the options in a column (as in the third example) but shifted right so that the form has two columns, one for the labels and the second for the options.

This is the traditional 1-column vs. 2-column form layout. In the 2-column layout the "answers" don't get in the way for scanning the "questions" (labels).
Something like this:

Preferred color   O green
                  O blue
                  O white
Car brand   O Ford
            O Toyota
            O Ferrari
            O Citroën

Notice the non-alignment of the options columns. This is so on purpose, because in lengthy forms a very regular pattern is not helpful for a user who took her sight from the screen to see a paper and has to find back her location.
Is like those forms where all inputs have the same size no matter the length of their content and returning to the current working location is difficult and error prone.

| improve this 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.