10 Best Loading Page Examples For SaaS That Users Actually Want To See

Loading pages a great way to make waiting for something to load a little less painful. However, most companies don’t take advantage of this feature during the UX design process.

This is a chance for you to beat the competition!

This blog post will tell you:

• What a loading page is
• Why loading pages are important
• What makes loading pages different from loading spinners and skeleton screens
• Which companies make great use of loading pages and how
• How you can improve the loading time of your app

Without further ado, let’s dive into the 10 best loading page examples from SaaS companies.

TL;DR

• Loading pages are screens that users see when the app they are using is being loaded.
• They are important because they help users focus on the loading progress, not on the loading time. It’s also a confirmation that things are moving forward, and the app isn’t broken.
• You can use loading pages to inspire and delight users, educate them, or reinforce your product’s positioning.
• Most SaaS applications use loading spinners in UI design, but they make users feel uncertain about whether the app is being loaded or not. So it’s worth going one step further and using something else.
• Skeleton pages visually show users what they can expect when the app will fully load. Therefore, users will perceive your app as faster than it actually is.
• Some examples of loading pages by SaaS companies: Userpilot, Heap, Mural, WeTransfer, Slack, Intercom, Productboard, UIPath, and Figma.
• These companies use loading pages to inspire and educate users, promote other products, update users on progress or reinforce the product’s positioning.
• Note that loading pages are not the ultimate and perfect solution for making users wait. Your best option is to make your app load faster.

What is a loading page in SaaS applications?

A loading page is what users see while a screen of your application is being loaded. When this takes more than a split second, it increases user friction, which ultimately translates into users leaving your app.

Why are loading pages important?

There are a few reasons why loading pages are important. Sometimes, how fast the app loads is not up to you. Having a loading page in place can:

• help people to focus on the loading progress rather than the time they spend waiting
• confirm that the app isn’t broken and something is actually being loaded
• put users in a good mood by inspiring and delighting them
• reinforce your product’s positioning
• educate users on how to use your app more effectively

Now you can either jump straight to the examples or continue reading to find out about two alternatives to loading pages.

Loading page vs. loading spinner

You may already be very familiar with loading spinners. The most common example of them is loading spinners used by social media tools like on Facebook:

Loading spinners are widely used in UI design as progress indicators, but the question is: do they actually fulfill their role?

Well, not really.

But what they certainly do is making users feel uncertain, because a loading spinner does not really show the loading progress. Additionally, users don’t know what to expect when the loading process ends.

Loading page vs. skeleton screens

Skeleton screens have one task: to shift users’ attention from the loading time to the loading progress.

They also tell users what they can visually expect from the next screen after the content has loaded. It creates a sense of something that’s called “gradual progress” (a kind of assurance that the app is working fine).

Also – and this may be the most important benefit of skeleton screens – they make users perceive your app to be faster than it actually is. This is important because all user interfaces are designed for people. Thus, they need to convey at least the illusion of speed.

The more information you can give users about the waiting time (and loading progress), the better.

Benefits of using skeleton screens:

• Users will perceive your app to be faster than it actually is
• You eliminate surprises
• A clear indication of loading process as the user interface is loading gradually
• They show exactly what’s loaded and what’s not

Best loading page ideas for your SaaS

Most SaaS companies decide to use either a loading spinner or skeleton screen. However, if you are interested in using a loading page instead, here are some great examples of how to do it well.

We’ve done the research for you and have gathered some of the best examples from SaaS companies to hopefully inspire you.

Userpilot’s loading page inspires you with quotes

Userpilot helps product teams with building in-app experiences that drive growth. It uses a Chrome extension that needs to load on top of your app. And it needs to happen before you can start building in-app experiences for your users.

To show the users the app is loading, we inspire them with quotes they can relate to. This makes the wait a little more pleasant while also driving their attention to where they need to engage with the UI experience builder.

Heap’s loading page adds a touch of personality

Heap is a tool to check and track what users do inside your product or on your website.

Heap adds a touch of personality to the app through a paraphrased quote from The Flintstones (“Yabba Dabba Doo”). Such a message also reinforces what the product is related to with a pun (“data”).

