What is the best way to deal with very complex forms?

Question

I'm trying to give the best experience to users of a very huge system (like a CRM). It has a lot of forms and much of these have a lot of fields. My doubt is about if I should use a single column form (which raises too much vertical scrolling), or a two columns form (which needs less vertical scrolling and uses more horizontal white space) and a last one with four columns (which has few scrolling and uses almost whole white space to try to keep most of the fields above the fold).

It's important to say that our clients hate scrolling, and they always ask why we don't use the horizontal white space when we present a one column form).

So I'm little bit confused about it, because a lot of UX studies and good practices recommend to do not use/avoid multicolumn forms but the clients most of times ask multi column forms.

Our clients are very used to desktop programs and not everybody is very familiar with web based systems.

Below follows some possibilities I would like to share to illustrate an example of a complex form in the system with the three possibilities I mentioned:

In the example above I'm using the one column form (most recommended in UX studies), but with a very long vertical scroll.

In the second example I tried to reduce vertical space by using two columns.

This is the client's favorite one, 4 columns using white space and trying to keep everything above the fold.

• The lengths of fields are based on the average of characters amount for each field.

I would like to know your opinion about the best approach to this case.

Answer 1

I strongly advise AGAINST multiple columns, because this breaks the eye flow and work flow. However, grouping multiple inputs in the same line by logic, can be a usability+++, and will save you a lot of space.

Here I made a quick example of what I mean:

In addition, you can:

