The article shared today comes from UI China member – Wang M – zheng’s article – network fault design summary.
When you are chatting with your friends on wechat, watching documentaries on B station, and checking in on SKR. When the network suddenly goes down, what kind of prompt should we give the user? Recently I have been combing through similar scenarios, so this article is to share with you how to give users appropriate tips in the case of network failure.
All error prompts/feedback can be broken down into two parts: error symptoms and solution. Therefore, when a network fault occurs, we should first tell the user that your current network status is abnormal, so that the user is aware of this fact, and then provide a solution.
Currently, common error reporting styles include toast, snackbar, dialog box, notification bar, interface embedded and blank page. I recently took a look at my previous articles and found that they were all based on components to illustrate applicable scenarios. The problem with this deconstruction approach is that in real life, product or interaction designers decide on appropriate components based on the scenario. So to make it easier for you to understand, I will not describe the use of each component, but rather define the components in terms of scenarios.
Don’t tip
First, let’s be clear about the fact that not every kind of network failure needs to alert users. In this case, “no warning” is a relative term. It is not true that the user is not informed of the network failure, but only when the user performs the operation of requesting data. Alipay is a typical example, even if the Internet is disconnected, users can hardly feel it. Only when the user requests new data will the user be notified of the network exception with toast.
This kind of high cold also has the confidence of Alipay, because most of its pages have a caching mechanism, users do not have to go to the server to request data every time they enter this page. Similarly, there are QQ Music and Goodong, for these products, the interruption of the Internet will not bring a disastrous impact. Because the disconnection didn’t stop me from listening to cached or downloaded good songs, or recording exercise data. Therefore, for such applications, when the network error, as long as the user did not trigger the data request operation, there is no need to prompt the user.
Of course, we need to set an expiration date for the cached data. If the expiration date expires and the network is still not restored, we should prompt the user that the network is faulty.
No cache
Not every page is cached, of course, but for pages without cached data, we have two options. One shows empty pages and the other shows a Skeleton Screen.
The skeleton screen, as its name suggests, is the frame that displays the page and renders the page when the data request is complete. This pattern of storing data before loading is also called a placeholder, which means the same thing.
Finally, the empty page, in fact, the empty page display scheme can also be divided into two kinds:
1 The refresh page button is available.
2 Provide “Solution” button;
Both schemes have their own reasons, and I personally prefer to merge them. The “refresh page” button is displayed. If the user clicks the button and still cannot request the data, the solution is provided in the form of snackbar. In fact, the solution is to guide users to check/open network permissions in the system Settings.
Persistent hint
Alipay does not alert users to pages with cached data, but it is necessary for instant messaging apps like QQ and wechat to give users feedback on network failures. Because if I don’t, I don’t know if I’m making the other person angry or if I can’t get it because of a network failure. Both QQ and wechat use a notification bar where users click to enter a page showing solutions to network problems. Some people might ask, why not use dialog box, dialog box can also do jump action.
I tried to analyze, if the use of dialog box, then dialog box trigger mechanism has two:
1 If the network is abnormal, a dialog box is displayed to notify the user.
2 If the network is abnormal, a dialog box is displayed immediately to notify the user.
The first trigger mechanism is obviously unreasonable, because users do not have to have a smooth network to use wechat. Some users just want to check their chat history. As long as you detect a network fault, a dialog box will pop up, which will cause great interference to users.
The second way is also unreasonable. If the network environment of the user is unstable and intermittent, then once you click to close the pop-up box for the first time, the user will not be aware of the subsequent network abnormalities.
Therefore, wechat users’ requirement for network fault prompt is to give users continuous prompt on the premise of not interfering with the normal operation of users. Ok, OK, I know this problem, but I don’t need to deal with it right away.
There are two controls that can satisfy the above condition: Snackbar and notification bar. Wechat uses notification bar and JINGdong uses Snackbar. Take JINGdong as an example. If a network fault occurs suddenly during the user’s use of JINGdong, a Snackbar will pop up from the top of the interface to notify the user. After the user clicks it, a page will be displayed showing some solutions. In fact, AS I mentioned above, the so-called solution is to let users go to the system Settings page to check/open network permissions. We can directly provide a jump link just like netease Cloud Music, saving users’ operation steps.
The difference between the snackbar and the notification bar is that the snackbar is fixed and will always appear at the top of the interface as long as your network is down. This is because JINGdong’s appeal to the Internet is stronger than wechat. Without wechat, users can also check chat records. What can JINGdong users do without the Internet? With no way to browse products, let alone chop off their hands, JD needs users to solve network glitches more than wechat.
Network switch
In addition to disconnection and weak network situations, another issue to consider is network switching. When the network switches from 4G to wifi, we use toast to remind users that there is no problem or even no problem, which will not have a big impact on users. But on the flip side, can we be so calm when wifi suddenly goes out and 4g switches?
When I watch a video on wifi and suddenly the wifi stops, it automatically switches to 4G. In order to avoid users consuming a large amount of traffic without their knowledge, we should inform users of network changes, and users can continue to watch after confirming them. At present, the main interface embedded and dialog box prompts, bilibili and netease cloud music are used here are embedded interface.
What is interesting is that in netease Cloud Music, if you listen to a song and the wifi suddenly breaks down, the 4G network will continue to cache the song, while QQ Music will not continue to cache the song. Just from this point on, I personally feel Tencent do more intimate.
If the network status changes from wifi to 4G, we should not use toast! On some android devices, toasts are disabled when the user turns off push in the system Settings. For these users, they will not receive the prompt, it is easy to cause traffic loss. Therefore, for high-priority feedback, we only consider using a dialog box, because the information contained in the dialog box is 100% visible to the user.
conclusion
The above is my design summary of network failure scenarios. If you have different views or opinions, please leave comments and discuss them.
Author: Wang M zheng
UI Chinese home page: http://i.ui.cn/ucenter/129823.html