/
Notice of Collection and Terms of Use

Notice of Collection and Terms of Use

Status

Done

Impact

High

Driver

Multiple versions of the Notice of Collection and Terms of Use pages are in place on the website

Approver

Contributors

@Sara Greenwood

Informed

Due date

Resources

Outcome

Documented:

Before you Begin and Terms of Use

Notice of Collection

 Relevant data

 Background

There are multiple patterns being used for Before You Begin / Notice of Collection and Terms of Use. This is to document the standard.

Examples of Current Patterns in use on Toronto.ca

Style

Example

Style

Example

Notice of Collection is shown at bottom of page. No Terms of Use.

  • Often used on single page applications

  • Font is small, and grey (#737373)

  • Pros:

    • Takes us less space

    • Always visible

  • Cons:

    • Reading order - it appears below the action button so may be missed

 

Only shows a Notice of Collection

Agreement is in All Caps

Proceed Button is on a left hand side

Pros:

  • .

Cons

  • Note that according to Legal, you do not agree to a Notice of Collection, only to TOU.

 

Shows a Before You Begin, Notice of Collection and Terms of Use sections.

  • Pattern was established for Short-Term Rental Registration and has been used elsewhere on the site.

  • User must agree to Terms to proceed

  • Described more fully in “Proposed Pattern” below

  • Pros:

    • All information is on a single page.

    • Pattern creates a common style

  • Cons

    • Can be a long page.

 

Only shows Terms and Conditions

Not styled in a panel. Buttons for Agree and Disagree.

Pros

  • Explicit “Disagree” but in other patterns users can just cancel or close browser

Cons

  • Not styled - looks like another webpage than part of the application.

 

 

 

Examples of Error Styles

Style

Example

Style

Example

Field is highlighted in Red with a Red cross to indicate error

Error message is shown below the field in Red text.

Matches error style for form field validation.

 

Field is highlighted in Red, but no cross.

Error message is shown in Red text within a Red alert box.

 

 


Proposed standard

Before You Begin

  • A short bullet point form indicating what the user will need to complete the form. This should focus on things that are needed in hand (credit card, document, reference number) versus things that they will know (name, address).

  • Focus on short - detailed information about completing the form can be managed on the preceding informational pages.

Notice of Collection

  • Notice of Collection consists of the legal authority to collect personal information, the purpose of the collection and a contact for questions. This information is specific to the form and is created with CIMS (confirm?)

  • A user does not need to “agree” to a Notice of Collection.

Terms of Use

  • The Terms of Use has standard language that is the specified for the application. It should be reviewed by Legal (confirm?)

  • To improve the length of the page, the Terms of Use can be put in a scroll section.

Agreement

  • From Legal, a user can only agree to the Terms of Use, they cannot agree to a Notice of Collection.

  • Suggested wording for checkbox: “I have read and agree to the Terms of Use.”

  • Checkbox should in a sentence case, not all caps

  • Error message style should match the style used for form field validations, with the box highlighted in red with a red cross, and the text in red below.

Buttons

  • Typically the buttons are Cancel and Proceed

    • Cancel

      • Optional (may not be required)

      • Style: btn-cancel

      • Location: Left

      • Action: Exits application to preceding page

    • Proceed

      • Mandatory

      • Style: btn-primary

      • Location: Right

      • Action: Advances to the application

    • Note that “Previous” is an incorrect label and should not be used.

Frequency

  • Once the user has agreed to the terms, the screen will not appear again until

    • X time has passed (time set by developer) or

    • The browser cookie has been removed on the user’s end.

  • The default time can be changed as needed

 

 Options considered

 

Option 1

Option 2

 

Option 1

Option 2

Description

 

 

Pros and cons

Estimated cost

Large

Medium

 Action items

 Outcome

Related pages