Mural uses loading screens to educate users on using the app

Mural is a digital workspace for visual collaboration.

Mural thought that it’s would be a great idea to educate users while they are waiting for the next screen to load fully. Therefore, their app loading page displays short tips on how to use their platform more efficiently.

WeTransfer uses loading pages to support creative work and educative content (WePresent)

WeTransfer helps people transfer files and makes the entire process as easy as pie.

While it may seem counterintuitive, what users see on the loading page doesn’t have to be strictly related to the app. WeTransfer is a great example of this, as they not only help transfer files but also present creative and educative content.

In other words, they tell stories. And who doesn’t like stories?

WeTransfer promotes their PRO version using loading screens

Promoting creative work and telling stories aren’t the only things WeTransfer uses loading pages for. They also promote their PRO version via loading screens. This way, while the user waits for their files to be transferred, they can learn things about the app. This is a great way to drive account expansion in Saas.

Slack’s loading page reinforces product positioning using team quotes

Slack is a business communication platform that aims to make collaboration easier and pleasant experience.

Slack went one step further and started to use team quotes on loading pages to reinforce product positioning. Such quotes may inspire them or make them reflect on something.

Also, Slack decided to use a mix of a loading page and skeleton screen, as you can see in the background. Users can then anticipate where something will load.

Intercom’s loading screen updates you on progress

Intercom is a messaging platform for better communication between companies and customers.

The Intercom app takes less than 1 second to load fully, so it took me a few tries to catch it. However, Intercom has a backup plan if loading the app takes longer – in such a case, you will see two things:

1. A spinning wheel that lets you know the things are loading
2. A message about what’s happening in the background (like “Getting everything ready…”)

Productboard’s loading screen greets you then inspires you

Productboard is a product management platform dedicated to product managers.

Productboard uses multiple messages and logo animations to let users know that things are moving forward.

First, Productboard greets users and uses this opportunity to reinforce its positioning.

Then they inspire users with quotes and funny messages aimed at their user persona.

A sneak peek into the UIPath Orchestrator loading page

UIPath Orchestrator is an automation management tool.

Here is a sneak peek into their loading page. They use a simple animation to let users know that the app is loading. The point being, if you don’t have inspiration for a better loading page, at least add a small animation to reinforce to the user that the app is actually loading.

Figma’s loading screen – a bit of everything

Figma is a design platform for teams.

Figma follows the good design practices I talked about in the beginning. They use not only a skeleton page but also a loading bar and logo animation.

All those things make an impression that the app loads really fast.

How to improve the loading time of your app

Designing a pretty and inspiring loading page is not the ultimate solution for making users wait. Instead, the best option is to have a fast loading time.

To find best practices for improving load time, I asked the SaaS community for advice. As a result, I got these 5 steps from Cristian Vitales, the CTO and Co-founder of FindThatLead.

1. Minify all Javascript and CSS files. You can use different strategies for that like uglifyJs or Terser
2. Concatenate (combine) all the files in one, so you only need to load one file at the beginning (you can use Gulp or Grunt to automate that process)
3. Use a specific folder for assets / JS / CSS in your production environment
4. Load everything that is not important with defer/async. You can also use Lazy Load techniques
5. Load the basic JS/CSS files and then, while those load, start lazy loading other things (if this is an Angular app, the loading times in the beginning hurt, but later, the transitions between pages improve a lot because everything is loaded)

Here’s what the result looks like after focusing on speed.

Conclusion

Loading pages are important to assure users that the app is loading so they are not confused or irritated by the waiting time. These pages are also a great opportunity for you to engage, delight, or educate your users.

Furthermore, it might be a good idea to mix a loading page with skeleton screens as Figma did. You’ve had a chance to look at other great examples of using loading pages by popular SaaS companies. Now it’s time to put that knowledge into action and design your own loading page.

Apart from loading pages, you can engage users in other ways. Get a Userpilot demo and find out how!

[/vc_column_text][/vc_column][/vc_row][/vc_section]