17

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.

Improve this question

4 Answers 4

Reset to default
12

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?

Improve this answer
3
  • These two articles are exactly what I was looking for from a research point of view... Do you know of similar commentary about placement of prompts, instructional text, error messages etc... Im trawling through Google results but there's lots of clutter to sift though as well. Im also after actual examples of real forms that from a UX perspective tick all the right boxes. I think Im going to have to show a number of people the difference by having them use some existing forms in real life.
    – Nathan-W
    May 28, 2010 at 23:13
  • 2
    Luke's last presentation had some information about instructional texts etc. But it is not that easy to understand it if you only see the slides. But maybe they can help you already a little: lukew.com/resources/articles/EventApart_WebForms_120809.pdf (see slide 51 an later) Maybe you can find the maybe you can find somewhere a recording of the session if you follow one of the links here: lukew.com/presos
    – Raffael Luthiger
    May 28, 2010 at 23:27
  • Preso will be another good start --- Im also about to drop an order in to Amazon and get a couple of his books. Showing a manager something someone else has published might add to the creditability of my advice :)
    – Nathan-W
    May 28, 2010 at 23:46
8

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.

Improve this answer
1
  • This is awesome stuff! Thanks for the links to the research, I'm finding this totally fascinating, and a bit of a Pandora's box at the same time. The required field indicators has really made me think, definitely going to test putting them before the field labels and see what happens.
    – Nathan-W
    May 29, 2010 at 21:42
1

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

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

Improve this answer
2
  • 1
    That is an interesting idea. I'd be interested to hear what people here thing of it. My initial thoughts were that it was impressive, but that the label being inside the fields may appear to the user that it is already filled in, something I am concerned about with internal labels. It's good to see people trying new approaches.
    – JonW ♦
    Jun 1, 2010 at 8:26
  • you can change the color of the labels so labels and the actual input text are different, but yes, it might be a little confusing
    – Bobby Tables
    Jun 7, 2010 at 13:27
0

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/

Improve this answer

Your Answer

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

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