Splash Screens vs Creating a Seamless App Launch Experience For Great First Impressions
First impression matters! Visitors reaching a website or an app judge whether they can trust the company behind it based on the initial appearance of the app/website.
Our brain is wired to make snap judgements. It takes only 1/10th of a second to form a first impression about a person, and apps and websites are no different. A Google research study found that it takes about 50 milliseconds (that’s 0.05 seconds) for users to form an opinion about your website that determines whether they’ll stay or leave.
What is true for web is also true for native mobile apps. Mobile apps don’t get many chances to retain and engage users. In fact, it’s not unusual for 80% of the people who downloaded the app to disappear after the first few days.
So how do you solve the problem of creating quick perception?
Let’s take a look at what other art forms do to see how they handle the challenge of perception. Saul Bass, a revolutionary credit designer for motion pictures, talks about how starting credits are critical for movies and TV shows.
“I had felt for some time that audience involvement with a film should begin with its first frame. Until then, titles had tended to be lists of dull credits, mostly ignored, endured, or used as popcorn time.
There seemed to be a real opportunity to use titles in a new way — to actually create a climate for the story that was about to unfold.” — Saul Bass
Like Saul mentions, user involvement with the app should start with the first frame (app icon in our case) and continue till the real content loads, aka Launch Experience, as to create the perfect environment for our story to unfold.
If you would like to learn more about how music industry uses album art to create initial perception please check this video about how Beatles changed music industry by using innovative Album art cover to revolutionise the “launch experience”.
Mobile apps, specifically for new startups, have to consider the first impression they make on users. Speed, right messaging with compelling value proposition, and great Onboarding are critical considerations for this impression.
In this post we will only focus on first impression created visual perceptions created by mobile apps launch experience. The right launch experience appeals and deals with users subconscious and helps create the right perception that will hopefully help you retain and attract the right kind of users.
Step by step guide on using launch experiences to create great first impression of your mobile app
Before we deep dive into the design tactics, let’s learn about the basics of launch experience and splash screens.
What is a launch experience?
A launch experience is a group of mobile design patterns that help create a cohesive experience from the time user taps on an app icon to the content is loaded on the screen.
Launch experience usually consists of these components when broken up -
- App Icon
2. Splash Screen
3. Splash Screen to App Data Transition
4. Launch Screen With Skeleton Screens
5. Content Loading Animation When There is Too Much Data
Splash Screens vs Launch Screens
In Apple’s ecosystem, the launch screen is an image that appears immediately when you launch your app. Developers define this image in their XCode project. Apple recommends using a screenshot of your app’s main window, so it appears that your app launches faster.
An example of a splash screen is the screens mobile games use, where you can see the branding and some other info.
Here is what Apple says about using the Splash Screen.
Design a launch screen that’s nearly identical to the first screen of your app. If you include elements that look different when the app finishes launching, people can experience an unpleasant flash between the launch screen and the first screen of the app.
Don’t advertise. The launch screen isn’t a branding opportunity. Don’t design an entry experience that looks like a splash screen or an “About” window. Don’t include logos or other branding elements unless they’re a static part of your app’s first screen.
On the contrary, Android considers both types of screens as launch screens and Google actually has a different view from Apple.
You may be surprised to hear that Google recommends a splash screen, which they call a “branded launch”. You can read more about this in the material design spec. This wasn’t always the case; Google used to advocate against splash screens, and even called it an anti-pattern.
So what should designers use in the face of conflicting guidelines?
Splash screens are a gateway to your app’s experience. Splash screens are there to improve the UX by simulating faster loading times and creating a seamless launch experience. Splash screens, when used creatively, also help set the user’s mood and prepare them for what’s to come. So keeping those things in mind, we recommend using Splash screens.
Design is not how it looks, but the way it works and solves a specific user problem. So, what does launch experience solve?
- They speak to users subconscious and set expectations of what is to come.
- They reduce the perceived wait time by hiding the loading process.
- They educate the user about the purpose of the app and your brand.
- They provide a delightful experience to the users.
We have literally gone through over 1,000 apps on the app Stores and found that there are some apps which have built amazing launch experiences by using splash screens.
This narrowed our list down to 5 methods of designing a great launch experience that effectively captured our attention:
1. Change app’s icon to personalize the launch experience for each user
Starting in iOS 10, developers can set predefined app icons for personalization. As you can see, the MLB app allows users to choose their team’s icon, Bear allows users to change color based on their theme color, and Pedometer++ lets users have a wheelchair as the icon.
Here’s how Zenly app uses app icon personalization to add gamification element to its app. With each level new app icon unlocks for that users and he can then customize the app experience.
2. Splash screens with branding and direct value proposition to convey the message
Splash screens for your mobile app can be considered as a continuation of your marketing activity. So, as soon as the user opens the app, it reinforces the branding of the app.
You can also use direct value proposition in splash screen if your app is unknown as it visually emphasises the purpose of the app. These kinds of splash screens generally have beautiful imagery and help set user’s expectations.
You can see how Estate.ly, Lily Pulitzer, and app are using Splash screen to directly enforce their branding message into user’s mind. The images immediately give context as well about what the app is about.
Here, History, DocuSign and Ted Applications are enforcing their value proposition with Splash screen.
Calm has one of the best splash screens that continues its value proposition and sets the mood for users.
3. Seamless experience from splash screen to app data using interaction design
Splash screens are good place holders. But what after that?
Launching an app while displaying a static screen increases its perceived loading time. If you can incorporate animations then you can help set the mood for what’s about to come.
See how Ticketmaster, Uber, and Twitter utilize interaction design to build a seamless bridge between splash screen to app’s content.
Google, TinyFax, and Cinamatic apps use animation to subtely transform their logo into content.
Similarly Turo, StumbleUpon, and Soundhound use not so subtle animation to transition from splash screens to content.
22Tracks, RoambiAnalytics, and Carrot, however, keep it simple. The apps use their logos as a prominent branding technique as flash screens.
Chick-fil-A One spice up their splash screen with animation followed by their users’ dashboard.
4. Launch screens combined with Skeleton screens to avoid emptiness of feedback loop
For many apps, using an empty launch screen with a skeleton screen makes more sense. These apps generally are lightweight and load really fast. We recommend mixing skeleton screens with these kinds of apps for a seamless experience.
Splash screens of these apps have some form of skeleton of their main loading screen. Breathe app uses colored skeleton akin to their main content screen. Transit app uses map’s skeleton as their splash screen for creating an impression that app has loaded as soon as user taps the app icon.
Apple’s own Compass app, Foursquare, and Epicurious app uses Skeletons and animation to buy time while giving an impression that things are “coming”.
Snow App, Dribbble, and Launch Pro uses minimal skeletons.
5. Loading animation to buy you time while creating a fun experience
Besides games, there are other apps that require a lot of loading time. For example, some apps need to load heavy data like video, audio, or even refresh the entire content. For these kinds of apps, somewhat longer animation makes more sense. This animation can get shorter and faster as data is cached and loading time can become shorter.
Vogue Runway, Pandora, and Zova uses loading animation here to load data so that users do not feel the wait time. Loaders have been used smartly in web apps for a long time but for mobile its getting popular just recently.
Clashem, Tumbleweed, and Chefsfeed uses fun animation to continue their brand experience while app loads their data.
Vogue, History Vault, and Dollarshave club apps again use animation creatively to seem like wait time is shorter. Admittedly, Dollarshaveclub’s app does not seem to have that much data to spend so much time on animation.
More examples from 15s, Zocdoc, and Vimo to use seamless loading animation for creating a fun experience.
The big takeaways:
How long should you show a splash screen? Exactly the amount of time it takes the app to configure itself and load the data in.
Customize launch experiences as you see fit for different usage times and users.
You can also use different launch experiences (splash screens, marketing message, animations) based on different stages of users life cycle. For example, use different perception and message for users who are in onboarding and different launch experience for people who are highly engaged.
Different kinds of data-heavy apps require different kinds of launch experiences. If the app size is light and can launch faster, then use a launch screen with skeleton screens.
On the contrary, you have tons of options to customise your whole launching experience. Like Using:
- Images to convey purpose.
- Animations to make the launch experience a gateway.
- Unique app icons whenever possible to enforce the branding.
Before you leave — here’s a bonus for you! Check out the free hand-picked collection of inspirational Splash Screens of iOS and Android apps on Mobile Patterns — a patterns gallery for key players in design.
P.S. Feel free to share your designing experience with the community, and let us know your thoughts on this article.
