Designing a Loading Screen to Fit Your App
Whether you’re submitting an online form or waiting for your favorite app to load, we’ve all been there… trapped in the loading screen of hell. App loading times are often unavoidable; designing a suitable loading screen can have a strong impact on your overall user experience (UX).
I recently joined Walmart Labs as the Product Manager of the UI/UX team under the Software Delivery and Enablement (SDE) organization. SDE’s mission is to provide a platform of tools that accelerate the software delivery process for Walmart applications (e.g. storefront, web, and mobile apps). The goal for my team is to design and develop beautiful interfaces that provide an irresistible experience for our end users.
We recently deployed an internal performance analysis tool that allow users to enter their site information and see frontend design recommendations. As with any app development project, we came across several challenges. One challenge we faced (you guessed it) was the loading screen.
After users enter their site URL and click run, the tests take an average of 3–5 minutes to complete. Without an appropriate loading screen design, this extensive wait can lead to an unpleasant UX. Loading screens –particularly ones that take longer than 10 seconds — should provide feedback answering two key questions:
- What is happening?
- What will happen next?
With these questions in mind, we evaluated several design options to minimize wait time uncertainty.
Design Option #1: Progress Bars
Giving users a determinate wait time, even if the wait is long, is better than leaving users uncertain. A research study found that it is hard to keep a user’s attention for more than 10 seconds on a page (let’s call this the 10-second rule) and anything beyond that may risk the user leaving the site. Progress bars ease wait times greater than 10 seconds by providing transparency into the total wait time.
Progress bars typically show completion percentage or time remaining based on actual backend operations. Building this feature requires continuously obtaining backend responses that updates the progress bar throughout the test.
However, the only backend response we were able to obtain occurs after the test has fully completed, making a true progress bar not possible. We could periodically advance the progress bar over time — say increase 5% every 10 seconds — but that would falsify the UX and lead to other frustrations. For example, if the progress bar moves to 95%, but the test has not completed yet, the progress would stop moving and users will think the app has frozen.
Design Option #2: Loading Spinners
The next option we looked at was the infamous loading spinner. Loading spinners provide an animation to show the app is still in progress. Based on the 10-second rule, loading spinners are most optimal for wait times less than 10 seconds, thus not ideal for our use case. Having users watch an indeterminate spinning wheel can increase bounce rates and ruin the UX. Unfortunately, schedule pressure forced us to use a spinner for the initial release.
As expected, we immediately received negative feedback and went back to the drawing board.
Design Option #3: Pro Tips
A tricky way to alleviate perceived wait time is to keep users occupied with something else. We received a suggestion to add Pro Tips under the loading spinner to distract users while they wait. The idea was to periodically cycle through a list of recommendations that will help users improve their site performance.
This option can keep users occupied for a while, but the effectiveness is limited — especially for returning users. This approach also doesn’t solve the main problem — letting users know what is happening and what will happen next. This option does, however, offer user value and can be combined with other loading options to be fully effective.
Design Option #4: Static Indicator
The last option we evaluated were static indicators. Static indicators usually lack active feedback and pertinent information for users since they are just images or text. In spite of that, we explored how we could leverage static indicators in a more meaningful way.
Since our goal was to minimize wait time uncertainty, we decided to provide explicit details that inform users of the runtime duration. In addition, we provided suggestions for users to perform other tasks while the test is running, setting their expectation and providing a distraction.
After the test completes, the static indicator disappears, a success message pops up, and the form resets so users can submit another run. This simple but effective loading page provides wait-time transparency and lets users know what is happening and what will happen next.
Design Completion… For Now
Our users are satisfied for now, but we’re still exploring other effective design options to alleviate perceived wait times, such as creating mesmerizing graphics or interactive loading screens. Perhaps even a combination of all the above?
Loading screens are not one size fits all; they should be optimized to suit your app’s specific use case, set user expectations, and answer what is happening and what will happen next.
Walmart Labs is continuously solving problems to enhance the software delivery process and user experience. If you are interested in joining our mission towards irresistible UX designs, check out our careers page at careers.walmart.com/technology/ux-design.
Shout out to Amanda Bittinger and Yash Shah for designing and implementing the performance analysis tool.
