6

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.

enter image description here

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

enter image description here

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

enter image description here

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?

9
  • 4
    Avoid multi-columns in forms is a guideline, not a rule. It's not targeting forms like this, so don't feel bad about "breaking" it. UX is just as much about knowing when to ignore "patterns" as when to use them.
    – Ben Brocka
    Jul 8, 2012 at 17:39
  • @Ben +1 For some reason, there is not enough material on UX in enterprise applications, so developers often referr to desktop UI guidelines that were not written with enterprise software in mind. Jul 8, 2012 at 18:01
  • @Ganga: There's no difference between "enterprise" & "consumer" UX principles. There're always different workflows & mental models.
    – dnbrv
    Jul 8, 2012 at 18:15
  • @dnbrv Well most UX guidelines are just discussing simple screens that rarely can be found in real enterprise software, leaving even general suggestions on creating such out of the scope. Jul 8, 2012 at 18:26
  • @Ganga: It's the designers & managers not the principles who are at fault. Business software can be sexy: look at MSFT Office.
    – dnbrv
    Jul 8, 2012 at 18:31

2 Answers 2

6

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:

mockup

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:

mockup

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.

3

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.