Crafting the Perfect Form

Creating Forms to Maximise Engagement & Minimise Friction

Introduction

Forms are crucial in user interactions, serving as gateways to essential actions like account creation, data submission, and communication. Despite their seemingly straightforward nature, designing forms requires meticulous attention to detail to balance usability, accessibility, and clarity. This guide delves into the best practices for crafting user-friendly and practical forms.

At their core, forms consist of fields with distinct components, such as labels, help text, input areas, and error messages. Beyond these, forms can include titles, radio buttons, checkboxes, and buttons. Let’s delve into these elements in detail.

Titles

Usability

A clear, concise title, such as “Log In” or “Create an Account,” ensures that users understand the form’s purpose.

Fig 1.1 — Low-fidelity wireframe of a login form with a title.

Position

Position titles at the top of the form to provide context and set user expectations, making them feel prepared and confident.

Formatting

Use increased font size, weight, or colour to differentiate the title from other elements.

Accessibility

Use appropriate HTML markup to align with the page’s content hierarchy. A descriptive title enhances navigation for users relying on assistive technologies.

Text/Select Fields: Single-Column Layout

Usability

A single-column layout promotes logical progression through the form, avoiding confusion caused by “zigzag” navigation.

Formatting

Maintain consistent vertical spacing between fields and grouped elements, such as checkboxes or radio buttons.

Fig 2.1 — Low-fidelity wireframe of a linear form using a single-column layout.

Text/Select Fields: Labels

Usability

Labels like “First Name” guide users and provide context for input fields.

Position

Top-aligned labels improve readability, especially on mobile devices. Place labels above help text when both are present.

Accessibility

Correctly associate labels with their fields to aid users of assistive technologies. Avoid hiding labels whenever possible.

Validation

Mark optional fields explicitly to avoid reliance on asterisks for mandatory fields, reducing clutter.

Fig 3.1 — Low-fidelity wireframe of a linear form using a mandatory and non-mandatory field.

Text/Select Fields: Help Text (Formatting Guidance)

Usability

Provide anticipatory guidance, such as “Mobile number: 11 digits starting with 07,” to minimise user errors.

Fig 4.1 — Low-fidelity wireframe of a mobile number field with help text.

Position

Place help text between the label and input field.

Formatting

Use subtle stylings, such as smaller font size or lighter colour, to differentiate help text from labels.

Accessibility

Ensure help text is readable by assistive technologies to convey formatting requirements effectively.

Validation

Help text reduces errors and simplifies error message implementation by clarifying input requirements.

Text/Select Fields: Text/Select Areas

Position

Place input areas below labels and help text but above error messages. Group related fields logically.

Formatting & Accessibility

Ensure consistent styling for size, spacing, and borders. Adjust the width and height of the input field based on the expected content, balancing readability with negative space.

Fig 5.1 — Low-fidelity wireframe of select (title) and text (first name) areas with different widths.

Use placeholder text sparingly, as it disappears upon interaction, potentially causing issues for memory retention and assistive technology users.

Fig 5.2 — Low-fidelity wireframe of a text field with placeholder text.

States

To ensure inclusivity, incorporate visual states (default, focus, error) to guide users. Also, avoid disabled fields.

Fig 5.4 — Low-fidelity wireframe of the different states of text fields.

Text/Select Fields: Text Areas

Usability

Text areas support freeform input, which is ideal for capturing detailed information.

Formatting

Include optional trailing icons for actions, such as a help icon. Consider input masking for structured data, such as dates.

Validation

Apply validation rules where necessary and provide clear error states for mandatory fields.

Fig 6.1 — Low-fidelity wireframe of a date of birth field with input masking in the text area.

Fig 6.2 — Low-fidelity wireframe of a linear form with different text field types.

Text/Select Fields: Select Areas

Usability

Dropdowns simplify decision-making for more than five options. For fewer options, use radio buttons.

Formatting

Add a chevron icon to indicate the dropdown mechanism. Placeholder text is optional but helpful.

Fig 7.1 — Low-fidelity wireframe of a title field with placeholder text in the select area.

Accessibility

Ensure dropdowns are keyboard-navigable and accessible to assistive technologies.

Validation

Error states appear only for mandatory fields left unselected.

Text/Select Fields: Error Messaging

Usability

Error messages should inform users of their mistakes and guide them through rectifying the issue. For instance, a message like “Your mobile number must contain exactly 11 digits” is informative and actionable.

Position

Display inline error messages below the affected field. Complement complex forms with section-level error summaries.

Formatting & Accessibility

Use distinct colours (e.g., red) and icons for visibility while adhering to accessibility contrast standards.

Validation

Trigger error messages when the field focus is lost to reduce distraction and prevent conflicting requirements. Align the messages with the help text.

Fig 8.1 — Low-fidelity wireframe of a mobile number field with generic error messaging.

Fig 8.2 — Low-fidelity wireframe of a mobile number field with dynamic error messaging.

Checkboxes & Radio Buttons

Position

Position labels close to their associated checkbox or radio button. Use indentation for nested options.

Usability

Checkboxes allow multiple selections; radio buttons support single choices for fewer than five options.

Formatting

Organise options in vertical lists or horizontal rows for clarity.

Accessibility

Ensure keyboard navigation and descriptive labels for assistive technology users.

Fig 9.1 — Low-fidelity wireframe of a checkbox button group with subtitle.

Fig 9.2 — Low-fidelity wireframe of a radio button group with subtitle.

Validation

Block progression without a selection and provide clear error messages for mandatory fields.

Fig 9.3 — Low-fidelity wireframe of a radio button group with subtitle and error message.

Buttons

Position

Place buttons where users expect them, e.g., at the form’s end, for submission actions. Consider fixed-position buttons for mobile views.

Usability

Use clear, action-oriented labels, e.g., “Submit” or “Sign Up.”

Fig 10.1 — Low-fidelity wireframe of a linear form with a submit action button.

Formatting

Include optional icons and differentiate between primary and secondary actions. Ensure consistent styles across the platform.

Fig 10.2 — Low-fidelity wireframe of a primary action button with leading or trailing icons.

Fig 10.3 — Low-fidelity wireframe of a button states (primary, secondary and tertiary).

Accessibility

Support keyboard activation and use accessible HTML tags, e.g., <button>. Avoid disabled buttons; instead, guide users on required actions.

<button type=”submit” aria-label=”Submit Form”>Submit</button>

Validation

For feedback, anchor errors to the relevant fields and provide state changes, such as loading spinners.

Fig 10.4 — Low-fidelity wireframe of a linear form with an error (anchor to section) on the submit action button.

Summary

Designing forms is a nuanced process requiring attention to usability, accessibility, and user behaviour. Clear documentation and thoughtful implementation minimise errors and improve the overall user experience. Happy form-building!