Adding a new button style (btn-cancel-primary)

Background

For the 311 Project we’ve identified the need to add a new button style to handle scenarios where the primary action is to Cancel a process mid-way (or perform a destructive action).

Relevant data

• Buttons are often read alone as users skip the content in the rest of the modal window in their pursuit to get to the next step as quickly as possible. For this reason, and for accessibility (WCAG 3.3.2), buttons will be treated as headings that can stand alone.

  • Avoid the use of sentences in buttons.

• For 311: although there is a business process distinction between cancelling a service request that's been submitted and one that has not yet been submitted, this distinction may not be necessary for the user to understand. In addition, plain language that can be easily translated is a best practice. Alternatives for the word "cancel" are not as effective.

• Buttons of this nature will use “Cancel” followed by a qualifier that provides context. In 311’s case by adding "Service Request" to btn-cancel it is clear the user is cancelling the whole process and not cancelling the action to cancel (cancel the cancel).

• Modal also includes "Continue” btn-default because it provides a clear alternative path for users that is not cancelling. Performs the same action as the close “X” in the top right corner of the modal window. Include “Service Request” to provide context, similar to btn-cancel.

• Modal title is concise and contextual.

• Modal copy is concise but descriptive of the outcome of cancelling.

Options considered

	Option 1:

	Option 1:
Description	Open
Pros and cons
Estimated cost	Small

Action items

Update

Outcome

Approved copy for modal window and button is:

Cancel Service Request

If you no longer want to submit this service request select "Cancel Service Request". All your information will be deleted.

Continue Service Request [btn-default] Cancel Service Request [btn-cancel on right side]