Designing UX: Forms

Principles for Deciding Question Order

Here are six principles for determining the order of questions in a form:

1. Follow how the user thinks
2. Core before supplementary
3. Easy before difficult
4. Related together
5. Be consistent
6. Principles, not rules

Follow How the User Thinks

The order of questions in your form should, as closely as possible, match the way things flow in the user’s mind. When selling an item online, the user expects to enter details about the item first, before details like price and postage. eBay has matched this order in their selling form, shown in Figure 5-3.

Unless you’re the one person on earth with genuine psychic powers, this means you need to do some careful research with your users.

Core Before Supplementary

Collect the information that’s central to your form’s purpose first, before collecting any supplementary information. That way, the most relevant and important data is provided when the user is freshest and most engaged with the form. As Figure 5-4 shows, when adding accommodation to a journey on the travel-planning Web site TripIt, the user enters core details like the name and location first, before supplementary information like number of rooms.

Easy Before Difficult

Ask simpler and less intrusive questions before complex and more intrusive questions. This eases users into the process instead of bombarding them with hard stuff up front. It also ensures users are more committed before being presented with questions that may otherwise have tempted them to turn away. As depicted in Figure 5-5, a progress indicator from a personal loan application shows that easier questions—like contact details—are asked before more challenging questions—like financial details.

Related Together

Remember our principle of proximity from Chapter 4? It stated that related elements should be near each other. The same principle applies to question order. The more related questions are, the closer they should be to each other in the form. On the donation form shown in Figure 5-6, all questions about how to contact the user are near each other, and all payment-related questions are near each other.

Be Consistent

Try not to change the order of questions from one part of the form to another. In the example shown in Figure 5-7, the order of address parts doesn’t change between Billing and Shipping.

This applies to answer fields, too. For instance, if you have a number of yes/no questions, try not to swap the order of the Yes and No fields partway through.

Principles, Not Rules

You probably won’t ever be able to apply all of these principles at the same time, in the same form. For this reason, these are principles, not hard-and-fast rules.

For instance, think about a bank-loan application that collects the following information:

• specifics of the loan being requested—borrowing amount and repayment period
• who is requesting the loan—identification
• the applicant’s income, expenditure, assets and liabilities—information for assessing the request
• employment status and other demographic details—supplementary information for marketing and possibly also for assessing the request

Should we put identification first—following the easy before difficult principle—or should it go near the end, to ensure we collect core before supplementary? Using the principle of related together, do we put income and assets together, because they’re about money coming in, or do we put income and expenditure together, because they’re two sides of the same coin?

As you can see, a number of different—but all seemingly logical—orders can be used. But none implements all of the principles together.

This example also nicely demonstrates the value of user research. After all, what matters most is not what order works for you, but what works for your target audience. The only way to find this out is by conducting research with them.

Screens

Once you’ve ordered your questions, you’ll want to decide how many screens to show them on.

Three Different Ways to Split over Screens

At one extreme, you can put all the questions on one, possibly long, screen. At the other extreme, you can show just one question per screen. In between is the option of having multiple screens, each with multiple questions.

The three quick-quote forms for different health-insurance companies that are shown in Figures 5-8 through 5-10 illustrate these three different approaches.

Between the other two extremes, in Figure 5-10, we see one screen from a quick-quote form that is broken up across several screens.

Deciding the Number of Screens

Each approach has a number of advantages and disadvantages, which I won’t go into here. Instead, I’ll offer this simple formula:

1. Find out the most common screen sizes—including mobile and tablet—for your target audience—that is, the sizes that are used by at least 60% of people who’ll use your form.
2. If the form can fit on three or fewer screenfuls of the most common sizes, leave it as one screen.
3. Otherwise, break the form up into separate screens, one step per screen.
4. Avoid having more than seven screens.

This approach optimizes the user experience for the majority, while saving you from investigating how your form will look on the thousands of different resolutions, operating systems and devices on the market.

Multi-Step (Screen) Forms

If you have multiple screens, you’ll have one step of the form on each. How do you decide what constitutes a step? You should let the questions tell you.

Working with the questions in their proposed order, look for natural groupings and divisions. These give you a good starting place for steps.

For example, in our bank-loan process, these might seem like sensible steps:

1. Identification
2. Income
3. Assets
4. Expenditure
5. Liabilities
6. Loan request
7. Supplementary information

In this structure, the most related questions always appear in the same step. For example, name, address and phone number all appear in the Identification step.

But will users find it weird that some information about the person requesting the loan is collected in the first step, and the rest is collected in the last step? User testing is the only way to know.

It might actually be wise to test a slightly different set of steps:

1. Loan request
2. Income and assets
3. Expenditure and liabilities
4. Identification and supplementary information.

This second approach not only puts together all the information about the person requesting the loan, it has fewer steps so may seem less daunting to users. (Longer screens are the trade-off for fewer steps.) This order of steps also looks like a better fit with the principle of core before supplementary. But again, only testing with users will confirm what works. It’s also very likely that there’s more than one suitable way.

Progress Indicators

Until now, it was a given that a form with multiple steps should have a progress indicator, like the one shown in Figure 5-12.

After all, wouldn’t users want to know where they’re at, what’s to come, and what’s behind them?

Some recent research suggests that progress indicators may not be as necessary as we think, and may even detract from the user experience. This research is very new, and more is needed before we throw out our progress indicators. But if you have the resources, you may like to test your form without a progress indicator, and see what happens. (If you do, be sure to measure both objective and subjective indicators of user experience, like completion time and satisfaction respectively.)

If you include a progress indicator, at a minimum it should:

