This post is part of the ongoing Distribution Tuesday series. Every week the 500 Distribution Team highlights actionable resources for marketing your startup. Get even more tips by following @500Distribution on Twitter and subscribing to our email newsletter.

Forms are ubiquitous; they stand between the user and the action they want—or you want them—to take. A well-designed form can make the difference between happy customers who complete your desired action disproportionately and frustrated users who bail from your site in droves. To successfully design an effective form, you must consider three key elements: structure, elements, and interaction. This post addresses these considerations at a high level. For a more in-depth overview, I highly recommend Luke Wroblewski’s excellent Web Form Design.

Structure

The principles of form design can be summarized as: 1) minimize pain for the user, 2) create a path to completion, 3) consider the context, and 4) communicate consistently. In other words, nobody likes filling out forms; make yours as straightforward as possible. Make it easy for users to understand what they’re being asked for and how to get through the process by tailoring the form to your exact needs and audience, and using clear, consistent language throughout.

In organizing your form, give careful consideration to what inputs to include. Focus on only the key questions, prioritize them appropriately, and think about what you have to ask the user for now vs. later. Use natural language in your prompts, but keep it succinct. Organize different types of information accordingly e.g., personal info vs. payment info, and group them together by clearly delineating different sections in your design. Netflix has always been very disciplined about having a registration form that is as short and straightforward as possible.

Strive for a clear path to completion by setting proper expectations. Make it easy for the user to understand how many steps your form contains and which step they are currently on. If your form supports variable-length or non-linear flows, use a breadcrumb trail that shows the high-level tasks instead of the number of steps. Use titles and other descriptors that match users’ expectations, and avoid unnecessary links or content that may increase form abandonment.

Elements

The placement of labels relative to their input fields can have a significant impact on how quickly and easily a user can complete your form. To minimize completion time, top-align labels as Netflix does, if you can spare the vertical space. If you’re constrained on vertical space, you may want to right-align your labels, or even place them within the input fields, an increasingly common practice adopted by Path (as seen below), Twitter and many other companies.

In considering input fields, it’s important to first make sure that you’re using the right types e.g., a radio button for a simple yes/no choice and a dropdown for selecting one of many options. Open text fields should be long enough to allow users to answer the question effectively, and optional fields should be avoided if possible. If all your fields are required, there is no need to mark each one as such; if your form also includes one or two optional fields, make sure to indicate they are not required. For questions for which there are multiple ways to correctly format the answer, make sure to support flexible inputs or clearly define the required syntax e.g., in asking users for a phone number: (xxx) xxx-xxxx vs. xxx-xxx-xxxx.

If your form needs to support secondary actions e.g., Cancel, in addition to primary actions e.g., Continue/Save, a strong emphasis must be given to the latter by the use of color, size, button vs. link, or other visual cues. Placement is equally important. Ideally, you want to left-align action buttons with input fields, placing primary and secondary actions next to each other to minimize the amount of visual scanning necessary for a user to understand what’s going on. You can also save users from having to check those annoying Terms of Service (ToS) boxes by having the action button cover both the ToS agreement and form completion, as we did at Hulu.

Error and success messaging represent another key element of forms. Error messages should be very visible on the page, preferably placed in close proximity to the input field in question, which itself should be highlighted so as to make it easy for the user to locate the problem. Make sure you’re using clear, succinct language and that error messages are actionable. On the flip side, use success messages to notify users that they’ve accomplished the goal, avoiding dead-end messaging by providing actionable next steps following completion of the task at hand.

Interaction

You can help users avoid frustration and move through a form more quickly by using inline validation to confirm or suggest valid answers, as Evernote does on their registration form, below. Avoid unnecessary inputs by using smart defaults to pre-populate information e.g., shipping option, or duplicate fields that have already been submitted e.g., billing address being the same as the shipping address.

Gradual engagement is an effective way to avoid overwhelming users and helping them to focus on the order in which you want them to provide you with information. This can be achieved through the use of inline additions and overlays, such as the commonly used calendar in travel reservation interfaces such as Kayak’s.

Summary

Forms are an integral part of most action-based online behaviors. Taking a carefully considered approach to the structure, elements, and interaction of your form will help increase your conversion rates and the happiness of your customers, making it more likely that they’ll return to your site.