Labels above the field or to the side of the field? What about prompt text and validation messages?

Question

Which layout works best for your users?:

• Field labels on the side of fields
• Field labels above the data entry fields
• What about prompt text, format tips, examples and validation or error messages?

I've done many online forms over the past few years. I have "pre-designed" patterns and layouts I've used over and over and over again. Some of the layouts have been heavily tested, some not so much.

One of my colleagues challenged me recently asking why I could be so confident that the layout they had proposed wasn't right. It made me stop and reassess my approach, which I realised were based on opinion rather than evidence.

Examples or evidence?

I have an existing paper form to work with. Its ugly. Truly ugly. The last thing I want is to create an online version of the same ugliness. Do you have examples of forms or wizards that you think are designed really well? Can you point me to any research or academic material that I could use to back up my recommendation to (read as: looming major argument with) the product owner?

My task: take an existing paper based form, convert it to an online form and extend the functionality to include validation on-the-fly, file uploads, credit card payments and confirmation, status and error messages.

The overall design: most likely to be about 8 screens, in the format of a step-by-step wizard. Users will be able to save incomplete forms and come back later. Most questions need to be answered, some questions are complex. Users will only need to use the form once every five years so they won't be familiar with the questions in advance.

The challenge: there's no existing pattern for online forms in this organisation, they don't have many running at the moment, and none as complicated as this form. I will need to convince the product owner that creating a replica of the paper form is a bad idea. A really bad idea.

Answer 1

Luke Wroblewski has some good articles about form design. I recommend you these two:

Web Application Form Design

Primary & Secondary Actions in Web Forms

Or do you need something even more specific?

Answer 2

Matteo Penzo’s study provides the best evidence to date for the advantages of placing the label above the field control. However, the merits of this continue to be debated. The bottom line appears to be that top labels are best for filling out an empty form, but not so good for using a partially or fully completed form. Their main advantage is consistent close physical proximity of the label to the field for easy association when the labels vary considerably in length.

The main concerns with top labels are:

• It takes more vertical space, possibly requiring scrolling to scan the whole form.

• It makes it more difficult to scan down the labels or fields when looking for a particular field or value to read, check, or change.

• It can make it harder for the designer to group fields into a visual hierarchy.

• It’s possible for users to confuse which field a label applies to (the one above or below).

The latter can be mitigated with adequate white space or graphic division, although both of these tend to take yet more vertical space.

Frankly, this issue needs more research. For one thing, maybe you can have both good vertical scanning and good label-field association by using left-aligned labels with a graphic connection to the field, such as with leader dots or zebra striping. If you try these out, let us know how it works in your user testing.

Prompts and tips are best to the right of the field all else being equal:

• It keeps the distance short between the label (the primary information) and the field, making it easiest to read with fewer fixations.

• It makes the prompt/tip relatively noticeable since it’s not “buried” between the label and field.

• It provides a clear visual separation between primary and secondary information, encouraging users to read all of the primary information (users tend to skip over long strings of text).

Placing prompts under the field is another option, which may make it easier to see the prompt when the field control is long, but this has all the disadvantages of putting labels on top of the field, plus possibly inducing misleading apparent groupings of fields due to fields no longer being uniformly separated on the vertical dimension.

Because prompts and hints are secondary information, I wouldn’t let their placement disrupt the layout of the primary information, even if that means being inconsistent.

In contrast to other hints/prompts, Required Field indicators (e.g., red asterisks) should be put at the beginning of the label to help users decide at a glance if they really want to fill out the field.

Answer 3

Look at this http://www.csskarma.com/lab/plugin_slidinglabels/

found it just the other day, impressed me to tears.

Answer 4

Another option to consider is Infield Top Aligned Labels.

Most websites today either use top aligned or infield form labels because they aren’t aware of a better way.

http://uxmovement.com/forms/why-infield-top-aligned-form-labels-are-quickest-to-scan/