Multi-column form design [duplicate]

Question

I'd like your feedback on a situation I'm facing with my stakeholders with regards to a particular web form design. I'm new to my role as a UX Designer and hope to learn from experienced folks here.

Currently, we have a long form that we cannot break into multiple pages. This is a solution I've brought forth to the stakeholder, but unfortunately, did not take off.

I went with a multi-column form field design. I'm aware that multi-column forms are bad in terms of readability and where possible, we should stick to a single column form (this is not possible due to the length of the form and that we cannot break them into multiple pages). I accept these risks - at least in the first product iteration till we get more user feedback on this, but for now, let's assume the following:

• We've a multi-column form design.
• Each row in the form will have at most 3-4 form fields.
• The entire form is placed within a modal (again, this is something we can't move away from due to technical constraints)

Currently, our form looks something like below (information masked):

One of the key issues from our stakeholders was that:

• For dropdowns and calendars, where there is normally a visual indicator (i.e. an arrow pointing down, calendar icon) accompanying the field: if we stretch it all the way out at 100% of modal width, users may not know that the field is a dropdown or a calendar.
• It was suggested that we avoid fields that stretch out all the way at 90% modal width and keep it short in length (e.g. see nationality field in the screenshot, suggestion is to keep it at the same length as gender, given name, etc)

My thoughts on it are:

• It is a desktop based app and people are viewing this on a normal-sized monitor screen. They'll be able to see within their peripheral vision that the fields (that are currently stretched at 90% modal width) is actually a dropdown or a calendar.
• I would assume that people would normally click on the "currently active/default value" in the dropdown or the date in the datefield, and they don't bring their cursor all the way to the edges of the field where the "down arrow" (in dropdown) or "calendar icon" (in datefield) are to click; hence, it is OK to stretch the fields at 90% modal width.

Unfortunately, due to the nature of the project, we are unable to run usability tests until after the product launches... These are very real constraints we're facing as UX designers in the organisation we're at, and would like to tap in the experiences of other designers for advice.

Answer 1

Few suggestions:

• Make logical grouping of form fields and display them in collapsible groups. This way, the form will not look cluttered at first look as only first group will display as expanded. The user can expand further groups and set required properties.

• Stretching the field to 100% width is not a good experience. Each control type (drop-down edit box, stepper etc.) should have a defined width unless required to change it. We can leave empty space if there is not a field to display adjacent to Nationality field in attached image.

• Align controls so that it is easier to find the required field.

Few links to visit to learn form guidelines, in case you have not already looked at them:

https://msdn.microsoft.com/en-us/library/windows/apps/jj839734.aspx https://uxplanet.org/designing-more-efficient-forms-structure-inputs-labels-and-actions-e3a47007114f https://www.nngroup.com/articles/web-form-design/