I'm currently designing a form that will allow one of my departments at work to track educational certifications for our employees. There will be a large number of input fields involved and I'm not sure how to structure my labels for them.

Most usability tests I've seen seem to point to labels above the field as being the easiest for users to use. My only problem with these tests is that they always seem to revolve around a simple sign-up form with 3-4 fields. Does the usability of labels above the fields scale up into larger forms?

Also, this will be a data entry form that will be used by the same users over a long period of time. I'm not sure how this would affect usability as again, the tests I've seen look like they would be a one-off scenario and not directed to long-term use. Does anybody have any experience with testing this in a larger scenario than a 3-4 field input page?

3 answers

2
points
This was chosen as the best answer

I've worked on forms before that had a ton of fields. The best advice is to just do whatever feels right. Try it with the labels above the fields, try it with labels to the left of the fields, or try it with both.

I think that if you have a long form like what you're dealing with, it's best to position the labels in one column (right aligned) and have the form fields in a second column (left aligned).

But hey, do whatever feels right! I doubt it's going to dramatically throw off your form's usability either way you do it.

Answered almost 7 years ago by Matt Milburn
1
point

Most usability research suggests that putting your labels above the input fields is better.

If you have a large form, try splitting it across multiple pages. Put fields on a page that naturally belong together (like one for address and one for payment info). On each page, you can group fields further with nicely styled <fieldset> tags.

Validate each page individually, so your users get an instant feedback, if some input doesn't fit.

Make it easy for the user to navigate back and forth between the pages before finally submitting the form. If it's a really large form (like some job application forms), then you should think about giving the user a "save" functionality. That way she can come back later and continue where she left off.

Make it easy for your users to speed up filling out the form. Define keyboard shortcuts and set a meaningful tabindex, so users can skip through fields without touching the mouse.

Hey - and of course you should give the form a nice style that fits your overall page design nicely.

Answered almost 7 years ago by Chris K
Leah 5
1
point

I would agree with Matt's suggestion to position the labels in one column (right aligned) and have the form fields in a second column (left aligned). With this layout the extra white space around labels will make it easier for people to scan back over the form for proofreading.

If this is a form that is going to be repeatedly used I would suggest to not put it over multiple pages. Regular users will just be slowed down by having to wait for each screen. You want to reduce the number of clicks involved in repeated actions.

You can group together fields using field sets or labeled sections. On large forms I have used light shading to further define groups of fields.

Answered almost 7 years ago by Leah