Utilizing Loading State to Increase User Productivity

Introduction

Loading states can be much more useful than displaying blank animated objects or progress bars in your app.

Taking the time to design thoughtful and informative loading states can greatly improve the usability and effectiveness of your app. Respect your users' time by using this simple UX concept used by gaming companies on your favourite games to set players up for success and increase gameplay.

Loading states can provide important information to users about what's happening behind the scenes in your app. Instead of just showing a generic progress bar or spinner, consider providing more specific details about what's being loaded and how long it's expected to take. This can help to manage user expectations and reduce frustration.

There are several reasons why you'd need to use a loading state. One could be when you're pulling data from another server or API or setting up a user account during onboarding or simply as a placeholder due to a poor internet connection. Additionally, loading states can be used to provide helpful tips or suggestions to users while they wait for content to load.

However, loading states have simply not evolved beyond a blank screen we stare at while waiting to get the job done and products are underutilizing a golden opportunity to improve the user experience and respect user's time during this state.

This is where gaming gets it right.

Games are complex and immersive products that cannot be unpacked during onboarding so in order not to overwhelm users or frustrate them before the actual gameplay, they utilize loading states to give players tips, character info, control tutorials, and game facts while users wait. This is why you don't notice the 60secs wait in a CODM lobby. Also why you keep hitting R2 + X on your gamepad to learn a new dribble skill to use on your friend while a FIFA match loads.

Here's how I would utilize loading states during an account creation process for a new user on an anonymous social poll app. For social apps, engagement is everything. You want to get users hooked on the value prop in less conscious clicks and this could mean less time showing them onboarding screens and walking them through creating an account quickly. This is exactly what I did here: skipped the more talks and led them to creating an account. Now there is a lot to explore on this app but little time to walk users through. So I attempted to fit some quick tips and features while the system logs the users' info and sets up an account for them. This entire process hypothetically will take 5 minutes. That's enough time and here's what I came up with

Conclusion

Next time you need to use a loading state, see if you can immerse or impress the user more by showing them:
1. Cool things they can do with your app
2. New / Unused features
3. Tips and Tricks they can try.
4. Fun fact about your brand (See Discord)

If you want to dig deeper into this concept. I Recommend this article by Alan Liu https://alanliu96.medium.com/respecting-time-on-a-loading-screen-a047f3babfb8