Progress screen

Use a progress screen during a flow to show that something is in progress, and will take some more time to complete.

A paper plane illustration.
Best practice
  • Use a secondary button if there’s a related step that the user could take.

Design and content

Illustration

Choose an illustration that matches the content of the message. 


Go to illustration guidelines.

Title

Title copy should:

  • be just a few words

  • summarise what’s happening

  • not have any punctuation at the end

Progress screens update the user on the progress of an activity, and the title should tell them that progress at a glance.

Keep in mind that you might be informing them about something that’s slowing progress down, or it might be something more positive, like a process almost being finished. Adjust your tone to match the scenario.

A progress screen with a long title.
A progress screen telling the user that their money is on the way.

Description

Description copy should:

  • give some further detail about what’s happened (but not repeat the exact same info)

  • be short and sweet — one or two lines is perfect

  • have a full stop at the end

A progress screen with a long description.
A progress screen.

Primary button

Primary button copy should:

  • be one or two words

  • give the user a next step

  • have no full stop

The primary button on progress screens should take the user somewhere that’s relevant to the thing that’s progressing. Or if that’s not possible, be a simple confirmation.

A progress screen.
A progress screen.

Secondary button (optional)

Primary button copy should:

  • be one or two words

  • give an alternative but relevant next step that would take the user to another place in the app

  • have no full stop

A progress screen.
A progress screen
Availability

Platform

Available

Android

iOS

Web