In the design, some abnormal situations are often easily ignored, in the later practice process found that there is still this state… This article summarizes the common abnormality and the way to deal with it, and hasten to learn from it.
1. quickly understand what the anomaly is.
The explanation for the anomaly in Baidu is this: anomaly, pinyin: ychng, is a Chinese word. Not normal; different from ordinary ones.
Exceptions in design refer to situations other than normal state. For example, if you want to design a download button, how many states does the download button need?
Normally, the download buttons you need to provide should be as follows: click on the download button (before downloading), download (or in the download, 59% of the download description), download complete, if you only provide these three download status in the design is not enough (in fact, some novice designers, only provide click download) This state. You should also consider what to do if there is a break in the download, or when the user suspends the download and so on. This is the exception, so in addition to the first three states, you also need to provide continued download, download failure, and so on. After the download is completed, the current design will generally be automatically installed, at this time the display installation, if not automatically installed also need to provide installation operations, installation after the completion of the open operation. Of course, the abnormal state of this is mainly the continued downloading and downloading failure after the pause.
The following is the download button I made, you can see that many states such as clicking download, download complete, install, open and so on are the same in visual performance, but the text is different, even so, these should be given by both interaction designers and visual designers, otherwise the programmer will not know. Which form of button is used in the way? In fact, in some login, payment, submission buttons, there is a “unavailable” state, the user did not enter information, the login button gray, only when the user entered the corresponding information, the button will be highlighted.
2. summary of abnormal situations
Through the above examples, I believe that we have fully understood what is the exception in the design, as well as how to handle the exception, then we will summarize the common exception in the design.
There are two cases of exception handling.
Two kinds of exception handling
1. There are obvious hints in the interface that require the user to understand this situation and affect the user to proceed with the next operation, mainly including the following seven cases:
Related to the network environment: download failure, server error, disconnection, slow network speed, load failure, network connection failure (wifi password is correct, the connection is unsuccessful);
Empty status: search results are empty, no browsing record, no collection, no purchase record, no order record, no download record, etc.
Form type anomalies: password error, input characters too few, the number of excess, account password does not conform to the corresponding rules, account expiration, must fill in the item is not filled in (prompt and positioning), must fill in the input character is blank, etc.
Timeliness: Two-dimensional code / verification code expiration / failure treatment, such as effective links, two-dimensional code, etc.
Limited values: upload files beyond the limit size, operation too frequently (frequent refresh, praise, shake, stamp, etc., need to give a friendly prompt);
Not available: account does not exist, account expired, options are not optional, button ashes and so on;
Others: Connection failure of external equipment (such as remote control, audio, mobile phones, etc.), power failure / low power, installation failure;
2. Users can’t feel this kind of abnormality in operation, and have little influence on user’s operation.
It is mainly caused by exceptions caused by user switching tasks, such as pressing the home key to exit / Switch Applications suddenly, the return key to exit, the download process to exit, and so on.
Above is in the design of some common anomalies summary, see here, many friends may have to say, so much, how do I remember. My personal advice is that if you’re familiar with the above exceptions, you’ll actually take them into account when designing similar modules; if you’re not familiar with them, you can use the exceptions described in the article as a checklist and refer to the above when designing the corresponding modules.
3. exception handling
Next, analyze the handling ways of these unusual situations, and deal with them in an abnormal way.
Related to network environment: download failure, server error, disconnection, slow network speed, load failure, network connection failure (wifi password is correct, connection is not successful)
1. download failed
Generally, you need to give a clear indication of the download failure, which can be prompted by pop-ups, Toasts, lists, etc. As shown in the following figure, the user is then prompted for further actions, such as retry, reload, delete, and so on.
2. server error
The page with 500 pages, 501, 502, 503, 504, 505 and other 5 initial pages on the page where the server is wrong. The explanations for these errors are as follows:
500 Internal Service errors: As the name implies, 500 errors are typically caused by an unexpected situation on the server, which prevents it from completing the request.
501 the server does not have the function of completing the request.
502 Bad Gateway error;
503 server is not currently available (due to overloading or downtime maintenance).
504 Bad Gateway timeout gateway timeout;
505 the server does not support the version of the HTTP protocol used in the request.
Server exceptions are handled by prompt + return on the page side, prompt + retry on the mobile side, and some common methods are shown below.
In recent years, many websites and applications have made this unusual page design more aesthetic and storytelling, enhancing the overall interest and reducing user anxiety. For example, the Internet was taken away by aliens and so on. I believe you have seen many of them. No examples here.
3. network anomaly
Broken network, slow network speed, network connection failure (WiFi password is correct, connection is not successful)
In fact, they are all network anomalies, loading failure is sometimes caused by slow network speed, and sometimes may be IIS (Internet Information Services Internet Information Service) space is insufficient. The following are some ways of handling network anomalies.
If the content of the page before the network exception is not cached, the whole network exception can be prompted and an operation can be provided to guide the user to operate.
If the page before the network exception is cached, the previous page is displayed, and Toast prompts the user for the network exception.
4. empty state
The search results are blank, no browsing record, no collection, no purchase record, no order record, no download record, etc.
In fact, the empty state is very good to understand, that is, when there is no content on the page, the empty page will generally remind the user of the current empty state of the page, but also can do the appropriate guide. For example, in movies and TV Apps, if the viewing record is empty, you can recommend movies for users, such as hot-air movies, guess what you like, others are watching hot recommendations for users to choose. However, it is not recommended to recommend if you can not confirm whether the user you recommend is interested.
5. form class exceptions
Password error, too few input characters, excess number, account password, etc. do not conform to the rules, account expiration, must not fill in the options (prompt and locate), must fill in the input characters are blank.
The form class exception suggests checking my last article. How to design the input box? There are more detailed discussions.
Two-dimensional code / verification code expiration / failure handling, such as effective links, two-dimensional code, etc.
The effectiveness of more embodied in two-dimensional code, payment code, verification code and other time-bound conditions to be effective, usually after the failure of the need to refresh, mobile phone screening operations are usually click or drop-down refresh; PC-side is usually like click, TV-side is press the “OK” key to refresh. As shown below, the QQ scan code login page and the UC browser’s mobile login page.
7. limit value
Uploaded files exceed the limit size and operate too frequently (frequent refreshes, compliments, jitters, stamps, etc.)
For files too large to upload, download this suggestion is to take a pop-up window to tell the user the current situation, clear the problem and add operation hints. A hint that a word file imported by a new media manager cannot exceed 10M is shown on the left below. For too frequent operation, more common in QQ jitter window, in fact, in some TV pages in the mobile screenshots tool, refresh too often will also pop up Toast prompt.
Account does not exist, account expired, options are not optional, button ashes.
When the account does not exist for login, the input account is not in the registered account, it will be prompted that the account does not exist, whether to register immediately, and so on, as shown in the following figure.
9. account expired
App or website, login account, if not used for too long, then there will be expiration period, designers need to set the expiration period of login according to the specific circumstances of APP, at this time need to remind users to re-login.
There are two main ways to prompt Toast and pop-up window, which need to be based on the size of the impact of account expiration on the user to decide which way to use. As shown in the left-hand diagram below, the expiration of the login account has little effect on the user’s use of the application, so you can handle it with a Toast prompt; as shown in the right-hand diagram below, if you can’t use the function of the application without login, you need to prompt the user to log in with a pop-up window.
10. Options are not optional.
Mainly contains the current options are not optional options, but also in the absence of certain conditions, can not use this function button and so on.
Connection failure of external equipment (such as remote control, audio, mobile phone, etc.), power failure / low power, installation failure.
If you know the reason for the connection failure, it is recommended to give the reason.
Power failure is usually used in PC and TV terminals. After power failure, users need to recover files. Many design software has this function, once the software does not respond or other exceptional circumstances lead to file problems, usually provide recovery files.
After the installation fails, you need to provide hints about the cause of the installation failure, such as insufficient storage space, file corruption.
12. user switching tasks cause more anomalies.
Press home button to abruptly quit / switch application, return key exit, download process exit.
Such exceptions suggest that users return to the state before opening the last user. If the data is cleaned, return to the last saved data page.
This paper mainly summarizes the common abnormal situations in the design, and gives the corresponding solutions. The longest rule is to give the abnormal prompt + the next operation prompt, which not only clarifies the reasons for the error, but also guides the next operation of the user. The user is relatively easy to accept. Exceptions are part of the design, and both interaction designers and visual designers should give abnormal forms of expression or handling.