Splash Screen: Designing a Successful Launch Experience for Your Mobile App
You’ve got a brilliant idea, a pool of investors, an exceptional roadmap, and advanced technology to create the mobile application that would take smartphone users by the storm.
Seems perfect, but hang on!
Let’s say you’re working on an important task and an idea crosses your mind. You want to document it, so you decide to use a note-taking application. Most apps go by the 3 Second load-time Rule. But no matter how fast the app lets you in, you are bound to feel it’s taking forever.
According to a study by Localytics, about 24% users abandon an app after their first experience which is about a quarter earning opportunity lost.
In this blog, you’ll learn to create a splendid first experience through the medium of Splash Screen. I’ll cover the general notion about it, its purpose, guidelines for iOS and Android, best practices, and a tons of examples.
Let’s get started!
What is a Splash Screen?
Splash Screen is the first visual users see when an application is launched.
One might wonder what is ‘splashy’ about Splash Screen. Frankly, very little! Its chief purpose is to engage users while the app loads. And in order to do that, it may feel like a of splash of visuals virtually thrown them.
Here are two examples of Splash Screens:
Black and White never fails!
Uber’s Splash Screen is a classic example of simplicity and style. The app opens with its new wordmark logo in San Serif succeeded by two parallel lines that gives it a dramatic opening. Within less than 3 seconds, Uber gets straight to business.
Conversely, we have Amazon who chooses to employ a static Splash Screen with its logo that represents their ideology of selling a wide range of products from A to Z.
And of course, we have exceptions:
Facebook is one of the few applications that has chosen to drop their splash screen and take users straight to their feed.
Purpose of Splash Screen
In the first place, if you’re wondering what’s wrong with having a blank screen at the start of your app the answer is: Absolutely nothing!
But here’s the catch:
According to Thermopylae, the human brain processes images 60,000 times faster than text, and 90 percent of information transmitted to the brain is visual.
Having said that, adding a splash screen to your app works as a spectacular opportunity to stick in the minds of users. Moreover, you want your app to build excitement and curiosity and a creative app splash screen does exactly that.
I’ve collected a few classic examples that shows diversity in splash screens designs.
For more static and animated splash screen inspiration, you can explore Mobile Patterns
How to Create a Splash Screen?
We’ve all taken inspiration from popular applications, in one way or the other, while designing our mobile apps. But have you wondered how they got there?
Many may echo, “trial and error” but after having analyzed more than 1,000 apps closely I’ve concluded that the success of these mobile app designs are purely based on improvisation.
Let’s take a look at some critical facets to be covered:
1. Size Matters
Given that “one size fits all” is cliché in today’s world, Splash Screens must to be designed to meet the need to fit into the multifarious sizes of different devices.
With myriads of smartphones and tablets of different shapes and sizes being launched every year, it’s become essential to know and understand the dimensions of these devices.
2. Ditch the Sales Pitch from your Splash Screen
Splash Screens can often be mistaken as a proclamation of a brand’s existence; however, smartphone users have become as smart as their phones these days.
It takes one simple technique to make a beautiful splash screen: Choose elements that resonate with your brand.
Adding small details that identify your brand such as logo, typographic messaging (if any) to the background besides using a designated color palette.
3. Create a Splash Screen that eliminates load time, not increase it
Splash Screen can be looked at with two perspectives:
One, you can choose to flaunt your brand with the coolest graphical animations and the other is to build curiosity among users.
In both cases, you don’t want to forget the real purpose of creating a launch screen. The splash that distracts users from the wait must be designed to reduce load time and not otherwise.
4. Let them in on Launch Prep
Before we get to this point, take a look at:
With over 293 million monthly active users, Candy Crush Saga by King Digital Entertainment is one of the most played games of all time.
There could be several reasons why an app takes longer to load such as connectivity issues, huge graphical data, un-installed app updates, multiple apps running in the background, and others.
Letting users know the progress of loading in percentage or an animated throbber can rescue you from impatience.
Guidelines for Splash Screens (Android + iOS)
Since Splash Screen isn’t a commercial or a creative presentation of a one’s skill, Android and iOS have set specific guidelines for designers to ensure users are delighted with their first experience with an app.
iOS Guidelines for Splash Screen
Apple’s Human Interface Guidelines go by four simple commandments. Here’s how they do it (with examples):
1. Splash Screen must be analogous to the first screen
Ted Talks employs white and red as its signature theme. It’s Splash Screen represents its logo along with its tagline, “Ideas worth spreading”.
Once a user comes to the main screen they see the newest uploads beside which there are popular talks. Users can also explore videos of their interest in the discovery section.
The first screen also embodies the TedTalks logo — on the top left — which gives a similar feel from the splash screen.
2. Cut out text from your launch screen
If you’re planning to roll out your application in multiple regions, Apple recommends avoiding text on your launch screen, since static splash screen text cannot be localized.
Nevertheless, if your logo spells your brand name here are some awesome splash screens to take inspiration from:
3. Minimalism is the key to a good launch screen design
The NewYork Times app is an epitome of minimalism. The splash screen with its calligraphic logo takes its users back to the 70’s for less than 3 seconds and quickly lands them back to the latest news.
4. Advertisements are a big NO-NO
According to SEOExpertBrad.com, over 88% businesses spend a great deal in marketing their products and services. Considering you are one of them, your users already know about your app before they even get to the AppStore or PlayStore.
Having said that, designing a splash screen that looks like an “About the App” or “About Us” could make you look more salesy than you can imagine.
Splash Screen Guidelines for Android
Apple and Android, despite having distinguishable trademarks, have identical guidelines to engage users via an ecstatic experience.
Android Splash Screens are categorized into two — Branded Launch Screen — that looks something like:
And Placeholder Launch Screen:
Since app Splash Screens aren’t a compulsion, some apps address load-time by animating placeholders.
Apps that take little time to display its contents go for placeholder launch screens besides not feeling the need to market their brand. Oftentimes, you’d find apps like Instagram, Facebook, YouTube employing offline caching before they load fresh content to their screens.
Conclusion
“First impression is the last impression”. The good news is we now know what it takes to create a seamless mobile app launch experience.
According to Statista, the year 2022 will see a growth of 258.2 billion app downloads compared to the 178.1 billion downloads in 2017.
With this growth, Splash Screen is a bandwagon worth jumping on!
It serves as the first rung of the onboarding ladder. Agreeing on an image that resonates with your brand becomes all the more critical when you have small, yet significant elements to add to your mobile app design.
Here’s hoping you find a Splash worth your Screen!
