许多应用程序的形式是必要的组件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
Slack指示密码规则,但也提供了即时验证,通过显示用户键入的密码强度计。

然而,不要过度的成功指标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.

3.在字段旁边保留错误消息

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
Adobe.com:红色颜色和错误消息旁边的图标制作了用户的注意。

微妙的脉冲或弹跳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.

模态警告
Gmail.com使用模态警告缺少附件的用户。此错误演示是合适的,因为错误消息相当简单,并且用户可以选择继续,而不包括附件。

7.在输入完成之前,请勿验证字段

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
Surveymonkey在表单顶部提供错误消息,以及原因错误的特定字段。

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.

通常,我们建议使用这种信令错误的方法。首先,一些警报图标很难注意到。其次,用户可能会想知道该字段有什么问题,而不意识到他们实际上可以看到错误消息,如果他们拍摄额外的步骤。第三,为什么让用户更多地工作(即,悬停或将焦点移动到字段),以便查看错误消息?

Facebook工具提示
Facebook.com:注册表单中的错误显示为警报图标。用户必须点击每个人看问题是什么。虽然在这个例子中,错误很容易推断,如果填写了字段,则更加困难。

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.

Conclusion

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.