LiveCycle Developer Center

Creating graphically effective form design – Part 3: Final word(s)

Simplicity

The principle of simplicity states that simpler designs are better. As form designers, we should always strive to make our designs as simple as possible.

No less a mind than Albert Einstein once said, "Everything should be made as simple as possible, but not simpler." This is a good rule to follow with your form design. We sometimes need to design forms for complicated business transactions. This does not necessarily mean that our forms need to be complicated. It is our job as designers to simplify the complex and lighten the performance load for our users.

Simplicity-related concepts

Two design concepts are related to the principle of simplicity: performance load and Ockham's Razor.

Performance load

Performance load describes the degree of effort that your form-filling user must make to complete the form successfully. If your form has a high-performance load, the time that your user needs and the errors that your user makes will increase. The probability that your user will successfully complete your form is inversely proportionate to the form's performance load. As the form's performance load goes up, the probability of a successful completion goes down. Your goal as a designer should be to lighten the performance load for your user.

Ockham's Razor and simplicity

Ockham's Razor is a famous theory that states that, all things being equal, the simplest solution tends to be the best one. We can translate this into form design by understanding that if two designs are functionally equivalent, the simplest design is best.

Two great examples of the power of simple designs are the Apple iPod and the Google search engine (see Figure 1). Both of these have simple interfaces and low performance loads. However, both of these systems also feature functionality that is complicated and detailed.

Figure 1. Simple designs of the Apple iPod and the Google search engine

As designers, we can apply the principle of simplicity in many ways. I organize my form simplification work into macro and micro form simplification. I use the term macro to refer to a system or group of forms. Therefore, any simplification techniques that apply to a series, set, or group of forms are referred to as macro simplification. I use the term micro to refer to an individual form. Therefore, any simplification techniques that apply to individual form elements are referred to as micro simplification.

Macro simplification

A good example of macro form simplification is the US 1040 Income Tax Return form set. This example shows us how we can sometimes simplify our forms by creating a form set as opposed to a one-size-fits-all form. Many form designs are too complex because one individual form is trying to handle too many different business use cases. If you have a case like this, consider creating a form set, as the IRS did with the 1040 form and the 1040 EZ form (see Figure 2).

Figure 2. Macro simplification strategy with the IRS 1040 tax form

In the case of the US 1040 EZ tax form, the IRS designed a form to specifically handle the more simple and basic tax filing use cases. This simplification strategy makes it possible for many tax payers to avoid the unnecessary details of the longer form.

If you are finding that an individual form is becoming too complex, consider breaking it up into a form set supported by multiple PDF forms. You can apply the 80/20 rule and design one form for the 80% majority of users and another one for the 20% minority of users. The form that you design for the majority of users will be simpler and the performance load will be decreased for 80% of your users.

Micro simplification

Once you have considered all of the macro simplification options, think about your strategy for micro simplification. Almost all of the forms that I see on the web can benefit from micro simplification. The following are some valuable tips:

• Eliminate unnecessary graphic devices like boxes, bars, and lines (see Figures 3 and 4).
• Don't force the user to enter information that has already been provided. If the user's contact information is entered on page 1 and required on page 4, make sure to copy it automatically for them.
• Don't use too many fonts, font styles, or font sizes.

Figure 3. Unnecessary boxes on a form design

Figure 4. Unnecessary boxes eliminated

The form snippets in Figures 3 and 4 show how even a simple change to a design will make the form more approachable, readable, and professional. The boxes in Figure 3 are unnecessary and should be eliminated. After I eliminate the boxes (Figure 4), the headline copy is no longer separated from the body copy. The overall design is also simpler and cleaner.

Take a look at a similar example in Figure 5. In this case, there are far too many unnecessary horizontal bars. These bars add a great deal of visual noise to the form without providing much design value. The only bar that I would keep is the first one that defines the section. The other bars can be removed (see Figure 6).

Figure 5. Too many bars on a form design

Figure 6. Removing excess bars to help simplify the design

Even though the bars are removed in Figure 6, the section groupings are still clear. I have used a bolder font for the three important labels ("1. Your Account", "2. Account Being Transferred", and "3. Your Transfer Instructions"). This bolder font and the additional white space enables me to group the sections clearly without the heavy black bars.

The final example I'll show you deals with simplifying forms by reducing the number of fonts, font sizes, and styles. Figure 7 illustrates a form snippet that has been simplified in this way.

Figure 7. Simplified use of fonts, styles, and sizes

The complicated design to the left has seven different combinations of font styles and sizes, but the new design on the right has only three. Each of the three combinations is used for a specific purpose, and the overall effect is to establish a clear form hierarchy. I went into more detail on this subject in Part 2 of this series. As you can see, the simpler design is easier to scan, process, and understand.

Page 2 of 3

Previous Page

Next Page