Splash or Launch screen

[Tosin-Balogun]

What

We need a way to help users understand they are beginning their journey on the app

Why

Splash or launch screens are the first visual element a user sees when they launch apps.

While a splash or launch screen doesn't provide any feature, what they do is help set user expectations of the interactions they are about to have. This is where the user first encounters the brand, the software version and several cues to let them know the app is loading itself. This helps manage user expectations, allows the software to properly ready itself and transition into an onboarding flow.

In the NHS app, we have a mixed situation where we don't have one for iOS or rather we have just a blue screen. On Android, we do have splash screens, but we have skipped this part of the app onboarding process in favour of speed which to the user renders as if we do not have a splash screen.

Splash screens tend to have around 2 to 5 seconds depending on the complexity of the app, ours renders in less than 1 second which is too quick.

The current splash screen we have on the android version of the app seen in photo above

User behaviour insights

In our usability testing done on 13 and 14 of November 24. We set the splash screen to an est. 2 seconds. We saw no issues with users feeling like the app was slow or attempting to interrupt the biometric sequence. We think the presence of the splash screen communicates to the user that the app is preparing itself and the transition to biometric seem to put the user in a wait which was the intended outcome. In some cases, when the splash screen transitioned to biometric, we saw the user pick up the phone to bring it closer to their face, which meant the app was communicating the right message in the correct sequence

Details

Google describes splash screens as:

The splash screen experience brings standard design elements to every app launch, but it's also customisable so your app can maintain its unique branding.

Launch screens can be displayed upon an app’s launch from the home screen when an app loads, instead of displaying a blank screen. Displaying a launch screen can decrease the sense of a long load time, and has the potential to add delight to the user experience

Additional latency is often associated with launching an app on a cold start. Adding an animated icon to your splash screen has obvious aesthetic appeal and provides a more premium experience. User research shows that perceived startup time is less when viewing an animation.

Apple describes it as:

Launching begins when someone opens your app or game, includes an initial download, and ends when the first screen is ready. After launching completes, you might offer an onboarding experience, which can give people a high-level view of your app or game.

Every iOS app must provide a launch screen, a screen that displays while your app launches. The launch screen appears instantly when your app starts up and is quickly replaced with the app’s first screen.You create a launch screen for your app in your Xcode project in one of two ways:

• Information property list
• User interface file
  To make the app launch experience as seamless as possible, create a launch screen with basic views that closely resemble the first screen of your app.For guidelines about designing a launch screen, see
  Launching in the Human Interface Guidelines

Reference

https://developer.android.com/develop/ui/views/launch/splash-screen
https://m2.material.io/design/communication/launch-screen.html#branded-launch
https://developer.apple.com/design/human-interface-guidelines/launching
https://developer.apple.com/videos/play/wwdc2017/816

[Tosin-Balogun]

XML file for Android

    <style name="NHSAppTheme" parent="Theme.AppCompat.Light.NoActionBar" />

    <style name="NHSAppTheme.Starting" parent="Theme.SplashScreen">
        <!-- Set the splash screen background, animated icon, and animation duration. -->
        <item name="windowSplashScreenBackground">@color/nhsukblue</item>

        <!-- Use windowSplashScreenAnimatedIcon to add either a drawable or an
             animated drawable. One of these is required. -->
        <item name="windowSplashScreenAnimatedIcon">@drawable/bg_splashscreen</item>

        <!-- Set the theme of the Activity that directly follows your splash screen. -->
        <!-- Required -->
        <item name="postSplashScreenTheme">@style/NHSAppTheme</item>
        <item name="android:windowLayoutInDisplayCutoutMode">default</item>
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">true</item>

    </style>