Skip to main content

Stopgap

Introduction#

The Stopgap is a page type used to provide customers with an interstitial loading or processing page.

Purpose#

  • The purpose of the Stopgap is to inform the customer that there is a temporary pause in their experience, whilst we action or process the information they have provided. It should be clear that this is the expected behaviour of the journey they are using.
  • This page type should provide a clear message to reassure the customer.
  • If possible, we should set their expectations by providing them with a realistic time frame of how long they are likely to have to wait.
  • If closing or refreshing their browser window will result in failure, we must convey this message clearly.

Example#

Content guidance#

Use the ns-landmark - lakeside variant to display clear messaging.

Include the ns-icon - loading within a <p slot="paragraph"> to provide visual feedback that their action is being processed.

The copy must be in plain English, and help the user understand what is happening.

You should not use:

  • Generic messaging such as ‘Loading’ or ‘Processing’
  • An unrealistic or dishonest time frame length
  • Include additional content that could encourage them to abandon this page and potentially result in failure

Best practice#

💚 Do's💔 Don'ts
Use for wait times in excess of 10 secondsUse as a placeholder when loading in individual components
Use for end of journey processing and purchasesRely on this page type instead of optimising your journey
Communicate the message in a clear and concise way as possibleEncourage the user to abandon if it would result in failure
Provide a transparent expectation of their wait time

Principles to follow#

CreativeTone of voiceKeywords
Modern and dynamicBe active, Be naturalPromotional, Informative

Feedback#

  • Do you have insights or concerns to share? You can raise an issue via Github bugs.
  • See all the issues already raised via Github issues.

💩 🎉 🦄 If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.