A Splash Screen is the first screen that is generally displayed when you open your app. Usually, it contains the logo and/or the name of your organization, some graphic elements (an image, an illustration, a background pattern, etc), a loading indicator and the current version of the software.
You may think that it is not a fundamental element for your app – it shows up for a few seconds after all – and investing time in designing an effective splash screen is not a clever way to invest your time. Well – you’re wrong!
A well-designed splash screen helps you make a great impression on your new users and strengthen your brand awareness. Its goal is to impress your users and convince them that it is worth getting to know your app. Take a moment to observe some of the most seen splash pages on Earth I collected here below.
Why is a splash screen so important?
1) Keep the user busy while the app loads! 🙄
First of all, we should remember that the splash screen has been invented for a specific technical reason. In a nutshell, the splash screen is shown while the application is loading all the elements that should be shown on the first screen, from content to remote services, user data, and much more.
We all know waiting is no longer accepted as part of the human experience, so we should all do our best to keep users constantly entertained. Let’s be clear: not having a splash page can hurt you quite a bit. Users who are shown a completely blank page while the app is loading report a state of “anxiety” and “discomfort”. As silly as it might sound, this is what us marketers and developers need to deal with. Knowing this, we rely on a well-thought-out splash page to keep users entertained and to reassure them that the app is loading and will soon be available to him.
2) Welcome your users! 👋😃
From a user experience point of view, the splash screen is to all effects a foretaste of your app. In my mind, it’s a bit like the entrance to a hotel: it’s a mission statement and it represents the values you stand for. It should be well-kept, impactful, memorable. It’s a way to let your users know you are going to be taking care of them, that the experience is well thought-out in every detail. Nothing is going to be left to chance.
Be careful though: you’re setting the stage but you then need to deliver the value you promised. According to professor David H. Maister, there is a formula you need to keep in mind when you plan your digital experience.
Satisfaction = Perception – Expectations
Your user satisfaction is the difference between its perception (i.e. the actual experience) and the expectations your user had prior to embarking on this journey. This means that if the expectations were greater than the actual experience you deliver, then your user will most likely be disappointed. On the contrary, if the experience is better than the expectations your user had, then he will be more satisfied.
If you build an awesome hotel hall but your rooms are damp, dirty and cramped – well, you know where I am going with this. The splash screen has the same exact role: it helps to boost brand perception, thus helping to reduce abandonment, but you then need to deliver on your promises.
And no, don’t try to build an awful hotel reception to lower your user expectation because then you’ll have to deal with a much bigger problem: no one would even get close to your hotel!
5 tips to build the perfect splash screen
1. Use Apple and Google official size charts
Do you think it’s a trivial tip? It might be, but please follow it. Adhere to Apple and Google guidelines, follow instructions regarding size and dimensions of the elements. Everything you need is one Google search away: don’t overlook this. I’ll still add links here below but make sure they are still the latest version as this things change fairly quickly.
➡️ iOS
➡️ Android
2. Apply the “less is more” rule
The splash screen is intended to welcome the user and it represents a bridge from a promotional page (could be an ad, the search page of the Apple/Google Play store, etc.) to the actual application. As you might imagine, it’s a crucial moment of your user journey. In our experience, the best possible thing you could do is keeping it simple. Always go with a clear minimalistic design, in line with the look & feel of your app.
If your splash screen adopts a completely different visual style from your app, you’ll throw you user off balance and cause an unpleasant sense of disorientation, which frequently brings the user to ditch the app altogether.
Also, remember the splash screen is not going to be visible for more than a few seconds, hence avoid adding text, instructions, promotional content, or other design elements. Don’t use it to share messages or other info, it’s not the right place to do so.
3. The 3 seconds rule
If the app takes a long time to boot, you risk causing annoyance and frustration to your users, with the consequent possibility of losing them. If they find themselves opening your app several times a day, the wait will become unbearable! Even the biggest apps, especially the ones that get opened multiple times a day (Facebook, Instagram, Chrome, Whatsapp, etc.), are very careful when it comes to splash screen and loading time.
If, however, you tried your best and still couldn’t go below the 3 seconds threshold, you could resort to the “skeleton screen” strategy. The skeleton screen is a view that resembles a wireframe of your app, but it uses placeholders instead of the real elements. It’s called skeleton cause it represents the bare bone structure of the app, while the meat (i.e. the content) is still being loaded. While it represents a workaround and has nothing more to offer than a spinner or a static splash screen, the skeleton causes a sort of illusion in your user’s eye, altering his perception and making him feel like the waiting time has been reduced, even though the app is still loading.
In the image below, look at how Facebook uses a skeleton section while it loads the content. While the app calls back-end services to retrieve and show personalized content, the user sees a skeleton of what the application will look like once the content has been loaded. This visual trick leads the user to believe that the app is ready, significantly reducing the negative impact of waiting times and, consequently, decreasing the discomfort experienced.
4. Keep the user in the loop
If the splash screen is being shown for several minutes, at least you should inform your user of what is going on under the hood. Use an indicator, such as a progress bars, an animation or any other loading indicator that conveys the idea that the app is not stuck and it’s actually performing some tasks.
Key takeaway: always let users know what is going on around them or you will lose them before you can say “impossible”.
Not all loading indicators are created equal, though. If your app takes too much time to load and you use a simple spinner, users still might think there is something wrong with your app and they will leave in a heartbeat.
Look at this super cool progress bar (credit to Supi, found on Dribble)
Nice!
5. Add a human touch
Try to create funny and lighthearted animations that help your users feel at ease. But be careful, the 3 seconds rule still applies. If your users need to open your app frequently and find themselves staring at an animated loader a few times a day, it could get unpleasant. Why not creating a “lighter” version of the splash screen that you can show after the first daily opening?
Fun fact: the origins
Did you know that the Splash Screen is an idea borrowed from comic books?
A splash page or splash screen is “a large illustration which often takes up the whole page, that opens and introduces a story. Its purpose is to capture the reader’s attention and can be used to set the tone and identify time and place of the story.”
When it comes to mobile apps, the splash screen has a very similar purpose. A well-designed splash screen captures users’ attention and set the tone of the whole application while the content loads in the background.
What about now?🤔
- Have a look at our Engagement Platform and discover how to gain your customer loyalty! 🤩