"help text" in input fields - bad?

2 Feb 2010 - 1:29pm
4 years ago
17 replies
4151 reads
Jayson Elliot
2008

Does anyone have research to point to regarding the practice of placing
instructional text in a field that is meant for user input?

For example, on a site like http://www.huffingtonpost.com/ you see "Google
custom search" inside the search field; or http://www.adobe.com/ writes
"Search Adobe.com" inside theirs.

I have read articles stating that this can depress overall usage of an input
field, as some users become "blind" to the field if it is not empty, but
can't find any now that I need them.

Also, what about the use of colored input fields? Do non-white text boxes
perform less well than standard white HTML input fields?

Comments

2 Feb 2010 - 1:52pm
Gayatri N
2009

I am not aware of research in this particular area but I have some
general thoughts I worked on something similar recently.

There are two things to consider here:

1. In your example of "Search Adobe.com" a user can read this and
start entering their search criteria and there is no specific format
they have to follow here. So, in this scenario it's pretty good way
of communicating the intent.

2. In places like forms where you may have, for example a phone filed
where you have listed the format a user needs to enter the details
in(area code, number and ext); given that case if a user starts
typing the instructional text goes away and may throw an error if a
user was not able to memorize the exact format.

Following is an example of handling instructional text for form
elements.
https://www.ubid.com/registration/default.aspx

Hope this helps!

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

2 Feb 2010 - 1:54pm
oliamwright
2010

I like how http://www.krop.com has input fields with a distinct color
and call to action at the same time. The "Live" really calls out
the Instant nature of their filtered search.

I don't know of any metrics that show % increase or decrease in
usability.

Regarding color, i am under the impression that most users are used
to and prefer the default input box setting with their browser, and
may assume that colored or redesigned input boxes provide unique
experience. But check out Tumblr.com for their super big input custom
designed input fields.

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

2 Feb 2010 - 2:03pm
Fredrik Matheson
2005

A lot of this is covered in Web Form Design by Luke Wroblevski.
http://rosenfeldmedia.com/books/webforms/

2 Feb 2010 - 4:32pm
Graham Sear
2010

Hi Jayson,

I did a quick bit of googling and found this article
http://www.webusability.co.uk/2009/dont-put-search-in-a-search-box/
unfortunately it doesn't give empirical evidence for their claim and
so you can't really take it as gospel.

In terms of styling, just be careful not to style it too much, if it
no longer resembles a textbox it will have the reverse effect.

There are countless articles on search form design, referring to
consistent placement, size of textfield, search goals and search
strategies etc the Luke Wroblewski (as recommended above)
presentation pretty much covers it all.

Hope this is of some help

Graham Sear

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from ixda.org (via iPhone)
http://www.ixda.org/discuss?post=48953

2 Feb 2010 - 4:06pm
Patricia Colley
2010

These are visual language elements. There's no definitive rule on their use that I know of. Whether or not they're "good" depends on the visual and experiential context in which they are situated. 
For example, helptext in fields can be useful to prompt user action, to explain the content of a field, or to explain the scope of a search. Putting text in the field can be visually cleaner than finding a place to fit the helptext in the layout, useful in tight spaces such as headers. Obviously, you have to select a text shade that doesn't make it look prefilled. 
Colored text fields are used to indicate required fields as an alternative to highlighted labeling. If you have a long, scrolling form (vs. a simple signup) it could make for easier scanning to find the required fields, and in theory, faster form completion. On a login form, it would be overkill, or window dressing. If you use them, avoid garish colors or color combinations that interfere with readability. Also, stick with a consistent layout grid. Color highlighting will exaggerate the "jagged" effect of not aligning form fields. 

--- On Tue, 2/2/10, Jayson Elliot <jayson.elliot at gmail.com> wrote:

From: Jayson Elliot <jayson.elliot at gmail.com>
Subject: [IxDA Discuss] "help text" in input fields - bad?
To: discuss at ixda.org
Date: Tuesday, February 2, 2010, 2:29 AM

Does anyone have research to point to regarding the practice of placing
instructional text in a field that is meant for user input?

For example, on a site like http://www.huffingtonpost.com/ you see "Google
custom search" inside the search field; or http://www.adobe.com/ writes
"Search Adobe.com" inside theirs.

I have read articles stating that this can depress overall usage of an input
field, as some users become "blind" to the field if it is not empty, but
can't find any now that I need them.

Also, what about the use of colored input fields? Do non-white text boxes
perform less well than standard white HTML input fields?

________________________________________________________________
Reply to this thread at ixda.org
http://www.ixda.org/discuss?post=48953

________________________________________________________________
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

2 Feb 2010 - 7:11pm
Suba Periyasami
2008

Use instruction text on the control when space is a concern.
Ensure that the instruction text conveys the purpose of the control. For
example, 'Search email' in yahoo specifically searches the inbox and not the
web .
Do not display critical instructions that the user needs to see when using
the control.

Using colors may cause some readbility issues for color blind or elderly
participant.
It should be ok, as long as the content is accessible even when the styles
or color is turned off.

Let me know your findings regarding the use of color.

-Suba

On Tue, Feb 2, 2010 at 10:29 AM, Jayson Elliot <jayson.elliot at gmail.com>wrote:

> Does anyone have research to point to regarding the practice of placing
> instructional text in a field that is meant for user input?
>
> For example, on a site like http://www.huffingtonpost.com/ you see "Google
> custom search" inside the search field; or http://www.adobe.com/ writes
> "Search Adobe.com" inside theirs.
>
>

2 Feb 2010 - 8:11pm
Edo A. Elan
2004

No research, but some common sense from a product point of view.

"Google custom search" is the default suggested by Google. Google
does not encourage changing it. Don't read too much into it - don't
assume they considered changing it.

Google custom search usually replaces internally maintained search.
In that case, the prompt's usefulness is in alerting users to expect
different results format.

Even if it discourages searches, consider that when replacing
internal searches in a working website, implementing Google search
may increase the success rate of searches considerably (this is easy
to measure). This may outweigh some marginal difficulty (and one
that's tough to measure).

Last comment: "Google custom search" is a particularly obnoxious
display (what with the oversized color logo and a symbol character to
top!). A short message, containing only an instruction or sample
search, may work better (assuming it disappears on any focus).

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

2 Feb 2010 - 5:04pm
Anonymous

I don't have any research points to this either, but mirror
@Gayatri's thoughts as far as complex requirements (and essentially
erasing the instructions by entering text).

The placeholder attribute is on the slate for HTML5, so I'm guessing
we'll start seeing a lot more of it.

http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-placeholder-attribute

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

2 Feb 2010 - 10:30pm
Mark Waldo
2009

Hi. We just tested a site for many issues including this one. The
participants needed to create a login and password for registration.
An email address was required for the login and this was explained in
the field.

About 80% of our test subjects clicked in the field before reading
this nugget of information, thereby obliterating any hope for all but
one of getting any further along with the registration. We had one
savvy user on his third try guess that an email address might be
required based on his previous experience.

As a result, this instructional text will be placed outside of the
field.

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

3 Feb 2010 - 4:33am
Anonymous

As an aside to this, I thought the list might like to be aware that a
'placeholder' attribute is now part of HTML 5 to natively handle
the behaviour of help text in text inputs, eg.

As I write it's only implemented in Safari and Chrome but it's
likely to end up in all modern browsers soon enough.
(Note also the 'search' input type which defaults to a regular text
input in browsers which don't support it)

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

3 Feb 2010 - 6:57am
Caroline Jarrett
2007

To add to Mark Waldo's evidence:

My results from usability tests mirror Mark's. (Your users may differ).

Participants do not understand text within the field as being help. They may
either:

- ignore it completely OR
- consider that the field has been pre-populated with that value and
therefore skip the field.

In one test, the 'Customer name' field had the help text 'New Customer'
within it.

Participant after participant did this:

- skipped the field
- created their new customer record with the name 'New Customer' (but didn't
realise)
- first attempt appears to succeed
- when creating the next new customer, repeat the above
- this time it fails because there is already a customer record with the
name 'New Customer'
- participant now completely confused: why did it work first time and fail
second time?

The exception MAY be (but is not guaranteed to be) on a drop down if the
phrase 'Please select' or equivalent is put as the default selection.
Dropdowns seem to have a greater ability to attract the users' attention
than other apparently filled entry spaces.

Best
Caroline Jarrett
www.formsthatwork.com

3 Feb 2010 - 9:32am
Amy Silvers
2007

I recently saw a neat little bit of jQuery that addresses the problem of the
instruction disappearing when the user clicks in the field:

http://www.csskarma.com/blog/sliding-labels-v2/

demo:

http://www.csskarma.com/lab/slidinglabels2/

It slides the labels to the left as soon as the cursor enters the field. It
might be distracting, and I don't think it's appropriate for all uses, but
the thinking behind it is good.

On Tue, Feb 2, 2010 at 2:30 PM, Mark Waldo <mark at markwaldo.com> wrote:

> Hi. We just tested a site for many issues including this one. The
> participants needed to create a login and password for registration.
> An email address was required for the login and this was explained in
> the field.
>
> About 80% of our test subjects clicked in the field before reading
> this nugget of information, thereby obliterating any hope for all but
> one of getting any further along with the registration. We had one
> savvy user on his third try guess that an email address might be
> required based on his previous experience.
>
> As a result, this instructional text will be placed outside of the
> field.
>
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> Posted from the new ixda.org
> http://www.ixda.org/discuss?post=48953
>
>
> ________________________________________________________________
> 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
>

3 Feb 2010 - 10:03am
Diego Moya
2005

I'm not sure I understand what problem the sliding labels are supposed
to solve. I thought putting labels inside input fields was a
compromise solution, for placing instructions in forms where few space
is available.

With sliding labels, the final form occupies the same space than a
classic form with labels near to the input fields. So why would you
want to use a form with sliding labels when you have the available
space to put a complete static form?

(I see that the initial state of the sliding label form is cool, and
has a more beautiful design. Maybe aesthetics is the primary
motivation for this technique?)

On 3 February 2010 15:32, Amy Silvers wrote:
> I recently saw a neat little bit of jQuery that addresses the problem of the
> instruction disappearing when the user clicks in the field:
>
> http://www.csskarma.com/blog/sliding-labels-v2/
>
> demo:
>
> http://www.csskarma.com/lab/slidinglabels2/
>
> It slides the labels to the left as soon as the cursor enters the field. It
> might be distracting, and I don't think it's appropriate for all uses, but
> the thinking behind it is good.

3 Feb 2010 - 10:10am
Amy Silvers
2007

Yes, I think the author is narrowly focused on the problem of the
disappearing instructional copy, considered without the context of the
entire form. It's true that labels inside fields started out as a solution
for limited space, but nowadays I'm also seeing them used in instances where
there's plenty of room outside the field for instructional copy. So I think
this is more an aesthetic solution--a 'hey, this is cool!" technique--than a
practical one.

On Wed, Feb 3, 2010 at 10:03 AM, Diego Moya <turingt at gmail.com> wrote:

> I'm not sure I understand what problem the sliding labels are supposed
> to solve. I thought putting labels inside input fields was a
> compromise solution, for placing instructions in forms where few space
> is available.
>
> With sliding labels, the final form occupies the same space than a
> classic form with labels near to the input fields. So why would you
> want to use a form with sliding labels when you have the available
> space to put a complete static form?
>
> (I see that the initial state of the sliding label form is cool, and
> has a more beautiful design. Maybe aesthetics is the primary
> motivation for this technique?)
>
>
>
> On 3 February 2010 15:32, Amy Silvers wrote:
> > I recently saw a neat little bit of jQuery that addresses the problem of
> the
> > instruction disappearing when the user clicks in the field:
> >
> > http://www.csskarma.com/blog/sliding-labels-v2/
> >
> > demo:
> >
> > http://www.csskarma.com/lab/slidinglabels2/
> >
> > It slides the labels to the left as soon as the cursor enters the field.
> It
> > might be distracting, and I don't think it's appropriate for all uses,
> but
> > the thinking behind it is good.
>

3 Feb 2010 - 12:30pm
mcaskey
2008

I'd like to see this tested against some other styles...

To me, the sliding label appears to serve as an aesthetic boost.. and fun factor.

And...

I also see it as serving as a UI status. It becomes painfully clear that you are now entering text into the field you just selected!

I like that.

But...

The fun factor is even more interesting to me because I could see it boosting the immersion factor, which is desirable in some cases. Yes, I'm still somewhat enamored with the innovative use of the 'flash-like' UI animations we're now getting out of standards-based tools. ;)

