通知デザインの包括的なガイド

通知と総称されるデジタル製品の周辺メッセージは、ユーザーエクスペリエンスを損なうことはありません。 代わりに、彼らは人々が目標を達成するのを助ける経験に貢献しなければなりません。 製品設計プロセスの早い段階で通知設計に取り組むことで、より良い結果が得られます。

3階建ての家を設計している建築家のグループが、何ヶ月も設計図に取り組んでいると想像してみてください。 印象的です！ 美しい！ しかし、図の完成に近づくと、そのうちの1人が次のように叫びます。 人々はどのようにして1階から3階に行くのですか？ 」彼らは階段を忘れました！

同様に、製品設計者は、小さいながらも重要なUXの機能強化を最後に考える傾向があります。 空の状態の場合と同様に、設計者は通知の設計（アラート、エラーメッセージ、確認、アナウンス、および確認応答）を最後まで残す傾向があります。 開発者が「エラーをどのように処理しますか？ 」と尋ねると、この問題が突然明らかになる可能性があります。 」それは後付けであるため、このタックオンアプローチは、UXを傷つけるずさんな「フランケンデザイン」を頻繁に生み出します。

このようなシナリオを回避するには、通知デザインに統合されたアプローチを使用して、ユーザーエクスペリエンスを向上させるのが最善です。 設計者がすべての情報をすぐに入手できるわけではありませんが、製品設計のライフサイクル中に包括的な通知フレームワークを設計すると、予期しないユースケースに備えて製品を準備するのに役立ちます。

通知の設計に着手するとき、覚えておくべき重要な設計の原則は、人々がタスクを実行するのを支援する（妨げるのではなく）必要があるということです。 製品のプロトタイプを早期にテストし、周辺機器のメッセージングが対話を支援する上で価値があるユースケースを計画することが不可欠です。 ただし、ユーザーと通信するための最良の方法はさまざまであり、いくつかの重要な要因によって異なります。

• 伝達される情報の種類
• 情報の緊急性—すぐに確認する必要があるかどうか
• 情報の結果としてユーザーのアクションが必要かどうか

通知のスタイルと動作は別として、それらのトーンはUXコピーによって確立される必要があります。 通知のすべてのコピーは、明確、簡潔、かつ有用である必要があります。 適切に設計された通知システムは、アクセシビリティを念頭に置いて設計されており、さまざまな言語に対応できる柔軟性を備えています。

通知に使用される用語は似ている傾向がありますが、チームごと、プロジェクトごとにわずかに異なります。 通知フレームワークの用語（何と呼ばれるか）を決定し、使用の論理的根拠（何を、どこで、どのように）について全員を同期させるのは、設計者の責任です。

より良い通知デザインによるより良いユーザビリティ

通知は、製品の使いやすさにおいて重要な機能を果たします。 「システムステータスの可視性」は、ニールセンノーマングループの「ユーザーインターフェイス設計のための10のユーザビリティヒューリスティック」のリストで1位です。 このルールでは、「システムは、妥当な時間内に適切なフィードバックを通じて、ユーザーに何が起こっているかを常に通知する必要があります。 」

通知システムはデジタル製品のUXの大部分を占めているため、通知システムがないと、製品は何かが取り残されているように感じられます。 「システムステータスの可視性」とフィードバックがない場合、それはダッシュボードなしで車を運転することに似ています。

車のダッシュボードには、車のオペレーティングシステムを可視化し、安全で信頼性の高い操作性を確保するように設計されたゲージ、アイコン、ライトが満載です。 私たちが運転するとき、エンジン温度、バッテリーの状態、油圧、ライト、ブレーキ、エアバッグなどに関する一連の読み取りと通知が私たちに情報を提供し続けます。 方向転換したいときは、方向指示器のライトが点滅し、カチッという音がしてフィードバックを提供します。 また、燃料タンクの残量が少なくなったことを示す燃料タンクゲージもあります。

デジタル製品でも同じように機能します。 システムステータスとフィードバックの可視性は、ユーザビリティに関しては基本であり、ユーザビリティは優れたユーザーエクスペリエンスの基盤です。

役立つ通知フレームワークの確立

通知フレームワークを適切に設計するには、「信号強度」の観点から通知を考えると役立つ場合があります。 どの周辺メッセージに多かれ少なかれ注意が必要ですか？ たとえば、破壊的な可能性のあるインタラクションには「大きな」通知が必要であり、非破壊的なインタラクションには「静かな」通知が必要です。

適切な量​​の通知を人々に送信することはバランスをとる行為であり、それをやりすぎると危険が伴います。 製品は多くの否定的なフィードバックを受け取る可能性があり、最悪の場合、それを放棄する程度まで人々を遠ざける可能性があります。 したがって、設計者はUXを慎重に検討し、明確に定義された目的でのみメッセージを送信する必要があります。 また、通知のすべてまたは少なくとも一部をオフにする柔軟性をユーザーに提供することもお勧めします。