• indicate which step the user is currently on
• indicate the total number of steps.

So your progress indicator may be as simple as the one shown in Figure 5-13, which gives a sense of the user’s current and overall position.

This is a particularly good approach for mobile forms, as it doesn’t take up much space.

If you want to flesh out your progress indicator—perhaps only on large screens—then visually distinguish between three different types of steps:

1. Steps the user has completed
2. Step the user is on
3. Steps ahead of the user

Figure 5-14 shows an example of a progress indicator that has steps in three different states: past, current—Delivery—and future.

If you show the name of each step in the progress indicator, make sure the wording exactly matches the heading shown on the respective screens, as shown in Figure 5-15.

You may be tempted to indicate progress using percentages, as shown in Figure 5-16.

Alas, on forms, percentage-based progress indicators are a terrible idea. They seem to offer greater precision and thus be more informative. Yet the reality is they have less information. And for the form user, this vagueness is a problem.

Is the percentage a calculation of time, steps, questions, or effort? What if one step has a particularly large number questions compared to the others, or a new step appears because of answers given in earlier steps? Even if the interface gives the user clarity around these points, you’ll find it difficult to resolve them yourself. Instead, stick with step-based, labeled, progress indicators, combined with up-front eligibility questions.

Finally, your progress indicator must be honest and transparent. For instance, don’t pretend there are three steps when there are actually five. Figures 5-17 through 5-19 show three distinct screens presented to the user, all under the heading of a single Log In step.

Have we logged in yet?! Misleading or deceptive progress indicators may be a tempting way to draw more users into your form, but they’ll only lead to greater abandonment, dissatisfaction and distrust.

Before and After

At this point, we’ve settled the structure of the form, by deciding on

• the order of questions
• the number of screens
• the content of each screen
• what progress indicator to use, if any

Our form is really coming together. Nevertheless, what happens just before your form starts, and just after it finishes, is as important as the form itself.

We manage the just before via a gateway screen, and the just after via a confirmation screen. Let’s have a look at these.

Gateway Screen

Many Web forms don’t actually need a gateway screen, because they’re so small and typical. This includes:

• search
• sign up or log in
• contact us
• simple ecommerce checkouts

The form shown in Figure 5-21 is such a short, familiar form, it doesn’t need a separate gateway screen.

On such forms, a gateway screen would be overkill. For most other forms, however, the only entry point should be a single gateway screen on your Web site.

The gateway screen should briefly

• explain what and who the form is for
• warn users of any external sources of information they’ll need—for example, their passport or driver license
• warn users of any equipment they’ll need—for example, a printer or a credit card
• share the average time to complete the form—if known—so the user can make an informed decision about when to fill it out
• let users know whether they’ll be able to save when part way through and resume later, if the form will take more than 5–10 minutes
• provide a summary of any legal considerations, including privacy, terms and conditions, with links to more detailed information

The gateway screen should also

• include a prominent call-to-action button—for example, Start Now or Begin Application
• be indexed and appear in search results—the form itself should not
• be part of the Web site’s navigation
• be the page that all references to the form point to, regardless of whether those references are internal or external to the Web site
• not be included in the progress indicator—because it’s before, not part of, the form

In my experience, gateway screens rarely meet all these criteria. They often do some things well—like a prominent call to action—but are missing other important components—such as a warning to users about external sources of information.

Figures 5-22 through 5-24 show some examples of gateway screens that have at least some of the necessary features. The gateway screen shown in Figure 5-22 prepares the user well, but the call to action isn’t positioned well.

Figure 5-23 shows another example with nice brief introduction and a prominent call to action. This gateway screen also warns the user about external sources—reminder letter and its alternatives.

The gateway screen shown in Figure 5-24 lives on the main Web site, can be found via search, and sits in the navigation. There’s a nice big call to action. The screen also explains what the form is for, warns that card payment and proof of identity are needed, and includes a legal summary.

Having said that, with more complex forms it often becomes necessary to ease the user into the process, rather than overload them with too much information up front. Remember how we talked about easy before difficult earlier? The idea is to gradually draw the user into the form-filling experience. The equivalent with gateway screens is to spread information over a few initial steps. If you think your form may fit into this category, it’s crucial that you test with users to find out exactly when the different pieces of information are needed. Figure 5-25 shows an example of a gateway screen combined with the start of the form, so that information can be given progressively. It includes a prominent call to action, the legal summary, and an indication of the form’s length—via the progress indicator at the top—albeit without an indication of the time the process will take.

Confirmation Screen

The confirmation screen lets users know

• that they have finished filling out the form (Yay!)
• that submission of their answers was successful (Double yay!)
• what their receipt or reference number is, if relevant
• whether confirmation or a copy of their filled out form has been emailed to them
• what’s going to happen next
• how to track the processing of the form or get further information
• what further actions, if any, the user has to take
• where they might want to go next—so it’s not a dead end

This may seem like a lot of information, but it can be provided succinctly, as the example confirmation screens shown in Figures 5-26 through 5-29.

Figure 5-27 shows another great confirmation screen, also from a mobile transaction.

The confirmation screen is also an opportunity to thank the user for their efforts and create a sense of reward. MailChimp is well known for having confirmation screens that do just that, as shown in Figure 5-28.

Finally, the confirmation screen is also a good place to collect feedback on the form-filling process. A simple yet effective way to do this is by asking the Single Ease Question (SEQ), developed by Jeff Sauro and Joe Dumas, which is shown in Figure 5-29.

Answering the SEQ should be optional. If you want to know a bit about what’s behind the ratings that users give, add an optional comment field.