Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Loading spinner #28

Open
govuk-design-system opened this issue Jan 12, 2018 · 9 comments
Open

Loading spinner #28

govuk-design-system opened this issue Jan 12, 2018 · 9 comments

Comments

@govuk-design-system
Copy link
Collaborator

@govuk-design-system govuk-design-system commented Jan 12, 2018

What

Help users understand that they need to wait for something to happen.

screen shot 2018-02-20 at 13 03 02

Why

This pattern is used on GOV.UK Verify - when returning users from Verify to services, data matching takes place which can take some time, so we present a spinner and explanatory text.

Anything else

@joelanman
Copy link
Member

@joelanman joelanman commented Apr 4, 2018

This is another example of a pattern where we should lead with 'try to avoid this' - we should aim for services to be fast and responsive so users never have to worry if something has gone wrong. At the same time.

EDIT

Not sure what happened there looks like I posted half way through a sentence. I think I was going to say something like, if we're aware of a long delay that is out of our hands, or just a delay that is unpredictable (for example uploading a file), it's important to reassure the user that things are ok, and they shouldn't close the tab, navigate away or refresh.

@eliothill
Copy link

@eliothill eliothill commented Aug 22, 2018

The spinner (and loading screen) happens a couple of times on our service. We have found adding content to clarify what is happening during the 'loading' process reassured users, even if the loading screen wasn't on long enough for the content to be read.

Aware this is probably complimentary to the component but thought i'd share ✌️

Examples of the content:

Processing payment

loading

@edwardhorsford
Copy link

@edwardhorsford edwardhorsford commented Jan 22, 2019

Uploading things is a good area where this may be useful. My service processes files for a period before they can be played back to the user. We'll ajax some content in once they're loaded, but would like to have a placeholder area doing something whilst we wait.

@olliewilliams-CH
Copy link

@olliewilliams-CH olliewilliams-CH commented Feb 19, 2019

@eliothill : On your comment about a supplemental heading and spinners not running long enough to read the content...

In a previous life I did a lot of design for travel websites where searching and filtering was the biggest interaction the users had with the website. As a result we ended up designing all manner of custom spinner designs but something we found was that our users would benefit from a spinner having a minimum runtime. As a result, even if a search/filter action took milliseconds to complete, we'd always ensure the spinner was shown for just a couple of seconds at least.

Just this small amount of time helped the user understand that a thing had just happened and they could identify what that was. It likely also had an accessibility benefit(however marginal) in that there wasn't a jarring visual flash of content the user wasn't expecting and couldn't digest and that we would also have time for things like aria-live events to fire in a meaningful way.

Just a few thoughts based on my own experience of course.

@robinwhittleton
Copy link

@robinwhittleton robinwhittleton commented Mar 2, 2019

If/when this is implemented, it’d be good to include a prefers-reduced-motion media query to replace the image with Loading… text if requested.

@MalcolmVonMoJ
Copy link

@MalcolmVonMoJ MalcolmVonMoJ commented May 3, 2019

The MoJ service I worked on last year have a number of such spinners. We opted for a CSS approach rather than an animated gif. It is therefore much smaller, easier to maintain and customise.

It looks like this (uploaded a gif - the irony):
spinner

The basic CSS code we used:

.ccms-loader {
  border: 12px solid #DEE0E2;
  border-radius: 50%;
  border-top-color: #005EA5;
  width: 80px;
  height: 80px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@samuelhwilliams
Copy link

@samuelhwilliams samuelhwilliams commented Feb 13, 2020

In DIT, we're looking at using something like this to indicate that an app is being created behind-the-scenes. With a static page, we found that after a while users felt like something had broken - so want to add something dynamic/animated to help give confidence that something is still happening.

We've opted for the design @MalcolmVonMoJ shared above for now.

samuelhwilliams added a commit to uktrade/data-workspace that referenced this issue Feb 13, 2020
We find that users have low levels of confidence that their tool is
loading properly when everything on the page is static. By adding a
dynamic spinner we hope to increase confidence that 'work is being
done'.

This solution is lifted from conversation on the GOV.UK Design System
repo: alphagov/govuk-design-system-backlog#28

Ticket: https://trello.com/c/ODpRBsdj/828
samuelhwilliams added a commit to uktrade/data-workspace that referenced this issue Feb 13, 2020
We find that users have low levels of confidence that their tool is
loading properly when everything on the page is static. By adding a
dynamic spinner we hope to increase confidence that 'work is being
done'.

This solution is lifted from conversation on the GOV.UK Design System
repo: alphagov/govuk-design-system-backlog#28

Ticket: https://trello.com/c/ODpRBsdj/828
samuelhwilliams added a commit to uktrade/data-workspace that referenced this issue Feb 13, 2020
We find that users have low levels of confidence that their tool is
loading properly when everything on the page is static. By adding a
dynamic spinner we hope to increase confidence that 'work is being
done'.

This solution is lifted from conversation on the GOV.UK Design System
repo: alphagov/govuk-design-system-backlog#28

Ticket: https://trello.com/c/ODpRBsdj/828
@edwardhorsford
Copy link

@edwardhorsford edwardhorsford commented May 19, 2020

I came across a video of what the passports upload spinner looked like. The text was announced to AT.

passports-upload-spinner

@RossGower
Copy link

@RossGower RossGower commented May 19, 2020

This UI/Interaction is for a specific need where a users triggers a database export from a casework/intel system. Content still needs a bit of work. There are also states for failure

exporter

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
10 participants