A comprehensive summary of design anomalies and how to handle them

In design, some abnormal situations are often easily overlooked, and it is not until the later practice process that we find that there is such a state... This article summarizes common abnormal situations and how to deal with them. Come and collect and learn!

1. Quickly understand what anomalies are?

The explanation of abnormal in Baidu is as follows: abnormal, pinyin: yì cháng, is a Chinese word. The meaning is abnormal; different from usual.

In design, exceptions refer to situations other than normal states. For example, if you want to design a download button, how many states does the download button need to have?

Under normal circumstances, the states of the download button that need to be provided should be: click to download (before downloading), downloading (or downloading, 59% downloaded, etc.), and download completed. If you only provide these three download states in the design, it is not enough (in fact, some novice designers only provide the state of click to download). You should also consider what to do if the network is disconnected during the download, or the user pauses the download. This is an abnormal situation, so in addition to the previous three states, you also need to provide states such as continue downloading and download failure. After the download is complete, the current design will generally be automatically installed, and it will display "installing". If it is not automatically installed, you need to provide an installation operation, and provide an open operation after the installation is complete. Of course, the abnormal states included here mainly include continuing to download after a pause, download failure, etc.

The picture below is the download button I made. You can see that many states such as click to download, download completed, install, open, etc. are the same in visual performance, but the text is different. Even so, these states should be given by both interaction designers and visual designers, otherwise programmers will not know what form of button to use in which situation. In fact, some login, payment, submission and other buttons also have an "unavailable" state. When the user does not enter information, the login button is grayed out. Only when the user enters the corresponding information, the button is highlighted.

2. Summary of abnormal situations

Through the above examples, I believe you have fully understood what the exceptions in the design are and how to handle them. Next, let’s summarize the common exceptions in the design.

There are actually two types of exception handling.

Two abnormal situation handling

1. There are obvious prompts in the interface, which require users to understand the situation and affect the user's next operation, mainly including the following 7 situations:

• Related to the network environment, etc.: download failure, server error, network disconnection, slow network speed, loading failure, network connection failure (wifi password is correct, connection failed);
• Empty state: search results are empty, no browsing history, no favorites, no purchase history, no order history, no download history, etc.;
• Form exceptions: incorrect password, too few characters entered, the number exceeds the limit, the account number and password do not comply with the corresponding rules, the account has expired, the required items are not filled in (prompt and locate), the input characters of the required items are empty, etc.;
• Timeliness: Expiration/invalidation of QR codes/verification codes, such as links and QR codes with validity;
• Limit value: Upload files exceeding the limit size, operations too frequent (frequent refresh, like, shake, poke, etc., friendly prompts need to be given);
• Unavailable: the account does not exist, the account has expired, the option is not selectable, the button is grayed out, etc.;
• Others: External device connection failure (such as remote control, speakers, mobile phones, etc.), power outage/low battery, installation failure;

2. The user cannot feel this abnormality during operation, and it has little impact on the user's operation.

The main exceptions are caused by users switching tasks: such as suddenly exiting/switching applications by pressing the home button, exiting by the back button, exiting during the download process, etc.

The above is a summary of some common abnormal situations in design. Seeing this, many friends may say, how can I remember so many. My personal suggestion is that if you are familiar with the above abnormalities, you will actually consider the corresponding situations when designing similar modules; if you are not familiar with these, you can use the abnormal situations described in the article as a checklist, and refer to whether the above situations will occur when designing the corresponding modules.

3. Exception handling

Next, let’s analyze how to handle these abnormal situations and handle them according to the abnormal methods.

Related to the network environment, etc.: download failure, server error, network disconnection, slow network speed, loading failure, network connection failure (wifi password is correct, connection failed)

1. Download failed

Generally, it is necessary to give a clear prompt for download failure, which can be done through pop-up windows, toasts, lists, etc. As shown in the figure below, the user is then prompted with the next step, such as retry, re-download, delete, etc.

2. Server error

Common server error pages are pages starting with 5, such as 500, 501, 502, 503, 504, 505, etc. The explanations of these errors are as follows:

• 500 Internal Service Error: As the name implies, a 500 error usually means that the server encountered an unexpected situation and was unable to complete the request;
• 501 The server does not have the functionality to fulfill the request;
• 502 Bad Gateway error;
• 503 The server is currently unavailable (due to overloading or maintenance);
• 504 Bad Gateway timeout Gateway timeout;
• 505 The 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 figures show some common processing methods.

In recent years, many websites and applications have designed such abnormal pages to be relatively beautiful and story-like, which has improved the overall fun and reduced user anxiety. For example, the network was hijacked by aliens, and I believe everyone has seen it a lot. I won’t give examples here.

