⭐️

【Polaris和訳】Experiences/Admin/Error messages

2021/10/29に公開

Shopify

polaris

tech

この記事について

この記事は、Polaris/Experiences/Error messagesの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

エラーメッセージ

エラーメッセージは怖いものです。エラーはマーチャントに見えるように、理解しやすく、役に立つようにしましょう。

エラーメッセージは次のようになります。

何が起こったのかをマーチャントに伝えます。解決策がある場合は、それを説明します。可能であれば、ボタンを使ってワンクリックで修正できるようにします。解決策がない場合は、トラブルシューティングの指示を出します。
問題の発生源の近くに配置します。
適切な色と声のトーンで重大さを伝えます。
わかりやすい言葉を用います。
特定なものにします。例えば、正確な数字や日付を使用します。
簡潔にします。

優れたデザインは、エラーを未然に防ぐことで、エラーメッセージの必要性を減らすことができます。エラー防止についての詳細はこちら

エラーメッセージの種類

メッセージタイプを選択する際には、エラーの範囲を考慮してください。アプリケーション全体の問題なのか、現在の画面全体の問題なのか、それとも画面上の特定の要素の問題なのか、ということです。

エラーの原因が明らかで、今起きたばかりのエラーであれば、できるだけ問題の原因に近いところで、すぐにエラーメッセージを表示します。

テキストフィールドの検証エラー

次のような場合に使用します。

エラーがテキストフィールドに適用され、マーチャントが入力している間にフィードバックを提供できる場合

テキストフィールド検証

設定警告

次のような場合に使用します。

フォームの入力は有効だが、マーチャントが予期しない結果になることを警告したい場合

設定警告エラー

ページレベルのバナー：重要または警告

以下の場合に使用します。

ページ全体にエラーが発生した場合
エラーはページのかなり下の方にあり、マーチャントがメッセージを見ることが重要である場合
ページ内に複数の検証エラーがあり、まとめて表示する必要がある場合
エラーの発生が遅れており、マーチャントがページに戻ってきたときに問題を通知してもよい場合

黄色いページレベルのバナー

赤いページレベルのバナー

カードまたはモーダル内のバナー：重要または警告

以下のような場合に使用します。

ページ内の単一のカード、カード内の単一のセクション、またはモーダルにエラーが適用された場合
複数のセクションを持つページにマーチャントを誘導する必要があり、エラーが発生しているセクションを視覚的に呼び出したい場合

黄色のセクションレベルバナー

黄色のフィールドレベルバナー

例外リスト：重要または警告

以下のような場合に使用します。

コンポーネント内または横に配置されたメッセージが、マーチャントがルーチンタスクについてより良い判断を下すのに役立つ場合

警告例外リストエラー

致命的な例外リストのエラー

ホーム通知：重要または警告

次のような場合に使用します。

Shopify を使い続けるために、あるいは損失を避けるために、優先度の高いタスクをすぐに完了しなければならない場合
その機能に専用の詳細ページがない場合

黄色のホーム通知

赤色のホーム通知

管理者は利用できない

以下のような場合に使用します。

400 または 500 シリーズのサーバーエラーのように、サーバーエラーによってページ全体が表示されない場合
アカウントの許可が Shopify へのアクセスを妨げている場合

管理者ページが見つからないエラー

管理者ページの読み込みエラー

エラーカラー

赤は最も怖いエラーカラーです。赤色は、マーチャントがビジネスへの損害を避けるためにすぐに対処しなければならない重要なメッセージにのみ使用してください。例えば、マーチャントがメッセージにすぐに対処しないと、お金を失ったり、ストアが停止したりする可能性がある場合です。

黄色のエラーメッセージも注意が必要ですが、日々のワークフローの一部であるメッセージに適しています。

赤 (重要)

クリティカルなメッセージは以下のような場合に使用します。

緊急のタスクに注意を喚起する場合です。すぐに対処しないと、アカウントが停止したり、お金がなくなったりするなど、マーチャントのビジネスに顕著な影響を与えます。

クリティカルメッセージの種類の例

決済方法の有効期限の更新
アカウントの一時停止解除
不正注文の確認
決済処理の妨げとなっている問題の修正

Image from Gyazo

赤色を使用する例外として、フォームの検証エラーがあります。これは Shopify 以外ではよく見られる標準的な規則です。

Image from Gyazo

黄色(警告)

警告メッセージは以下の目的で使用します。

マーチャントが問題を解決して、共通のワークフローを完了したり、次のステップに進むことができるようにする。
期限切れや保留中のリクエストなど、すぐに対処しないと将来的に問題が発生する可能性があることを通知する。

警告メッセージの種類の例

次のステップに進む前に問題を修正してください。
共通のワークフローのある時点で問題を修正してください。
保留中の要求があります。
有効期限が迫っています。
設定を変更すると意図しない結果になる可能性があります。設定に関する警告を参照してください。

Image from Gyazo

アンチパターン

エラーメッセージに toast を使わない

エラートーストはまだ利用可能ですが、その使用はお勧めしません。トーストメッセージは短すぎて、何が悪かったのか、どうすれば問題を解決できるのかを十分に説明することができません。また、トーストコンポーネントは画面の下部に表示され、3 秒後に消えてしまうため、簡単に見逃してしまいます。トーストは、接続の問題など、マーチャントが原因ではないエラーのために用意しておきましょう。持続的なエラーについては、必ずバナーを使ってマーチャントに知らせるようにしてください。

Don't エラーメッセージをトーストする

エラーにモーダル表示を使わない

モーダルダイアログは、マーチャントに否定的なアクションの確認を求める良い方法ですが、エラーが発生したことを伝えるためのものではありません。モーダルは決定がなされるまでマーチャントをブロックするので、マーチャントがプレッシャーを感じてしまう可能性があります。ほとんどのエラーにおいて、機能の残りの部分へのアクセスをブロックする必要はありません。

Don't エラーメッセージのモーダル表示

エラーに対するホーム通知の使用を避ける

ホーム通知のエラーは、マーチャントが Shopify の使用を継続するため、または損失などのビジネスへの悪影響を防ぐために、すぐに完了しなければならない優先度の高いタスクのためのものです。例外として、専用の詳細ページを持たない機能のエラーがあります。

Don't ホーム通知のエラーメッセージ

フォームのバリデーション

テキストフィールドの検証

次のような場合に使用します。

テキストフィールドに書式設定の要件がある場合。このパターンを使用して、フォーム送信時の検証を強化します。

次のような場合には使用しないでください。

入力を検証してメッセージを表示するのに1 秒以上かかる場合。検証メッセージが表示されるまでにタイムラグがあると、マーチャントが注意を移してエラーを見逃してしまう可能性があります。検証速度を向上させる方法を見つけるか、フォーム送信後の検証に頼るかしてください。
フィールドが空の場合。マーチャントはフォームを入力する前にタブで確認することがありますが、空のフィールドでのエラーは混乱と不快の原因となります。

コンポーネント

テキストフィールド

内容

何が問題なのか、問題を解決するために何が必要なのかを、短い文を使って説明してください。
エラーの定義に「無効」という言葉を使わないようにしてください。適切な場合には、代わりに「有効でない」を使用してください。
メッセージはテキストフィールドのすぐ下に表示されるので、説明文はエラーが発生した理由を説明するだけで十分です。オプションとして、メッセージによって次に何をすべきかを明確にしたり、ワンクリックで修正できる方法を示したりすることもできます。

テキストフィールド検証エラー

使用方法

マーチャントがフィールドへの入力を終えるとすぐに、最初の検証チェックを行います。

マーチャントが入力を終えたとみなされるのは、キーボードのフォーカスがフィールドから離れ、フィールド内に少なくとも 1 文字が存在する場合のみです。これにより、マーチャントが本当に入力を終える前にフィールドが無効であるとマークされるのを防ぐことができます。

紫色の枠で表示された初期検証チェック

検証チェックに失敗した場合は、フィールドの下にエラーメッセージを表示します。

テキストフィールドが赤くなる

フィールドにエラーが発生した場合は、キー入力のたびに検証チェックを行います。

テキストフィールドの検証で、誤ったセミコロンにカーソルが当たる

入力が有効になったらすぐにエラーメッセージを削除して、問題を解決したことをマーチャントがすぐに分かるようにします。

テキストフィールドの検証で紫色の境界線が表示される

検証プロセスがすぐに 1 秒未満で終わらない場合は、フィールドにスピナーを表示して検証の進捗状況を示します。

読み込み中のテキストフィールド検証（スピナー付き）

送信時に検証する

Validate on submit は、マーチャントがフォームの送信ボタンを押したときに起動します。

ボタンを押したときに実行されます。送信ボタンは[保存]であることが多いですが、他のコールトゥアクションであっても構いません。

次のような場合に使用します。

マーチャントが入力している間にすべてのフィールドが検証されるわけではありません。データを保存するためにフォームを使用する場合は、送信時に必ず検証を行い、入力中のテキストフィールドを検証してください。例えば、マーチャントが必須テキストフィールドを操作しない場合、マーチャントが送信ボタンを押すまで、有効でないとマークする必要はありません。また、ラジオボタンやセレクトなど、テキストフィールド以外のフォームコントロールについても同様です。

次のような場合には使用しないでください。

フォームに特定の検証要件がない場合や、フォームがデータを保存しない場合。たとえば、検索結果を返さないフォームでは、検証エラーではなく、空の状態を表示する必要があります。

コンポーネント

バナー

以下の 1 つまたは複数：

テキストフィールド
セレクト
選択リスト
チェックボックス
ラジオボタン

内容

バナーの見出し：

コロンを使ってリストを紹介します。
見出しに説明を含めます。単に{x}個のエラーがありますと呼びかけるだけではいけません。

バナー本文：

リストコンポーネントを使用して、エラーを箇条書きにします。
各リスト項目の先頭には、有効でないフィールドのラベルを付け、修正するために必要なアクションを記述します。

個々のフィールドのエラーメッセージ：

入力中の検証に関するコンテンツガイドラインを参照する

赤いフォーム検証バナー

「{x}個のエラーがあります」と指摘するのではなく、もっと説明をしてください。保存または続行するには、{x}個のフィールドを変更する必要があることを説明します。箇条書きの指示については、"ディスカウントは空白にできません"ではなく、"割引コードを追加してください"のように、よりアクションを起こしやすい表現にできないか考えてみましょう。

Image from Gyazo

使い方

投稿の進捗状況を常に示します。フィールドが有効でない場合、検証中にマーチャントに代わってフィールドをクリアまたは変更しないでください。

保存時に表示されるスピナー

フォーム送信時にエラーが 1 つの場合

スクロール位置を、有効でないフィールドに移動する
フィールドをフォーカスする
エラーメッセージをフィールドの下に表示する

価格入力フィールドのバリデーションエラー

フォーム送信時に複数のエラーがある場合

スクロール位置を画面の上部に移動
バナーを使ってすべてのエラーの概要を表示する
有効でない各フィールドの下にエラーメッセージを表示し、マーチャントがスクロールして修正できるようにする。

赤いフォーム検証バナー

設定に関する警告

次のように使用します。

マーチャントが潜在的なミスを防ぐため
フォームの入力は有効だが、マーチャントが予期しない結果になることを警告したい場合

次のような場合には使用しないでください。

実際のエラー状態の場合

ヒント: 警告メッセージが表示されないようにする方法を検討してください。ヘルプテキストやその他の文脈情報を追加して、アクションを取った場合または取らなかった場合の潜在的なリスクや結果を、表面化または強調する機会を探してください。

コンポーネント

タイトルなしのバナー

内容

警告メッセージは、警告のきっかけとなった行動と密接な関係にあるため、短くする必要があります。
取ったばかりの行動のリスクや結果を説明してください。
これらのメッセージは、「通貨を変更してください」というような、実行可能な言葉で始まる必要はありません。次のような方法があります。
- 例えば、"これは在庫価格に影響します。"のように、"これ"という言葉から始めて、結果を説明する。
- 行動を示すことから始めて、結果を説明する。"{x}を変更することは{y}に影響します。"など。
可能であれば、マーチャントが詳細を知ることができるリソースにリンクさせます。

バナー

ページレベルのバナー

次のような場合に使用します。

画面全体にエラーが発生する場合
エラーがページのかなり下の方にあり、メッセージを見てもらうことが重要な場合
有効でないフィールドを含むフォームが送信された場合
エラーの発生が遅れた場合（例えば、アクションを起こした後、すぐにはエラーが表示されない場合など）

次のような場合には使用しないでください。

エラーのソースが表示されていて、アクションのきっかけとなったイベントが起こったばかりなので、バナーを[文脈上に]配置することが可能な場合

複数のエラーのガイドラインについては、「送信時の検証」を参照してください。

ページレベルのバナーのエラーは、以下を説明する必要があります。

エラーが発生した場所
何が起こったのか
なぜそれが起こったのか
次に何をすべきか

Image from Gyazo

コンポーネント

バナー

内容

見出し

問題点を明確に示します。
句読点を使わないようにしましょう。

ボディコンテンツ

問題を解決する方法を説明します。
"〇〇をします。"のような実行可能な言葉を使います。"〇〇することができます。"のような容認的な言葉は使わないようにしましょう。簡潔にします：2 文以下にしましょう。
ピリオドを使いましょう。

コールトゥアクション

行動を促しましょう（動詞＋名詞の形式）。
ワンクリックで修正できるようにしましょう。エラーが 1 つのボタンやメニューで修正できる場合は、エラーメッセージの中で直接そのアクションを提示します。
リスクのある注文の確認や、検証されていない顧客アドレスの編集など、より複雑な問題については、専用のエラー修正ビューを開きましょう。
短いエラーメッセージに収まりきらない重要な情報については、ドキュメントへのリンクを提供します。

ページレベルの警告バナー

カードやモーダルに表示するバナー

次のような場合に使用します。

マーチャントがタスクフローに参加していて、タスクの潜在的な問題を警告したり、何か問題が発生したことを知らせたい場合。
複数のセクションがあるページにマーチャントを誘導し、エラーが発生したセクションを目立たせたい場合。

次のような場合には使用しないでください。

画面全体にエラーが発生している。
エラーがページのかなり下の方にあり、マーチャントにメッセージを見せることが重要である場合。
エラーの発生が遅れた場合。例えば、アクションが行われ、エラーがすぐには文脈に現れない場合です。このような場合には、ページレベルのバナーを使用します。

コンポーネント

バナー

バリエーション

タイトルなし

内容

文脈に即したメッセージであればあるほど、必要な情報は少なくなりますので、何が起こったのか、どうすればよいのかを説明してください。
一文にまとめましょう。
コンテクストバナーにはタイトルはありません。
ボタンやリンクなどで、次のステップを示すようにしましょう。
複数のコールトゥアクションがある場合に使います。

カード上部のカードタイトルの下に警告バナーを表示

カード内のセクションに小さな警告バナーを表示

例外リスト

次のような場合に使用します。

リスト内のアイテムが、マーチャントに認識させたい注目すべき状態にある場合。例えば、ステータスや、接続されている情報に直接関連する情報（高リスクの注文など）がある場合です。

例:

ハイリスクオーダー

次のような場合には使用しないでください。

問題の原因がカードやページ全体にある場合

コンポーネント

例外リスト

バリエーション

ステータス：重要または警告

内容

コンテンツは以下のようにするべきです。

例外的な状態を強調することで、リストアイテムのクリックを促します
コンテンツに警告やエラーのアイコンをつけます
常に「何が悪かったのか」を説明します
説明文は必須です
タイトルは必須ではありません
リンクは任意ですが、リストアイテムがアクション可能なものであるため、一般的ではありません
簡潔にします

例外リストの警告

例外リストのエラー

ホーム通知

ホーム通知は主に、マーチャントが損失を被るのを防ぐため、またはエラーメッセージの指示にすぐに従わなかった場合に Shopify の使用を継続するために使用されます。

次のような場合に使用します。

Shopify を使い続けるため、あるいは損失を避けるためにすぐに完了しなければならない優先度の高いタスク。
マーチャントが Shopify の他の場所に移動して探したり、他のタスクを完了する際につまずいたりすることを望まないような重要なタスク。
専用の詳細ページを持たない機能にエラーが起きた場合。例えば、Shopify Capital が詳細ページを持つ前は、関連するステータスメッセージが一時的にホームに表示されていました。

次のような場合には使用しないでください。

ヒントやアドバイス
ポジティブなフィードバック
確認のメッセージ
新機能のアナウンス
ステータスメッセージ（Shopify Capital のものを除く）
文脈に沿って表示されるメッセージ
文脈に沿って表示されるべきエラーメッセージ
ページの保存に問題があるようなタスク関連のエラー

ヘッダー、ボディコンテンツ、ボタンを持つホーム通知の構造

自宅への警告通知

家庭への警告通知は、先手を打つものです。これらの通知は、マーチャントが 2、3 日以内に行動を起こさないと財務に影響が出ることや、より早く利益を上げるための行動をとることができることを知らせます。

融資リクエストが保留されている
期限切れを警告する
Shopify Capital の申請状況のように、保留中のステータス

クレジットカードの有効期限に関するメッセージを含む警告

チャージバックのメッセージを含む警告ホーム通知

クリティカルホーム通知

クリティカルホーム通知は、以下のような問題をマーチャントに通知します。

現在、財務に影響を与えているもの
早急に対応しないと財務に影響を及ぼす可能性があるもの
ビジネスやアカウントの正常な運営を妨げるもの

クリティカルホーム通知は以下のメッセージタイプに使用できます。

試用期限切れ
ドメインの有効期限が切れました
クレジットカードの有効期限
アカウントの停止
Shopify Payment の支払いが保留されている
決済処理の問題
その日のうちに失効する支払い承認

致命的な家庭への通知とアカウント保留のメッセージ

在庫切れのメッセージが表示される重要なホーム通知

管理者が利用できないエラー

ネットワークの問題、ブラウザの制限、接続の問題、サーバーの問題などにより、管理画面が表示されないことがあります。400 シリーズや 500 シリーズのエラーがこれに該当します。このような場合には、何が問題だったのかを説明し、ページを更新するなどのトラブルシューティング手順をマーチャントに提供してください。

次のような場合に使用します。

ページまたは管理画面全体が表示されない場合

次のような場合には使用しないでください。

エラーが問題の原因に近い文脈で説明できる場合

Image from Gyazo

エラーメッセージでは、内部表現を使用せず、質問形式を使用しないでください。

Image from Gyazo

コンポーネント

空の状態

注：空の状態のコンポーネントの使用は、管理者が利用できないエラーのための一時的なものです。これは Shopify 社の誰かが新しいデザインを探求し、UX ガイドラインの作成を手伝う機会です。アイデアがあれば、イシューを作成してください（非公開）。

内容

見出しは以下のようにするべきです。

見出しは、何が悪かったのかを説明するべきです
本文はマーチャントが問題を解決するのを助けるべきです
コールトゥアクションは、ページの再読み込み、前のページや Shopify ホームへの移動など、最も可能性の高い修正方法を提供するべきです

ページが見つかりませんでした

（お探しのページが見つかりませんでした。
Web アドレスをご確認の上、再度お試しください。または、Shopify Home からページに移動してください。）

解決策のないエラー

Shopify でサービス問題が発生した場合、または第三者によって引き起こされた場合、私たちは常にマーチャントに提供できる解決策を持っていません。このような場合には、何が問題だったのかを説明し、お客様がトラブルシューティングを行えるようにしてください。可能であれば、ページの更新や時間をおいての再訪など、トラブルシューティングの手順をお客様に提供してください。

次のような場合に使用します。

マーチャントがページや管理画面全体へのアクセスを拒否されている場合
管理画面が利用できないエラーを見る
サードパーティの問題でマーチャントのワークフローに支障が出ている場合

次のような場合には使用しないでください。

マーチャントに提供できるソリューションがない場合

Image from Gyazo

ボイス＆トーン

このコンテンツガイドラインは、よくあるコピーの間違いに基づいています。過度に謝罪したり、専門的すぎたり、誇張したりする表現を避けてください。エラーの原因が Shopify でない限り、Shopify を話題にしないでください。マーチャントに心配しないように言ったり、ネガティブな状況にユーモアを加えたりして、エラーを軽視してはいけません。

管理者の間で「お願いします」という言葉が多用されないようにしましょう。深刻な問題を軽視してはいけません。

Image from Gyazo