4

Many of the loading spinners on Chase bank's rewards portal have a "Pause Animation" button below them. Is there a reason to include this below animations?

pause hourglass button

5
  • 8
    Looks like overengineering to me Jun 28, 2018 at 6:40
  • What's next? Change animation fps? Aug 27, 2018 at 9:50
  • 1
    The page didn't have enough useless stuff on it so... Aug 27, 2018 at 12:08
  • 2
    $10 says someone complained about the animation being distracting in QA and this was the smallest solution to make everyone happy. Also, combining both opinions into the final product doesn't really solve the root problem, which is an flashy icon that draws attention to the wait animation (the button draws even more attention) and a long loading time which might be harder to solve, but nonetheless would be a far preferable UX
    – KyleMit
    Oct 26, 2018 at 14:38
  • @KyleMit: "I clicked 'PAUSE ANIMATION', but only the circle stopped rotating, while loading continued! Can you make it so that loading is paused, too?' ;) Apr 24, 2019 at 13:09

4 Answers 4

1

It's a WCAG accessibility requirement (2.2.2):

For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential

Animations distract from other content on the page, and this can cause issues in individuals with attention-related disabilities.

0

The one reason I can think of (which only applies to mobile devices) is that it can save processing power, and thus, battery power.

When I turn my phone onto Battery Saving mode all animations stop being processed. This in turn saves my battery juice for a little longer by not running those processes.

Since your example is on a desktop/laptop or otherwise, I would guess it might be due to incompatibility in some browsers... maybe it looks weird in IE?

Otherwise, as @LisaTweedie said, it's over-engineering.

0

Root problem is the loading indicator is way too overbearing (IMHO you could get dizzy if you stare at it too long)

So rather than fix the loading indicator and change it to something more elegant and fitting, a pause button was added.

0

While it's hard for us to know exactly why they implemented this, I agree with Izquierdo that this is probably for accessibility. (Though the implementation itself is not great imo)

Anyone who wants to take this accessibility option into account. CSS now has a prefers-reduced-motion media feature which you can use to check if the user wants to disable motion, like this animation. If true you could hide the animation and instead show some text, e.g.:

<img src="..." class="loading-animation">
<span class="loading-text">Data is loading...</span>
.loading-animation {
  display: block;
}
.loading-text {
  display: none;
}

@media (prefers-reduced-motion) {
  .loading-animation {
    display: none;
  }
  .loading-text {
    display: block;
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.