Visual design: Small splash screen contains a lot of attention

Article Description: What is the learning of a small splash screen, and how does it affect the user experience of the product? This article has done some analysis and the summary, hoped will be helpful to you.

You need to click on the icon to wait for the application to start. In this simple process, the splash screen will appear in front of us. Sometimes it gives us a light, sometimes it makes us confused, sometimes it makes us feel tired ...
What is the learning of a small splash screen, and how does it affect the user experience of the product? This article has done some analysis and the summary, hoped will be helpful to you.

What is a splash screen
When a user starts an operating system, software, or application, the first appearance of a graphical interface that hosts product identification and related information. For example, the startup screen of an Office software program that has a product identification, a publishing company, and some possible actions.

Why do I need to start the screen
According to experience design rules-let the user quickly start the task, the splash screen appears to be the user before the task of the obstacles. In fact, the reality is that the start of the program requires a little time, sometimes this time will be longer, such as operating system start-up, large graphics or office software start-up and so on. In this time, if the display of black screen is obviously inappropriate, if the display of a section of the running program code is too mechanical (early DOS operating system people should have the impression).

startup takes time, so it brings some user experience problems :
1. Users do not know what the machine is doing, they suspect that the machine is slow and inefficient
2. The user waits will have the boredom emotion, the direct influence to the machine emotion
In order to solve these experience problems, people use a picture instead of running code in the background, in exchange for people's favor to the machine. In order to do this, many companies are well-intentioned, animation more and more exquisite, the form is more and more. Here are a few examples, mainly about mobile application client launch screen (for example, iOS platform).

The environment in which the startup screen of the mobile application exists
The environment in which the mobile application exists is bad, which is relative to the PC. Even though product design spending has done a lot of subtraction on functionality, it will take some time for the application to start, even if engineers are doing performance tuning day and night. The need for a splash screen to exist in a mobile client product is unknown.

Mobile application startup screen design rule one --avoid displaying irrelevant content, including a nice picture, and try to make the splash screen meaningful. For users, they want to experience your application immediately rather than appreciate some useless information.
How to understand this law, how to use this law, the following examples illustrate everything, you can download and experience these applications, learn more about the launch screen secrets, welcome to contact.

The extension of the meaning of the scene one brand
If the startup time is not as short as two seconds, we can use this time to showcase the application's branding. But instead of just showing the brand, it's best to combine the services provided by the application to extend the meaning of the brand to the screen, to give the user a sense of intimacy, or to let the user know the culture of the product, or other stories that you want to let the user know.

case One is just the design of the logo. Many applications are designed in this way. Put your logo in the middle and tell the user that I am me. Then no emotion enters the content interface. Sometimes, the logo itself has texture, so that the picture can also be full of visual anticipation, if like Bing, a bit ...

case two graphic design is still very good. For example, Sina News application, let this sense of technology and quality reflected. One Earth also accords with people's understanding of the internationalization and timeliness of news. Adobe Photoshop's splash screen, which reflects its professional insight into color and light, will certainly evoke Adobe fans ' empathy for their technology. (Lack of human touch, but the sense of technology has increased.) ）

case three tell a story. Use the splash screen to tell a story for the logo. Maybe it's the octopus Paul's moon trip can also be big eyes over the year. In short, it's not just the logo, but the stories that make you happy. Of course, this kind of picture if not often updated, it will make your application too biased to an event or a group of people, easy to arouse the resentment of some users.

case four a targeted identification supplement. Can do that can reflect the application of the user's role, but not fancy. The following example is worth learning. Weekend pictorial, that is, drinking coffee to read the newspaper, there is a sentimental resonance. Network disk is a large pile of files, pictures, media information warehouse.

Scene two directly into the application main interface
Some apps on the iphone use the default interface frame as the splash screen. Users will feel that the application is responding very quickly-which is very useful on the mobile side and most applications do not. If the load time is too long, the user will think it is a network problem or the program freezes. Using the interface framework as a startup interface, you can ease the user's sense of boredom with application response delays. (Generally this interface is a picture, not a real control.) ）

