Modal

Modal dialogs appear as an overlay on a page. They should be used when Thumbtack requires a user response or needs to explain critical information without losing context of the page beneath it.

When to use

Use when you want a user to confirm an important action or to get information like signing up or logging in. Since modals do interrupt a users’ experience, they could be perceived as annoying or bothersome and should be used with discretion.

When not to use

Do not use a modal without a trigger from the user, for example on page load. Also, do not use if there is a modal already being displayed.

How modals arrive is just as important as the content they contain. Animation does more than provide a visually pleasing experience. They indicate to the user that there is something on top of the content they are interacting with.

By default, modals can be closed by clicking on the “x” in the upper right hand corner of the container or by clicking anywhere outside of the container which is called the “curtain”. The animation of the arrival is used, just in reverse.

By default, the focus is placed on the first item a user can select, allowing them to quickly select the requested information, or submit the modal.

• 1

  Scrim

  Covers the underlying content while providing focus to the information being served in the container.

• 2

  Illustration

  Visual tie-in to modal messaging. Uses artwork from the illustration library. Should be omitted if no value add.

• 3

  Title

  Reinforces context from the initial trigger on page while providing an overview of the modal.

• 4

  Description

  Introductory text that supports the title and overall intention of the modal.

• 5

  Content

  Primary information, interactive elements, or a specific task is presented to the user. This will the scrollable region if content is taller than the modal height.

• 6

  Actions

  Contains the primary action of the modal. All modals must have a primary CTA, and can support secondary CTA's as well. These actions should speak to and reinforce completing the action they are being asked to complete.

• 7

  Close action

  UI element to close the modal experience, including the underlying scrim.

Modals are offered in three types to best suit the user experience needs.

Standard dialog that temporarily overlays the main content of a digital interface to present additional information, options, or interactive elements to the user within the current context of the experience.

Only delivered in 624 size

Modals are offered in multiple widths for the large responsive breakpoint or desktop experience. Selection of sizing should is dependent on the intended use case.

Visually engaging modal approach used to be part of a marketing strategy to drive user engagement and conversions by grabbing the user’s attention through strong visual headers.

Only delivered in 624 size

Typically appears after the user has initiated a significant action, such as deleting a file, submitting a form, or completing a purchase, to ensure that the user understands the consequences of their action and to prevent accidental mistakes.

Only delivered in 512 size

How modals arrive is just as important as the content they contain. Animation does more than provide a visually pleasing experience. They indicate to the user that there is something on top of the content they are interacting with.

By default, modals can be closed by clicking on the “x” in the upper right hand corner of the container or by clicking anywhere outside of the container which is called the “curtain”. The animation of the arrival is used, just in reverse.

By default, the focus is placed on the first item a user can select, allowing them to quickly select the requested information, or submit the modal.

Context is key. There needs to be a direct connection between the trigger (i.e. a button or link) and the modal that follows. This can be achieved by directly repeating the words of the trigger or using related terms. Maintaining a sense of connection between the CTA and modal transition is important to keep and maintain a consistent user experience.