Layout for a page full of radio buttons

Question

I'm trying to redesign a page that has a ridiculous amount of radio buttons.

The details:

• The page I'm trying to redesign is one form that will be filled out by one company and submitted to another company. This form is one page in the middle of a long application. The users are able to save it and come back. They are also able to save the application this is wrapped in and come back to that. They can also open this form specifically if they want and not have to crawl through the rest of the application. Due to this, I don't think it'd be a good idea to break this out into multiple pages.
• The users are employees who will be asking their customers these questions. Some employees may do this multiple times a day, some may do this sporadically. The turnover rate for employees can be high for certain positions and steady for others, so I'm trying to keep the new people in mind who might not understand a lot but still design for the experienced users.
• This page will have somewhere between 50-75 questions. The answers will vary from two values up to five.
• Some of the answers will require user input
• Rather than use radio buttons, I've changed these to buttons or input fields. This will increase the clickable area for the users who use a mouse, which, in theory will make it easier for them to navigate through.
• I do not want to use dropdowns because the number of answers values are so low it doesn't merit them, and since these are regular users I want to keep the additional clicks down.
• I don't want to show one question at a time with a slide in and out interaction (or the equivalent) because A) that cute interaction would get old after awhile for a regular user B) If the employee is talking to the customer and learns the answer to a question further down, I want them to be able to record it quickly so they don't have to discuss it again.
• This page will be responsive. There isn't a minimum or maximum.

I have taken two approaches but I can't settle on either.

• Traditional left aligned form

  • Pros: Easy to scan from the left, doesn't feel crowded, answers can extend pretty far to the right without affecting any of the following questions

  • Cons: Takes up a lot of vertical space, takes too long to scan all the questions, could have a lot of wasted white space to the right, answers could wrap below if on a small width screen that isn't considered small enough to be mobile

• Grid form

  • Pros: Takes up less vertical space, utilizes all of the open space on the screen, less scrolling (I know people scroll but it might be annoying if you're doing this form multiple times a day) easy to scan through all the questions quickly

  • Cons: Cluttered, might feel overwhelming, extended answers (5) would extend the row height and create weird empty space beneath the other questions, feels unbalanced,

I cannot figure out how to design this so that it's quick and easy to use for the range of experience levels, but also easy to look at and digest. Also having this many inputs that should stay on one page is a new challenge. Everything I come across discusses using radio buttons vs dropdowns. Does anyone have any experience working with this many radio buttons on a single page? Any guidance would be appreciated.

Answer 1

The second solution is too chaotic, if there is no reason to arrange in columns the form, follow the page flow.

I think the first solution is almost the right one, cause where there are less then five options, buttons are preferable to select menu (1 click VS 2 click).

Regarding the page's lenght, one posibility is to group asnswer by topics, in horizontal tabs, with a progress bar to show the user the progress of the survey.

If you don't group the answers, I think the users could be scared by the huge number of questions.

^{download bmml source – Wireframes created with Balsamiq Mockups}

I found this post interesting, there are some tips about forms designing.

Answer 2

We know from user testing that users hate horizontal scrolling and always comment negatively when they encounter it.

https://www.nngroup.com/articles/scrolling-and-scrollbars/

So definitely, you should work with the first option. You have already categorized your form, so that makes it easier. Create a step by step procedure with a wizard, similar to this procedure as the following. Your way of displaying the data can be as it is since it looks neat!

Answer 3

The first solution is the most familiar. Which, from a users perspective will reduce anxiety.

As you've grouped the questions into a logical order, you could explore Progressive Disclosure combined with a progress indicator as a presentational method.

We've found in similar projects, people tend to…

• Like to know where the exit is (When will this end?-progress indicator)
• Need a narrow field of focus. (Only ask me one question at a time-progressive disclosure)
• Try to speed up the process however possible. (by skipping mandatory questions, even when there is an error)

—

I think Walter has provided a great solution 🎉

Answer 4

You can categorize your questions and convert them into step 1 of 3. I agree with solution given by Walter Villa & Dimitra Miha. In this case you save space and not much scroll is required. By showing progress bar on top it will be clear to user how many steps are remaining. Hope this solves your problem. :)