How to deal with with many fields

Question

I have a form in which there are many fields around 11-13(average not constant). Now some fields are required while others are not. My client intends to hide all non-required ones and show only required ones.What is the best way to hide/show non-required fields.

Answer 1

Do an accordion or sliding panels. Expand the mandatory fields section by default and close the optional fields panel by default. This way user always sees the mandatory fields open and if they want to look at other fields, all are a click away. https://jqueryui.com/accordion/#collapsible

Answer 2

You could present the mandatory fields first and then on a second page show the optional ones with a clear way to skip filling them out.

This is a technique called progressive disclosure and might be a good alternative depending on the context.

Answer 3

I don't know the nature of the entities you are dealing with, but if client is insisting on this then

1) Show a checkbox at the top of the form labeled - Show only mandatory fields. On selecting this checkbox, non-mandatory fields should be hidden

2) Or, you can a checkbox with label - Fast fill.On selecting this checkbox, non-mandatory fields should be hidden

You can remember user's preference if he use this form again so that he/she doesn't have to make select this checkbox again.

However, do sensitize the client that they will run the risk of totally forgetting about non-mandatory fields. So you need to remind the user about the completion status of these forms if the need be.

Answer 4

The best way would be different in different cases So, you can take a look at some literature or good examples on Progressive disclosure (the term for this) to determine what suits you best.

Also, the way you hide and disclose would depend on a lot of things like

1. The screen ( web, mobile etc.)

2. Content length

3. Relation between the content

4. Hierarchy

5. Visual appeal etc.