Make OutSystems Apps Stand Out: Splash Screen Customization
There you are at your favorite restaurant. You can’t wait to savor the delicacies you ordered. You can even smell the taste in the air. But today for some reason, service is slow. And you start to wonder, how long do you have to wait for your food? It takes you back to when you took your car to the mechanic two weeks go, and you couldn’t believe how many times you called the shop asking if the car was fixed, and you received the same “I’m working on it” reply over and over again. It drove you crazy. Now what does any of this have to do with mobile apps? Well, everything. I mean, how long are you willing to wait for an app to open or do what you want it to do?
Of course, every situation is different, and different people react in different ways. But these scenarios have something in common. You’re the user and you want fast, contextualized and valuable feedback. If you’re building an app or any software that has a user interface, you need to consider this experience part of your user journey.
OutSystems Mobile Apps Out of the Box
Creating a mobile app with OutSystems is so easy that it’s scary! In just a few clicks and a few minutes, you’ll have both an iOS and Android application (built simultaneously). Out of the box, the common pattern will deliver an app that’ll look like this:
Simple. This is when you take the stage and play. Or if you’re not into that, let’s say that this is your “drawing board.” It’s your time to create, basically! Now take a look at the video again. Did you notice the “glitch” when the app started? What’s happening is that the native splash screen wasn’t customized and you’re seeing the black screen (which is basically the Operating System starting the app). And then there’s a white “glitch,” which is actually the webview loading content (OutSystems apps are Cordova-based).
Splash Screens in OutSystems
If you’re creating business-to-consumer apps (B2C), you should already know that the selling points are in the details. When you go the extra mile and implement the “wow factor,” you are one step closer to that “5-star rating” you dream about.
A splash screen might feel like too simple a thing, but when it’s done right, it creates a super user experience. When customized to your application’s look and feel, it is seamless and fluid.
How to Customize Splash Screens with OutSystems
You will need a zip file with all the Android/iOS splash screen sizes (in .png format), so that when you open the main application module, you import the zip file to the resources folder.
In the application module’s properties, open the Extensibility Configurations property to create a JSON object (if you haven’t already), where you can specify the information about the splash screen.
Add the “splashscreens” object to indicate that you want to change the splash screens of your application.
Make sure you define the iOS size and Android density and the corresponding splash screen location in the zip folders. Have a look at this JSON template for the splash screen sizes and densities.
To make this change available to users, publish and generate a new mobile application and distribute it. And it will look something like this:
The graph is now different:
OutSystems explains this in greater detail.
The Next Step Starts Now
Because I really believe you should do this, I’ve created a small video so you can actually see how to do it, and start customizing splash screens right now:
I’m also sharing the MyResources.ZIP and the Extensibility Configuration JSON resources to get you going. Please, keep in mind that this is valid at the time of the writing of this post, it might change in the future as Apple and Google change resolutions. If this happens, leave a comment below so we can address it!
Don’t bore your users. Go for the 5 stars!
