Form fields: Place captions outside; use default styling

home services portfolio intranet ideas contact us

Idea Archives

July 2004
August 2004
September 2004
October 2004
November 2004
December 2004
January 2005
February 2005
March 2005
April 2005
July 2005
November 2005
December 2005
January 2006
February 2006
April 2006
May 2006
July 2006
October 2006
November 2006

Previous Posts

Form fields: Place captions outside; use default styling

Monday, July 31, 2006

Intranet designers sometimes place captions for form fields inside the field in an attempt to conserve screen real estate. For example, instead of putting the caption "Search intranet" to the left or on top of the search box, they put it inside. Don't do this.

Last month I ran user testing on a proposed intranet design that used this style on all input boxes. It repeatedly caused problems for the predominantly over-40 test group. For example, instead of entering a query in the search input box, they just hit the "Go" button beside the box, assuming it would take them to a page where they could enter the query.

Here’s a graphic to demonstrate the issue more clearly:

Screenshot: Place captions outside of form fields

Screenshot: Place captions outside of form fields

On a related note, designers are often tempted to stylize form fields and buttons to match their colour palette or to add visual interest to a page. Be very careful here. It's vital that users recognize form elements as such. Messing with the browser defaults is risky. I think form elements are best when they're:

Big
Three-dimensional
Default colouring

Again, here's a visual to illustrate the point:

Screenshot: Use default colouring for forms

About the Author

I'm Chris McGrath, an intranet consultant in Vancouver, British Columbia, Canada. I've been working on intranets since 1997, and on plain ol' web sites for even longer. I run One Intranets, the firm that co-created ThoughtFarmer -- an enterprise collaboration platform for Windows-based intranets.