What to Include

Start by deciding on the exact scope and end result of the form. Here are some sample questions to start your process:

1. What is the scope of this project and why is a form needed? e.g. IEEE just launched a new product and needs a form for users to complete for purchase of the new product.
2. What will we do with the data collected to achieve the end result and support the project scope? e.g. The user information will be saved to a database for future purchases and marketing.
3. What type of information is needed to support the end result? e.g.: first name, last/surname, address, etc.
4. Is there data already held by IEEE that we can use? e.g.: How many existing members are students?
5. What data do we need to collect using the form?

Organizing Content

When organizing your form content, keep the user in mind at all times. This is easily achievable by organizing your form so that it flows naturally for your user.

• Organize the questions into different topic areas
• Then, organize the topic areas into a natural flow for your user

Best Practices

• Take the time to evaluate every question you are adding to your forms. Be vigilant about removing questions that are not necessary.
• Strive for succinctness in all the questions (labels) you ask in your forms.
• When succinct labels may be misinterpreted, look for opportunities to use natural language to clarify the questions your forms ask people to answer.
• Ensure that your forms speak with one voice, despite questions from several different people or departments. In a form, write to your user as ‘you.’
• Organize the content on your forms into logical groups to aid scanning and completion. For example, all personal information should be grouped together; name, address, phone, etc.
• When possible, structure your forms as a conversation. Natural breaks between topics will emerge that can help you organize your form.
• If a form naturally breaks down into a few short topics, a single web page is likely to be a good way to organize the form.
• When a form contains a large number of questions that are only related by a few topics, multiple web pages are probably a good way to organize the form.
• When a form contains a large number of questions related to a single topic, one long web page is generally a good way to organize the form.
• Consider asking optional questions only after a form is completed. Chances are you’ll get more answers than if these questions were part of the initial form.
• Use the minimal amount of visual information necessary to distinguish content groups.
• Use initial capital letters to make the titles of content groups easier to scan.

There are numerous checkpoints users use to guide them through form completion. These checkpoints are listed below and should be utilized when creating web forms.

Form Titles

The goal of any web form is to tell users what they can accomplish by filling it out. As people are unlikely to read a detailed form description, it is crucial that form titles match the calls to action that people use to access them.

• The IEEE Main Site is an international site and contributors need to keep in mind that users are reading English as a second language.
• Avoid noun strings in the title. A ‘noun string’ is a list of more than three words that do not have any little joining words such as ‘of,' ‘for,’ or ‘to.’
• Use the word ‘form’ in the title e.g.: Senior Member Application Form e.g.: MGA Nominations Form

Start Pages

When a user starts a form, clearly indicate what materials they will need for completion. If a user is renewing an account/membership, for example, they may need:

• Membership/account number
• Driver’s license number

Clear Scan Lines

The scan line of a form is defined as the vertical path on which the questions, form fields, and action buttons are placed. It is important to maintain this path for users to respond quickly and complete the form.

Progress Indicators*

A progress indicator shows the users which step they are at in completing the form. When a form contains several steps, and spans across several web pages, a progress indicator should appear at the top of every form page. *The IEEE Content Management System (CMS) may not contain this functionality and may need custom coding Best Practices

• Ensure that the titles of your forms match people’s expectations and succinctly explain what each form is for.
• For forms requiring substantial time or information requiring look-up, use a start page to set people’s expectations.
• Make sure that you illuminate a clear path to completion through a form, by using clear scan lines and effective visual pacing, that comfortably takes people from start to finish.
• For mission-critical forms, like checkout or registration, remove distractions and any links or content that may lead to form abandonment.
• For forms with a known sequence of multiple web pages, include progress indicators* that communicate scope, status, and position.

*The IEEE Content Management System (CMS) may not contain this functionality and may need custom coding

• Consider the experience of “tabbing” through a form when making form layout decisions, and use the “tabindex” HTML attribute to control tabbing order through a form.

Labels are used to ask for information in a language so that answering is easy. The way this information is obtained is also dependent on how the elements of the form are laid out. The following information can help to determine the type of label alignment to be used.

Top-Aligned Labels

When you are trying to reduce completion times, or if you need flexible label lengths for localization, consider top-aligned labels.

Right-Aligned Labels

