
Ask HN: How does one simplify UI design of a complex web form? - m33k44
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.<p>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?<p>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
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](https://bio.visaforchina.org/#/nav/system)

------
verdverm
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]

------
Calist0
You got the idea. Break it down into steps. Design it into 3~ tabs.

like so: [https://imgur.com/a/XaOwZND](https://imgur.com/a/XaOwZND)

