Order Form Design

Saturday, December 18, 2010 9:55 PM

It is true that paper order forms are becoming a thing of the past since so many orders are placed online these days. Usually, a website address appears where once an order form would have been, but other kinds of printed forms are still common including tax, immigration, and application forms to name a few. Designing forms is a great way to learn how to use information and graphic design, along with typesetting, in a clear, efficient, hierarchical, and organized way. All forms, including online order forms, share many of the same typographic problem-solving challenges. All forms must be user-friendly. Forms should be easily understood without having to be explained to your audience. If a user who has the right information for a form needs help to fill it out, then the design has failed. If a user does not fill out a form because it is off-putting, the design has failed. Your guiding principal should be "don't make the user think." A form should be so easy to follow and fill in that the user can focus on the input of information, and the form becomes in a sense, invisible.

Signal-to-Noise Ratio

Any form is information design and it has to function besides being aesthetic. Therefore, it is useful to know one of the important principals of information design--the idea of "signal to noise ratio." You might have heard of this design principal before, and undoubtedly, you will do so again because it is a valuable idea for any sort of information design and for typographic communication in general as well. The Theory In 1948, Warren Weaver co-authored of one of the seminal works of communication theory called "The Mathematical Theory of Communication." He described the transmission and receiving of information like this: An information source produces a message. A transmitter which operates on the message creates a signal which can be sent through a channel. A channel is the medium over which the signal carrying the information (the message) is sent. A receiver, which transforms the signal back into the message intended for delivery A destination, which can be a person or a machine, for whom or which the message is intended.

Warren also showed how when communication is interrupted, "noise" can be introduced into the channel (in the case of radio or TV, this means static).

This principle uses this analogy and evaluates the level of "background noise" to "signal." Too much background noise, then the signal is lost (too much static and you cannot see the picture). In the case of form design, this noise means distracting backgrounds, thicker than necessary rules, overabundant punctuation (unless needed for clarity) and anything else that gets in the way of letting the user read and fill out a form. So, when you design, look honestly at your form. What is contributing to the communication? What is just getting in the way? This approach does not mean everything you design has to be minimal or sparse, rather that the application of style, weight, color or pattern does not obscure the function.

Form Design Considerations

Two examples of good order form design.

Like books, there are many conventions in form design so your design will have to adhere to those conventions. There are also best practices to be aware of. And most of these apply equally to an online form as well as a traditional paper one. Information Order People are used to the information on forms being in a specific order. For example, everyone assumes that the first line of any form will be for their name. If you make the top line of your form for something else, people will write (or type) their name in there anyway, just out of habit and expectation. People usually expect the address to follow their name, the email after that and so on. Must often you will find request payment details at the bottom of a form followed by a signature if required. Follow normal conventions and you will have a strong foundation for a successful form.

Notice how the company name is first on this British customs form.

continued

Form Design Considerations (continued)

Make the form harmonize with the rest of your design. Do not suddenly design the form in black and white if your whole piece is in pink and purple. Use the same typefaces, styles and weights as you have used in other sections of your design. Be consistent.

As much as the use of a handwriting font is questionable here, this online order form does at least take its design cues from the website where it resides. It also seems quite user-friendly, although a user might question whether it is functional or decorative.

Backgrounds and Boxes Where you write has to be white or a light color. If you have a dark background, you can make white or light-colored boxes in the areas where handwriting goes. Nevertheless, remember signal to noise. If you think a background will provide too much "noise," find another solution.

Left: U.S. tax form from 1998. Right: U.S. tax form from 2005. When you click the images to enlarge, note how the addition of a light blue background makes the US tax form easier to use by focusing the eye on the areas to be filled, which now pop out in white.

continued...

Form Design Considerations (continued)

Space for Handwriting Leave enough space to write. Handwriting takes up more space than type. Leave the appropriate amount of space for what is to be filled in it. For example, state abbreviations and zip codes do not need as much space as city names. Make sure you have space for the long names as well as short ones!

Signature lines are often double the height of the rest of the spaces since many people have larger signatures than their printing. Rule Weight Consider line weight, style and tone. Thick, solid, black lines are unnecessary and bulky. Think of notebook paper with light blue lines as an exampleit's much easier to write on top of light lines than dark lines.

Design the lines. A 1-point solid black rule is the default style in document design programs like InDesign (of the Adobe Creative Suite) and Microsoft Publisher, so this line specification never looks designedit is analogous to setting your type at 12 pt/auto. Nevertheless, is there some way to tie the rule into the rest of the design by color or orientation? For example, could they be slanted, rotated? Dashes or dots instead of solid? Finally, think about the space from your type to the start of the rule. Make sure it is consistent. Pay attention to the rule endings too, they don't always have to line up, but it usually looks better that way.

Note here how the designer has boxed everything in and used thick rules for everything, making the form cluttered and uninviting. (Click image to enlarge.)

continued...

Form Design Considerations (continued)

Logic and Information Processing Group information logically. Placement is key to user-friendly forms. Here's an example for an order formname/address info first, number of tickets second, then payment information last. Keep things that go together near each other. Things that are closer to each other will be associated.

This form does group information fairly logically; unfortunately it goes a little too far. Where, for instance, should you start to write the day, month or year? Are they meant to be in words? Separating the boxes would have been a better solution here.

On Check Boxes Check boxes go before the words with a space between the box and the words. They don't have to be "boxes"they can be circles or a line but either way the area you check should be always be before the words. If there are multiple checkboxes, see if you can space them so they are equal distances apart (by placing them on sequential lines for instance). Make sure the space between the box and the type is consistent.

Design your check boxes. Avoid making them fussy like the designer has here by using a drop shadow.

User Testing Is Key

As with any information design, user testing should form a crucial part of your process. User testing and focus groups are often used to find out if a design is meeting its objectives. But with forms, it's easy to test whether they are working. Print out and fill out your form after you have designed it. Also, ask a friend/colleague or two to fill it out, and observe, don't help. Then assess how well it worked. For instance for an order form for a film festival, you would look for the following: How well did your user understand it? Were they able to order tickets for all the movies or just one? Could they order different numbers of tickets for each? Was it easy for them to figure out the total price of their order?

Was there enough room for their signature?

Your users should not have an expression like this when filling out the form you designed!

Thoughts on Order Form Design

On page 85 of the book Stop Stealing Sheep, author Erik Spiekermann has this to say about the design of forms: One of the areas typographers (creators/manipulators of fonts and typesetting) usually stay well clear of is the design of forms. They are not the easiest things to design, and in that respect should be considered a challenge. They offer enormous rewardsnot winning awards or being included in the design annuals, but in terms of achievement. Keep the preprinted information clearly separated from the areas you want people to fill in. These lines should be inviting guides for people's handwriting, and not look like bars on a prison cell window. The same can be said of boxes around text. Who needs them? Some designers seem to be afraid that the type might fall off the page if there wasn't a box around it: it won't happen! Without restricting boxes, forms don't look half as forbidding and official. Different areas of the form can be separated by white space.
from Erik Spiekermann, Stop Stealing Sheep and Find Out How Type Works, pp. 85

A form from Spiekermann's website follows his own advice using lighter than usual rules for the boxes.

What are your thoughts about designing order forms? Are they something you have lavished time and attention upon? Or are they an annoying but necessary task? Have you stopped to think how they could be made better? How about online forms? Do you think there is enough attention to typographic and other design considerations online? Can you think of some good examples of online forms?

Try pulling out any order forms you have designed previously and reexamine them. What could you do to make them better?

The US government has notoriously difficult-to-fill-out forms. One could argue that the "noise" of the thick black lines is contributing to making this Social Security form less user friendly.