What is the best form approach for a single question with 9 options?

Question

We are in the process of creating a survey style onboarding flow and was curious if it is ok to break the rules here? I understand that once the number of choices gets over 6 or 7, it is best to use a dropdown menu, however, for this instance it is the only question on screen and seems like exposing all the options would be quicker and easier to complete.

The second part of this question would be the layout of the options (on desktop). Which layout would to recommend for quickest scan-ability?

1. Left to right list - Similar to a tag group style selection and uses less viewport height. Also feels less organized.
2. Three column, Top to bottom
3. Three column, Phone style layout

Answer 1

HTML5 allows for a number input, which has a + or - spinner and as someone mentioned you can set a min/max value. This will do your server side validation (prevent anything but whole numbers from 5-14 as you wanted. Your devs will need to do serverside validation (samething with the radio buttons they have to be serverside validated as well).

Typing in a number is pretty easy and takes less space than all those radio buttons. The radio buttons are honestly the wrong thing to use in my opinion, where there is a simpler solution.

Answer 2

When it comes to usability, there are a few things to consider:

• clicking vs typing = clicking is easier and preferred, especially on mobile
• number of necessary clicks = preferably just one click to complete the question
• distance between options = if user needs to change the answer, shorter distances make it easier
• size of options = bigger elements are easier to click
• product changes = the options might change in the future, so the layout should be easy to adapt
• reading direction = people usually read left-to-right, top-to-bottom, and numbers go left-to-right, so positioning options left-to-right in ascending order makes them easier to understand than columns

Based on that, my preferred version from your mockup is actually the first one, without columns, since it accommodates most of those factors, even though it might look less organized.

Overall, I don't think it makes that much of a difference. Your ideas are good enough for most users, so unless you want to optimize the form completion speed, it doesn't really matter which version you choose.