text
The article I bring to you today is the design of the "opening page". Users only need 50 milliseconds (0.05 seconds) to evaluate the website/App and decide whether to stay or leave. The rationality of the screen opening page design greatly affects the user's initial experience.
First impressions matter! Many users will judge whether they can trust the company or product based on the initial image of the app/website.
So how to solve the problem of fast perception? First of all, focus on the first impression that the App brings to us. A reasonable startup page can stimulate the user's subconscious mind and help attract and retain the right users.
Before diving into design strategies, let's cover the basics of splash screens.
1. What is the splash screen?
A splash screen refers to a continuum of experiences—from when the user taps the app icon to when the content loads. Usually include the following five forms:
1. Application icon (the first link to participate in the launch experience)
2. Splash screen (open screen page)
3. The opening page jumps to the content page
4. The startup form of the skeleton screen (to be loaded)
5. Animated opening screen (load more content)
2. What problems can the opening page solve?
The splash page is the gateway to the product experience, improving user experience by simulating faster load times and creating a seamless start-up experience.
Design is not just about how it looks, but about how it solves a specific user problem. What problems can the startup page solve?
-
Communicate with users subconsciously and set expectations for the future;
-
Reduce perceived wait times by hiding the loading process;
-
Introduce the purpose and brand of the App to users;
-
Provide a pleasant experience for users.
3. Analysis of screen opening page design method
Through sorting out the problems, here are 5 methods of opening screen design, which can effectively attract users' attention.
1. Custom icons bring personalized experience to users
Starting from iOS10, developers can personalize the predefined icons. For example, Bear allows users to adjust the color of the icon according to the theme color.
MLB allows users to choose their favorite team as the startup icon.
2. Combining brand and Slogan to convey information
The launch page is like a continuous marketing activity, because users will deepen their impression of the brand every time they open the App.
By adding an iconic slogan or image to the launch page, you can both emphasize the purpose of the app and set certain expectations for users.
For example, the three apps in the above picture put the brand logo on the opening page, which directly stimulates the senses of users.
The three apps of History, DocuSign and Ted in the above picture strengthen the value proposition by adding slogans in the opening screen.
3. Use interactive animation to achieve a seamless experience from the opening page to the content page.
From clicking the icon to loading the content, there is a perceivable loading time in the middle. If appropriate animations are incorporated during this period, users can have an advance view of the product status understanding.
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 by the above three apps are not very delicate, they can also complete the transition from the initial page to the content.
Some applications keep their animations simple, such as the above image where only the logo is highlighted.
Chick-fil-A added a prompt animation on the screen opening page, successfully guiding users to the content page.
4. Combining the opening page and skeleton screen to strengthen the feedback loop
For most applications, it makes more sense to use the form of opening screen + skeleton screen, because lightweight applications usually load very quickly, and the skeleton screen can get A smoother experience.
These apps preload the content of the home page on the startup page, and Breathe (middle) uses a colored skeleton similar to the content of the home page. Transit (on the right) uses the skeleton of the map as the startup page, which is convenient for users to click directly after loading.
The app pictured above uses preloading and animations to time the time, giving the impression that it’s “coming soon”.
Compared to the previous apps, Snow, Dribbble, and Launch Pro use very few skeleton states.
5. Use loading animations to create an interesting experience.
Some apps need to load a lot of data when starting, such as video and audio, so it takes a lot of loading time.
For these types of applications, slightly longer animations make more sense. Animations can become shorter and shorter as data is cached and load times shortened.
The App above uses animations to load data and give users time to give feedback.
Clashem, Tumbleweed, and Chefsfeed use fun animations to reinforce the brand experience while loading data.
3. Summary
After seeing so many cases, how long does it take for the startup screen to be displayed? This should take into account the configuration of the application and the time it takes to load the data.
Customize the launch experience to suit different usage times and users:
· Users at different stages should have a different start-up experience;
· Consider the size of the application before choosing a reasonable startup page;
Use images to convey information and animation as a guide;
· Use unique icons for branding whenever possible.
I hope the article can benefit you~
More Android learning materials can be obtained for free by scanning the QR code!
"Android Programming Beginner's Guide"
Table of contents
The first chapter Java language basics from entry to familiarity
● Overview of Java
● Java basics
● class
● object-oriented
● container
● Multithreading
● IO
● regular expressions
● Calendar
● Annotation usage and simple instructions
● Java uses encryption algorithms
Chapter 2 Kotlin language basics from entry to familiarity
● Introduction to Kotlin Series
● New project
● Concept introduction
● Common ways of writing
● lambda
● Higher-order functions
● Extension functions
● Coroutines
Chapter 3 Android technology stack from entry to familiarity
● start
● Activity
● Service service
● Broadcast mechanism
● Fragment
● res application resources
● Permissions
● TextView displays text
● EditText user input
● Button button
● ImageView image display
● Layout layout
● DrawerLayout Side Slider
● RecyclerView display list
● Multithreading
● I/O operations
● storage
● NetWork network
● ProgressBar progress bar
● View
● Custom View
● animation
● WebView
● Status bar
● Camera
● Media
● Bluetooth Bluetooth
● WiFi connection
● Get the current angle of the phone
● launcher
● AIDL
● zip
● Binder
● Notification notification
● PackageManager
● RTFSC
● Design Patterns
● Third-party libraries
● Android Studio
● Modularity
● Gradle
● GDR
● Debugging
Chapter 4 Android Jetpack family bucket comprehensive study
● Introduction
● databinding
● LiveData event delivery
● LifeCycle life cycle
● WorkManager
● ViewModel
● Database
● Paging
