Loading patterns
 
We have instances across different services where a loading pattern is necessary to show users something is happening. This is needed for circumstances such as:
  • page latency issues (where a user experiences a delay when continuing to a new page in the service)
  • uploading images or documents
  • show more (on long lists)
 

Guidance

 
 

Discussion

 
 

Examples on GOV.UK

This is an example how the 'Find an apprenticeship' exemplar are using an in-button loading pattern for page latency.
 
  • Find an apprenticeship
This is the loading pattern for finding an address in action:
 
 
  • GOV.UK Verify
 
Passports
We have two locations where an interstitial page is required to redirect users to another part of the service. These occur before sending users to the payment provider, and after they are sent back. The latter instance isn't required, but provides a method for us to try to stop users clicking 'back' and returning to the payment provider.
 
  • Happy path:
 
  • Unhappy path (redirect fails):
 
 
Why we do this:
Having content show briefly before the redirect is distracting. This pattern delays showing the 'click here to continue' content until after the redirect should have happen. It's done using javascript so if javascript is disabled the content is shown by default.
 
  • Photo uploads:
We use a spinner and some cycling text to cover two user needs. 1. Showing something whilst an upload happens. 2. Indicating that *something* is happening. We found that understanding of our 'automated' processes increased greatly with this cycling text. The cycling text shows regardless of if the upload finishes sooner.
 
 
  • Accessibility of progress indicators
Here's the markup that Passports uses to communicate the upload progress to users of assistive technology:
<div id="progress-container" class="progress-container" role="region" aria-live="assertive" tabindex="-1">
  <p id="progress" class="progress" role="progressbar" aria-valuenow="99" aria-valuemin="0" aria-valuemax="100">Uploading image</p>
  <div class="percentage"><p id="percentage">99%</p></div>
</div>
<div class="column-two-thirds hide">
  <header>