-Mike

On Feb 3, 2010, at 8:10 AM, Amy Silvers wrote:

> Yes, I think the author is narrowly focused on the problem of the
> disappearing instructional copy, considered without the context of the
> entire form. It's true that labels inside fields started out as a solution
> for limited space, but nowadays I'm also seeing them used in instances where
> there's plenty of room outside the field for instructional copy. So I think
> this is more an aesthetic solution--a 'hey, this is cool!" technique--than a
> practical one.
>
> On Wed, Feb 3, 2010 at 10:03 AM, Diego Moya <turingt at gmail.com> wrote:
>
>> I'm not sure I understand what problem the sliding labels are supposed
>> to solve. I thought putting labels inside input fields was a
>> compromise solution, for placing instructions in forms where few space
>> is available.
>>
>> With sliding labels, the final form occupies the same space than a
>> classic form with labels near to the input fields. So why would you
>> want to use a form with sliding labels when you have the available
>> space to put a complete static form?
>>
>> (I see that the initial state of the sliding label form is cool, and
>> has a more beautiful design. Maybe aesthetics is the primary
>> motivation for this technique?)
>>
>>
>>
>> On 3 February 2010 15:32, Amy Silvers wrote:
>>> I recently saw a neat little bit of jQuery that addresses the problem of
>> the
>>> instruction disappearing when the user clicks in the field:
>>>
>>> http://www.csskarma.com/blog/sliding-labels-v2/
>>>
>>> demo:
>>>
>>> http://www.csskarma.com/lab/slidinglabels2/
>>>
>>> It slides the labels to the left as soon as the cursor enters the field.
>> It
>>> might be distracting, and I don't think it's appropriate for all uses,
>> but
>>> the thinking behind it is good.
>>
> ________________________________________________________________
> 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

8 Feb 2010 - 4:49am
Ahmed Bassel
2008

When checking Google analytics for keyword search within our site I
found that 59.6% are the word we are using in the search box "Search
X".
Data from user behavior is the best source of information that let
you take decision.

I would recommend to do A/B test and check which will get you the
highest conversions.

There are no researches about this subject and every case is
different from the other.

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

10 Feb 2010 - 10:18am
Jakub Andrzejewski
2010

I also confirm Mark's findings - during testing of a relatively
complex form, information (e.g. required formatting) placed in fields
was unnoticed by many users. They just didn't read it.
Once the info was gone, it was harder for them to understand what
went wrong and what the proper format was.

I'd avoid help text in form fields unless available space is an
issue.

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

Syndicate content Get the feed