Label location

Hi Juan,

Certainly you should check out Luke W.'s book on form design:
http://www.rosenfeldmedia.com/books/webforms/

I've read it. The guidance you're looking for is in there!

Are your form labels really long? If so you might want to stick with
single-column (labels on top) layout.

Labels on top are the fastest way to get people through a form. With
two columns, people have to "jump" from column to column to read
the label and fill in the input.

Based on what you've mentioned, labels on top might be your best
option. I'll let you be the judge of that though! =)

Best,

Jason R.

--
Jason Robb
jason at jasonrobb.com
http://jasonrobb.com
http://uxboston.com
http://twitter.com/jasonrobb
http://twitter.com/uxboston

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=41873

The context in which the respondents prepare for filling out the form and
then actually do fill out the form can make all the difference.

Background information:

In documentation and training, the issues that Caroline raises are handled
by instructional design.

> the placement of the labels is far, far less important than what the
questions are asking

> I have many times seen people give up on forms because they don't
understand
the question or don't know how to answer it or the answer that they want to
give doesn't fit within the allowed answers on the form.

The methodology of instructional design is

(a) to establish learning objectives: what must the person understand in
order to be able to do the task

(b) to provide support for the learning: ensure that the person has a way to
get the help they need so that they achieve the understanding required to do
the task, or else ensure that the person gets feedback directing them to
support that can directly help them with the task.

Application to the problem:

This is going to sound really cumbersome, but here goes ...

To apply instructional design methodology to forms, you would want to get a
really good understanding of the processes that the provided information
will go through. Then you want to make sure that the people filling out the
form can understand the answers that they can give, and what the results
will be when the process starts to work based on their answers.

Sometimes the process itself is part of the problem. It could be that the
process has to run through some steps before you can know what effect the
answers will have on the result. In this case, the owners of the process
should be informed that (if it is possible under the regulatory regime that
defines the process) there may be a need to return to the respondent for
further information or clarification or correction of previous responses
once the process has gotten far enough to provide guidance on the
implications of various inputs.

What I recently did with one government agency is fill in the form with
errors, submit it, and then call a number to discuss what I should have
entered. I was lucky to know how to get the right number to call. If you can
provide your respondents with contacts that they can use to actually get
help with their issues, that will help tremendously to make the form
submission and processing experience more robust and reliable both for the
respondent and for those tasked with processing the submitted information.

One way to package this sort of help is as an up-front tutorial in which you
explain to the respondents what information they need to collect and how
they can figure out whether what they're about to state is accurate and
relevant to the issues they are trying to address.

Best wishes,

Bruce Esrig
Madison, NJ

On Sat, May 9, 2009 at 5:16 PM, Caroline Jarrett <
caroline.jarrett at effortmark.co.uk> wrote:
> Is there any evidence, or illuminating experience,

> > about the benefits of locating form labels
> > to the left of the input fields or above them
> > using a smaller font?
> > The forms are very long, say, 100 fields and more.
> > Will be paginated, sort of a wizard, with next/prev buttons.
> > The audience is rather illiterate,
> > ages ranging from 18 all the way through
> > the sixties and seventies.
> > These are forms for applying for gov subsidies
> > and the like, the fields contain mostly personal
> > data of the family members and the like.
> >
> > I would like to be able to tell myself which layout
> > is more usable: two columns or one column.
>
> Hi Juan
>
> As mentioned in previous posts, Luke W does discuss this issue in his book.
> I've also got a discussion of the problem in my book: "Forms that work:
> Designing web forms for usability" (available from any bookshop - details
> on
> www.formsthatwork.com)
>
> But here goes on giving you a direct (free) answer.
>
> If you read the popular advice on where to put labels on forms, you will
> see
> that it mostly relates to very short form labels that are asking very easy
> questions. Luke's and my books are two places where we actually talk about
> more complexity, such as longer labels.
>
> You can read a summary of my advice in this column: "Label placement on
> forms"
> http://www.usabilitynews.com/news/article3507.asp
>
> For your forms, you also mention that the audience is somewhat illiterate
> and also includes many older people. For people who do not read easily -
> which certainly includes your audience - 'smaller font' is definitely a
> really bad idea. Putting long labels in smaller font just makes the labels
> harder to read, which is exactly the worst idea for those audiences.
>
> For people who do not read easily, left-aligned text in a good, large,
> legible font is really important.
>
> It's not quite so clear whether putting the labels to the left of the boxes
> or above the boxes is the better solution for this particular type of
> audience. Dr Kathryn Summers of the University of Baltimore is definitely
> *the* expert in designing forms for people with low literacy. I'll write to
> her and ask her what she thinks.
>
> Meanwhile, here's what I know from my extensive experience of testing
> government forms with a wide range of people, including older people:
> *provided* each label is clearly and unambiguously associated with the
> appropriate field, then the placement of the labels is far, far less
> important than what the questions are asking, and somewhat less important
> than the overall length of the form.
>
> I have many times seen people give up on forms because they don't
> understand
> the question or don't know how to answer it or the answer that they want to
> give doesn't fit within the allowed answers on the form.
>
> I have also seen people fail to start the form, or give up on it, because
> it
> just seems overwhelming.
>
> So far, I've never seen anyone bail on a form merely because the labels
> were
> in the wrong place.
>
> If I were you, I'd choose either method and then spend a lot of time
> testing
> with the real users and iterating the form design based on what you find.
>
> Summary of advice:
>
> 1. Make sure you:
> - use a large, legible font
> - place the label so that it is clearly and unambiguously associated with
> the correct field
>
> 2. It is definitely preferable to place the label above or to the left of
> the correct field
>
> 3. Test, fix, and test again. Several times.
>
> Best
> Caroline Jarrett
> www.formsthatwork.com
> "Forms that work: Designing web forms for usability".
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>
>

