How to design the app opening page? Let’s look at these 5 common methods

It only takes 50 milliseconds (0.05 seconds) for users to evaluate a website/app and decide whether to stay or leave. The rationality of the opening page design greatly affects the user's initial experience.

First impression counts! Many users will judge whether they can trust a company or product based on the initial image of the app/website.

So how do we solve the problem of rapid perception? First, let’s focus on the first impression the App gives us. A reasonable startup page can stimulate the user's subconscious mind and help attract and retain the right users.

Before we dive into design strategies, let’s first understand the basics of splash screens.

1. What is the startup screen?

A launch screen is a series of continuous user experiences - from the time the user clicks the app icon to the time the content is loaded. Usually includes the following five forms:

1. Application Icon (the first step in the startup experience)

2. Startup screen (opening screen)

3. Jump from the opening page to the content page

4. Startup mode of skeleton screen (waiting to load)

5. Animated opening screen (loading more content)

2. What problems can the splash page solve?

The splash screen is the gateway to the product experience, improving the user experience by simulating faster loading times and creating a seamless startup experience.

Design is not just about appearance, but about solving specific user problems. What problems can the startup page solve?

1. Communicate with users subconsciously and set expectations for the future;

2. Reduce the perceived waiting time by hiding the loading process;

3. Introduce the purpose and brand of the App to users;

4. Provide users with a pleasant experience.

3. Analysis of the design method of the opening page

By sorting out the problems, here are 5 methods of opening page design to effectively attract users' attention.

1. Custom icons bring personalized experience to users

Starting from iOS 10, developers can personalize predefined icons. For example, Bear allows users to adjust the color of the icon based on the theme color.

MLB allows users to select their favorite team as the launcher icon.

2. Combine brand and slogan to convey information

A startup page is like an ongoing marketing campaign because every time a user opens the app, their impression of the brand deepens.

By adding a signature slogan or image to your launch page, you can emphasize the purpose of your app and set certain expectations for your users.

For example, the three apps in the picture above place the brand logo on the opening page. This design directly stimulates the user's senses.

The three apps in the picture above, History, DocuSign, and Ted, strengthen their value proposition by adding slogans to the opening screen.

3. Use interactive animation to achieve a seamless experience from the opening page to the content page

There is a perceptible loading time between clicking the icon and loading the content. If appropriate animation is incorporated into this period, users can have an advance understanding of the product status.

The three apps in the picture above all use animation to build a seamless bridge between the opening page and the content page.

Apps like Google, TinyFax, and Cinamatic use animation to subtly transform icons into content.

Similarly, although the animations used in the three apps above are not very delicate, they can still complete the transition from the initial page to the content.

Some apps keep their animations simple, like the one above, which only highlights the logo.

Chick-fil-A adds a prompt animation on the opening page to successfully guide users to the content page.

4. Combine the splash screen and skeleton screen to strengthen the feedback loop

For most apps, it makes more sense to use a splash page + skeleton screen, because lightweight apps usually load very quickly and the skeleton screen can provide a smoother experience.

These apps preload the home page content on the launch page, and Breathe (center) uses a colored skeleton similar to the home page content. Transit (right) uses the skeleton of the map as the launch page, which is convenient for users to click directly after loading.

The app above uses preloading and animation to grasp the timing and give people the impression of "coming soon".

Snow, Dribbble, and Launch Pro use very few skeleton states compared to the previous applications.

5. Use loading animations to create interesting experiences

Some apps need to load a lot of data when they start, such as video and audio, so they take a lot of time to load.

For this type of application, a slightly longer animation makes more sense. As data is cached and loading times decrease, animations can become shorter and shorter.

The app in the picture above uses animation to load data, giving users time to give feedback.

Clashem, Tumbleweed, and Chefsfeed use fun animations to load data while reinforcing the brand experience.

Summarize

After looking at so many cases, how long should the startup screen be displayed? This should take into account the configuration of the application and the time it takes to load the data.

Customize the startup experience to suit different usage times and users:

1. Users at different stages should have different startup experiences;

2. Consider the size of the application first and then choose a reasonable startup page;

3. Use images to convey information and animations as a guide;

4. Use unique icons for branding whenever possible.

Author: Clip Design

Source: Clip Design