{"id":99441,"date":"2022-06-16T09:23:58","date_gmt":"2022-06-16T16:23:58","guid":{"rendered":"https:\/\/thegood.com\/?post_type=insights&p=99441"},"modified":"2024-06-24T12:04:41","modified_gmt":"2024-06-24T19:04:41","slug":"loading-page-design","status":"publish","type":"insights","link":"https:\/\/thegood.com\/insights\/loading-page-design\/","title":{"rendered":"9 Examples of Inspiring Loading Page Designs"},"content":{"rendered":"\n

Key Takeaways<\/h3>

By the end of this article, you should have the knowledge and resources to \u201ccheck the box\u201d in these areas\u2026<\/p><\/div>

  • Your loading page design offers an opportunity to reinforce your value proposition, strengthen brand awareness, and have a little fun as well. <\/li>
  • You can also use loading messages to educate your viewers on new app or product features because you have a captive audience. <\/li>
  • Loading screen designs that show progress, like skeleton screens or loading bars, make the load time seem faster to users, which can decrease drop-offs.<\/li><\/ul><\/div>\n\n\n\n

    Your website loading page is pretty useful – it tells your site users that yes, your site is really loading normally. But it\u2019s also probably at least a little bit boring. <\/p>\n\n\n\n

    And while there\u2019s nothing terrible about a boring loading screen – boring still works – it does mean you\u2019re wasting valuable space, particularly in your mobile experience. Your loading page offers a unique opportunity to offer your visitors a little entertainment and even some meaningful teaching moments. <\/p>\n\n\n\n

    Loading pages: an overview<\/strong><\/h2>\n\n\n\n

    Loading pages have been part of websites from the very beginning because they serve an important purpose – telling your website visitor that your site is, in fact, loading. The classic example is a little loading spinner graphic. <\/p>\n\n\n\n

    Seeing one of these reassures your site users that the content they\u2019re looking for is actually loading, not frozen or broken, and that makes their wait more tolerable. That\u2019s fine, but in a world where space on mobile screens is very limited and you have a lot to communicate, you could (and should) aim for more. <\/p>\n\n\n\n

    \u201cMore\u201d, in this case, can take a couple of different forms. You can optimize your current loading screen with content that\u2019s fun, relevant, and\/or educational to keep visitors from getting impatient. And you can even make your loading page time longer than it needs to be to enhance the user experience (yes, you read that right!). <\/p>\n\n\n\n

    What load pages mean for conversion rates<\/strong> <\/h2>\n\n\n\n

    Your website probably takes at least a few milliseconds to load<\/a>. That\u2019s normal, and customers and site users know and expect it. But they get concerned when it seems like nothing is happening after a click – is the link broken, the site down, or something else going wrong? <\/p>\n\n\n\n

    Website conversion rates drop by an average of 4.42%<\/a> with each additional second of loading time, between 0-5 seconds. And half of online shoppers<\/a> expect a page to load in 3 seconds or less, which doesn\u2019t leave you with a lot of room for error.\u00a0<\/p>\n\n\n\n

    By assuring them that all is well and the site is loading normally – and potentially giving them a little entertainment too – your loading screen can help you hold onto more visitors and improve the overall user experience. <\/p>\n\n\n\n

    But if you\u2019re using that space in a more thoughtful way, with the user experience and a content strategy in mind, your loading page can actually take your website experience to the next level. <\/p>\n\n\n\n

    9 examples of loading page designs <\/strong><\/h2>\n\n\n\n

    These examples are proof that loading screen messages don\u2019t need to be space-fillers. <\/p>\n\n\n\n

    1. Duolingo<\/strong><\/h3>\n\n\n\n

    Duolingo is probably the best-known example of a fun, fact-filled loading screen. Their highly recognizable owl mascot, Duo, pops up as the app loads with facts, reminders, and encouragement for users. <\/p>\n\n\n\n

    It turns the load time into an opportunity to strengthen brand awareness and retention, instead of simply starting at a loading spinner. (And it\u2019s pretty adorable as well.) <\/p>\n\n\n\n

    \"loading<\/figure>\n\n\n\n

    Source<\/em><\/a><\/p>\n\n\n\n

    2. TurboTax<\/strong><\/h3>\n\n\n\n

    TurboTax has a highly sophisticated backend, and they can truly calculate what users owe, or are owed, in a flash. But they found that their users didn\u2019t really believe that TurboTax was processing all of their data that quickly – they got suspicious that their information wouldn\u2019t be accurate, because the loading was too fast to believe. <\/p>\n\n\n\n

    So they did something that seems counter-intuitive – they slowed down their loading time, and added a loading animation that \u201cshows\u201d the data processing happening. This reassures their users that everything in their tax returns is accurate. <\/p>\n\n\n\n

    \"turbotax<\/figure>\n\n\n\n

    Source<\/em><\/a><\/p>\n\n\n\n

    3. Slack <\/strong><\/h3>\n\n\n\n

    Slack is all about connecting people, and their loading screen is no exception. Users can add quotes for their teams to see as they load the app on desktop or mobile, adding some whimsy, inspiration, or just humor to the loading experience. <\/p>\n\n\n\n

    And if there are no quotes added by the team, Slack often pops helpful tips for users into their loading screen. It gives the user help to get the most out of Slack while they\u2019re waiting to get to work. And teaching users how to get more value out of the app within the app experience itself is good for retention and the overall UX. <\/p>\n\n\n\n

    \"slack<\/figure>\n\n\n\n

    Source <\/em><\/a><\/p>\n\n\n\n