许多应用程序的形式是必要的组件s and websites. We use them to log in, purchase items, send feedback, and enter our personal information. Think about the websites you use and how many times you enter information: how often do you run into errors? How frustrating is it to navigate those errors?

Error messages are an indicator of system status: they let users know that a hurdle was encountered and give solutions to fix them. But in order for the错误消息为了有效,人们需要看到它们,了解它们,并能够轻松行事。系统状态的可见性是Jakob Nielsen之一10可用性启发式. It refers to how well the state of the system is conveyed to its users. Ideally, systems should always keep users informed about what is going on, through appropriate feedback within reasonable time.

To err is human, and people willmake mistakes使用软件时。错误流量是用户必须通过的步骤顺序,以便纠正错误。周到的错误流程允许用户轻松解决他们的错误并继续完成任务。

There are three main principles that should be followed when designing error-correction flows:

  1. 错误消息应易于注意并理解。
  2. 错误的字段应易于定位。
  3. 用户不必记住以修复错误的说明。

These guidelines need little explanation: first, if users don’t know that there is a problem with their input, they won’t be able to fix it. Second, people shouldn’t have to hunt for the error through the form. And last but not least, they shouldn’t have to记得how to fix the problem while they’re fixing it: the instructions should be right in front of their eyes.

In this article, we discuss helpful guidelines for designing error flows.

1. Aim for Inline Validation Whenever Possible

Ideally, all validation should beinline:即,一旦用户完成填充字段,如果字段包含错误,则应在附近出现指示符。这种类型的错误消息很容易引人注目;此外,在该字段完成后立即修复错误需要最少互动成本for users: they don’t need to locate it or navigate to the field, nor do they have to switch context from a new field to return to an old field they thought they had completed successfully.

Of course, there will be situations where inline validation won’t be possible and data entered by the user will need to be sent to a server for verification.

2. Indicate Successful Entry for Complex Fields

Inline validation can also be used to indicate successful completion. For example, if your users must create a unique username, a green checkmark and a message that the username is available let users know they can proceed to the next step. Follow the预防错误指南:提供对字段值的建议,约束对合法值的输入,并通过允许拼写错误,缩写或不同的输入格式来灵活。


slack password strength

然而,不要过度的成功指标s. Success indicators shouldn’t distract users from filling out forms and should only be used when the additional context helps complete the form faster or more accurately. For example, you don’t need to show a success message when the only requirement on the field is that it is filled in, as that message won’t provide much additional context to your user.


With inline validation, the error message is naturally shown next to the field causing the error. But even when the fields are not validated inline, it pays off to show an actionable error message below or next to the problem field in order to help the user fix the error. The message should followerror-message guidelines:它应该是明确的,人类可读的,礼貌,精确的,并且应该提供建设性的建议。

Keeping error messages next to the fields in error minimizesworking-memoryload: users can see the error message while fixing the error instead of having to remember it.

4. Use Color to Differentiate Errors from Normal Field States

Red is the color that is associated most with errors, along with orange or yellow for warnings, and green or blue for success. Make sure that the color of the validation text stands out from the rest of the form so the user will notice it quickly. Add a semitransparent background of the same color to the error field to make it salient on a long page with many form fields.

5. Add Iconography or Subtle Animation for Easy Scanning

Together with color, an icon to the left of your error message or validation summary will draw attention to the error and also help users who are color blind. When the user scans the form, the icon will stand out and draw the eye to what needs to be fixed.

error icon

微妙的脉冲或弹跳animationon the icon corresponding to an error can further draw users’ attention to the error. However, don’t abuse animation: if there are multiple errors, many animated icons can be overwhelming. And don’t animate text — animated error messages are hard to read.

6.. Use Modals or Confirmation Dialogs Sparingly

当您需要提高潜在错误时,您可以使用a莫代尔orconfirmation dialogto explain details and help the user fix the issue. However, use such dialogs sparingly as they have two big disadvantages: (1) they are disruptive; (2) the error message is presented in a window that needs to be dismissed in order to fix the error, so any complex instructions will have to be stored in users’ working memory, thus increasing their cognitive load. They are, however, okay if the error message is simple or the form could still be submitted as it is.



In most cases, avoid showing the error until the user has finished with the field and moved to the next field. It can be annoying to see an error message before being given the opportunity to finish typing.

在BestBuy.com上放置订单时,会出现错误消息电子邮件一种ddressfield after navigating away from the field. However, going back to fix the error prompted another error to appear on the电话号码field, although the user had not started typing in that field.

8. Don’t Use Validation Summaries as the Only Indication of an Error

一种validation summary顶部的显示形式,让用户了解吗w that there are errors that need to be fixed on the page, whether those errors are in the viewport or below the fold. A validation summary can give the user a global understanding of all the errors in a form, but shouldn’t be used as the only form of error indication, as it forces the user to search for the field in error; moreover, the error message may no longer be present in the viewport when the user reaches the error field, thus forcing the user to memorize the error message while fixing the issue.

validation summary

9. Don’t Use Tooltips to Report Errors

Tooltipsare sometimes used to indicate errors. An alert icon is usually displayed next to the field(s) in error, and then, once users hover on the icon or move focus in that field, a tooltip or a toast containing the error message will appear.



10. Provide Extra Help for Repeated Errors

If the same error occurs repeatedly (usually 3 times or more in a single form-filling attempt), it is often an indication of a serious problem in the user interface. Quite possibly, your error messages are insufficiently helpful, but there could also be another mismatch between the design and users’ needs. As always, remember that when users make errors, it’s not their fault. It’s your design that’s too error-prone.

We recommend reviewing analytics data for repeated errors and then reviewing (or testing) the design to try to improve it. A rewritten error message would often be the first thing to try.

一种s more of a band-aid solution, you can also show a link to more detailed help information or documentation after a user has made the same error too many times.


Error flows should be designed to help users fix the mistakes in a form and advise them how to avoid making more. Ensure that users can easily detect errors, understand how to fix them, and see the error message while correcting the corresponding error. Remove the guesswork and let users get on with their tasks.