Here's an interesting eye-tracking study that was done recently by
Chui Chui Tan that highlights some good guidelines for form design:

http://www.cxpartners.co.uk/thoughts/web_forms_design_guidelines_an_eyetracking_study.htm

Cheers

Jerome

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=41873

Jerome Ribot

> Here's an interesting eye-tracking study that was
> done recently by
> Chui Chui Tan that highlights
> some good guidelines for form design:
>
> http://www.cxpartners.co.uk/thoughts/
> web_forms_design_guidelines_an_eyetracking_study.htm

Hi Jerome

Thanks for drawing my attention to this study. It's a nice piece of work but
it's also the last straw.

/start of rant
I'm just so *tired* of seeing a study of rather trivial web forms (in this
case, four registration forms) used as a basis for making claims for *all*
forms.
/end of rant

/start of more considered discussion

This study carefully, and thoughtfully, investigated small differences
between four quite good registration forms. I'm not sure I'd totally agree
with every guideline, but you probably wouldn't go far wrong in following
these guidelines IF, and only IF, these assumptions apply to your forms:

- your organisation is a massive, brand-name web presence that every web
user knows

- your users are strongly motivated to fill in the form because it allows
them to make use of crucial features that are only offered by the specific
organisation

- your form confines itself to straightforward questions that are
appropriate in the context of the relationship between your users and their
current goals, and your organisation and its current goals, and anything
slightly unusual is justified appropriately right on the form

- your form is appropriately legible and properly marked up for use by
people using assistive technologies and/or amending the display of the form
in their preferred browser

I'll just unpick one of the recommendations in this piece: "Use coloured or
shaded grouping headers ONLY if they are important"

This isn't bad advice. It's quite good advice - if you know how to judge
when the grouping headers are important. That judgment arises from
considering the users, their goals, your organisation, its goals, and the
overall conversation of the form (as well as its appearance). This study
said "From the eye-tracking study, we found that the participants did not
pay much attention to the headers". Well, no, they wouldn't. These forms
were quite well designed, rather simple, and appropriate to the relationship
and conversation. Grouping devices, such as these headers, are rarely needed
by people in these circumstances - so they don't look at them.

But: think of a more complicated form, with more difficult questions, in a
more complex relationship. Users may need to break out of the form to find
answers and then return later. They may need to ask someone about something
in the form. In those circumstances, the grouping of the form can be really
important, as a locating device and as a way of helping users to talk about
the form to someone else. The grouping can also make the form appear less
daunting, which is worthwhile.

I know we all want simple rules that we can apply easily, and we all want to
avoid yet another 'it depends' answer. Trouble is: we really do have to
*think* about what we're designing - not exactly a surprise to IxDA people,
of course, but not the easy answer.

Oops - gone off into a rant again. Hope you understand why.

Best
Caroline Jarrett
www.formsthatwork.com
"Forms that work: Designing web forms for usability" foreword by Steve Krug