Whether we’re walking through the ornate doors of an elegant hotel, greeting someone you’ve never met, or opening an app for the first time, we form our initial opinion on whether we’ll stay or leave in mere fractions of a second.
First impressions count.
So how should product designers make a memorable first impression when gilded doorknobs and gracious doormen aren’t available? The answer is a splash screen: a short introductory screen that sets the tone for the rest of the user experience, smooths out loading delays and ensures each users’ early experience is a positive one.
(Use InVision Studio’s industry-leading animation features to create your own splash screen)
Not everyone agrees, however, on whether splash screens add value. Depending on who you ask they might argue splash screens are necessary for setting context, or that they’re the biggest time waster since Game of Thrones’ final season.
There’s more that goes into designing an effective splash screen than first meets the eye. Let’s dig into why splash screens are essential—but only for some apps, websites, and products. We’ll explain a few best practices you can follow when designing splash screens, and we’ll look at some splash screen examples to inspire your own designs.
What is a splash screen?
A splash screen or launch screen is a short introductory screen shown when a user launches an app, website, or digital experience.
Like these:
Usually consisting of a company logo or name, a branded background image or graphic, and an optional loading indicator or animation, splash screens make a bold first impression and build brand awareness.
The origins of splash screens
Originating in the comic industry, a splash or splash page is “a large, often full-page illustration which opens and introduces a story … its purpose is to capture the reader’s attention, and can be used to establish time, place, and mood.”
An example of a double splash page in a comic book. Image via Comic Book Collectors Club
A digital splash screen—whether shown during boot-up, on starting an application, or loading a website—serves a similar purpose. A well-designed splash screen captures the attention of users with eye-catching graphics, bold titles, and other design elements while the application loads in the background.
Splash screen examples to inspire you
Splash screens are a great way to welcome users to your product, website, or app, literally making a splash on their screens and inviting them to explore further. Take a look at some of these examples that might inspire your own designs:
TikTok and ChefsFeed
United and Yummly
OpenTable and Lime
Waze and Bitmoji
Reddit and Twitch
Turo
Pandora
CNET Tech Today
Why use a splash screen?
In the good old days of low bandwidth, AOL chat rooms, and slow devices, splash screens were frequently used to “disguise” the time needed to load an app, disappearing when the UI was ready for use. These days, as mobile devices become more powerful and apps load almost instantly, splash screens might seem unnecessary—but they still serve a few important purposes.
Reason 1: Welcome users and set the tone for the in-app experience
Great user experiences begin the moment a user opens your app. Splash screens serve to set the scene for users, letting them know “we know you’re here.”
If you’re going to spend time and effort to improve the perceived user experience of your app, the biggest return comes from spending time in the early stages of the user experience.
It’s kind of like arriving at a restaurant—your server passes by your table after you’re seated, just to let you know they’ll be right with you as soon as they’ve looked after that table over there. It’s a small touch, but it eases users’ perception of the rest of the experience. If that initial experience is positive, it’s easier to keep users happy. But if that first experience is negative, it creates a kind of halo effect, raising their expectations for the rest of your app in a way that’s difficult to recover from.
Reason 2: Manage users’ perceptions and expectations of your app
According to author and business consultant David H. Maister, the formula behind how satisfied users are with a service is both simple and powerful: Satisfaction = Perception – Expectations
If users expect a certain in-app experience, but they perceive the experience to be above expectations, they’ll be happy. If their perception fails to meet their expectations, they’ll be disappointed.
Going back to our restaurant analogy, the hostess might quote you a longer wait time than they anticipate, so they can exceed your expectations when the table’s ready “early.” Likewise, installing mirrors in the foyer might distract diners while they’re waiting, reducing their perception of their waiting time.
A splash screen can help achieve the same purpose for your app, website, or product. Splash screens help give a little boost to perception from the moment users open the app, helping to reduce abandonment and manage users’ expectations from the first moment.
Reason 3: Smooth out unavoidable delays in loading
Uncertain waits always feel longer than finite waits. It’s why the other line in the grocery store always moves faster, and why folks line up early to board a plane, even though they know the entire flight will arrive at the same time.
The anxiety of the unknown makes waiting feel longer—users being unsure if the app is still loading, or not knowing how long the loading process will take. Even on premium devices, waiting is often unavoidable—tasks like loading user data or authenticating with remote services take time to set up before users can begin interacting with the app.
Splash screens help reduce user anxiety around waiting. They make the wait feel shorter, giving users confidence that the app is still loading and sometimes giving real-time feedback to let them know how long it will take.
The best splash screen may be no splash screen
Why is there so much backlash against splash screens, then, if they’re so valuable?
It all comes down to friction. Designing a stellar user experience means reducing friction wherever possible—and splash screens create unnecessary friction when they’re added for the wrong reasons.
Users don’t care about branding at launch time—yet marketing teams take advantage of their captive audience to push product. Modern devices load apps and websites in the blink of an eye—splash screens add seemingly needless delays to the loading process. Splash screens frequently add friction when they’re added for the wrong reasons, without creating additional value to balance the equation.
If you do add a splash screen to your app or website, make sure you keep a few general rules in mind.
Best practices for using splash screens
Splash screens come in all shapes and sizes, but nearly all of them follow a few common best practices.
Keep your design simple, but not ordinary
Splash screens should be eye-catching and inviting for new users, giving them a reason to stick around.
Use eye-catching colors, creative background images, original logos, and subtle animation to make your design compelling without being overbearing. Keep your design simple—avoid adding text, advertisements, or other design elements that take longer to digest. Don’t use your splash screen as a marketing billboard, as it could give users the impression you’re targeting them for sales and damage your app’s reputation.
Check out the splash screen for the Mighty Networks app—it’s straightforward yet colorful, the logo stands out from the background, and there’s no fluff.
The Mighty Networks splash screen is simple but compelling
Keep splash screens as short as possible
Your splash screen should come and go as quickly as possible—ideally no longer than two to three seconds. More than that and users will soon become frustrated, especially if they’re opening your app multiple times every day.
If your app takes longer than a few seconds to load, try replacing your splash screen with a “skeleton screen.” Skeleton screens, like the below example from Slack, use visual placeholders to show a hint of the final UI as the app or site is loading, helping to build momentum and familiarity by while creating the illusion of extra speed.
Slack uses a skeleton screen to create the illusion of speed
Research has shown that skeleton screens help reduce perceived load times over static splash screens or loading spinners—they’re an excellent solution for managing perceptions around wait times.
Reduce anxiety from waiting
If your app takes a long time to load, it’s vital to give feedback on progress. If your site or app doesn’t inform users it’s still loading, they might think their request wasn’t received—or worse, that the app has crashed entirely—and abandon your app.
Keep your users happy, and let them know things are happening. Use visual indicators like progress bars or animations to keep users informed of your app’s progress and reduce abandonment.
Even a simple loading indicator, like this one from Nest, helps keep users informed
Spinners and other open-ended loading indicators work well for short delays, but they can sometimes make waiting feel like it’s taking even longer, so try to avoid them if your app takes a while to load.
Add a touch of delight to your designs
If you simply can’t avoid having a splash screen, make sure you’re turning lemons into delicious UX lemonade. Your splash screen is an excellent opportunity to delight users and to inject some personality into your app.
Don’t take your design too seriously, but don’t go overboard either. Users might appreciate the playful animation—like the below example from the Zocdoc app—the first time, but forcing them to sit through it every session could become frustrating.
Zocdoc adds a touch of whimsy with simple animations on their splash screen
Instead, try only showing your welcome animation on the first launch, then show a more simple alternative (or skip the splash screen entirely) on subsequent sessions.
How to create your splash screen
If you’re still in the process of designing your app, you can also add a splash screen or loading screen as part of your InVision prototype. The loading screen will appear while loading your prototype, then automatically transition to the start screen you selected for your prototype.
InVision makes it easy to add a splash screen to your prototype
To add a loading screen to an InVision prototype, click the first slot on your prototype to set the loading image. The file must be in PNG format and sized correctly to fit the device. The length of time your loading screen is shown depends on how long your prototype takes to load, so you might not even see the screen for small prototypes. Here’s a link to detailed instructions on setting up your own loading screen in InVision.
