Blue Prism Loading Animation

Brief

  • Design a Blue Prism loading screen.
  • We’re most interested in seeing your thought processes here (show your work!)

Let's get started

Okay so as with any piece of work I tend to start by asking a bunch of questions.

  • What is the loading screen for?
  • Is it supposed to show a loading app at the start of a journey, or does it link parts of a journey together?
  • How long does this loading take place at the median?
  • How load does this process take place at the lowest end?
  • What happens if loading fails?

As I’ve no more details in the brief I’m going to make some suggestions based on different scenarios.

It's for a loading screen that takes 4 seconds

Humans perceive speed in ways that are different to the technical ways we measure speed. It’s important to start fast and stay fast. In web apps google thinks anything that takes less than 5 seconds to load is acceptable.

Our app loads in 4 seconds, so my instinct is to side with a pattern known as a skeleton screen. This screen puts placeholder elements for the interface on the screen early. Then when the app loads they update with real data. This kind of screen has shown to decrease the perceived loading time and used by: Google, Medium, and Slack.

With this kind of loading in place we'd ask for feedback about how fast the app felt. Our metrics should always be happy customers, not numbers.

Skeleton loading screen.

It’s for a loading screen that takes 8-10 seconds

For an app that takes a good deal longer to load than we'd perceive as fast, I’d manage the expectations of our users.

We can use the load time to communicate what is happening. And make it feel faster by adding touches of personality.

We could do this using animations, a very common pattern we see in most apps. Or micro copy to make light of the delay by advising the user to go a brew up for example, or rest their eyes.

This could improve the perceived performance and tell users that we know it's slow but we value their time.

Blue Prism loading screen.

It’s for a transition screen and takes about 20 seconds

Most users will abandon loading a web page if it takes more than 5 seconds to load on their first visit. But what about users who are already committed and need to transition from one part of an app to another.

Rather than show an indeterminate loading animation, we can do much better. Like before we can entertain and inform our users. We can add conversational flourishes that engage our users.

For example if a user has submitted information into an app, we could feedback that we have that information saved and we’re waiting for it to process.

We could throw in that it usually takes about 20 seconds to happen, and by the time the user has read the screen, there's only 10 seconds left.

We can add in that they will go to the next step of the process. Again we’re manipulating the perceived performance of the loading screen not actually making it do anything faster.

Manage expectations loading screen.

What happens if it doesn't load

Not a scenario anyone wants to entertain, but it’s unrealistic to assume 100% uptime for any product.

If the application was to lose connectivity I’d allow it to recover by retrying the loading process until it either works or a fixed time has elapsed. Lets say something like 25 seconds.

After 25 seconds we can continue to try and get back online and finish the loading process in the background. We can update the UI to acknowledge that it’s taking longer than it should, and we’ll keep trying as long as the tab is open. Once we've timed out we let the user know.

didn't load screen.

We could update the page title when it's loaded to bring the users focus back to the app. As a PWA or native app with notification permissions, sending a push message for this would be even better.

didn't load screen two.

Choosing our approach

Once we’ve got our ideas together, we would build prototypes from a design system and run a qualitative test to help us choose the right experience.

With the results from the testing session we could specify the work in more detail for our development team to pick up and build.

With the code out in the wild we could A/B test and survey users to get data to help confirm these changes are having a positive impact, but I would be more interested in getting the opinions of our users through a forum or other interactive medium such as twitter polls.

Prototype

As we're more concerned about the journey than the outcome in this example. I made a prototype in Figma that got the basic concept across, you can see this here - tap or click to start the animation.

Figma Blue Prism prototype.

Add some flair

Animating in figma isn't easy so I built a demo on codepen.io. This allowed me to take a bit of time to create the effects using CSS animation I had in my head.

Blue Prism animated GIF.

It didn’t take much effort to mock up the prism as if it was refracting light by using css keyframe animation on each path in the SVG. By animating opacity at staggered intervals we get this twinkling effect.

And before the loading is done the prism fills out into the completed logo.

Summary

So we've got 3 different loading strategies we can design for. And we've got a plan for when we drop offline.

What do you think?