8

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.enter image description here

2
  • 2
    This post on position of labels may be useful. Jan 18, 2012 at 9:35
  • my question is whether we can have multicolumns with topaligned labels, i am aware that for long forms it is a good practice..
    – Ravi
    Jan 18, 2012 at 13:10

4 Answers 4

2

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).

enter image description here

3
  • Yes, i agree with you. the reason why i have not combined 2 fields becuase the project name will be long and will be difficult to put it in list menu or i need provide a autosuggest for that field.
    – Ravi
    Jan 19, 2012 at 7:24
  • Few people will be entering full project name into search. Even if they do, you have enough space to have a field that allows for 60+ characters.
    – dnbrv
    Jan 19, 2012 at 12:52
  • Not everyone's eyes go that way. I scan left to right, then to the second row of fields... That said, the main point is right. Jan 19, 2012 at 13:49
7

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.

enter image description here

enter image description here

enter image description here

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:

enter image description here

1
  • Thanks for the insightful thoughts. I have added the orginal wireframe of what i have designed.
    – Ravi
    Jan 18, 2012 at 16:58
5

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:

three-column forms

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.

0

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.

1
  • This is search within a application which will fetch results of 2 types of projects on the same page. I have added the orginal wireframe of what i have designed.
    – Ravi
    Jan 18, 2012 at 16:59

Your Answer

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

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