How best to arrange a group of 6 numerical input fields, one text field, and 3 radio buttons?

Question

I have a GUI form with multiple group boxes. One of the group box has 6 numerical input fields each with an average input length of 3 or 4 digits, one text field with an average input length of around 8 characters, and 3 radio buttons. The 6 numerical input fields are conditional on 2 of the 3 radio buttons.

I am trying to figure out the best way to lay these out. I thought about making a 2x3 grid of the 6 numerical input fields and the text input field above the grid, and the 3 radio buttons to the left of the grid. The labels would either go above the input fields or to the left.

Is there a better way?

Answer 1

Vertically below each other in an order that makes sense to your users.

The issue with putting fields horizontally next to each other is that they are sometimes missed.

Have a search for LukeW, he is a UX researcher at Google and has some amazing content on form best practices.

Answer 2

o-lot]1,

I recently designed some forms that share similar layout concerns with this. Here are some visual explorations you might consider:

If you really need the form to be shorter, you can sure play around reducing the heights of the input fields or the margins between them. I hope this helps.

Answer 3

• If you can group your field logically, and distance groups from one another
• You can place validation / number of digits input in the field so it is auto validated
• You can signalize length of the number to be typed in, with the size of the field. One with 8 digits should be longest
• Place fields one below each other. If you can sometimes group them, place them inline (i.e, address = street + house number)
• You can use autofocus on first field