How to design a smart, functional form

BY CHUCK GREEN Would you ask a prospect with a specific need to listen to a laundry list of all the products and services you offer? Would you insist that a new customer provide you with detailed information that obviously doesn't apply to their needs? If you wouldn't do it in person, don't do it on paper.

A well designed form establishes a system for gathering, processing, and compiling specific information. It “interviews” the reader by asking a series of carefully defined questions in the form of captions (name, address, city, etc.). It prompts answers whenever possible by providing a choice of answers. And it does it all with an obvious respect for the users time and effort.

before and after of form design

Plus, a well designed form saves you from the frustration and flaws of recording, formatting, and transcribing information from a live interview. Did you phrase your questions correctly? Did you remember all the pieces of the puzzle? Do the answers conform with the format you use to compile them? Forms are a key component of any enterprise. The easier and clearer you make them, the better the quality of the information you will collect will be.

The problem

To understand the value of an effective form—let's look at the cost of a poor one. At first glance this form may look fine (1), but on closer examination you'll find some fundamental flaws.

before version of form

WHERE'S THE EMPHASIS?—First and foremost, a form should be obvious about its intent. The example is visually neutral—everything looks equally unimportant. Long lines of tiny text and scrunched spacing make it less than inviting.

LOOK AT ALL THE WASTED SPACE—Space has not been use efficiently (2)—for example, a full line is devoted to a single phone number. Valuable space is lost left-to-right and top-to-bottom. And the text is imprecise: for example, the caption that reads “number of years in business” could easily have been reduced to “years in business.”

before version of form

WHO'S IN CHARGE?—The caption “name/address/title/phone number of corporate officers” leaves the user to decide which parts and pieces to fill-in—a problem that is sure to produce uneven results. When you request information, do it with confidence. Show the user that you have thought through the questions you're asking.

The cure

DO SOME RESEARCH—Before you design a form you need to ask some basic questions: Who will be using the form? How will they fill it in and return it to you? How will you process it? Do the fields need to correspond to an existing database? Consider the details—if, for example, the completed form will be stored in a ring binder, you'll need to allow space for a hole punch (3). (Yes, some clients still use paper forms and store hard copies.)

makeover of the form

DESIGN ON A GRID—By dividing the page into a series of equally sized columns you give the page a uniform look and feel (4). I divided the example form into five equal columns. Note how the vertical lines all fall on one of the five grid lines.

design your form on a column grid

SPACING IS IMPORTANT—Whether your form is be filled in by hand or using a computer (in some cases, maybe even a typewriter), you will need to space the lines so that the user will not have to readjust the page for each line (5). In most cases business machines print one line for every 1/6th of an inch (one pica). In days past, these lines were spaced 1/3 of an inch apart (roughly two picas) to accommodate a standard, double-spaced typewriter.

space the lines with a comfortable amount of space

CREATE LOGICAL SECTIONS—Analyze the sequence in which you ask for information and create a series of clearly labeled sections that step the user through the process (6). Provide bold headings the user can scan to see what information they will need to proceed and to assist those retrieving the information.

divide your form into sections

VARY LINE WEIGHTS—Lines divide the page visually (7): bold lines (1.5 points) divide the sections, medium lines (1 point) divide the subsections, and the lightest lines (.25 point) are used everywhere else.

form line weights

CHOOSE TYPEFACES FOR READABILITY—A form, by definition, is more visually complex than most other documents. Fewer typefaces with fewer attributes (italic, upper/lowercase, bold, etc.) typically produce better results. The bold headings here are Slippy Bold and the text and captions are Slippy Light (8) (available from t26.com). Though a paragraph of text in all uppercase letters is difficult to read, to my eye, short captions in small sizes like these are more readable in all caps. (Notice too that I added extra space between characters by increasing the tracking to +100.)

choose form typefaces for readability

USE TINTS TO HIGHLIGHT IMPORTANT POINTS—Tints of black or a color are particularly useful for highlighting important items and for dividing the page visually (9). The boxes on the actual form are a 15 percent tint of black. If a form will be faxed or copied regularly, be certain the tints you've chosen are fax-friendly—heavy tints can slow down the transmission and muddy the information.

highlight important parts of the form

BE INSTRUCTIVE—Where does the reader call if they have questions? Where do they send the finished form? You may also find it useful to add a code and date to the form for purposes of processing, distribution, and to differentiate one form from the next.

ASK QUESTIONS AND PROMPT ANSWERS—Be as specific as possible. When you say “NAME” do you mean “company name” or “contact name?” And, when you can, include possible answers in the form of check boxes. A list of credit card names (VISA, MasterCard, American Express, and so on), for example, is preferable to having the user fill in the type of card.

Editing a form in acrobat professional and lifecycle designer

MAKE YOUR FORMS PORTABLE—Today, of course, it is possible to circulate forms via Adobe's PDF format. You can even set them up (using Adobe Acrobat Professional) to be password protected, check boxes, buttons, date and time stamps, typeface choices, and so on (10). It is even possible (using an Adobe Certified Document Services partner) to require and obtain an authenticated signature. Below is a simple example of the form that you can download.

How to design a form example from Ideabook.com

Ideabook design store: templates, books, and tools for communications design