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>

[pinhs1]

User behaviour insights – DEC 2024 Unmoderated Testing

We tested with 15 users total across mix of demographic profiles, 60% of participants were over 55 with varying levels of digital confidence, App and non-App users with a mix of iOS (33%) & Android (67%) users with 13/15 participants being biometric users. For our new proposed launch screen:
Only 2/15 could not recall the launch screen

P1: “Um, yeah, that's the first screen you see when you open up the app and immediately the face scanning technology opens up and it scans your face”

2/15 thought it was an error screen

5/15 did not find the purpose of the launch screen clear - This could be due to the lack of motion on this screen as even in the flow it is a static screen

P3: “It's only got NHS on it, so I don't see the point...I feel I've failed somehow because it hasn't clicked on to the next aspect or the next part of it”

Key Observations:

• Participants found the Face ID 'tick' reassuring in knowing that they successfully logged in (i.e., system status) but some participants felt unsure about the launch screen
• The visuals on the splash screen with the Face ID, title text and the continue button felt overwhelming to participants
• Participants expressed the need for having clear instructions for next steps if log-in fails (e.g., cancel biometrics) , need to be provided by content (e.g., text), and/or visuals (e.g., components) to drive user behaviour and action
• Users are often left to make assumptions and infer based on existing knowledge

What’s Next:

• Confident it's working - These flows are not breaking anything and address the main issues; therefore, we’re obtaining technical estimates to establish delivery plan (will provide detailed design spec to support dev & delivery works)
• Continuous Improvements – continue collaboration with wider log-in stakeholders and team, with secondary research on how long log-in should take
• Iterations that will be made – how might we help users understand system status on the launch screen and help users navigate to the desired action within a circular context (e.g., splash screen in the cancel biometrics flow)