• Reduce the number of input fields to a minimum (hide optional fields in an expandable box below the form, or move them to an additional panel on the side)
• Group some logically connected inputs by group box or title (won't save space, but makes navigation easier)
• Completely hide input fields you would otherwise disable
• Place labels on the left (they are better on top for smaller forms, but if you have large forms, they can be better on the left)
• Use pop-ups (where simple dropdown is not enough), or even better, create your own dropdown container component.

How to fit large form to screen width, without using colums

One useful method I've used on one of my projects some time ago is using 2 panels, which auto-align vertically on smaller screens, and align horizontally on wider screens.

If you are in doubt about whether some of your ideas will be a usability+ or usability-, let an external UI designer review your real-content mockup.

Answer 2

I think there are some other ways of dealing with scrolling and modelling complex forms that will yield better results than just trying to squash all the fields onto one screen. Ways that will lessen the obviousness of scrolling, or remove it altogether as well as making white-space more manageable and less obvious.

I would advise considering the following strategies (as well as strongly advising that single columns are best):

multiple pages - complex forms can be split over multiple pages with continue buttons and intelligent data saving. A step count will help with navigation and with showing the user where they are at in the process. Takes some of the cognitive weight off a large form.

complexity - analyse the forms use, ensure that commonly used inputs are more prominent and that the form can react to certain selections by exposing / activating other parts of the form.

tab index - keep a close eye on your tab index, the order of the fields as they are selected by actions like tab. Ensure all elements are accessible with the tab key and the form responds to focus intelligently. Tab index allows the form to be filled in with just the keyboard when done correctly. (http://ui-patterns.com/blog/Input-contexts-switching-from-mouse-to-keyboard). Tabbing from field to field will help users to ignore the scrolling as it will just happen - they won't have to keep reaching for the mouse (I would hypothesise that this makes up for quite a bit of their scrolling fatigue).

defaults - provide good defaults constructed from user observation and let advanced users set their own defaults. Allow pre-population from existing records with duplicate / copy functions. Avoid as much actually filling in as possible.

scrolling - don't feel harangued into avoiding scrolling if it is necessary to present complex inputs. Good tab ordering and complexity management (as covered in the first three points) will help with this. (You may also find someone has a bee in their bonnet about 'above the fold').

feedback - use white-space for feedback on the field entries. This should help cope with unwieldy white space on a single column form also provide users with quick verification for field entry data. Complex and usual fields might also benefit from advise. This will help balance the page with useful information.

undo - give users an undo function to roll back changes.

There is a lot of evidence involving studies of eye tracking and forms to support the assertion that single column forms are the easiest to fill in:

EDIT ...

Due to the presented research and contributions from experienced members I'm editing this to say that right aligned labels to the left of the fields is also a valid, usable way of marking up a form, with the added advantage of supporting the OPs specific use case. See links in the comments for more info. Thanks @Rasha and @DA01

... END EDIT

Here is a good link that goes into more detail:

https://www.cxpartners.co.uk/our-thinking/web_forms_design_guidelines_an_eyetracking_study/

Answer 3

User testing should give more objective results. Anyway, my suggestion to complex form is to provide visual indicator of current field, see image.

It allows:

• to have more concentration on a current field and
• to return to work faster after interruption or break.

The same approach you could see in Excel, which is edge case of complex form, as each cell is an input field.

Answer 4

Based purely on what you have and visually re-arranging things, I'd suggest going from labels-on-top:

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

To labels-on-left:

^{download bmml source}

While wider, it's about half the height, so would drastically reduce scrolling.

Alternatively, how about a wizard or tab-style layout? Can the form be logically grouped into 2 or 3 'screens' instead of one long one?

Answer 5

The context of the form and the intent of the user are very important qualifications to the approach...

Categories for Design by Use and Motivation of User

1. Transactional Forms - the intent is to engage the user. You want permission to ask them the next question, and the best form of engagement is a click. Start with the simplest possible question at the start or base of the decision tree. Do not start with Contact information, unless you have a relationship. Ask a question that indicates the VALUE to the customer. If you are selling hamburgers ask: what's your favorite hamburger? Then you can ask for contact info, to deliver it. Even if you have a long form, get buy-in first if you dont't have a relationship with the user.

Next, you can expand the scope of your questions, but I would recommend doing this gradually. Do not overwhelm. Use common sense on the layout of the form. First rule: Be consistent. Same field sizes, locations and graphical styles. Very good idea to consider and test WHEN you can ask for contact info. If this is required to deliver value - it is easier to ask for contact info sooner.

Give visibibility to the process to manage expectations and maintain strong trust.

2. Complex Data Gathering Forms I found the most complex form I know of.. it is for insurance coverage for a client with multiple houses, vehicles, drivers and other valuable assets:

NOTES:

a. Recommend telling people how long it is expected to take. b. Break the form up into sections visually c. Allow people to scroll if their answers could possbily be subject to adjustment as they go along. Otherwise probably better as pages. d. Give the user the ability to save as they go e. Automatically save data regularly (they should be registered by now) f. Leave optional windows closed, but visible - they open when clicked g. Where possible, create dynamic form fields based on the information architecture and order the questions. This may require multiple pages depending on the backend systems you are using. h. Make it possible to TAB through the fields, and hit return to select check boxes (programming the checkbox can be done with JavaScript).

USEAGE: Nobody is going to WANT to fill a form like this out. They will need to be motivated. In this case, they get the coverage they need, and even then, we found the agent often had to walk them through the process on the phone.

MULTIPAGE OPTION: make the number of pages visible from the start and save at each subsection.

I hope this is helpful. The form below is not perfect. Would have like to use sliderbars and dynamic content - but it is at least robust.

Answer 6

There are few questions that need to be answered:

1. Is this CRM system strictly for your client's employees only?
2. If so, are they dedicated to using this CRM most of their day?
3. Do these users have uniform screen size?
4. What kind of forms are these? Do they fill out most of the fields (vs less than half)?
5. How often do users fill out new form from scratch, vs simply viewing them?
6. Do these form pages have separate "View-only / browse" mode?

When designing internal applications with captive audience, different set of UX rules apply than if you were designing consumer-centric applications. Depending on the answers, there are benefits to cramming fields above the fold.

Answer 7

I think you should look at @Jung Lee's answer.

In my opinionn UX should apply differently on different contexts, also, there's a barrier with the clients that we always forget. It's said that the client is always right, so if your client is stubborn enough, you should agree with what they want (trying to convince them first) in the end they are paying for a product.

In your case I would tell them the advantages of 1 column layout, backing it up with a bit of actual studios and/or data.

Also you have a HUGE advantage there, you have the actual final users at your reach, not some "similar target demographic testers". The definetively most effective way would be to let the employees to complete the forms (or a similar setups) for X times, and keep the record of the time used up, along with their feedback, and then decide.

Answer 8

Since this is a web-based client-server data-entry form, it has at least 3 major use-cases:

1. new record
2. update record
3. view record

Your question and most of the answers focus only on #1. Even if this is for a group that only enters new records, it's almost guaranteed it will eventually be used for views and updates as well and that's where the scrolling really becomes a big issue.

Single column with scrolling is worse case for data entry
Single column with scrolling only works for casual data-entry (most web forms for registering users, etc.) and viewing. Even then, a scrollwheel is mandatory.

Single-column is bad for adding new records since the source documents (which could be other online or on-screen forms) never have fields in the same order as your form. As the user moves sequentially through the source document fields, they must constantly scroll up and down looking for the corresponding form field. The more fields off-screen, the more scrolling, and the easier it is to get lost and miss entering a field -- very bad. Finding the desired form field when updating data is even slower and more frustrating.

Multi-column/Multi-tab with No Scrolling best for data entry/update
Data-entry of a field (case #1 and #2) goes something like...

1. Identify source document field
2. If possible, select and copy the field
3. Find corresponding form field
4. If possible, paste selected data into field. If not, type it in.

The time required for step #3 often dwarfs the other three steps combined.

If all form fields are on one screen, the user's eyes can scan both horizontally and vertically (two dimensions) to rapidly locate the correct one. Accuracy and speed are enhanced if related fields appear on same line. If there is a common grouping and order the user is familiar with (like the postal name and address format), using it will further improve productivity.

If there are too many fields for one screen and there is a logical grouping the user is familiar with that can be identified by a short title, then tabs (could instead be a single level menu if tabs are not well supported) bearing those titles is the next best approach.

It's all about optimizing for what the user expects. On identifying a source field, they should be able to immediately find where it goes on the destination form.

Hands off the mouse...
Data-entry is most productive when users never take their hands off the keyboard. If you want the data-entry users to love you (or at least think twice about forming a linch mob), be sure that the tab order is set logically (in the West, left-to-right, top-to-bottom) and there are easy shortcut keys for all actions, particularly navigation actions like switching tabs and submitting the record. A listing of those shortcuts should also be a single keystroke away.

RESOURCES

• answer by Chris Lively to "Developing websites for data entry"
• A number of relevant articles on UIE.com including this one

Answer 9

if you need to show forms having multiple rows you should consider a free open source table presentation framework such as http://Datatables.net or http://flexigrid.info/ to achieve best presentation. Don't bother with them if you only have single user/single item tables, but if you have tables for management listing several rows each for a different customer or other multi-row table layout needs, they'll give you tons of UI goodness for little effort. Notice that some of them support out of the box "card view" which is a way of showing a single line of data that might be too wide as a stacked series of input boxes. In an ideal presentation you can use the same layout on both the management presentation of multiple customers as you use for customer data entry and thereby reduce the cognitive load associated with showing the same data in multiple formats.

Answer 10

Personally I like multi-page or 'step' systems. It breaks up a long process into seemingly more managable chunks and you can also easily show how far through the process the user is.

I have also had instances where a form hasn't submitted correctly meaning I have to fill it all out again. If this were to happen it would be better if it were only 1/5 of the form rather than the entirety.

Answer 11

While my thread is closed, I alluded to some of the issues that this thread discusses.

https://ux.stackexchange.com/questions/39760/multi-column-form-design-is-there-a-consensus

Answer 12

1. You can use placeholder instead of showing label. It saves the height.

2. 4Column fields are bad idea. If you are thinking to save the height, user may get frustrate to see/fill the form.

3. As per your first one, your form has too much right white space. To avoid this you can center the form. User will be attention to the center.

4. You can split in 2 or 3 pages depends on you fields like steps process.

5. We should take care designs especially for forms. Those are not easy at all. We have to take user smoothly till the end of the form. For that we have to work with colors, font sizes, dividers, some interactions,... You can check the examples:Yahoo registration, ebay registration,

6. You can show ads/suggestions/features of you product or website to right side or left side of the form.. Ref:Google Registration.

Answer 13

I really enjoyed all the good advice and scenarios described here. I was also using the cited eye-tracking studies as a point of reference for many years. But I have to say that I am not really happy that we are still using 2009 papers (and not really replicated officially) as a guideline. So many things have changed since then. Internet a different thing, users' expectation, and experiences changed a lot. What's more - the research was done on very simple forms. I would love to see some more recent studies.

Another thing - wizards etc. Again - good advice, but is it always? I think that in many contexts, it is of great value for users to be able to see the whole forms at once - in a single view, although with scrolling.