Building the perfect splash screen
In the first part of our series on “App Designer’s Toolkit”, Duncan Campbell, creative director at Gorilla Arm turns his attention to the first screen your users will see — the beloved splash screen.
So you’re probably wondering, “how hard can it be to build the perfect splash screen?” And you’re probably right to think that — we’re talking about a screen which is going to be visible for just a couple of seconds (if that). And a screen that seems to just flash a logo at the user before vanishing. So surely it can’t be that complicated.
Wrong.
The perfect splash screen hides away a few key functionalities that your app should have, both from a user experience perspective and a functionality one. Whilst you might not see those functionalities in action, they are there hiding beneath the surface on most splash screens you see on your mobile. Knowing that those functionalities are means you can design a splash screen that caters for various different scenarios in an elegant and efficient manner.
From a design perspective, the splash screen sets the scene for the rest of the app, inviting your users in from the cold, sterile apps that they use on a daily basis, and immersing them in your vision for the next 3 or 4 minutes that you have their attention. Get this right, and your users will enter with great expectations and anticipation. Get it wrong and they’ll drop your app before you have a chance to even strip them of some key analytics.
Let’s get started…
So what is a splash screen?
The splash screen was born out of a requirement for apps to spend a few seconds setting up before the user can get moving. No matter how fast your app is at starting up, there’s almost always a few small tasks that either the operating system, or your own app code, need to do before the user can start tapping buttons and navigating screens.
Maybe your app needs to load some basic data so that the first screen has some content for the user to see. Maybe your user needs to be authenticated again because they haven’t used the app in a while. Maybe some key images need to be loaded from the server before that first screen appears. Whatever it is, the splash screen is a perfect place to do this (well… most of the time).
There’s a lot of debate about the necessity of a splash screen these days, since operating systems have advanced and apps can launch almost instantly — but splash screens are still present in almost all major apps, and offer a great chance for us to do some prep-work before the main screen is shown.
The 3-second rule
Before we start analysing how to make this screen the very best it can be, we should consider a few limitations. Firstly, the splash screen should be quick. How quick? As quick as possible, but never more than 2 or 3 seconds. Any user who uses your app regularly will quickly get frustrated if they have to sit around and wait for an app to open for more than a few seconds. And why would you want to make them wait anyway — surely you want them inside and tapping buttons and buying products and connecting with others? So whatever your splash screen strategy is, make sure that if it breaks the 3-second rule, you come up with a new strategy.
Also take into account that if your app is being used regularly (i.e. your users are opening the app at least once a day) you should reduce this down to the 1-second rule, or even try and remove the need for a splash screen altogether. Imagine having to sit through a 3-second Whatsapp splash screen every time you want to message a friend, or a 3-second Tinder splash every time you get a match (which hopefully is quite often 😉). In these cases, you can skip the splash altogether and just go straight to the content — loading anything you need from the main screen and popping up any errors or issues once they are loaded.
The grand entrance
Why do you think hotels and big businesses spend so much money on their grand and impressive entrances? Because the moment you walk through that door, you know you’re in a place of quality. The same applies for apps. The moment a user taps your icon on the home screen, they’re transported into your world. This is your chance to impress. To show those users that your app is beautifully and carefully designed and that they’re going to enjoy every second in your space.
So what should a splash screen look like? Keep the design simple, bold, and visual. In those precious 3 seconds (or less) your user doesn’t have time to digest multiple pieces of information (and shouldn’t have to) so focus on presenting the app for the first time in a visually engaging way.
The most simple splash screens will show a solid or gradient background with the app icon and title fading into view. Take it a step further and animate your app icon to give a real sense of quality — just remember to keep the animation focused and simple, and definitely don’t break the 3-second rule. Working with partners or sponsors? Now is a great time to present them (but remember that isn’t the most interesting info for users, so you could consider saving that for somewhere else in the app). Whatever you decide, keep it simple. This isn’t the time to force your users to concentrate — just break them in gently to the experience you have built for them, while promoting the quality of your perfectly-crafted app.
Quick note on animations: don’t take it too seriously. Some designers have a habit of going overboard and designing an animation which tells a huge story — which is great if your app icon has a story to tell. But remember, apart from the first time the user sees this, it won’t make a difference what story you tell. So keep it simple, and if you really want to go crazy, ask your devs to program it in so that it only shows the complex animation the first time a user opens the app, with a simpler and lighter alternative for subsequent sessions.
What code should I run?
Ask any app developer and they’ll give you a list of 100 things they want to do in the code while the splash screen is loading. But the trick here is to focus that short period of time on the absolute minimum you need so that the next screen to appear has enough content to offer a seamless transition. As a UX designer, your responsibility is that the user’s experience is paramount, and right now on this very first screen of the app, if you get that experience wrong you can sabotage all your hard work in the rest of the app. So chat with your developers, and work out a way to keep that list of 100 things down to just 3 or 4 key server calls.
In most cases, this will mean authenticating your user if they had previously logged in, and loading the very base amount of data that the app needs to work fluidly. Perhaps your first screen is showing a few of your products on sale — if that is the case, you can load those products (and their images perhaps) now so that they immediately appear on the next screen and the user doesn’t see a screen full of placeholder images for a few seconds. Perhaps your app has a messaging inbox — in which case you’ll need to find out if they have any new messages (but that doesn’t mean you need to load the actual conversations, which could take much longer). Whatever it is, discuss with the developers what the smallest amount of data your app needs to load in order for it to start working immediately, and get it done right here in the splash screen. Any else should be done later once the user is into the main app.
So what if loading data breaks the 3-second rule?
Good question, and of course it can happen. Not just because your app might have to load a lot of data, but also because even with minimal data the device may have very limited internet connectivity and even a single image could take more than a few seconds to load. In this case, you’re going to need to use a loading indicator — a small spinning wheel or progress bar — to keep your users informed that the app is doing something.
One awesome trick is to only show the loading indicator after the splash animation has finished. That way your user will never normally see it, but if they do see it, they’ll know that the app is still working and they have to wait patiently while it finishes. Some apps loop their splash animation — but this doesn’t inform the user that the app needs more time, and so they’ll be left with the feeling that you are just wasting their time with a repeated animation. So whatever you do, show the loading indicator as soon as you pass 3 seconds.
On the note of loading images in advance, many many apps don’t do this in the splash screen. Why not? For content which is likely to be different every time a user enters an app (like a food delivery app, or a online marketplace) it would mean that the splash is always going to be “slow” because every time you open the app it will need to load new images. Compare that with an app which is likely to change its products very infrequently (where the images can be cached and so only from time-to-time does the splash need to take that burden). In these cases, you’re better off getting your users direct into the content and loading right before their eyes so the perceived loading time is broken into 2. Its a complicated balance to get right, so be sure to test your apps on a slow connection to get a feel for how long it lasts when people are using your app on the move.
What about errors?
Of course, sometimes an error can occur. Maybe your user doesn’t have any internet connection, but you need an internet connection to authenticate the user. Or maybe your server is down or running super slow. Whilst most errors in an app can be handled with a popup, presenting a popup on the splash screen is going to be ugly and frustrating for the user.
The best strategy you can have here is to firstly isolate critical errors only. If an image is taking a long time to load, you don’t need to hold the user up — you can ignore this error and try reloading it on the next screen. But if the internet connection is down and you can’t authenticate your user, you really can’t let the user progress past this screen. So firstly make sure you only present an error if the problem is critical enough that the user shouldn’t be allowed to continue using the app.
Imagine an app which, right after the splash animation finishes, presents an ugly popup to say that you have no internet connection. Not elegant, and not sophisticated. Instead, why not integrate the error into your splash screen (or even present it as a whole separate screen). We almost always opt for an error message on the splash screen itself, along with a refresh button. In most cases, the problem will be a simple lack of internet and so a refresh button (or automatic refresh when the connection returns) is the best solution. By keeping the error integrated in this screen, you maintain a professional look within the app, whilst also clearly prompting your user to take action with the refresh button.
Keeping the app up-to-date
One final trick for the perfect splash screen is to check if the user is using the correct version of the app. Imagine your launch your app (version 1.0) and at some point you need to update some key functionality. You build your new app version 2.0, and you’re ready to launch it on the app stores, but you need to ensure all your users are updated to the new version. Most developers will do everything they can to make sure this doesn’t happen by writing code which works for older version as well as newer ones — but this take times and is expensive. Some development manages will choose to simply block older users from using the app and force them to update to save time and money. This is especially common at the start of a project when it’s functionality is more volatile and needs the freedom to evolve without the cost of maintaining older version,
Currently there is no way to force users to update their app via the App Store or Play Store. So we need a mechanism in place to check if the installed app is a valid version. For this to work, ask your developers to add a minimum app version to the backend — in the example above the minimum app version would be set to 2.0 and if they currently installed app (1.0) is anything less than 2.0, we would show a message on the splash screen to say “You need to update your app to continue using our platform.”. Make it easy for the user to update by giving them a button which takes them direct to the store to update their app. And after updating they’ll be able to continue using your app.
“Is this step optional?” I hear your cry. Well, yes and no. If you skip this step, you’re 100% tied to providing support for older versions of your app. And that means you’re devs have more work to do, and your app becomes more complicated. That said, having a screen force your users to update to the latest version is very heavy-handed and should only be used in extreme cases. But as a general rule, I would say keep this code in place with a view to never actually using it. If you ever need to use it in an emergency, its there and might just save your bacon.
Adding something extra special
And for those of you with enough budget, time and skills, you can go the extra mile by integrating your splash screen seamlessly into the rest of your user experience. A few apps handle this very elegantly, but the general strategy is to design the background of your splash screen so that it can merge effortlessly with the first screen of your app. Shazam do a great job of this, with the app icon animating into life before other elements of the main screen appear into view, and even the logo becomes the main action button of the app.
Don’t be fooled into thinking this is an easy task — this kind of transition can only work with certain apps — notably ones where the main logo appears on the screen, or the main screen of the app is a single screen with relatively minimal content on it. It’s also going to come at a price for graphic design and development time and effort. But it can be done and you’ll reap the rewards by offering a seamless transition into the app functionality.
The perfect splash screen
So remember:
- Keep it simple with a short, elegant animation to present your app
- Always remember the 3-second rule. And if you go over, show a loading indicator.
- Load the absolute minimum data from the server, but making sure you have all the info needed to show the next screen immediately.
- Integrate errors into your splash screen to avoid ugly popups
- Take this opportunity to ensure your users are running an up-to-date version of the app, and if they aren’t, direct them to the stores to update.
If you liked this post, there’s plenty more coming soon in the series “App Designer’s Toolkit”. Follow me here on Medium, Facebook or Instagram for more posts like this.
