It's Time for Form Design

We've been blatantly ignoring them in the first redesign excercise but now it's time to give them the attention they deserve: Forms

The current form (we are talking about the view you get when you edit a record) is far from ideal. The main points that need to be addressed are:

• Awkward field length variations
• Color coding only for mandatory fields: this is not accessible
• Label wrapping for long labels
• Grouping / clustering possibilities only limited
• No hide/show possibilties on user level (directly via the GUI)

A lot of research has been done already on form design, although most of it focuses on web form design, e.g. for a registration form but most of the heuristics are applicable for application forms as well.

Two column design: Although in most cases not recommended, I think we should keep this layout, as OB ERP has a lot of fields and a lot of horizontal space. Using a one column layout would be a waste of real estate.

Jakob Nielsen did a bit of research on forms versus apps and although outdated, it still offers some great takeaways:

• In-context help: Having this information on the main screen is preferable because users dislike going off to separate help screens
• Eliminating irrelevant steps: Users never need to see questions and options that don't apply to them.
• Customizability: (this example is really spot-on!) For example, an expense reporting application might require users to enter driving distances to get reimbursement for personal automobile use. If an employee often travels the same routes (say, to the airport or an important customer site), the application could provide one-click access to frequently used distances and list them by name (say, "office to JFK").

Luke Wroblewski wrote a great article on form layout. The most important conclusions here are:

• Vertical alignment of labels is best when the time to complete a form needs to be minimized and the data being collected is mostly familiar to users.
• Bold labels are preferred to give them visual weight and not have them compete with field values over the user's attention.

Enough for the first stab. I've modeled the first concepts which can be found on the UX Lab Web Album (images 35 and beyond). The concept with top aligned labels is quite unusual for application forms as it takes up a bit more vertical space due to the top labels. However, the two-column layout and collapsible sections offset that. Gray labels in collapsed sections are clickable: this opens the section and moves focus straight into the field. The first section contains help/guidance. I'd say that the user can choose to save the view and reuse the settings for all other forms of the same kind. This way you can hide sections that you don't use all the time and reach a super fast data entry, also using the keyboard. Next to the section label, we could place a "check" or "x" sign, indicating whether all mandatory fields in the sections are satisfied or not.

Special attention to:

How to emphasize mandatory fields: using *, using icons, using field coloring. In that same set you can also find a concept with and without seperating horizontal lines.

Process guidance using in-form bubbles that are triggered on completion of certain fields. The same thing but now using the top status bar. I really like the last idea, imagine how easy this can be for novice users! Of course you should be able to switch it off. Same hint could also be placed on the form itself, using the "introduction" section.

A naughty look at possible things to come for mobile: the resolution used in the concepts do actually fit on a 800x480 px smart phone.

Concepts with labels to the left of the fields, similar to the current OB form design, should not be ruled out. In fact, right aligned labels are commonly used for these kind of forms. Left-aligned labels are a good alternative as they support quick vertical scanning but risk higher completion time when the distance between field and label gets too big.

This should keep us busy for a while. Let me know your reactions via the UX Lab Forum so we can take it to the next level. Examples of Great Form Design out there and personal experiences with e.g. rapid order entry will also be highly appreciated.