通知設計への最初のアプローチでは、高、中、低の3つのレベル、つまり「重大度のレベル」に分類する必要があります。 その後、通知タイプは、アラート、警告、確認、エラー、成功メッセージ、ステータスインジケーターなど、これら3つのレベルの特定の属性によってさらに定義する必要があります。

通知属性が特定されたら、フレームワークを構成するさまざまな通知の分類法を作成します。 以下は完全なリストではありません。通知の種類は、製品、使用例、およびその他の変数によって異なります。 （注意：前述のように、さまざまなチームがさまざまな用語を使用しています。たとえば、破壊的なやり取りを進めるにはユーザーの承認が必要な通知を「確認」と呼んでいます。一部のチームでは、「確認」を用語として使用する場合があります。成功メッセージ。）

注目度

• アラート（早急な対応が必要）
• エラー（早急な対応が必要）
• 例外（システムの異常、何かが機能しなかった）
• 確認（続行するにはユーザーの確認が必要な潜在的に破壊的なアクション）

中程度の注意

• 警告（即時のアクションは必要ありません）
• 謝辞（ユーザーアクションに関するフィードバック）
• 成功メッセージ

低注意

• 情報メッセージ（別名パッシブ通知、何かを表示する準備ができています）
• バッジ（通常はアイコン上にあり、最後のインタラクション以降に何か新しいものを示します）
• ステータスインジケータ（システムフィードバック）

優れた通知UXの設計

優れたUXを備えた製品を設計するには、デザイナーは通知が役立つ可能性のあるすべてのユースケースのリストを作成する必要があります。 ほとんどの場合、公平であり、設計者が考慮しなかった可能性のあるエッジケースのトラブルシューティングに役立つ可能性があるため、このプロセスは開発者と協力して行うことをお勧めします。

設計者は、通知がUXを強化するための価値を提供する可能性があるユーザーテスト中のすべての対話についてもメモする必要があります。

リストを準備したら、次のステップは、必要な注意レベルと属性に基づいて通知を分類することです。 繰り返しになりますが、通知は邪魔にならないようにする必要があるため、これは慎重に行う必要があります。 このプロセス中に尋ねる質問のいくつかは次のとおりです。

• 何が通知をトリガーしますか？
• どのような種類のフィードバックが伝達されていますか？
• 通知はどこにどのように表示されますか？
• どの通知が即時の対話を必要としますか？
• 通知は永続的ですか、それとも非永続的ですか？

次に、色分けとアイコンを決定し、デザインシステム（またはスタイルガイド）に入れる必要があります。 このプロセスを実行するとき、設計者は通知が表示されるすべてのインスタンスを考慮し、すべての背景で正しくレンダリングされることを確認する必要があります。

通知の配置も重要です。 明らかなことを述べるリスクを冒して、インターフェースを曖昧にしないように、通知はUIの上部または下部、あるいは隅の近くに表示する必要があります。 さらに、デザインがレスポンシブである場合、設計者はさまざまなビューポートを使用して通知の外観をテストする必要があります。 レスポンシブモバイルフォームでエラーメッセージが表示される場合は特に重要です。

通知フレームワークの設計は簡単ではありません。 さまざまなシナリオで発生する多くの小さな詳細を考慮する必要があります。 アクセシビリティと読みやすさを超えて、将来のローカリゼーションを念頭に置く必要があります。 英語で完璧に見える通知システムは、ドイツ語または日本語のプラットフォームで使用すると完全に機能しなくなる可能性があります。

通知の動作を定義する際に尋ねるその他の質問：

• アラートまたは警告が永続的であることが意図されている場合、設計者は、最初の画面から移動した後も、人々がそれらにアクセスできるようにするにはどうすればよいですか？
• 通知のアーカイブを表示できる場所に、バッジ付きのアラートアイコンを組み込む必要がありますか？
• 通知が永続的でない場合、通知が消えるまでどのくらいかかりますか？また、通知が消える前に通知を閉じるオプションがありますか？

モバイルアプリの場合、アプリ内通知だけでなく、プッシュ通知（システムレベル、アプリ外）も細心の注意を払って設計する必要があります。 それらはほとんど中断であるため、通知のコピーと、それらを送信する許可をいつどのように要求するかを確認することが重要です。 使いすぎると、人々がアプリを使うのを思いとどまらせる可能性があります。 不要な通知が多すぎると、通知を消したり、アプリの使用を完全に停止したりする可能性のあるユーザーを苛立たせる可能性があります。

デザイナーは、アプリを開かなくても生産性を高めることができる実用的な通知も検討する必要があります。 ユーザーがアプリにアクセスせずに小さなタスクを実行できるようにすることは、UXを強化するための強力なツールになります。

