Initial Impressions: Why splash screens matter for apps
Sometimes, you don’t realize how good something is until it’s gone. I’m reminded of this whenever using my VR headset (Meta Quest 2). Because at some point (often multiple times), I’ll have to stand in virtual darkness, with two small screens a centimeter away from my eyeballs, as I wait for the software to load.
Since research from Google indicates that a majority of mobile users will leave a website that takes more than 3 seconds to load, you can imagine how much worse it is to be unable to see while waiting for software to load in VR. Consistent negative experiences like this reflect poorly on the brand overall.
That’s why I always appreciate a good splash screen.
What is a splash screen?
A splash screen (AKA “launch/startup screen”) is simply the first screen a user sees as the software is loading. It serves as a transition, welcoming the user to the app they’re launching.
Some splash screens will have a progress bar indicating how much longer the user will have to wait. This helps make things feel shorter (because progress/activity while waiting influences our perception of time).
But remember, we’re talking about seconds here. You don’t want your users to wait much more than that. The longer you make them wait, the more likely they are to get annoyed.
What are the benefits?
1) Wait times feel shorter
Internet speeds are faster than they’ve ever been, yet our attention spans are constantly decreasing. And as you can tell from my example with VR, absence of a loading screen can make the wait feel even longer.
Some apps even use brief animations, which can be fun to watch, and act like a progress bar (since such animations are rarely cut-off in the middle). The end of the animation indicates that they are just about to start their experience.
But never show the splash screen if you’ve already opened the app and it’s still running in the background. That would cause unnecessary friction, and annoy the user.
2) Brand familiarity
So are all of the apps with splash screens secretly masking their painfully slow loading times? No — many are simply taking the opportunity to help familiarize users with their brand.
The splash screen should include things like the logo, name, main brand colors, imagery, etc. After all, the splash screen could just say “welcome!” or “loading!”… but that may seem a bit impersonal, and it would certainly be a waste of a good opportunity.
Take Amazon’s Kindle as an example. They consistently use an image of a child reading a book under a tree, which is great for brand recognition. This level of detail is actually rare in splash screens, but the graphic designer did an excellent job of using color to keep this image simple. A black silhouette of a child engrossed in a good book, among a blue gradient background that highlights him under a tree, with the easy-to-read white-text logo over the darker part of the background. Simple, yet elegant.
3) Setting expectations
The splash screen won’t make or break your app. But the first-use onboarding experience —which includes the splash screen— might… at least, if the user ends up deleting it soon after trying it. (We’ve all done it.)
Setting the tone with a friendly splash screen makes it that much easier to give a good first impression, especially for first-time users. As the folks at InVision put it:
“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.”
Of course, I’m not talking about a massive effect… but every little bit counts when users are opening your app for the first time. It may help instil positive expectations, and make them more receptive going forward. This is because of the Halo effect — a heuristic where people’s positive feelings in one area (ie. the splash screen) influence how they perceive other areas (ie. the rest of the onboarding experience).
Uber is a great example of this. They animate the Uber logo to open up vertical lines that reveal the live map. It leaves a fantastic first impression.
4) Simple & low-cost
Animations, illustrations, and cool transitions are nice… but they are totally unnecessary. In fact, as a rule of thumb, I would say: They’re usually overkill.
Splash screens are beneficial because they’re simple. I mean, sure… if you’re Amazon, Disney, or Uber, then you have the resources to put in that extra effort. But you don’t need it to be so fancy. After all, it’s supposed to be there only for a few seconds.
Don’t overthink it.
Make your own splash screen
Making splash screens should be doable in two steps:
- Place your logo in the middle of the screen (admittedly, the smaller of the two steps)
- Contrast variations of your logo in black, white, and color (whatever your main brand color is)… with the same color variations for the background. Use what works for your app.
Here are some examples: Spotify uses green-on-black. Dropbox uses white-on-blue. Envoy uses red-on-white.
There’s nothing fancy on these splash screens, but they get the job done.
If you’re a brand-new company, you may also want to add your company name below the logo — and some even like to include a concise slogan. But as you can see, that’s not as common as only showing the logo, even for massive organizations with the resources to make elaborate splash screens.
Necessary or nice-to-have?
Strictly speaking… splash screens are not “necessary.” In fact, I’m sure you’re currently using apps that don’t have them. But I suspect the 2 steps above can be completed in just a minute or two. Therefore, I generally recommend you have a splash screen for your mobile app.
Many desktop apps (and even some web apps) include a Splash screen as well, and all the same info and advice from this article applies to those.
Not so nice-to-have?
There are a few caveats you should be aware of when considering making a splash screen:
A) Long wait times
If your app takes more than 3 seconds to load, you may want to consider using something other than a splash screen (since long splash screens can get annoying). For example, you may want to use a skeleton screen instead — where a layout of still-loading UI elements serve to give the user an indication of what the page will look like. It sort of mentally prepares the user for what they’re about to see.
Skeleton screens may sound annoying on paper… but they’re actually much more user-friendly than making the user wait for a lengthy splash screen, which suddenly reveals the full UI.
B) Keeping it simple (& fast)
Including something as small as a logo (ie. an SVG file) to your splash screen won’t slow your app down, which is why I recommend it.
But if you end up using some elaborate animations, then you might actually add to the loading time, which defeats the purpose. So here’s your final reminder… keep it simple! 😉
Using them for the wrong reasons
While researching for this article, I stumbled upon several examples of criticism of splash screens. These invariably come from companies who are implementing them poorly, or for the wrong reasons. One person on Reddit wrote:
“I worked at a company that forced me to put a 8 second splash on the application I was building, even though it was 100% not necessary.”
Just because someone hurls a heavy bag of coins at you, it doesn’t mean that money is bad. Likewise, poorly implemented designs doesn’t mean splash screens are the problem… it’s the way they’re (mis)used that makes them problematic.
The Bottom line
I’ve been very careful with my words, to say: Splash screens won’t make your users gush with enthusiasm and suddenly become brand loyalists, just because you flashed a logo on the screen for a second. However, since the cost to make a splash screen is so low, it’s a quick win for most teams.
It can set the tone for the user’s overall experience; and by giving them something to look at, you’re familiarizing users with your brand while you ease the discomfort of waiting for your app to load. It’s a win-win.
