What is the best way to layout/design a long complex web form to collect user input.

Question

I need to design a web form which landlords can use to add rental listings. There are 8 mandatory text boxes and 2 optional text boxes, 11 drop-down lists, 12 checkboxes and one large text area. Any suggestions about how to arrange them in a way that is clean, and uncluttered? My concern is, if the form looks lengthy, they may not want to fill it. So far I have divided the elements on the page into sections, however the page still looks cluttered.

Answer 1

How about a wizard-style layout?

Break the sections out into separate pages, so components are submitted separately. Make it clear how many sections there are, and how far through the form the user is. Be careful to track the user's progress either in the session, or by keeping state in the form.

This approach makes giving error messages a bit less threatening to users (you never show them the error message "Please correct the following 34 errors").

Edit: Having seen the current form layout, I actually think what you've got at present is very clear, and nicely done.

Answer 2

I would suggest that you use 2 pages instead of 1. On the first page, show the 8 mandatory text boxes and follow them with an additional checkbox which makes the 2 optional text boxes appear on being clicked. This means that the user will opt-in for the optional checkboxes making it more acceptable and natural to her. Next, place a submit button which would take the user to the second page.

Put all the 12 checkoxes and the text area on the second page. On page 2, tell the users very clearly that this is the last page they need to fill. They will be less disinclined now since all they need to do is to place a few more clicks.

Answer 3

You may want to split the process of getting all of this data from the user into multiple parts. Conventionally, that would be multiple pages of forms. The problem with that is that it's annoying for the user to have to watch their browser reload the whole page as they move through the form.

A more popular methodology now is to use AJAX to present the larger form in multiple pieces without having to reload the entire page.

In both cases you will need to keep state between each page load or AJAX request so that the back button behaves sanely and the user's previous input reappears as they move backwards (and forwards) through the form.

Unless you have some kind of nifty state-keeping mechanism already written that is generic enough to work for any given form set you may decide to use, welcome to the pain in the ass that is web development.

Answer 4

Frankly, 33 fields on a single page does not sound all that long for describing a rental listing, especially when 23 of the fields (checkboxes and dropdowns) can default to the most common values. With your current layout, the form almost all fits above the fold. That ain’t bad.

I’d be very cautious about splitting it into separate pages (e.g., as a wizard). First of all, that will take the user longer, because now you’re adding navigation and re-orientation time. Second of all, it will seem to take longer; the user will be like, “Geez, I have fill out a multi-page form?” Thirdly, users can’t tell how much work is expected of them when some of it is hidden on other pages (or by AJAX tricks). Some will not fill out the form at all assuming the worse. Others will abandon it part-way through because they either didn’t plan enough time for it, or just got tired of hitting Next indefinitely. You can mitigate this last problem by saying up front how many pages there are, and showing the user’s progress through them, but that just accentuates the fact that it’s multi-page, and therefore “long.”

IMO, all it needs is some lighter graphic design. I’d drop the “reverse video” section titles and the green background on alternating sections and make it all white. Use color and/or bold text for the section titles. You can combine the Property Description section label with the field label to reduce clutter and redundancy. Consider putting the Pets and Parking fields on the same line as Laundry then spreading the Unit Details fields out vertically so the mis-alignment of the fields is not so noticeable. Alternatively, size the Unit Detail fields so that they are better aligned. Maybe you can drop the “How do you want to be contacted?” field. I’d expect that if users don’t want to be contacted by one of the means, they simply don’t fill out that field.

Other than that, be sure your users understand the importance of these fields –why filling them out helps them find the right renters. Users don’t mind filling out a lot of fields if it’s clear that each benefits them. It’s when users feel like they're disclosing a lot of data to benefit you that they get resentful and reluctant. The importance of the fields you have seems self-evident to me, but maybe you should include a link that explains the purpose and value of the fields.

Finally, make sure there’s not too much clutter and competition from the “standard” page elements (e.g., sidebar menus, legal information).

Answer 5

Do submitters have account profiles that you can use to populate the contact details? If so, I would drop the contact details from the form for creating a listing, and add a review screen that shows all of the information, and gives links for specifying alternative contact details or amending other information. Users then see one screen, plus a review screen with a big "Publish This Listing" button. Amazon's order process uses a good review screen.

Answer 6

Breaking the input into multiple sections is a good idea.

I also like to make most of the input fields invisible, and make them visible as more information is entered. I start with the most important info to be entered first (e.g., name), and as each item is entered, I make further input fields visible. I also give focus to the next logical field that the user is expected to enter as he goes along.

You can use other tricks like highlighting the next field to enter (i.e., changing the background color or surrounding borders of the input field label) to make it even more obvious to the user.

Grouping related fields into separate boxes (with visible borders) may make the info seem less cluttered, too.

This approach makes it look less overwhelming to the user, and makes it more obvious to him what he needs to enter, from start to finish.