Dropbox Paper

Best practices for Form Design

We are not using Dropbox anymore for UX definitions

please check SUI Studio instead: https://sui-components.now.sh/

Thanks

Here we include a list of best practices that must be taken into account when designing a form combining the form elements we defined as atoms.

Keep it short. Eliminating unnecessary fields requires more time, but the reduced user effort and increased completion rates make it worthwhile.

Visually group related labels and fields. Labels should be close to the fields they describe. Avoid ambiguous spacing, where labels are equidistant from multiple fields, and make sure to include the label attribute for screen readers.

Present fields in a single column layout. Multiple columns interrupt the vertical momentum of moving down the form.

Use logical sequencing. Stick to standard sequences both for fields (e.g., Credit-card number, Expiration date, Security code) and for value choices (e.g., Standard shipping, 2-day shipping, 1-day shipping).

Distinguish optional and required fields. First, eliminate as many optional fields as possible (see the first recommendation above). If some fields truly are necessary, but only apply to a subset of users, don’t make users find out through trial and error. Limit the form to only 1 or 2 optional fields, and clearly label them as optional.

Explain any input or formatting requirements. If a field requires a specific format or type of input, state the exact instructions. Don’t make users guess your obscure password requirements.

Avoid Reset and Clear buttons. The risk of accidental deletion outweighs the unlikely need to ‘start over’ on a web form. In forms that collect extremely sensitive input such as financial information, provide a ‘Cancel’ button to support those users who abandon the form and want to delete their information. But make sure that the Cancel button has significantly less visual prominence than theSubmit button, to avoid accidental clicks.

Provide highly visible and specific error messages. Errors should be signaled through a variety of cues, not solely through color: outline the field AND use red text AND use a heavier font, to ensure users don’t overlook this critical information. Now is not the time to be subtle.

Sources: