One of the common feedback we get from new users is that the forms are too long. Seeing a whole bunch of information while you are filling up an invoice makes the experience intimidating and confusing. It does not make sense removing features either, because capturing all the details about your invoices gives you power and flexibility to handle a large number of scenarios.

A standard UI pattern in ERP systems is using tabs. Tabs allow partitioning of the form in different sections that appear as tabs on your main screen. You can then switch tabs to look at different settings. But tabs have issues too. For web users, they are not intuitive. They are not friendly on smaller or mobile screens and there is no real way to handle tabs when you find too many of them.

One discussion that comes up often is to use collapsible sections. ERPNext did have this feature at one point, but we realized that it was not that useful and we decided to break a form into two sections, separated by a "Fold". Using the Fold system for a bit, we realized that this was not ideal either, so we decided to have one more look at collapsible sections.

Here is what the current design looks like:

A better way to Collapsible Sections

In our earlier designs, we had implemented a "Checkbox". If you checked the section, it remained opened else it was closed. The problem with this was:

1. Checkboxes are heavy UI elements and they don't really mean anything to the data
2. They are not contextual, you may want certain sections hidden in one set of documents and not in another. For example, if you have a section on discounts and it is a collapsible section, then this section should remain opened in documents where discount is already set, else the user will not know if it has been set or not.
   

So we decided to implement two additional properties in the form section (Section Break type of DocField)

1. Collapsible
2. Collapsible Depends On

Now on each section, you can tag whether a section is collapsible or not. If the section is collapsible, you can set a rule by which this will be shown collapsed. For example the section to add discounts can be shown in documents on basis of whether a discount is already set or not.

We decided to make the collapsible section look like a simple web link with an underline.

Getting rid of the Fold

For the other details of the project, we go rid of the field and made the "other" section into a series of collapsible sections. See the result in Sales Invoice:

Result

As a result we were able to reduce the form size by more than 50%!

What do you think of this design pattern?