To avoid this, you can follow four guidelines to increase the visibility of error messages. First, display the error message close to the error source.

これを避けるには、エラーメッセージの視認性を高めるための4つのガイドラインに従えばよい。第一に、エラーメッセージをエラー発生源の近くに表示する。

Second, use noticeable, redundant, and accessible indicators.

第二に、目につきやすく、冗長で、アクセスしやすい指標を使うこと。

Third, design errors based on the impact.

第三に、影響に基づく設計ミス。

And fourth, avoid prematurely displaying errors. Now let's take a look at what each of these actually mean. First, we have to display the error message close to the error source.

そして4つ目は、早すぎるエラー表示を避けること。では、それぞれの実際の意味を見てみよう。まず、エラー・メッセージをエラー・ソースの近くに表示しなければならない。

This proximity helps users recognize the error message and easily understand what it is related to.

この近接性は、ユーザーがエラーメッセージを認識し、それが何に関連しているのかを簡単に理解するのに役立ちます。

Because if the error message is displayed far from the error itself, it is less likely to be seen by our users and they may struggle understanding which input the error message is related to. Second, we must use noticeable, redundant, and accessible indicators for our error messages.

なぜなら、エラーメッセージがエラー自体から離れた場所に表示されると、ユーザーがエラーメッセージを見る可能性が低くなり、エラーメッセージがどの入力に関連しているかを理解するのに苦労するかもしれないからです。第二に、エラーメッセージには、目立ちやすく、冗長で、アクセスしやすいインジケータを使わなければなりません。

For example, if a user had to fill out a form and missed the required field, we could increase the visibility of the error by using bold text, including a visual that indicates there's an error, and by highlighting the All of these elements should be visually distinct from the rest of the page so they are easily recognized.

例えば、ユーザーがフォームに入力しなければならないのに必須フィールドを見逃してしまった場合、太字のテキストを使ったり、エラーがあることを示すビジュアルを入れたり、強調表示をしたりすることで、エラーの視認性を高めることができます。 これらの要素はすべて、ページの他の部分と視覚的に区別して、簡単に認識できるようにする必要があります。

This is why error messages are traditionally displayed in red. Third, we should design error messages based on their impact.

エラーメッセージが伝統的に赤で表示されるのはこのためである。第三に、エラーメッセージはそのインパクトに基づいてデザインすべきである。

Some error messages are crucial for the user to know and might lead to severe negative consequences if they are disregarded.

エラーメッセージの中には、ユーザーが知っておくべき重要なものもあり、無視すると深刻な悪影響につながる可能性があります。

Other error messages are good to know, but not crucial for the user journey and user experience.

その他のエラーメッセージは知っておいて損はないが、ユーザー・ジャーニーやユーザー・エクスペリエンスにとって重要なものではない。

The design of the error message should clearly indicate which of these two scenarios it addresses.

エラーメッセージのデザインは、この2つのシナリオのどちらに対応するかを明確に示すべきである。

For example, if an e-commerce shop expects shipping delays because of bad weather conditions, this is a good information to share with their users.

例えば、あるeコマースショップが悪天候のために配送の遅れが予想される場合、これはユーザーと共有するのに良い情報である。

However, they should avoid using red formatting to indicate that there is no severe error than the user encounters. Fourth and last, we must avoid displaying the error messages prematurely.

しかし、ユーザーが遭遇するような深刻なエラーがないことを示すために、赤い書式を使うことは避けるべきである。第四に、そして最後に、エラーメッセージの早すぎる表示は避けなければならない。

This is an important part of designing effective error messages.

これは効果的なエラーメッセージをデザインする上で重要な部分である。

Because a premature error message is like grading a test before the student even had a chance to answer.

なぜなら、早すぎるエラーメッセージは、生徒が答えるチャンスさえないうちにテストの採点をするようなものだからだ。

This can make users feel annoyed, belittled or confused, all of which we want to avoid.

これはユーザーをイライラさせたり、軽蔑させたり、混乱させたりする可能性がある。

To get the right timing of an error message, we must consider what the expected user behavior is and how error-prone the interaction is.

エラーメッセージを適切なタイミングで表示するためには、期待されるユーザー行動は何か、また、そのインタラクションがどの程度エラーを起こしやすいかを考慮しなければならない。

For example, when users have to create a new password that must comply with multiple safety requirements, it is helpful to the user is typing the password.

例えば、ユーザーが複数の安全要件に準拠しなければならない新しいパスワードを作成しなければならない場合、パスワードを入力する際に役立ちます。

This is because the complexity of the task makes it error-prone and the error message during the process of typing guides the user to avoid providing a password that is not fulfilling the safety requirements.

これは、タスクの複雑さゆえにエラーが発生しやすく、入力中にエラーメッセージが表示されることで、安全要件を満たさないパスワードを入力しないようにユーザーを誘導するためである。

However, if a user is typing their own phone number, we should not display a premature error message that indicates that the phone number has too many digits.

しかし、ユーザーが自分の電話番号を入力している場合、電話番号の桁数が多すぎることを示す早すぎるエラーメッセージを表示すべきではありません。

In this scenario, we can expect the user to know how many digits their phone number has and the task overall is less prone to errors. To summarize, to make your error messages effective, they must be visible to your users.

このシナリオでは、ユーザーは自分の電話番号の桁数を知ることができ、タスク全体としてエラーが起こりにくくなることが期待できる。まとめると、エラーメッセージを効果的にするには、ユーザーに見えるようにしなければなりません。

To accomplish this, you should follow the four guidelines for highly visible error messages that we just discussed. Thanks for watching.

そのためには、先ほど説明した、視認性の高いエラーメッセージのための4つのガイドラインに従うべきである。ご視聴ありがとうございました。

If you want to see more of our UX videos, take a look at these over here and consider subscribing to our channel.

私たちのUXビデオをもっとご覧になりたい方は、こちらをご覧いただき、チャンネル登録をご検討ください。

On our website, nngroup.com, you can access our free library of over 2,000 articles.

当社のウェブサイトnngroup.comでは、2,000以上の記事を収録した無料ライブラリにアクセスできます。

You can also register for one of our UX courses that offer live hands-on UX training.

また、ライブのUXハンズオントレーニングを提供するUXコースに登録することもできます。