Forms and timed elements

Form fields

Any input form collecting information about the user must have its purpose clearly identified to both the user, and the underlying user-agent.

It is preferable to have the visual label for input fields to be positioned above the field. Never rely on the hint text in a text input field as the only means to communicate the purpose of the input field to the user.

User error

Nobody likes making mistakes. A poorly designed website can leave the user feeling frustrated or incompetent, while a well designed website can make the user feel like an efficient expert. Implement the following mechanisms to help users avoid and correct mistakes when entering form data.

• Error Prevention. First and foremost, use clear instructions and form field labels so that the user knows what is expected of them. Next, keep the user’s input data visible to them, so that they can identify and correct any potential error with ease. If the data is hidden from the user (as is common for a password entry field), allow the user to be able to toggle the visibility of this information if possible.
• Error Detection. Whenever possible, detect all input errors automatically.
• Error Correction. If an input error can be automatically corrected without the user’s attention, do it! An example of this would be an input field for entering a phone number, that automatically corrects the formatting of the number to meet the form’s requirements.
• Error Identification. If an input error can’t be corrected without the user’s attention, clearly identify the error to the user, and explain it in text form. Do not require the user to input all information again, and if possible, provide suggested corrections for the user.

Failsafe mechanisms

It is not always possible to detect user errors in form fields. For this reason, it is necessary to implement one of the following two mechanisms.

• Undo. The user must be able to undo or reverse the form submission.
• Confirm. Upon initiating the submission of the form, the user must be given the opportunity to review, correct, and confirm information.

This is good practice in any form design, but it’s critical when a form submission could have serious ramifications for the user, such as deleting their data, or agreeing to financial or legal commitments.

CAPTCHAs

Do you think you hate CAPTCHAs now? Please go and try one with your eyes closed and your speakers off. Come back when you figure it out. Go ahead, I’ll wait for you here…

If you must verify that a user is a human, make sure that you are indeed testing for bots, and not testing for disability. All CAPTCHAs must accommodate a suitably diverse array of input and output modalities, so that any human being can pass through them without discrimination.

Help!

Whenever possible, provide context-sensitive help for the user during any form input process.

Different people can require dramatically different amounts of time to engage with content. If an element has a time limit of less than twenty hours, the user should have access to at least one of the following mechanisms.

• Disable. Before encountering the time limit, the user can disable it altogether.
• Adjust. Before encountering the time limit, the user can adjust it to be at least ten times longer than the default setting.
• Extend. Before the time limit expires, the user is given at least twenty seconds to extend the time limit by performing a simple action. The user must be able to extend the time limit this way at least ten times.

Ideally, a time limit should not be made a part of any element unless it is absolutely essential.

Timeouts

A user must be warned in advance if exceeding a time limit may result in a data loss, unless the data is preserved for at least twenty hours of user inactivity. Ideally, if a timeout occurs, a user should be able to continue their activity with all data intact when they login again.