Yahoo Design Pattern Library

Terms of Service

Working Solution · Last modified July 15, 2009

Eliminate the distracting or invisible terms of service (TOS) checkbox from sign-up forms by combining consent to the agreement with the gesture of submitting the form. Make sure people can back out of the form if they don't agree to the terms. Clearly link to the text of your terms of service in a printable format.

What Problem Does This Solve?

When a form includes a checkbox for the user to indicate agreement to terms of service (TOS), the user often doesn't notice the checkbox and is confronted with an error message and a demand to read and agree to the terms of service before completing the form. There's no reason to place the user in this position, where they may feel affronted merely because they did not notice a checkbox.

When to Use This Pattern

Use this pattern for check-out flows and sign-up forms.For example, a context where this pattern applies is a form that enables recruiters to buy job ads or get access to resumes or other recruiting services from Yahoo Hot Jobs.

What's the Solution?

Consent to the agreement is expressed in the call-to-action button ('Agree and Continue').

The form offers an option to exit without agreeing ('Cancel' or 'Don't Agree / Cancel Order').

A statement makes clear that submitting the form constitutes agreement to the terms ('By clicking you agree...').

The terms of service (TOS) text is available via a clearly labeled hypertext link (Terms of Service').

The TOS copy is supplied in a printable format.

Thus, agreement to terms of service is integrated into the check-out flow:

Why Use This Pattern?

The goal of this pattern is to make the experience of completing the form better for the user and to avoid interrupting the user or making them feel as though they have made an error.

Combining the agreement with the call-to-action button, and clearly labeling the option offers a streamlined experience in the natural flow of filling out the form. The experience is somewhat analogous to signing a document.

It is important to offer an option to exit (cancel) the form without making the agreement, giving the user an escape hatch and making their consent to the terms meaningful, given that they had an alternate choice available.

Linking to the TOS provides direct access to the legal copy but avoids cluttering the page with either a large amount of verbiage or an embedded texts box or iframe.

The language preceding the buttons clearly explains that clicking means agreeing, so the legal force of the agreement is clear.

Offering a printable TOS is a best practice that enables the user to keep a copy of what they agreed to (or show it to a legal expert before agreeing).

These five elements of the pattern work in tandem. Removing any one defeats the purpose of the pattern.

Finally, this pattern represents a best practice in the industry, seen in use by companies for whom check-out flows are core experiences (such as PayPal).