Survey Form Design

A note to myself about survey form design in HTML.

Examples of Survey Form Design

The following is a work in progress on form design for online surveys. I haven't done a lot of it myself, but I have been subjected to more than a few; both as a surveyor and a respondent. More than enough experience to make me both opinionated and curious about the subject. A short, fragmented read for now, but may improve over time.

Radio buttons:

Radio buttons are nice for displays larger than mobile, but on small/narrow displays, the inline display tends to break down when there are more than 3-4 buttons, depending on the length of legends and labels.

Using your browsers responsive mode (if it has one), check out the radio-button form below:

In mobile/responsive view, the radio buttons are very close together, making it harder to hit the right one. When there are more than 5 buttons (on something like an iPhone 5), they wrap to a new line, making for an even more confusing experience.

Instead, you might use a different design for mobile views; something like a vertical column of rectangular buttons - like often seen in a vertical navigation element:

Here's one with text instead of numbers (you could use a number-scale in the backend):

This version uses radio buttons - but vertical: