ユーザーに優れたフレンドリーなエラーメッセージの書き方。

「ウェブサイトがクラッシュしますか？」

あなたは今までにいたことがありますか...私は私のお気に入りのアイテムを支払うためにプレスします。すべてのクレジットカード情報に興奮して記入してください。「エラー」というメッセージが跳ね返りました...興奮をすぐに刺激性に変えた短い言葉は「どこに見逃すのですか？」 「次に何をすべきか？」これらの質問は頭の中で実行されました。しかし、画面には答えがなければ答えがありますが、ため息をつき、その顔から押し出しました...顧客にあなたのウェブサイトやアプリケーションでこのタイプのエクスペリエンスを体験させたくない場合、この記事は「聖書」であり、「悪役」であったエラーメッセージを変える「聖書」を変更します。

なぜ対話である役に立たないエラーメッセージがあるのですか？

多くの人々は、エラーメッセージがシステムの「小さな部分」であると考えるかもしれませんが、実際には、ユーザーのエクスペリエンス（ユーザーエクスペリエンス）が、これらの理由によって頻繁に引き起こされるユーザーに役立つエラーメッセージの問題がどれだけ役立つかを気にするのは「指標」です。

1。プログラマー向けにプログラマーによって書かれた：ソフトウェア開発の世界では、開発者が開発者に役立つ「エラーコード：502」や「Null Pointer Exception」などのシステムエラーを理解するために作成されることがよくあります。しかし、一般的なユーザーにとっては、理解よりも混乱している外来言語と違いはありません。

2。UXの執筆の重要性を見落とす：デザイン（UI）に専念する多くの組織は、美しいと思われますが、「単語」または「テキスト」がすべてデザインの一部であり、UXライターや責任者は直接責任を負いません。残念ながらこの部分を無視します

3.注意を払う時間がないまで急いでください：良いエラーメッセージを書く時間と競合する必要がある開発プロセスでは、しばしば最後の「ちょうど十分」と見なされ、無意識でユーザーを助けるように設計されていないプレハブメッセージを取得することができます。

これらの原因を理解することは、より良い体験を生み出す始まりです。あなたのビジネスに多くの変換を追加するのに役立つUX/UIの改善の重要な基盤です

[イラストのプロンプト：プログラマーが片方の肩をすくめていることを示す漫画。 「エラー：0xdeadbeef」のボックスが浮かんでいますが、反対側は混乱して混乱しているユーザーです]

ただ「エラー」の1つの単語...あなたが思っている以上にビジネスを破壊することができます

「それはただの小さな通知メッセージです」と思うかもしれません。しかし、実際には、悪いエラーメッセージの影響は暴力的であり、多くの次元で損傷しています。

- 変換率Dang：これが最も明白な効果です。ユーザーが問題に遭遇した場合（フォームに記入しない、支払いに失敗したことなど）、修正方法について明確なアドバイスを受け取らない場合、すぐに意図を放棄します。それは、目の前での販売とビジネスチャンスの喪失を意味します。

- ユーザーは信頼性を失いました（信頼の喪失）：通信するウェブサイトは、ユーザーがシステムが「信頼できない」および「非専門的」を感じさせることを知らない。情報が安全かどうかはわかりません。そして、彼らが代わりに競合他社のサービスを使用することを選択させたこのためらう

- サポートチームへの負担を増やす：ユーザーが問題を解決できない場合、繰り返し質問をしてカスタマーサービスチームに連絡するために群がります。

- ブランドのイメージを壊す：悪い経験が記憶され、ユーザーがそれを使用するたびにイライラしていると感じた場合、彼らが再び戻ってくる機会はほぼゼロです。したがって、すべてを簡単にアクセスできるようにすることが重要です。から詳細を確認して、Webに簡単にアクセスできるようにすることができます（Webアクセシビリティ）

品質ではないエラーメッセージを提供するには、システムに浮かんでください。顧客を1つずつ維持するトラップと変わりません。

[イラストのプロンプト：画像グラフは、変換速度を示しています。グラフのさまざまなポイントにユーザーの眉をひそめたアイコンがある]

フォーミュラ（非）は、恋人のために密かにエラーメッセージを書きます：問題を伝える +ソリューションを指して +人間言語を使用する

