0

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?

  • If you can share the screen shot or sketch of the current situation, it'd be more appealing to bring a visual solution. – Erhan Yaşar Jan 6 at 15:05
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.

  • I think vertically would make the form too long. – Shock-o-lot Jan 6 at 0:46
0

o-lot]1,

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

enter image description here

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.

0
  • 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.