When you have similar goals but vertical screen real estate constraints, consider right-aligned labels.

Left-Aligned Labels

When your form requires people to scan labels to learn what’s required, or to answer a few specific questions out of many, consider left-aligned labels.

Input fields are used to answer the questions asked by form labels. The presentation of the different types of input fields can affect the overall quality and completion of a form.

Types of input fields

Control	Example	Description
Text boxes		Allow the use of any number of characters (letters, numerals, or symbols) of their choosing. These can be single or multiple lines.
Radio buttons		Allow people to select exactly one choice from two or more always visible and mutually exclusive options. Because radio buttons are mutually exclusive, they should have a default value selected.
Check boxes		Allow people to select any number of choices from a list of one or more options. Selecting one option is usually a yes or no question.
Drop-down menus		Allow people to select exactly one choice from two or more mutually exclusive options. They are better candidates than radio buttons for long lists of mutually exclusive choices since they use a minimum of screen real estate. The default selection for general values is set as “-- Select One --".
List boxes		List boxes can act as a set of radio buttons (selecting one choice) or as a set of check boxes (selecting any number of choices) while minimizing screen real estate. Despite the advantages, the dual nature of list boxes tends to cause problems for many people. As a result, list boxes are currently rarely used.

Field Lengths

The way input fields are displayed can produce valuable clues on how they should be filled in. These clues are called affordances. Because affordances provide valuable clues about how to structure answers, people will naturally consider those clues when they are thinking about how to fill in an input field. For example, if you are using an input field to request a “Zip/Postal Code” that is seven digits long, there is no need to present the field length double the size.

Correct

Required Fields

Some forms will need fields to always contain information in order to be processed. The way this is presented can differ depending on what is required.

• If most of the inputs on a form are required, indicate the few that are optional by putting the word '(optional)' next to the label.
• If most of the inputs on a form are optional, indicate the few that are required. A red asterisk (*) symbol is relatively well understood to mean required.
• If you do use the asterisk (*) symbol to indicate required fields, don’t forget a legend before the form fields to explain what it indicates. For example, at the beginning of the form use the text “*required field.”
  

Actions are used in order to complete a form. These are divided into two categories: Primary and Secondary. Actions help to guide through the current state of a form. The visibility of action elements affects the completion of a form.

Primary and Secondary Actions

• Primary actions are the most important actions on a form. Actions such as Submit, Save, or Continue are examples of primary actions.
• Secondary actions are used in order to complete other tasks on a form. Options like Cancel, Reset, or Go Back represent secondary actions.
• Avoid secondary actions on forms whenever possible. Provide a single path to completion.
• If secondary actions are required, ensure that there is a clear visual distinction between the primary and secondary actions. For example, use a button with a more prominent color as the primary action.
• Align primary actions with input fields to create a clear path to completion.

Progress of Action

• Clearly communicate when a form is being processed to avoid duplicate submissions. Use of a progress bar animation would help to notify a form is still being processed.

Help text is basically a set of messages that help people complete forms successfully. They are often associated with fields that are unfamiliar and help people to provide answers. Keep the following in mind when using help text within forms:

• Help text is best for explaining unfamiliar data requests, such as why certain questions are being asked, security and privacy concerns, recommended ways of providing answers, and indicating optional answers.
• Concise help text, visible and adjacent to the question being asked, provides the most clarity for people.

Error messages let people know when they cannot continue completing a form and how they can remedy the situation.  Success messages let people know that they have completed their form successfully.

• Reserve red text and warning icons for error messages.
• If any input fields are responsible for an error, clearly state the labels in the error message to assist in resolving the error. Use an alternate color for the fields with an error if applicable.

• Clearly communicate when a form has been completed successfully, and what happened as a result, using success messages. When forms are completed, direct them to confirmation pages that provide messages stating the status of the form.

There are a few key fields you will need to think about before creating your form. IEEE is an international organization, therefore all form fields should be formatted for international audiences. Form field labels should be presented consistently across IEEE web properties.

Applications and registration processes at IEEE that require users to identify their gender as either “Male” or “Female” when submitting a form or survey response should use the following standardized demographic questions. Ensure that it is not required information that a user must provide. It is also advisable to consider if these questions are needed at all.