Top-aligned labels for multi column form

Question

I am designing a search screen where I have 7 fields and have split it into 3 columns with top-aligned labelling. Is it a good practice design a web form with top-aligned labels in a multicolumn?

Any insights would be helpful.

UPDATE Thanks everyone for the detailed insights and ur experiences. here is the wireframe of what i am talking about.

Answer 1

As others have already said and shown, a multi-column form has to have labels above the fields. The empirical reason for that is our eye movement: once we discern it's a column layout we move our eyes vertically and labels above form fields allow us to read faster without moving our eyes to the sides.

However, label positioning isn't the problem with your form. Now, that you've posted the wireframe it's clear that the form is poorly organized.

First off, the right-most column contains unnecessary elements. A basic search form is usually one field that accepts freeform text including special and Boolean operators for complex queries. Advanced search forms help with composing complex search queries when people don't know the operators by heart and to impose constraints on the search (i.e. filters). The fields Vice President, Project Type, and Apps Program are such filters and belong to the Advanced Search link. If someone needs access to all projects by a particular VP or project type or Apps program, you can create links at appropriate locations that show such results.

Second, the fields A&SI Id/PMATT Id and A&SI Project Name/PMATT Project Name can be consolidated into at most 2 fields (Project Id and Project Name). Ideally, it should be just one field Your search query with RegEx filtering in the back-end to direct the search to the respective table records, e.g. filter for ID mask. If you go this way, you may want to include documentation on search queries wrapping it in a hidden div with a JS-based visibility toggle link.

Third, it's not clear right away how the form should be read or filled. It took me a few moments to read the field labels to understand that the direction was top-to-bottom and left-to-right. You should add some clear indicators where A&SI columns are and where PMATT columns are. It's also unknown in which direction tab order is set: columns or rows. It should follow the reading order (columns).

Fourth, the complete eye movement in the form is top-to-bottom then left-to-right-back-to-left. The submit button should follow the last search parameter entered. In your case, it should be located in the bottom right corner (see the image below for eye movement visualization).

Answer 2

If you have multiple columns on your form and you positioned the labels to the side, you would have to significantly space out the boxes on each column from the labels of the next column along. I'd recommend that top aligned labels would be just fine, as it keeps the labels clearly and efficiently attached to the column in which they belong.

Multi-column forms are rarely used in a typical form as they do not immediately indicate direction and flow throughout the form, although some side-by-side elements are ok when you have multiple related elements eg:

• month day year for date of birth
• first name, last name
• telephone, extension

...or sometimes if you have a single row of of similar sized elements (and a design/layout that suits) such as these examples from Kontain, Tumblr and Action Method.

As you can see, these examples use either top aligned labels or placeholder labels.

And in fact, I looked at 35 high profile sign up forms which used at least one instance of multi-column elements in a form.

For every example I found of using multi-column elements for related elements as in the list above, then in every single case they used top or bottom aligned labels or placeholder labels. Not once did I find labels to the side of each box.

Here's a typical example showing a couple of sections from the signup form at GrooveShark:

Answer 3

Both top-aligned and left-aligned labels have their pros and cons. If you are designing a three-column layout, you will have limited horizontal space, so more than the best option it is possibly the only option to fit in one column label and input in such a way they are big enough and don't get confusing:

That said, I am not sure how convenient is a three-column form, the flow would be unnatural. Top-to-bottom forms are more common and easier to flow through... so you may consider changing the layout altogether.

Answer 4

What kind of search is it for which you need 7 fields? Does it open on a seperate page, or is it in the header? Because I would try to reconsider the 7 fields and 3 columns and try to avoid multi column layout. A 3 column layout might easily be too complicated for most users. Can you present a wire, or sg?

Read this research from Baymard Institute on the usability problems with multi column layouts.