In design, exceptions refer to situations other than the normal state. For example, if you want to design a download button, how many states should the download button have?
The status of the download button that needs to be provided under normal conditions should be as follows: click Download (before downloading) to download (or describe that 59% of the download is in progress or has been downloaded). If you only provide these three download statuses in the design, it is not enough (in fact, some novice designers only provide click download).
You should also consider how to deal with the situation that the network is disconnected during the download, or the user suspends the download?
This is the exception.
Therefore, in addition to the previous three statuses, you also need to provide statuses such as continue downloading and download failure.
After the download is completed, the current design will be automatically installed. At this time, the installation is displayed. If the automatic installation is not required, the installation operation is also required. After the installation is completed, the open operation is provided.
Of course, the abnormal status included in this is mainly the continued download and download failure after the pause.
The following figure is the download button I made. It can be seen that many statuses, such as click download, download completion, installation, and opening, are the same in visual representation, but the text is different.
Even so, these due states should be given by both interaction designers and visual designers, otherwise the programmer will not know which type of button to use in which case.
It mainly includes the following 7 situations: Related to the network environment: download failure, server error, network disconnection, slow network speed, load failure, network connection failure (correct wifi password, unsuccessful connection); Empty Status: search result is empty, no browsing record, no collection, no purchase record, no order record, no download record, etc; Form type exceptions: wrong password, too few characters entered, excessive quantity, account and password not conforming to the corresponding rules, account expired, mandatory items not filled in (prompt and locate), mandatory items with blank characters entered, etc; Timeliness: expiration/invalidation of QR code/verification code, such as effective links, QR code, etc; Limit value: upload files exceed the limit size, and operations are too frequent (frequent refreshes, likes, shakes, stamps, and so on, and friendly prompts should be given); Unavailable: account does not exist, account expires, option is not optional, button is grayed out, etc; Others: external equipment connection failure (such as remote control, audio, mobile phone, etc.), power failure/low power, installation failure; 2. The user does not feel this abnormality in the operation, and has a small impact on the user's operation.
In fact, there is also an "unavailable" status for some login, payment, and submission buttons. When the user has not entered information, the login button will be grayed out. The button will be highlighted only after the user has entered the corresponding information. 2、 Summary of exceptions Through the above examples, we believe that we have fully understood what exceptions are in the design and how to handle them. Then let's summarize the common exceptions in the design.
Exception handling can be divided into two cases. Two types of exception handling 1. There are obvious prompts in the interface that require the user to understand this situation and affect the user's next operation.
It is mainly the exception caused by the user switching tasks: such as pressing the home key to exit/switch applications suddenly, the return key to exit, and the download process to exit.
The above is a summary of some common exceptions in the design. Seeing this, many friends may have to say, how can I remember so many.
My personal advice is: if you are familiar with the above exceptions, you will actually consider the corresponding situation when designing similar modules; If you are not familiar with these, you can use the exceptions described in the article as a checklist. When designing the corresponding module, you can refer to whether the above situation will occur. 3、 Exception handling Next, we will analyze the handling methods of these exceptions and handle them by exception.
Related to the network environment: download failure, server error, network disconnection, slow network speed, load failure, network connection failure (correct wifi password, unsuccessful connection) 1 In general, a clear download failure prompt is required for download failure, which can be prompted through pop-up window, toast, list, etc. As shown in the figure below, the user will be prompted for the next step, such as retry, re download, delete, etc.
2. The empty status search result is empty, no browsing record, no collection, no purchase record, no order record, no download record, etc.
In fact, the empty status is easy to understand, that is, when the page has no content, the empty page will generally prompt the user about the empty status of the current page, and can also do appropriate guidance.
For example, in the movie app, if the viewing record is empty, you can recommend movies for users, such as popular movies, guess what you like, and others are watching.
However, if you are not sure whether the user you recommend likes it, you are not recommended to make a recommendation.
3. Form type abnormal password error, too few characters entered, excessive quantity, account number and password not conforming to the rules, account number expired, mandatory items not filled in (prompt and locate), mandatory items with blank characters entered, etc.
4. Expiration/invalidation processing of timeliness QR code/verification code, such as effective links, QR code, etc.
More effectiveness is reflected in the case that the QR code, payment code, verification code and other time limited conditions are effective. Usually, they need to be refreshed after expiration. The filtering operation of mobile phones is usually click or pull down to refresh; On the PC side, it is usually like clicking, while on the TV side, it is like pressing the "OK" key to refresh.
The following figure shows the scanning login page of QQ and the mobile phone login page of UC browser.
5. The upload file exceeds the limit size, and the operation is too frequent (frequent refreshes, likes, shakes, stamps, and so on, and friendly prompts should be given)
For the suggestion that the file is too large to upload or download, a pop-up window is used to tell the user the current situation, clarify the problem, and add an operation prompt. For example, the prompt that the imported word file in the new media manager cannot exceed 10M is shown in the left figure.
For dithering windows that operate too frequently and are commonly found in QQ, in fact, Toast prompts will pop up in some mobile screenshots tools on TV pages that refresh too frequently.
6. Unavailable account does not exist, account expires, option is not optional, button is grayed out, etc.
When the account does not exist for login, if the entered account does not exist in the registered account, you will be prompted whether the account does not exist, whether to register now, etc.
7. The account expires. In the APP or website, if the account is not used for a long time after login, there will be an expiration period. The designer needs to set the expiration period of login according to the specific situation of the APP. At this time, the user needs to be reminded to log in again.
There are mainly two ways to prompt: Toast and Pop up window. This depends on the impact of account expiration on users.
As shown in the left figure below, the expiration of the login account has little impact on the user's use of this application, so Toast light prompt can be used; As shown in the following figure on the right, if you do not log in to the account, you cannot use the function of this application. You need to pop up a strong prompt to prompt the user to log in.
8. Options not selectable mainly include options that are not selectable in the current options, and buttons that cannot use this function under certain conditions.
9. Other external devices failed to connect (such as remote control, audio, mobile phone, etc.), power failure/low power, installation failure. You need to be prompted if the external device fails to connect. If you know the reason for the connection failure, it is recommended to give the reason.
Power failure is usually used at the PC and TV ends, and files need to be recovered for users after power failure. Many design software have this function. Once the software fails to respond or other abnormal conditions lead to file problems, it will generally provide recovery files. After the installation fails, you need to provide a prompt about the reason for the installation failure, such as insufficient storage space and corrupt files.
10. There are many exceptions caused by user switching tasks, such as pressing the home key to suddenly exit/switch applications, the return key to exit, and the download process to exit.
11. Server error The page with server error usually starts with 500, 501, 502, 503, 504, 505, etc. These errors are explained as follows: 500 internal service errors: As the name implies, 500 error generally means that the server encounters an unexpected situation and cannot complete the request; 501 server does not have the function of completing the request; 502 Bad Gateway error; 503 server is currently unavailable (due to overload or downtime for maintenance); 504 Bad Gateway timeout; The 505 server does not support the HTTP protocol version used in the request. When the server is abnormal, the processing method on the web side is prompt+return, and the processing method on the mobile side is prompt+retry. The following figure shows some common processing methods.
In recent years, many websites and applications have made this unusual page design relatively beautiful and storyful, which has improved the overall interest and reduced user anxiety. For example, the network was hijacked by aliens. I believe you have seen a lot. There are no examples here.
12. Abnormal network disconnection, slow network speed, network connection failure (correct wifi password, unsuccessful connection)
In fact, they are all network exceptions. Sometimes the loading failure is caused by the slow network speed, and sometimes the IIS (Internet Information Services) space is insufficient. The following figure shows how to handle some network exceptions.
If the application did not cache the content of the previous page before the network exception, the user will be prompted for the network exception as a whole, and an operation guide can also be provided;
If the page has been cached before the network exception, the previous page will be displayed, and Toast will gently prompt the user of network exception. This kind of exception suggests that the user return to the state before the last user left when opening again. If the data is cleaned, it will return to the last saved data page. 4、 The summary article mainly summarizes the common exceptions in the design, and gives the corresponding solutions. The longest rule is to give an exception prompt+the next operation prompt, which not only clarifies the cause of the error, but also guides the user to the next operation. Users are relatively easy to accept.
This article comes from Shangpin China: Beijing Website Design Company