良いニュースは、悪いエラーメッセージをトップアシスタントに変更することです。難しくありません。明確な原則があり、すぐに使用できます。 3つの重要な心をつかむことによって： 「何が起こったのか、はっきりと言われた」 、 「次に何をしなければならないの？明確にしなければならない」 、 「ブランドの言語で話す」詳細を見てみましょう。

• 明確で簡単な（明確に、曖昧ではない）： 「間違った情報」と言う代わりに。 「誤ったパスワード」や「この電子メールがシステムにある」など、「どの部分」が正しくない情報が正しくないことを指定します。
• 解決策は解決策ではありません。これが最も重要な部分です。それが間違っていると言うだけではありません。ただし、「パスワードが短すぎる」と言うのではなく、「パスワードは少なくとも8文字でなければならない」と言う代わりに、ソリューションを指示する必要があります。
• 人間の言語の使用（人間言語を使用）： 「SMTPエラー5.1.1」から「電子メールに変更するなど、ユーザーが理解できない技術的な語彙またはエラーコードを避けてください。受信者は存在しません。もう一度確認してください。」
• 礼儀正しく共感してください：ユーザーが欲求不満であることを忘れないでください。ソフトな言語の使用と誰かが「おっと！パスワードが正しくないようです。もう一度やり直してください」などの緊張を軽減できるように感じます。
• 正しい位置に置く（コンテキスト配置）：フォームの上部で一緒に表示するのではなく、すぐに（インライン検証）誤った情報の下に表示するなど、問題ポイントの近くにエラーメッセージを表示します。

世界中のデザイナーがガイドラインを順守する良い情報源。 Nielsen Norman Groupからのエラーメサージガイドラインと、材料設計からのコミュニケーション原則は、明確さとユーザーの支援の重要性を強調しています。

[イラストのプロンプト：良いインフォグラフィックの概要良いエラーメッセージ書き込み式、3つの明確な部分のデザイン：1。アイコンアイコン（問題を伝える）2。（人間言語/ブランドを使用）]

本物からの例：「変更できない」に「ほとんど成功していない！」

より明確にするために、支払いページのエラーメッセージを改善したいeコマースアプリケーションケースの1つを見てみましょう。

ケース：ユーザーは間違ったクレジットカード番号に記入します。

古い（前）：

ユーザーがカード番号を間違って埋めてボタンを押すと「支払いを確認」すると、画面が再びロードされ、上部の赤いテキストが「トランザクションが失敗しました。無効なカードの詳細」。

何が問題ですか？

• ユーザーは、「無効なカードの詳細」の意味がわかりません。カード番号は間違っていますか？有効期限？またはCVCが間違っていますか？
• メッセージは充填チャネルとはほど遠いものです。ユーザーにどこの目を掃除します
• 言語はフォーマルで寒く見えます。助けを与えませんでした

新しい（後）：

チームは経験を改善しました。ユーザーがカード番号の情報を入力して別のチャネルに押し込むと、システムはすぐに確認されます（インライン検証）。そのチャネルの下にメッセージが表示されます。 クレジットカード番号は間違っています。

結果は何ですか？

• すぐに修正できます。ユーザーは、問題が「クレジットカード番号」にあることをすぐに知っていて、支払いボタンを押す前に修正できます。
• 混乱を減らす：赤いフレームと隣接するテキストにより、理解しやすくなります。ランダムを推測する必要はありません。
• 気分が良くなる： 「おっと！」という言葉を使ってそして終了 "「テキストを友好的に見せて、あなたが「間違いを犯す」という感覚を減らす

このわずかな改善により、支払いが成功していないユーザーの数は大幅に減少します。また、顧客がブランドについて気分を良くする前向きな体験を強化するのにも役立ちます。また、これらの優れた体験は、印象的なマイクロインタラクションの重要な要素です。

[イラストのプロンプト：左側のスマートフォンである以前の画像を比較し、右側のあいまいで恐ろしいエラーメッセージを示しています（友好的で明確に補正を示す後続値の検証]

使用する準備ができているチェックリスト！エラーメッセージを復活させて役立ちます。

これで、ウェブサイトまたはアプリでエラーメッセージを検討するために戻ってみたいと思います。あなた自身のよね？この簡単なチェックリストを「監査」および「改善」のガイドラインとして使用してみてください。

チェックリストの書き込みエラーメッセージ：