case a Google app starts with a brief interface with a navigation bar and a tab bar. After a few seconds, the search box appears and tells you that you can use the application. It is worth noting that, because it is a fake diagram, do not use the available functions or operational modules on this splash screen, misleading the user program is already available.

Case Two The Facebook app needs to determine whether it is networked and the account is bundled when it starts. The first is a fake picture, only the navigation bar. Displays the login interface if the account is not bound, and enters the information center interface if the account is bound.

Case Three The Google Earth application begins with a panoramic view of the globe. So the splash screen is a static frame of the Earth, which is almost consistent with the application after the start of the screen, allowing users to feel very fast situational feedback.

The iphone's built-in apps mostly use this boot-screen approach (newsletters, SMS, ITunes, App Store settings, weather, etc.) so that users do not have to wait for the feeling to meet directly with the operating interface. This, of course, requires that the application itself does not require much time to start.
Perhaps some people think that no brand logo to start the screen feel that the brand has not been advertised. With Apple's official explanation, the user downloads and opens your app, you already know your brand. Whether your brand can make a good impression on the user is the user experience of the successor task, which includes allowing users to enjoy your service immediately without any waiting.

Scene three transition to a useful module
If your application requires the user to have the necessary action before using it, you can combine it with the splash screen without having to display it separately. This is also a way to improve efficiency.

Case One will register the registration link in combination. When the application determines the network, the user needs to log in, then the start screen automatically transitions to the login link. Yahoo Messenger, MSN doing is very natural. This allows your users to feel very careful design quality, improve the user's favor of the application. (generally this kind of application in the user first use-unbound account number, will appear in the login window, if already bound account, and the default login, the splash screen will take the Scenario II program. ）

case two local networking refreshes useful information
The official Twitter client opens the Search module interface directly at the start of the first launch, just cutting an area below the top navigation bar of the interface to the registration button. At this point the content area below the interface began to refresh, showing the instant simplicity of information.

Scene four appropriate animations
With the right animations, you can make your application start more shocking. Be sure to do it properly, not every time you want to start the application to enjoy a short video, unless it is very exciting and necessary.

case a photographic pictorial application at startup, it is a gradually clear picture. As the picture is presented, the program starts to complete and enters the Content list interface. This scenario, which uses content as a startup element, allows users to appreciate the services provided by the application from the moment they start.

Case Two The daily start time is recognized as long and long. Display a picture of a static frame, then a section of the logo display video, followed by the simulation of the Sky interface, at this time the data is still loading. Experience can not be said very well, every time to see the content of this application, have to wait at least a minute.

So use a video to do your application, but be careful. This increases the user's download time and delays the user's time to start the application.

Mobile Application Launch screen design rule two -the appearance of the start screen, the subconscious informed the user to choose the right hand direction.

On the iphone, in order to get more content, most people are using the vertical screen, so the iphone desktop does not provide a horizontal screen mode. If your application only supports a horizontal screen, then when the splash screen is displayed, it should be a horizontal display, which tells the user that the screen needs to be reversed instead of going into the task and informing the user.

• On the ipad, because of the larger screen size, most people are using a horizontal screen to see more content (on the ipad, the horizontal screen mode can show more operations or hidden content). This allows users to switch frequently in the direction of the screen, so your application is best supported in all directions. If your application supports only one direction, such as a horizontal screen, then when the splash screen is displayed, it should be a horizontal display, which tells the user that the screen needs to be reversed instead of going into the task and informing the user.

On the ipad, if your application supports both horizontal and vertical screens, you need to display a correct splash screen--consistent with the user's current usage direction.

Postscript
Small splash screen contains a lot of attention to it ~. Many people think that the starting screen of this kind of comparative visual work is the work of visual designers, who do not know the product of any one aspect of the need for smart strategy, the visual good-looking or interactive to do the user experience, is always not enough, is not possible. To really understand the user experience of the comprehensive knowledge requirements, in order to truly do a good user experience, good products.
I hope this article can help you design products, welcome to comment on, help me continue to improve the article.