I'm trying to redesign a page that has a ridiculous amount of radio buttons.
- 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.
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
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.