1. []明らかに、何が起こったのか：テキストは問題を直接説明し、一般的なユーザーはすぐに理解しましたか？ （コードや技術的な語彙は避けてください）
2. []できる解決策を伝えます。次のステップでは、ユーザーの次のステップは自分で問題を解決できますか？
3. []礼儀正しく、ブランドのトーンを使用します。フレンドリーな言語は、ユーザーを非難し、ブランドの性格に沿っていますか？
4. []締めてメッセージを取得します：必要なのと同じくらい迷惑になることは長くありませんか？
5. []正しい位置に表示：メッセージは簡単な修正のためにエラーポイントの近くに配置されますか？
6. []適切なデザインはありますか：色やアイコンを使用して注意を引き付け、問題の重大度を伝えますか？ （エラーのための赤、警告用の黄色など）

このチェックリストを持ってすべてのフローをチェックしてみてください。メンバーシップの申請、ログイン、フォームへの記入、支払いなど、重要な使用法。投資は今日効果的です。迷惑なつまずきのポイントを、長期的にユーザーと良好な関係を築く機会に変えるのに役立ちます。 404ページが設計して役立つことを忘れないでください

[イラストのプロンプト：タブレット画面の大きなチェックリスト画像は、各アイテムに人の手が刻まれたものです。

人々がUXの記述についてエラーメッセージについて疑う傾向がある（FAQ）。

私はこれについてよく尋ねられた人気のある質問をまとめました。明確な答えがあり、実際に使用されます

質問：ユーモアをエラーメッセージに入れる必要がありますか？

回答： 「状況」と「ブランドパーソナリティ」に応じて。重要ではない形でわずかな間違った情報を入力するなど、非重視のエラーの場合。かわいいメッセージを使用すると緊張を軽減するのに役立つ場合がありますが、深刻なエラーや障害の支払いや重要な情報の喪失などの大きな影響のために、ユーザーが自分の問題を気にしないと感じさせるため、面白いメッセージを使用してください。

質問：デザイナー、開発者、またはPMの間でエラーメッセージを書く責任者は誰ですか？

回答：最高のチームでは、特にこのポジションが「共有責任」である必要がある場合、「UX Writer」の義務である必要があります。デザイナーは、コンテキストとエクスペリエンス（ポップアップまたはインラインのテキストであるなど）を決定します。開発者は、すべての可能な技術条件とチームで最もコミュニケーションするスキルを伝えます（PMまたはMarkterを書いて修正する必要があります。

質問：書かれたエラーメッセージが「十分に良い」ことをどのように知ることができますか？

回答：最良の方法は、「実際のユーザーとのテスト」（ユーザビリティテスト）です。ユーザーにエラーを引き起こすタスクを作成してもらい、書くことができるメッセージから問題を理解し解決できることに気付かせてください。削減されるかどうか

[イラストのプロンプト：画像アイコン、質問マーカー（？）、電球（！）は、きれいなパターンで交互に交互になります。質問をする質問を伝える]

概要：「つまずきのポイント」を「印象的なポイント」に変更する

この時点で、エラーメッセージは単なる「通知メッセージ」であるだけでなく、システムとユーザーの間の重要な「会話」であることに同意していました。混乱といらいらの瞬間を変える機会です。ユーザーが「ああ、理解して」と感じ、誰かが隣に助けていると感じる時になるために

原則に基づいて適切なエラーメッセージを書く「問題を示し、ソリューションを指している +人間の言語を使用する」は、 Webの速度を下げて成功率を上げるのに役立つだけでなく、作成にも重要な投資でもあります。長期的にはブランドに対する「信頼」と「忠誠心」も。

小さなメッセージが、あなたが作成しようとするすべての素晴らしい経験を破壊しないでください。今度は、すべてのエラーメッセージを検査、復活、変更して、今日のユーザーの良いアシスタントに変更する時が来ました！

ユーザーのエクスペリエンス（UX）の設計を支援し、美しいだけでなくテキスト（UI）を作成するために専門家が必要な場合。ただし、それでも効率的にコミュニケーションを取り、ユーザーを顧客に変更して、Vision X Brainチームに相談することができます。デジタル製品を次のレベルにアップグレードする準備ができています。

[イラストのプロンプト：ユーザーの画像は、モバイルアプリケーションを使用している間、満足のいく笑顔に満足しています。画面にチェックマークが表示されていると、使用の成功と滑らかさが伝えられます]

‍