Margin in the mobile web site

Question

I'm working on a survey web site, which I already have a responsive design. Survey questions are sometimes array type, that options are columns, and questions are rows.

As you can see in the image above, the questions radio buttons have very small spacing in between them. There will be a small number of questions (rows), so I think users will be able to find which radio button belongs to which column, but it's still difficult to use IMO.

It seems I can get some screen real estate by removing the padding and margin around the question (green lines), which are 15px each.

• Will it make difficult for users to use the site in a mobile ? If the radio button appeared too close to the physical edge of the mobile screen, will it make difficult to use the site? Is there any thoughts you might have to suggest (use at least X pixels/percentage) as a margin to the screen edge for example ?

I know I could go for a rating widget or select lists in this case. I'm just trying to offer as much as question types possible to the client instead of limiting the options. He's good with the ideas so he might not use such 10-option arrays at all, but I'm still looking for some thoughts on the margin with the screen.

Answer 1

Your assumption is accurate, the radio buttons are too small of targets, it would be challenging to choose a specific option. With that said, I would suggest re-evaluating how you are presenting these options, do radio buttons even make the most sense? In a mobile context a slider or picker might be more practical.

Without seeing the full context of the site it's hard to say what to do with the margins but as a rule of thumb on mobile, use the entire width of the screen.