モバイルプッシュ通知の場合、UXのベストプラクティスは、ユーザーがアプリを少し探索する機会が得られるまで、あらゆる種類の通知（ユーザーの場所へのアクセスの要求、プッシュ通知の送信など）を遅らせることです。

優れたUXの通知のベストプラクティス

次のベストプラクティスを順守することで、通知が中断ではなく価値を提供するものとして認識され、ユーザーエクスペリエンスが向上します。 通知システムを設計して設計システムに組み込む前に、次の基本的なベストプラクティスを検討してください。

• 前に説明した3つの注意レベルで通知を分類します。 次に、これら3つのレベル内のさまざまな形式の通知の分類法を定義します。
• 通知システムのスタイルガイドを作成するときは、通知がリリースされるすべての言語で通知の最大文字長を指定します。
• さまざまなコンテンツタイプとテキスト長に対応するための適応性と柔軟性に特に注意してください。
• 3つの注意レベルの一貫した配色と一貫した図像を作成します。
• 有用な情報を提供する簡潔で読みやすい通知を作成します。
• 何をいつ送信するかを慎重に検討してください。 モバイルでは、人を遠ざけることを避けるために、新しくダウンロードしたアプリでの通知の送信を遅らせます。 コンテキストとユースケースを綿密に調べます。
• アラートであろうと警告であろうと、その他の注意度の高いから中程度のステータスの更新であろうと、通知の数が少なくなるという側面の誤り。 代わりに、ユーザーが見たいときにアクセスできるリストに入れてください（UIのアイコンバッジで示されます）。
• 通知を「二度と表示しない」とマークするオプションを備えたシステムを考えてみましょう。
• 「スナックバー」などの非永続的な確認応答は、最小4秒から最大8秒後に画面から消え、必要に応じて「元に戻す」オプションを使用して、より早く閉じることができます。
• モバイルでの注意力の高い通知については、可能な場合は音と触覚のフィードバックを検討してください。
• 読みやすさのために通知と通知が表示される背景の間で適切なコントラストを確保してください。 流動的でレスポンシブなデザインでは、通知の下で背景がずれる場合があることに注意してください。

エラーメッセージのベストプラクティス

• エラーメッセージは、読みやすく、理解しやすい言語で書かれた、シンプルで直接的、できれば実用的なものでなければなりません。
• あいまいなコードや「受信した応答の成功は誤りです。 」
• 「エラーが発生しました。」ではなく、問題の簡潔で明確な説明を提供してください。 」
• たとえば、「違法な命令」と言って、人々を非難したり、何か間違ったことをしたと言ったりしないでください。 」
• コンテキスト内の建設的なエラーメッセージを提供して、人々が問題を修正できるようにします。
• フィールドを赤くするだけでエラーを示すことは避けてください。 障害を持つ人々が利用できるようにはなりません。 色覚異常者が見ることができる他の視覚的な手がかりを含めることが常に最善です。
• フォームの入力フィールドにインライン検証を使用します。
• 人々が問題を修正するまで、エラーメッセージは消えないはずです。

概要

通知は、人々が目標を達成するのに役立つエクスペリエンスに貢献し、他のデジタル製品コンポーネントと同様に扱う必要があります。 ただし、通知は両方の方法を削減できます。 適切に処理すれば、UXを向上させ、エンゲージメントを支援できますが、実行が不十分な場合、煩わしくなるリスクがあります。 適切なバランスをとることが重要です。

通知は後付けとして扱われるべきではありません。 それらを適切に行うために、設計者はユースケースに早期に対処し、製品設計ライフサイクル中にさまざまなフォームを定義し、それらを広範囲にテストする必要があります。

通知を設計する正しい方法の簡単な要約：

• 後からではなく、早期に通知の設計を開始します。
• 通知を、高、中、低の3つの注意レベルで分類します。
• 色分けし、アイコンを割り当て、配置を決定します。
• タイプ別に分類します：永続的または非永続的、ポップアップ、バナー、ダイアログなど。
• それらを設計システムに組み込みます。

通知をいつどのように使用するかを理解することは、優れたユーザビリティを提供し、製品メッセージングの一貫性を構築するために不可欠です。 適切なタイミングで表示する必要のある周辺機器のメッセージングを注意深く評価することにより、設計者は製品の効率を高め、そのUXを向上させることができます。

ご意見をお聞かせください。 以下にあなたの考え、コメント、フィードバックを残してください。

•••

Toptal Designブログでさらに読む：

• 最も重要なときにリモートで作業する方法
• 簡単にリモートワークを移行する方法
• モバイルアプリの設計のベストプラクティスと間違い
• eコマースウェブサイトデザインの究極のガイド
• チャットのクラッシュ–チャットボットが失敗したとき