We want users to love our apps and use it everyday and rave about them. When we go to a brick and mortar store or a shopping complex or restaurants first impressions matter, we make some assumptions about the place and start shaping our expectations. In same way when users launch an app they also set expectations based on what app shows as it starts up. Some very successful apps know this and have great start up experiences and you can see that in their star ratings and downloads as well. Simple changes to app launch behavior can help ship an app that stands out in the app store.
Mostly splash screens with product icon or company name is the first thing users experiences when they launch an app and that too for a second or so before the scene hard cuts into content. At this inflection point if app doesn’t do a good job to retain users attention then statistically there is a high chance of users abandoning the app.
Statistics show 1 sec delay in launch can cause 7% reduction in conversion
Image Credit: Kissmetrics.com
An app is considered slow and unresponsive if it takes greater than or equal to 1 second to be interactive. App needs to show an experience to the where the time for user to see something interesting and interactive in the app is approximately 500ms.
Some of apps with great app startup experience are
- Facebook on iOS
- Safari on iOS
- Wunderlist on iOS
Let’s look at Facebook launch or startup experience for a second. As soon as users press the Facebook icon on iOS user see app chrome.
User did not see any Facebook product icon, within some milliseconds app transitions to more interactive points in the app and sets users orientation on what to expect
and eventually after some time (milliseconds) content fades in instead of the grey bars.
These apps look smooth as they open and rather than UI feeling jumpy they are interactive, responsive, keep my attention and smoothly fades in content in its place.
When users open an app
In very general terms most OS do the following things when user clicks or presses an app icon to start an app.
- If the app is not running then OS first has to identify app binaries to load which takes some milliseconds
- After OS related binaries are loaded OS will try to load the framework binaries required to launch the app which takes milliseconds
- Now if you are making database connections or disk connections, app platform has to load those binaries to make those operations
- Once required binaries are available then framework starts its process of laying out the app in the app window – this is the first time user will see something from the app. Before this if users will only see your splash screen which might not be useful as that is not the intent of the user.
#3 and #4 are the opportunities for app authors to make creative decisions to create beautiful experiences.
Things that you can do to improve perceived performance
- Consider making your default/first page just a simple layout page that shows your app structure – think rectangles and basic colors.
- Once the structure is loaded then figure out the user ask i.e. which deep link page was requested. That is if your app supports deep linking, if not then you don’t have to worry about this.
- For the page requested let the default page handle routing so that you can centralize the app loading experience.
- This is the time when you should start showing either content requested or some sort of loading indicator, if you have to make network connections to get content.
- If you have to show loading indicators as it takes time to get content then do not show a general purpose loading bar in middle of the app. this is old and doesn’t give a great experience and helps keep user attention.
- One great technique I like is showing the user layout of the app in simple blocks. This helps users to understand how to read/consume content when it becomes available.
- Show some simple indicator that things are happening E.g. Facebook uses this simple card animations to show it is loading posts
Image Credit: Medium.com
- How can this be built:
- Use simple and static animations to represent this loading indicators
- Have different layout loading indicator animations to represent different layouts based on deep links or app orientation.
- Resources on default page and the ones used for animations should be static and not data bound. Resources for these animations should be part of the app package so that latency to read these from disk is small as compared to getting these from the web
- Fade in content in place of loading indicators as an when it is ready.
As a user of your app:
- I understand the app structure and know how it will layout
- I see things happening in progression rather than long halts
- I don’t get the impression that app is hung or is not working
- As layout starts appearing on the screen with loading indicators I know what and where to expect content when it is available
- I am constantly seeing changes on the screen which keeps my attention with the app rather than just killing it and moving on to something else as app takes a long time to load
- I don’t see apps name or logo again on its splash screen for a long time and feel like I’m getting to my content quickly.
These are simple changes that can improve your app performance and improve users perceived app performance. Stage your app launch so that it helps you to load content easily and helps users to understand the app in the process.