How to structure complex forms for business documents?

Question

In our enterprise management software we use forms to record document like customers, invoices, sales order, tasks, products, etc. We wanted forms to look like their hard paper version.

Below is an example of a quotation.

When you click on the edit button, each field becomes editable so that the page switches to a form with the same structure.

Some forms, like product forms, have a lot of fields so we structure the form by grouping fields together, which looks quite complex.

I think our current approach is not bad but it does not respect several UX patterns:

• avoid multi-columns in forms
• put labels on the top of each field and, if we put the label on the left of the field, it should be right aligned, near the input field.

I would like to know if there is a better idea to structure such complex forms?

Answer 1

As Ben said, UX patterns aren't sacred and they exist for specific scenarios.

Avoiding multi-columns is meant to prevent confusion in the path to completion (people zigzagging), in situations like this one:

^{download bmml source – Wireframes created with Balsamiq Mockups}

In your case you already have strong vertical edges which guide the user, and if you put the two columns a bit further apart, they'll get even stronger.

Right-aligning is meant to help users in associating the label with the field. This is helpful when you have some long labels which make the shorter ones seem detached from their fields:

^{download bmml source}

In your case that's not really a problem, at least not on this screen. It may be a problem on other screens, but if you right-align the labels, you will get a much bigger problem because your section titles must still be left-aligned, and then it becomes a real mess. Not to mention that with right-aligned labels the two-column layout will look terrible.

Your dropdowns are much too wide, you don't need the vertical dividers in each section, and I would do something about that Update button, but otherwise you're fine.

Answer 2

Enterprise application users don't like scrolling, and proper information density is critical to their productivity. So there's nothing wrong with your layouts, because it makes good use of white space.

I would just be extra careful about the keyboard-tabbing order. For example, in the Products screenshot, you can structure the markup so that users can keyboard-tab through the "Procurement" section first, before moving onto the "Prices" section.

But I have a feeling that the layout is made of a 4-colulmn table, which means the tabbing order would oscillate between Procurement and Prices. That may not be ideal.

When laying out multi-column pages, I'm always mindful of two things:

1. User's expected tabbing order.
2. Browser's natural tabbing order, so use of "tabindex" attribute is not necessary