3. Network anomaly

The network is disconnected, the network speed is too slow, or the network connection fails (the wifi password is correct, but the connection fails)

In fact, these are all network anomalies. Loading failures are sometimes caused by slow network speeds, and sometimes they may be caused by insufficient IIS (Internet Information Services) space. The following figure shows how to deal with some network anomalies.

If the application does not cache the content of the previous page before the network anomaly, the user will be prompted with the network anomaly and an operation guide can also be provided;

If the page has been cached before the network anomaly, the previous page will be displayed, and Toast will gently remind the user of the network anomaly.

4. Empty State

The search results are empty, with no browsing history, no favorites, no purchase history, no order history, no download history, etc.

In fact, the empty state is easy to understand. When the page has no content, the empty page will generally prompt the user that the current page is empty, and appropriate guidance can also be given. For example, in a movie app, if the viewing history is empty, you can recommend movies to users, such as popular movies, what you think you will like, what others are watching, and other popular recommendations for users to choose from. However, if you are not sure whether the user you recommend will like it, it is not recommended to make a recommendation.

5. Form exceptions

The password is wrong, the input characters are too few, the number exceeds the limit, the account and password do not comply with the rules, the account is expired, the required items are not filled in (prompted and located), the input characters of the required items are empty, etc.

For form-related exceptions, I suggest you check out my previous article "How to Design Input Boxes?", which has a more detailed discussion.

6. Timeliness

Expiration/invalidation processing of QR codes/verification codes, such as effective links, QR codes, etc.

Effectiveness is more often reflected in the cases where QR codes, payment codes, verification codes, etc. are only valid under time limits. Usually, they need to be refreshed after expiration. The filtering operation on mobile phones is usually to click or pull down to refresh; on PCs, it is usually like clicking, and on TVs, it is to press the "OK" button to refresh. The following figure shows the QQ scan code login page and the UC browser mobile login page.

7. Limit Values

The uploaded file exceeds the limit size, the operation is too frequent (frequent refresh, like, shake, poke, etc., friendly prompts need to be given)

For suggestions such as files that are too large to upload or download, a pop-up window is used to inform the user of the current situation, clarify the problem and add operation prompts. For example, the prompt that the imported word file in the new media manager cannot exceed 10M is shown in the left figure below. For operations that are too frequent, it is more common to see the shaking window in QQ. In fact, in some mobile screenshot tools of TV pages, Toast prompts will pop up if the refresh is too frequent.

8. Unavailability

The account does not exist, the account has expired, the option is not selectable, the button is grayed out, etc.

When the account does not exist and is used to log in, if the account entered is not among the registered accounts, a prompt will be displayed asking whether to register immediately, as shown in the figure below.

9. Account Expiration

In an APP or website, after logging into an account, if it is not used for too long, there will be an expiration date. The designer needs to set the login expiration time limit according to the specific situation of the APP, and at this time, the user needs to be reminded to log in again.

There are two main ways to prompt: Toast and pop-up window. You need to decide which one to use based on the impact of account expiration on the user. As shown in the left picture below, if the login account expiration has little impact on the user's use of the application, you can use Toast to lightly prompt; as shown in the right picture below, if the application function cannot be used without logging in, you need to use a strong pop-up window to prompt the user to log in.

10. Option is not selectable

It mainly includes options that are not selectable in the current options, and buttons that cannot use this function unless certain conditions are met.

11. Others

External device connection failure (such as remote control, speakers, mobile phones, etc.), power outage/low battery, installation failure.

If an external device fails to connect, a prompt is required. If you know the reason for the connection failure, it is recommended to give the reason.

Power outages are usually used on PCs and TVs, and files need to be restored for users after a power outage. Many design software have this function, and once the software becomes unresponsive or other abnormal situations cause file problems, recovery files are generally provided.

If the installation fails, you need to provide a prompt to explain the reason for the installation failure, such as insufficient storage space or corrupted files.

12. There are many exceptions caused by user switching tasks

For example, you can suddenly exit/switch apps by pressing the home button, exit by pressing the back button, or exit during the download process.

For this type of exception, it is recommended that the user return to the state before the user left when opening the application again. If the data has been cleared, return to the last saved data page.

IV. Conclusion

The article mainly summarizes the common abnormal situations in design and gives corresponding solutions. The most commonly used rule is to give an abnormal prompt + a prompt for the next operation, which not only clarifies the cause of the error but also guides the user to the next operation, which is relatively easy for users to accept. Exceptions are part of design, and both interaction designers and visual designers should give abnormal expressions or handling methods.