Ask HN: How does one simplify UI design of a complex web form?

5 points by m33k44 3 days ago

I am working on a project that requires a web form with about 40 fields of various types e.g. calendar, dropdown list, radio buttons, text fields, numerical fields, file dialog etc. Unfortunately I am not able to share the exact details of the actual form due to confidentiality. Hence I am seeking general advice on designing complex web forms.

I am looking for some inputs on how to start thinking on managing the complexity of UI design with lots of data entry fields. As I am not a UI designer I am bit overwhelmed by the size of the web form. What approach would a UI designer take when starting the design process of a complex form from both aesthetics and usability point of view?

I was thinking of grouping related fields together and revealing each group in an accordion style of design so that the user is not overwhelmed when entering the data. Is this a sound idea in general or are there better way to present complex web forms?

rahimnathwani 3 days ago

The Chinese visa application process does this well, and includes most of the field types you listed. Instead of using tabs, it lists sections on the left, and marks them in a different colour when complete. This pattern is very common for online visa applications, which have many fields that can easily be grouped.

To access the form, scroll to the bottom of this page and click 'AGREE':

https://bio.visaforchina.org/#/nav/system

verdverm 3 days ago

Let them know all the things they will need upfront (information that needs to be looked up)

Make it save / resumable

Group related items, probably(?) separate into pages / steps, with step x of n at the top (Google multi step / phase forms)

Auto complete / suggest where appropriate (address / info you may know about them already)

[These seem to be in a good priority order imho]